[DAY1] CSS 기초(박스, 선택자)

목차

 

🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일

⭐요약

---

웹 페이지의 스타일과 레이아웃을 결정하는 데 필수적인 CSS의 기초적인 내용을 정리함.

 

🚀 CSS 기초

 

1) CSS(Cascading Style Sheets)	웹 페이지의 스타일과 레이아웃을 결정하는 스타일시트 언어. CSS는 색상, 글꼴, 크기, 간격 등 웹 페이지의 시각적 요소를 제어할 수 있음.
2) 박스 모델	웹 페이지를 구성하는 모든 요소는 박스 모델로 표현됨. 요소의 콘텐츠, 패딩(padding), 테두리(border), 마진(margin)으로 구성됨.
3) 선택자	CSS에서는 다양한 선택자를 사용하여 특정 요소에 스타일을 적용할 수 있음. id 선택자, class 선택자, 태그 선택자, 속성 선택자 등이 포함됨.
4) 스타일링	텍스트 스타일링(색상, 글꼴, 크기 등), 박스 모델(테두리, 마진, 패딩 등), 레이아웃 제어(block, inline-block, inline 등)를 포함한 다양한 스타일링 기법이 있음.
5) 단위와 선택자	CSS에서는 절대 단위와 상대 단위를 사용하여 요소의 크기와 간격을 정의함. 다양한 선택자를 통해 문서 내 특정 요소들을 세밀하게 선택하고 스타일을 적용할 수 있음.

 

 

⭐CSS 기초

---

(1) CSS (Cascading Style Sheets): 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어

[사진] CSS 문법 구성

 

1. 박스를 구성하는 요소

웹 페이지를 구성하는 모든 요소는 박스 모델로 표현됨. 이 모델은 요소의 콘텐츠, 패딩(padding), 테두리(border), 마진(margin)으로 구성됨. 아래 그림 꼭 기억하기!

[그림] border(테두리) 를 기준으로 padding(안쪽 여백)과 margin(바깥 여백) 이 있음.

 

2. 기본적인 선택자 (selector)

1) id로 이름 붙여서 스타일링 적용하기

#navigation-title {
  color: red;
}

 

2) class로 스타일을 분류하여 적용하기

.menu-item {
  text-decoration: underline;
}

3) 여러 개의 class를 하나의 엘리먼트에 적용하기

.selected {
  font-weight: bold;
  color: #009999;
}

id	class
#으로 선택	.으로 선택
한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소 많음
정 요소에 이름을 붙이는 데 사용	스타일의 분류(classification)에 사용

[표] id, class 선택자의 특징

3. 기타 스타일링

• 글자 색상: color
• 글꼴: font-family
• 글자 크기: font-size
• 굵기: font-weight
• 밑줄, 가로줄: text-decoration
• 자간: letter-spacing
• 행간: line-height
• 정렬: text-align

4. 알아야 할 몇 가지 단위

• 절대 단위: px, pt 등
• 상대 단위: %, em, rem, ch, vw, vh 등

	block	inline-block	inline
줄 바꿈 여부	줄 바꿈이 일어남	줄 바꿈이 일어나지 않음	줄 바꿈이 일어나지 않음
기본적으로 갖는 너비	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 사용 가능 여부	가능	가능	불가능

[표] block, inline-block, inline의 특징

 

5. 기본 선택자

1) 전체 선택자: 전체 선택자는 문서의 모든 요소를 선택함.

* { }

2) 태그 선택자: 태그 선택자는 같은 태그명을 가진 모든 요소를 선택함. 복수로도 선택할 수 있음.

h1 { }
div { }

section, h1 { }

3) ID 선택자: ID 선택자는 #id로 입력하여 선택함.

#only { }

4) class 선택자: class 선택자는 .class로 입력하여 선택함. 같은 class를 가진 모든 요소를 선택함.

.widget { }
.center { }

5) attribute 선택자: attribute 선택자는 같은 속성을 가진 요소를 선택함.

a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

6. 자식 / 후손 / 형제 선택자

6) 자식 선택자: 자식 선택자는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택함.

• 아래 예시의 경우 <header> 요소 바로 아래에 있는 두 개의 <div> 요소는 선택되지만, <p> 요소의 자식인 <div> 요소는 선택되지 않음.

header > div { }

예시)

<header>
<div> <!-- 선택 -->
<p>
<div></div>
</p>
</div>
<div> <!-- 선택 -->
<p>
<div></div>
</p>
</div>
</header>

7) 후손 선택자: 후손 선택자는 첫 번째로 입력한 요소의 후손을 선택함.

• 아래 예시의 경우 <header> 요소의 자식인 <div> 요소뿐 아니라, <p> 요소의 자식인 <div> 요소까지 모두 선택됨.

header div {}

예시)

<header>
<div><!-- 선택 -->
<p>
<div><!-- !!선택!! -->
</div>
</p>
</div>
<div><!-- 선택 -->
<p>
<div><!-- !!선택!! -->
</div>
</p>
</div>
</header>

8) 형제 선택자: 형제 선택자는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택함.

• 아래 예시의 경우 <section> 요소 뒤에 있는 세 개의 <p> 요소를 모두 선택함.

예시)

section ~ p { }
<header>
<section></section>
<p></p> <!-- 선택 -->
<p></p> <!-- 선택 -->
<p></p> <!-- 선택 -->
</header>

9) 인접 형제 선택자: 인접 형제 선택자는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택함.

• 예시의 경우 <section> 요소 뒤에 있는 세 개의 <p> 요소 중 첫 번째 <p> 요소를 선택함.

예시)

section + p { }
<header>
<section></section>
<p></p> <!-- 선택 -->
<p></p>
<p></p>
</header>

7. 기타 선택자

10) 가상 클래스 선택자: 가상 클래스는 요소의 상태 정보에 기반해 요소를 선택함.

a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */

11) UI 요소 상태 선택자

input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */

12) 구조 가상 클래스 선택자

p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }

13) 부정 선택자

input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }

 

14) 정합성 확인 선택자

input[type="text"]:valid { }
input[type="text"]:invalid { }

 

⭐후기

---

• 오랜만에 공부해서 그런지 CSS에 대해서 낯선 내용이 많았음.
• CSS의 박스 모델 개념에 대해 헷갈렸는데, 이번 기회에 확실히 머릿속에 넣어두는 것이 좋을 것 같음. 실습을 통해 자주 사용되는 선택자와 스타일링 방법에 익숙해지도록 노력해야겠음.
• CSS의 기초적인 개념에 초점을 맞췄기 때문에 이후 CSS 애니메이션, 플렉스박스(Flexbox), 그리드(Grid) 시스템 같은 고급 주제를 다루어서, 보다 동적이고 반응형인 웹 페이지 디자인을 위한 기술을 공부할 것임. 또한, CSS 전처리기(Sass, Less)에 대한 사용 방법도 포함해 CSS 작업의 효율성과 유지보수성을 향상시키는 방법도 습득하고 싶음.

 

이 글은 코드스테이츠 x KNU가 주최한 직무역량캠프에서 공부한 내용을 작성한 것입니다.