🎓 CSS Cascading Style Sheets
body{
background-color: green;
}
h1{
color: blue;
text-align: center;
}
p{
font-size: 20px;
}css 기본 문법을 나타낸다. selector로 body/h1/p 등 스타일이 적용될 html 요소를 선택하고 선언 블록{} 안에 background-color, color, text-align, font-size와 같은 속성명과 그에 맞는 속성 값을 명시한다.
<head>
<link rel="stylesheet" href="css.css" />
</head>html은 웹 페이지의 구조를, css는 웹 페이지의 디자인을 구성하게 하는 관심사 분리 측면에서 외부 스타일 시트를 사용하는 것이 권장된다. html 문서에서 외부 css 문서는 html 문서의 <head> 태그 안에 <link> 태그를 추가하여 불러온다. 여기서 rel의 속성 값에는 href로 불러올 문서가 담당하는 역할(여기서는 stylesheet) href의 속성 값으로는 불러올 문서(여기서는 css)의 경로를 넣어준다.
🎓 CSS Selectors
CSS에서는 스타일을 적용할 html 요소를 선택하기 위해 selector를 사용한다. selector는 크게 5가지로 구분된다.
1. Simple Selectors
요소의 이름이나 id, class로 요소를 선택한다.
요소 선택자
<p>이 태그는 단락 태그</p>p { color: pink; }html 문서에서 요소의 이름(p)으로 요소를 선택해 스타일을 적용한다. 선택된 모든 요소들에게 값이 적용된다. (위의 경우 html 문서에 <p> 요소가 더 있을 경우 그 요소들에게 모두 color: pink;의 값이 적용됨)
id 선택자
<h1 id="may">5월 1일입니다</h1>#may { color: green; }html 문서에서 id가 지정된 요소를 #으로 id name을 명시하여 스타일을 적용한다.
class 선택자
<ul>
<li class="fruits">딸기</li>
<li class="fruits">바나나</li>
<li class="fruits">수박</li>
</ul>.fruits { text-decoration: underline; }html 문서에서 class가 지정된 요소들을 .(dot)으로 class name을 선택하여 스타일을 적용한다.
universal 선택자
* { text-align: center; }universal selector *로 html의 전체 요소들을 선택하여 스타일을 적용한다.
2. Combinator Selectors
selector 사이의 관계에 따라 스타일을 적용하고 싶을 때 사용한다.
Descendant 선택자 ( )
<div>
<p>div 태그로 구역을 나눌 수 있습니다.</p>
<p>레이아웃을을 만들기 좋아요.</p>
<section><p>div태그의 후손입니다.</p></section>
</div>
<p>div 태그의 후손이 아닙니다.</p>div p {
background-color: orange;
}공백(띄어쓰기)으로 연결된 후손 선택자는 공백 앞의 요소(div)의 자손 중 공백 뒤의 요소(p)들을 모두 선택한다. 위 html 문서에서는 <div><section> 아래의 <p> 태그까지는 선택이 되지만 <div>태그의 후손이 아닌 마지막 <p> 요소는 선택되지 않는다.
Child 선택자 (>)
<div>
<p>div 태그로 구역을 나눌 수 있습니다.</p>
<p>레이아웃을을 만들기 좋아요.</p>
<section><p>div태그의 후손입니다.</p></section>
</div>
<p>div 태그의 후손이 아닙니다.</p>div > p {
background-color: green ;
}자식만을 선택하는 선택자로 후손은 선택되지 않는다. 위의 태그에서 <div><section><p>로 작성된 요소는 <div>의 child가 아니므로 선택되지 않고, 위의 두 요소만 선택된다.
Adjacent Sibliing 선택자 (+)
<div>
<p>div의 자식1</p>
<p>div의 자식2</p>
</div>
<p>div의 형제1</p>
<p>div의 형제2</p>
<div>
<p>div의 자식3</p>
<p>div의 자식4</p>
</div>
<p>div의 형제3</p>
<p>div의 형제4</p>div + p {
background-color: red;
}인접 형제 선택자로 바로 뒤에 있는 요소를 선택한다. 같은 부모 요소를 가져야 한다. 위 태그의 경우 작성된 css로 스타일이 적용되는 <p> 요소는 div의 형제1, 3 둘뿐이다.
General Sibling 선택자
<div>
<p>div의 자식1</p>
<p>div의 자식2</p>
</div>
<p>div의 형제1</p>
<p>div의 형제2</p>
<div>
<p>div의 자식3</p>
<p>div의 자식4</p>
</div>
<p>div의 형제3</p>
<p>div의 형제4</p>div ~ p {
background-color: black;
}일반 형제 선택자로 형제 요소 중 뒤에 위치하는 모든 요소를 선택한다. 여기서는 div의 형제 1, ,2, 3, 4가 모두 선택된다.
3. Attribute Selectors ([])
속성 선택자로 지정된 속성을 갖는 모든 요소를 선택한다. 선택하고자 하는 속성의 여러가지 상태를 지정할 수 있다.
(reference)
CSS Attribute Selector
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
4. Pseudo-class Selectors
요소의 특수한 상태에 따라 선택하기 위해 사용된다. 특수한 상태는 1) 커서를 가져다 댈 때나(hover), 2) visited/unvisited의 상태 차이 등을 말한다.
(reference)
CSS Pseudo-classes
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
5. Psuedo-elements Selectors
요소의 특정 부분에 스타일을 적용하기 위해 사용된다. 여기서 특정 부분은 1) 요소의 첫 번째 글자나, 라인, 2) 요소의 내용 앞이나 뒤가 될 수 있다.
(reference)
CSS Pseudo-elements
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
아주 기초가 되는 선택자들만을 직접 정리해둔다. 나머지 조금 더 복잡한 특징을 가지는 선택자들은 따로 참고할만 한 reference를 첨부해 대체한다. 추후 사용할 일이 생길 경우 확인 후 사용해보도록 하자.
🎓 CSS tag Reference
CSS Reference
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
필요할 때마다 ctrl + f
'diary > codestates (be39)' 카테고리의 다른 글
| [CSS] 레이아웃 만들기 (0) | 2022.05.02 |
|---|---|
| [CSS] 박스 모델 (0) | 2022.05.01 |
| [HTML] 기초 중의 기초 중의 기초 (0) | 2022.05.01 |
| 04/29/22 [pair programming] Oven으로 와이어프레임, HTML과 CSS로 목업 만들어보기 (0) | 2022.04.30 |
| 04/28/22 [HTML/CSS] flexbox로 레이아웃 만들어보기 (0) | 2022.04.28 |
