1. 기본문법
0. 기본적인 형태
선택자 {속성:속성값; 속성:속성값;}
선택자 {속성:속성값; 속성:속성값;
}위와같이 입력가능하다.
하지만 첫번째의 경우 가독성이 떨어지기 때문에
아래와 같이 입력하는 것이 낫다.
1. 선택자의 역할
속성과 값을 지정할 대상을 검색
<div>HELLO</div> <!--Red-->
<span>HELLO</span>위는 HTML에서, 아래는 CSS에서다.
div{color:red;
}이렇게 된다면 결과는 div태그에만 빨간색으로 글자색이 나온다.
💡여기서 속성과 값의 역할이 나오는데, 속성은 "글자색" 값은 "빨간"이 된다.
2.선언방식
1. 인라인방식
예제)
<div style="color:red; font-size:20px; font-weight:bold;">HELLO</div>인라인(in-line)방식
HTML요소(태그)의 'style'속성에 직접 작성하는 방식이다.
위와 같은 방식은 선택자가 따로 필요없다.
2. 내장방식
예제)
<head>
<style>
div{color:red;
font-size:20px;
font-weight:bold;
}
</style>
</head>
<body>
<div>HELLO</div>
</body>HTML
<style></style>안에 작성하는 방식이다.
head태그안에 작성되었고 div가 선택자로 지정되어있다.
3. link방식
HTML
<link>를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식.
예제)
<head>
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<div>HELLO</div>
</body>위의 경우 html의 예제이고 아래의 경우 css의 예제이다.
div{
color:red;
font-size:20px;
font-weight:bold;
}4. @import방식
css @import를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식
예제)
<head>
<link rel="stylesheet" href="css/common1.css">
</head>
<body>
<div>HELLO</div>
</body>위의경우 html 아래 두가지의 경우 html에서 css를 가지고 오는것과 css에서 외부의 css를 가져오는 차이가 있다.
/* common1.css*/
@import url("./common2.css");위는 html에서 css파일 가져오는 경우의 css이다.
위의 구조의 경우 병렬방식으로 아래의 직렬구조보다 더 빠르다.
아래의 방식이 안좋다기 보다는 불러오는 것에 있어서 순서가 필요한 경우
더 적절한 방식이 된다.
div{
color:20px;
font-size:20px;
font-weight:bold;
}3.선택자
1. 전체선택자
(요소내부의)모든 요소를 선택
예제)
*{
color:red;
}위의 경우 css의 예, 아래의 경우 html의 예
이런경우 위와 같이 *을 선택하고 하면 밑에 HTML에 작성된 모든 것이 빨간글씨로 나온다.
<div>
<ul>
<li>사과</li>
<li>딸기</li>
<li>오렌지</li>
</ul>
<div>당근</div>
<p>토마토</p>
<span>오렌지</span>
</div>2. 태그선택자
태그 이름이
E인 요소 선택
li{
color:red;
}위의 경우 CSS 아래의 경우 HTML이다.
<div>
<ul>
<li>사과</li><!--선택-->
<li>딸기</li><!--선택-->
<li>오렌지</li><!--선택-->
</ul>
<div>당근</div>
<p>토마토</p>
<span>오렌지</span>
</div>3.클래스 선택자
HTML
class속서의값이E인 요소 선택
.orange{
color:red;
}위의 경우 CSS 아래의 경우 HTML이다.
<div>
<ul>
<li>사과</li>
<li>딸기</li>
<li class="orange">오렌지</li> <!--선택-->
</ul>
<div>당근</div>
<p>토마토</p>
<span class="orange">오렌지</span> <!--선택-->
</div>4.아이디 선택자
HTML
ID속서의값이E인 요소 선택
#orange{
color:red;
}위의 경우 CSS 아래의 경우 HTML이다.
<div>
<ul>
<li>사과</li>
<li>딸기</li>
<li id="orange">오렌지</li> <!--선택-->
</ul>
<div>당근</div>
<p>토마토</p>
<span id="orange">오렌지</span> <!--선택-->
</div>4.복합선택자
1. 일치선택자
E와F를 동시에 만족하는 요소 선택
span.orange{
color:red;
}위의 경우 CSS 아래의 경우 HTML이다. 선택자 두개를 같이 쓴것이라고 보면 된다.
<div>
<ul>
<li>사과</li>
<li>딸기</li>
<li>오렌지</li>
</ul>
<div>당근</div>
<p>토마토</p>
<span class="orange">오렌지</span> <!--선택-->
</div>2. 자식 선택자
E의 자식요소F를 선택
ul> .orange{
color:red;
}위의 경우 CSS 아래의 경우 HTML이다. ">"가 자식선택자를 의미하는 것이다.
<div>
<ul>
<li>사과</li>
<li>딸기</li>
<li class="orange">오렌지</li> <!--선택-->
</ul>
<div>당근</div>
<p>토마토</p>
<span class="orange">오렌지</span>
</div>3. 후손(하위)선택자
E의 후손(하위)요소F를 선택
div .orange{
color:red;
}위의 경우 CSS 아래의 경우 HTML이다. "띄어쓰기"가 선택자의 기호로 쓰인다.
<div>
<ul>
<li>사과</li>
<li>딸기</li>
<li class="orange">오렌지</li> <!--선택-->
</ul>
<div>당근</div>
<p>토마토</p>
<span class="orange">오렌지</span> <!--선택-->
</div>4. 인접형제선택자
E의 다음 형제 요소F하나만 선택.
.orange + li{
color:red;
}위의 경우 CSS 아래의 경우 HTML이다. ".orange"의 다음 형제 요소를 선택하라는 것이 된다.
<div>
<ul>
<li>딸기</li>
<li>수박</li>
<li class="orange">오렌지</li>
<li>망고</li> <!--선택-->
<li>사과</li>
</ul>
</div>4. 일반 형제 선택자
E의 다음 형제 요소F모두 선택.
.orange ~ li{
color:red;
}위의 경우 CSS 아래의 경우 HTML이다. ".orange"의 다음 모든 형제 요소를 선택하라는 것이 된다.
<div>
<ul>
<li>딸기</li>
<li>수박</li>
<li class="orange">오렌지</li>
<li>망고</li> <!--선택-->
<li>사과</li> <!--선택-->
</ul>
</div>💡형제 선택자의 경우 항상 선택자 다음의 형제라는 사실을 기억하자!
마지막으로
이번 시간에는 CSS의 기본적인 구조 및 선택자등 기본적인 요소를 살펴봤습니다.
다음에는 또 다른 선택자에 대해서 살펴보도록 할게요.
