일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- 객체지향
- 디자인교육
- 오블완
- OPENPATH
- Java
- 환급챌린지
- 내일배움캠프
- 백엔드개발자
- UXUIPrimary
- Be
- 국비지원교육
- 국비지원
- 티스토리챌린지
- 내일배움카드
- 패스트캠퍼스
- 백엔드 부트캠프
- 디자인강의
- 오픈패스
- UXUI챌린지
- 백엔드
- Spring
- KDT
- 부트캠프
- 오픈챌린지
- 백준
- 국비지원취업
- baekjoon
- UXUI기초정복
- 디자인챌린지
- mysql
- Today
- Total
군만두의 IT 공부 일지
[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): 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어
1. 박스를 구성하는 요소
웹 페이지를 구성하는 모든 요소는 박스 모델로 표현됨. 이 모델은 요소의 콘텐츠, 패딩(padding), 테두리(border), 마진(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가 주최한 직무역량캠프에서 공부한 내용을 작성한 것입니다.
'개발일지 > SW직무역량 부트캠프' 카테고리의 다른 글
[DAY3] JavaScript 기초 2(변수, 조건문) (0) | 2023.07.02 |
---|---|
[DAY3] JavaScript 기초 1(주석, 데이터 타입) (0) | 2023.06.30 |
[DAY2] HTML/CSS 활용(Flexbox) (0) | 2023.06.29 |
[DAY2] HTML/CSS 활용(와이어프레임, 목업) (0) | 2023.06.28 |
[DAY1] HTML 기초(시멘틱 요소) (0) | 2023.06.26 |