24일차(2)/CSS(1) : Selector
- CSS 활용법 알아보기
<hello.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello.html</title>
<!-- 외부(external) css 로딩하기 -->
<link rel="stylesheet" href="./css/custom.css">
<style>
/* 여기는 internal(내부) css 영역 */
div{
margin-top: 100px;
color: #ff0000;
}
</style>
</head>
<body>
<div>css 를 배워 보아요</div>
<!-- style=" 여기는 inline css 영역 "-->
<div style="background-color: yellow;">css 를 배워 보아요</div>
<div>css 를 배워 보아요</div>
<p>p1 입니다.</p>
</body>
</html>
<custom.css>
@charset "utf-8"; /* 한글을 이상한 문자열로 인식하지 않도록 방지 */
/*
html 페이지에서 <style></style> 요소 안에 작성하는 문법과 같다
*/
p{
border: 1px solid red;
}
** 내부 / 인라인 / 외부 CSS 구분하기
1) 내부 CSS (internal CSS)
<style> div { } </style>
- 요소별로 작성. style 요소 안의 모든 div 에 적용하겠다는 뜻.
2) 인라인 CSS (inline CSS)
<div style=" ">
- 적용시키고 싶은 요소에 직접 작성하는 CSS
3) 외부 CSS (external CSS)
<link href="xx.css">
- link로 외부 css를 로딩해 올 수도 있다.
- custom.css 라는 파일을 연결하여 CSS 서식 적용하기!
- 브라우저 console창에서 컨텐츠를 선택하면 적용되어있는 css들을 볼 수 있다.
- 체크박스를 해제해서 볼 수도 있다.
user agent stylesheet
- 직접 적용하지 않아도 브라우저에서 자동으로 적용되는 서식!
./ : 현재 경로 (html 페이지가 존재하는 경로)
../ : 상위폴더 경로
ex) ../../ : 폴더 상위로 두칸 올라가기
<ApplyCSS>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step01_ApplyCss.html</title>
<!-- 외부 css -->
<link rel="stylesheet" href="css/custom.css"/>
<style>
/* 내부 css */
p{
background-color: #00ff00;
}
</style>
</head>
<body>
<!-- 인라인 css -->
<p style="color:blue;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, consequuntur, consectetur doloribus qui ea perferendis alias. Dolorem aliquam optio mollitia commodi nostrum voluptas neque ut voluptatem enim aspernatur, aut eligendi.</p>
</body>
</html>
- css 서식을 어떤 선택자에 적용할 것인가를 지정하기
- 요소명 / . class / # id 로 표기.
- 아래는 내부, inline, 외부 css가 모두 적용되어 나온 디자인
(경계선: 외부css - custom.css / 폰트색상: inline css / 배경색상: 내부 css )
- Source에 들어가보면 어느 경로에서 가지고 왔는지 볼 수 있다.
- file:// 은 파일 시스템을 의미한다.
- 웹브라우저는 인터넷뿐만 아니라 파일시스템 안에 있는 것을 로딩하는 기능도 있다.
- 외부css 는 따로 특별취급하지는 않고, 그냥 style 위에서 지정된 것처럼 해석한다.
style 밑에서 불러왔으면 나중에 지정한 것으로 해석했을 것!
- css는 정의되는 순서도 중요하다! 선택자의 구체성이 같다면 나중에 정의한 것이 우선한다.
→ css는 먼저 로딩하느냐, 나중에 로딩하느냐에 따라 결과에 영향을 줄 수 있다.
- 보통은 외부 css를 먼저 로딩하고 페이지 안에 들어가는 style부분은 나중에 정의하는 것이 일반적이다.
전체에 외부 css를 적용하고, 이 페이지에서만 가지고 있어야 하는 css를 나중에 정의하거나 재정의(override)한다.
<Example1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step01_Example.html</title>
<style>
/*
p요소의
1. 배경색을 검정색으로
2. 글자의 색상을 흰색으로
3. 글자의 크기를 30px 로
4. margin 을 제거
해 보세요.
*/
p{
/* css 속성명은 이미 정해져 있다 */
/* css 속성값은 정해진 카테고리 혹은 정해진 형식에서 원하는 값을 지정한다.*/
background-color: #000000;
color: rgb(255, 255, 255);
font-size: 30px;
margin: 0;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, reiciendis. Magnam necessitatibus explicabo iure reiciendis dolorem quod illo excepturi maiores dignissimos fugit ad quaerat obcaecati, vitae, alias maxime? Ex, a.</p>
</body>
</html>- <style> 태그 안에 나오는 : 의 좌측이 속성명!
- css의 속성명은 이미 정해져 있다. 주로 케밥케이스로 표기한다.
- : 의 우측은 속성값.
- css 속성값은 정해진 카테고리 혹은 정해진 형식에서 원하는 값을 지정한다.
(자유롭지 않고, 정해진 형식 안에서 작성한다.)
<Selector>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step02_Selector.html</title>
<style>
/* 요소명 선택자 */
div{
border-width: 1px;
border-style: solid;
border-color: #ff0000;
}
/* 클래스 선택자 */
.bg-yellow{
background-color: #ffff00;
}
/* 아이디 선택자 */
#myDiv{
color: #0000ff;
}
</style>
</head>
<body>
<div>div1</div>
<div class="bg-yellow">div2</div>
<div class="bg-yellow">div3</div>
<div class="bg-yellow">div4</div>
<div id="myDiv">div5</div>
</body>
</html>
* 선택자 (Selector)
- 내,외부 css를 작성할때 어떤 요소에 어떤 디자인을 적용할지 지정하는 것
- 요소명 / 클래스 / ID 선택자가 있다.
- css를 잘하려면 다양한 선택자를 작성할 줄 알아야 한다.
- body 안에 있는 문서구조는 매우 복잡하다. 원하는 특정 요소를 딱 골라서 디자인을 적용할 수 있도록!
- Class 는 그룹으로 묶는다.
- ID 선택자는 특정 요소를 유일하게 식별하기 위해서! 겹치면 안된다.
<Selector2>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step02_Selector2.html</title>
<style>
/*div{
padding: 10px;
background-color: #000;
color: #fff;
}*/
/*.animals{
padding: 10px;
background-color: #000;
color: #fff;
}*/
/* div 요소 이면서 클래스 속성값이 animals 인 요소 선택*/
div.animals{
padding: 10px;
background-color: #000;
color: #fff;
}
/*
선택자를 붙여서 쓰면 and 조건으로 문서를 선택한다.
div.animals => 요소명이 div 이면서 클래스명이 animal
p.friends => 요소명이 p 이면서 클래스명이 friends
div.a.b => 요소명이 div 이고 클래스명이 a 와 b
.a.b => 클래스명이 a 와 b
*/
</style>
</head>
<body>
<div class="animals">
<h2>Dog</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis accusantium dignissimos minima ipsa, ut a exercitationem reiciendis quam dolores, nostrum ducimus, adipisci eius alias quia. Vitae magni dolorum delectus amet!</p>
</div>
<div class="animals">
<h2>Cat</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis accusantium dignissimos minima ipsa, ut a exercitationem reiciendis quam dolores, nostrum ducimus, adipisci eius alias quia. Vitae magni dolorum delectus amet!</p>
</div>
<div class="friends">
<h2>바나나</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita at esse facilis nisi quibusdam voluptates! Deserunt debitis error soluta, commodi labore et, quidem, ex blanditiis quisquam asperiores quasi laboriosam consequatur.</p>
</div>
<p class="animals">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla repudiandae ea iste, natus mollitia explicabo recusandae odio et consequuntur sapiente beatae veritatis adipisci, aliquid sequi porro maiores ullam enim. Repudiandae.</p>
</body>
</html>
- 선택자의 조합: 요소명+클래스 (&&조건)
- 선택자를 붙여서 쓰면 and 조건으로 문서를 선택한다.
ex) div.animals : 요소명이 div 이면서 클래스명이 animal
p.friends : 요소명이 p 이면서 클래스명이 friends
div.a.b : 요소명이 div 이고 클래스명이 a 와 b
.a.b : 클래스명이 a 와 b
- 선택자를 조합해서 보다 구체적으로 선택 가능!
<Selector3>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step02_Selector3.html</title>
<style>
.container{
background-color: #cecece;
}
/* .container 의 자손 중에서 p 요소 선택 */
.container p{ /* 띄어 쓰기 : 자손 선택 */
color: #ffff00;
}
</style>
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem voluptates, velit, obcaecati ipsam consectetur iusto magnam natus qui facilis non debitis corrupti nesciunt sit. Omnis voluptatem at, soluta laboriosam dignissimos.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates amet consequatur, eos impedit exercitationem aliquam qui temporibus cupiditate non illum excepturi, ad debitis dolore sapiente, neque laudantium! Doloribus, obcaecati, autem!</p>
</body>
</html>- 띄어쓰기 : 해당요소의 자손 선택
ex) .container p {} : .container의 요소 아래에 포함된 요소중에서 p를 찾는다(자손)
- 자손 : 하위에 포함만 되어있으면 모두 자손이라고 부른다.
<Selector4>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step02_Selector4.html</title>
<style>
/* #one 의 자손 중에서 li 선택 */
#one li{
color: #ff00ff;
}
/* .container 의 자손 중에서 li 선택 */
.container li{
background-color: #cecece;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>하나</li>
<li>두울</li>
</ul>
<hr/> <!-- hr 은 수평 구분 선입니다. -->
<ul id="one">
<li>김구라</li>
<li>해골</li>
</ul>
</div>
</body>
</html>
- #id가 걸려있는 것을 포함해서, container의 자손 li 4개 다 css 적용!
<Selector05>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step02_Selector5.html</title>
<style>
/* .container 의 자손 중에서 p 선택*/
.container p{
background-color: yellow;
}
/* .constiner 의 자식 중에서 p 선택 */
.container > p{
color: blue;
}
/* 조금 더 구체적으로 선택 */
.container > .sub > p{
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint error quasi exercitationem, quis voluptates! Consectetur, hic! Vel libero, maxime itaque error! Distinctio nam ducimus molestias, laboriosam aspernatur fuga cum sapiente!</p>
<div class="sub">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus reprehenderit ex quaerat aut, culpa error eligendi praesentium, magnam, corporis doloremque accusantium obcaecati! Necessitatibus dolore id corrupti velit nesciunt numquam fugit?</p>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
</div>
</body>
</html>
- 자손, 자식 요소 구분하기!
.container p{ }
- .container 의 자손 중에서 p 선택
.container > p{ }
- .container 의 자식 중에서 p 선택
.container > .sub > p
- .container 의 자식 요소 중 .sub 요소의 자식요소인 p 선택 (구체화)
- 바로 인접한 하위항목이 자식요소 / 하위 항목이기만 하면 전부 자손요소
- 꺾쇠 > 가 있으면 자식! 한 단계 하위에 있는 요소를 가리킨다.
- 초록색은 자식 요소, 빨간색은 자손 요소
<Selector06>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step02_Selector6.html</title>
<style>
/* 모두 선택 */
*{
background-color: #cecece;
}
/* , 로 구분해서 다중 선택 */
h1, .my, .your{
color: blue;
}
</style>
</head>
<body>
<h1>h1 요소입니다.</h1>
<p class="my">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur animi corporis pariatur facilis blanditiis saepe deserunt itaque excepturi atque tempora, doloribus dolores consequatur sit incidunt mollitia perferendis rem nihil tempore.
</p>
<p class="your">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab officiis labore error itaque, optio dolorem fugiat ullam. Tenetur incidunt, quasi et asperiores adipisci excepturi, sapiente iure architecto eligendi delectus id?
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit sapiente totam, voluptas atque, illum earum ut harum repellendus odio aperiam! Ipsum animi sapiente aut, hic ipsam cupiditate laudantium necessitatibus est.</p>
</body>
</html>
*{ xxx }
- * 은 모두 선택하는 와일드카드 선택자!
h1, .my, .your{ xxx }
- , 는 다중선택자. id, class, 요소 여러개를 함께 선택.
<Example01>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step02_Example.html</title>
<style>
.bg-green{
background-color: #00ff00;
}
.text-bold{
font-weight: bold;
}
.text-red{
color: #ff0000;
}
</style>
</head>
<body>
<p class="bg-green">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero magnam autem, accusantium quos quae assumenda a facere ut quod blanditiis voluptate ratione voluptatum debitis ipsam delectus quas minima corporis dicta?</p>
<p class="bg-green text-bold">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam itaque temporibus facilis dolor ex earum minima rerum magnam beatae praesentium, molestiae. Voluptatum cumque voluptatibus molestiae eligendi voluptate recusandae, ab nihil!</p>
<p class="bg-green text-bold text-red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni et incidunt eveniet nulla, voluptatibus, dolores reiciendis ipsam rerum aliquam ea explicabo assumenda fugit ullam quia nemo inventore. Repudiandae, autem, magnam.</p>
</body>
</html>
- 클래스 속성을 사용해서 css를 적용한다.
- 클래스 여러개를 띄어쓰기로 구분하여 함께 적용하기
<Example2>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step02_Example2.html</title>
<style>
/*
선택자의 구체성이 같다면 나중에 정의한 css가 우선시된다.
아래 div의 글자색과 배경색을 확인해 보세요.
*/
div{
color: rebeccapurple;
}
div{
color:skyblue;
}
.my-class{
background-color: aquamarine
}
.your-class{
background-color: burlywood;
}
/*
css의 가중치를 대략 숫자로 표현해 보면
요소명 선택자: 1
클래스 선택자: 10
아이디 선택자: 100
인라인 css : 1000
!important: 10000
*/
.our-class{
color: greenyellow !important;
}
p.our-class{
color:brown;
}
</style>
</head>
<body>
<div class="my-class your-class">div1입니다.</div>
<!--javascript로 조작하는 css는 inline css를 조작하는 것입니다.-->
<p class="our-class" style="color:blue">p 요소입니다.</p>
</body>
</html>
- 가중치가 같다면 나중에 정의한 것이 이긴다!
- 외부css에서 불러온 서식을 일부 바꾸고 싶다든가 하는 경우,
뭔가의 css를 바꾸려고 하는데 바뀌지 않는다면 구체성이 떨어지기 때문일 가능성이 크다.
- 같은 요소에 부딪치는 두개가 정의되어 있을 경우 나중에 정의한 css가 이긴다. (하늘색)
- 위와 같이 클래스 선택자+요소 선택자로 더욱 구체성을 높여서 적용하면 수정 가능하다.
- <style>안에서 아무리 수정해도 inline CSS가 가장 강하다!
- javascript로 조작하는 css는 "inline css"를 조작하는 것
!important
- 정말 중요한것이어서 이 css는 사실상 바꿀 수 없음을 의미한다.
'국비교육(22-23)' 카테고리의 다른 글
| 25일차(1)/CSS(3) : Float, Display (0) | 2022.11.09 |
|---|---|
| 24일차(3)/CSS(2) : Margin, Padding, Border / Pseudo Class / Position (0) | 2022.11.09 |
| 24일차(1)/java(36) : JDBC 실습예제 (Friend 프레임) (0) | 2022.11.08 |
| 23일차(2)/java(35) : JDBC 실습예제 (0) | 2022.11.08 |
| 23일차(1)/java(34) : JDBC, DAO (0) | 2022.11.07 |