W3C 명세
가 다양한 브라우저의 표준으로 작동하고 있다.W3C 권고안
을 모듈별로 개발하고 공개하는 것이 더 효과적이기 때문에CSS의 전체 구조는 "rule set" 이라고 한다. 하지만 종종 줄여서 "rule" 이라고도 부른다.
HTML 요소의 이름으로 CSS로 꾸밀 요소를 선택한다.
꾸미고 싶은 요소의 속성을 명시한다.
주어진 HTMl 요소를 꾸밀 수 있는 방법인다.
주어진 속성을 위한 많은 가능한 결과 중 하나를 선택한다.
CSS를 작성하는 방법은 총 3가지이다.
1. 인라인 스타일
2. style 태그 작성
3. css 파일안에 작성
이렇게 방법은 3가지 이지만, 유지보수를 위해 css파일을 만들어 작성하는 것이 효율적이다.
스타일을 지정할 HTML 요소 대상을 말한다.
선택자는 결합자(공백, '>', '+')에 의해 하나 이상의 단순 선택자들의 연속(Chain)이다.
여러개를 선택해 동일한 스타일을 지정할 때엔 ( , ) 콤마를 사용해 그룹지을 수 있다.
전체 선택자는 모든 요소(Element)를 포함하며 " * "로 표시한다.
* {
padding: 0;
margin: 0;
border: 0;
}
요소(Element)를 선택자로 지정한다.
ex) body, div, h1, ul, li, span ..
div {
width: 100%;
height: 100%;
}
공백으로 분리된 두 개 이상의 선택자들로, '~안의 ~태그'를 모두 선택한다.
<style>
p {
font-size: 20px;
color: #333;
line-height: 1.2em;
}
</style>
<body>
<div>
<p> Hello </p>
</div>
<p> World! </p>
<div>
<p> What a nice weather! </p>
</div>
</body>
자식 선택자는 선택하고자 하는 태그의 부모요소와 함께 부모요소 다음에 ' > ' 표시로 연이어 작성한다.
예시를 보면, body 부분의 모든 p태그가 아닌 body 안에 있는 모든 div태그 안의 p태그
가 선택된다.
<style>
div > p {
font-size: 20px;
color: #333;
line-height: 1.2em;
}
</style>
<body>
<div>
<p> Hello </p>
</div>
<p> World! </p>
<div>
<p> What a nice weather! </p>
</div>
</body>
인접 선택자는 ' + ' 로 분리된 두 개 이상의 선택자들로 만들어진다.
첫번째 선택자가 선택된 다음 가장 가까운 두번째 요소가 선택된다.
<style>
p + h4 {
font-size: 20px;
color: #333;
line-height: 1.2em;
}
</style>
<body>
<h4> HAHAHA </h4>
<span> Hello </span>
<p> World! </p> /* 첫번째 선택자 */
<h4> What a nice weather! </h4> /* h4 태그 중, 첫번째 선택자 바로 다음에 나오는 h4가 두번째로 선택된다. */
</body>
속성 선택자는 네가지 방식으로 표현된다.
img[alt] { /* alt 속성을 가진 모든 이미지가 선택된다. */
border: 2px solid #fff
}
img[alt="cat"] { /* alt 속성 값으로 cat이 지정된 모든 이미지가 선택된다. */
border: 2px solid #fff
}
img[alt~="cat"] { /* alt 속성 값으로 cat을 포함하는 모든 이미지가 선택된다. */
border: 2px solid #fff
}
img[alt|=cat] { /* alt 속성 값으로 cat로 시작하는 모든 이미지가 선택된다. */
border: 2px solid #fff
}
특정 아이디(#)를 가진 요소에만 사용되며,
id 속성을 가진 요소는 딱 하나만 허용된다.
h2#subject { /* 아이디가 subject인 h2 태그 선택 */
color: red;
}
#subject { /* 아이디가 subject인 모든 태그 선택 */
color: red;
}
특정 클래스(.)를 가진 요소에만 사용되며,
class 속성은 여러 요소가 가질 수 있어 동일한 class명을 선택할 경우, 동시에 적용된다.
h2.subject { /* 클래스가 subject인 h2 태그 선택 */
color: red;
}
.subject { /* 클래스가 subject인 모든 태그 선택 */
color: red;
}
가상 클래스는 스타일이 적용되는 대상이 요소나 속성, 속성 값에 따라 분류되지 않고 상황
에 따라 분류된다.
:first-child
지정한 태그의 첫번째 자식 요소를 선택한다.
<style> div > p:first-child { font-weigth: bold; } </style>
<body> // div의 첫번째 자식은 p 태그이기 때문에 스타일이 적용된다. <div class="textBox"> <p>Hello World!</p> <span>What a nice day!</span> </body>
<body> <div class="textBox"> // div의 첫번째 자식은 span 태그이기 때문에 스타일이 적용되지 않는다. <span>What a nice day!</span> <p>Hello World!</p> </body>
:hover
요소 위에 마우스를 올려놓는 동안 설정한 스타일이 적용된다.
<style> a:hover { color: red; } </style>
<body> // CSS MDN 글씨에 마우스를 올리면 글씨색이 red로 변경된다. <a href="https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS MDN</a> </body>
:active
요소를 마우스로 눌렀다가 놓는 동안에 설정한 스타일이 적용된다.
<style> a:active { color: red; } </style>
<body> // CSS MDN 글씨에 마우스를 눌렀다가 놓는 동안 글씨색이 red로 변경된다. <a href="https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS MDN</a> </body>
:focus
텍스트 입력 양식에 마우스로 클릭하고 입력하는 동안 스타일이 적용된다.
input:focus { border: 1px solid blue; }
input:focus:hover { // 가상클래스를 결합해서 사용할 수 있다. border: 1px solid blue; }
어떤 요소의 내용에 대해 HTML에서는 최초의 줄이나 문자를 지정할 수 있는 방법이 없는데,
가상 엘리먼트를 이용하여 그것에 스타일을 적용할 수 있다.
::before, ::after
div::before { content: ""; } div::after { content: ""; }
전 이슷틎입니다👐 반가워요^^