안녕하세요!
2025년 5월 29일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 5일차 내용을 정리해보았습니다.
오늘은 요소 순서를 지정하는 `nth-child`, block 요소 정렬, 클래스와 id 선택자 등의 개념에 대해 배웠습니다.
---
5일차 학습내용
10강
## nth-child
: nth-child(n)는 부모의 자식 중에서 몇 번째 요소인지를 선택할 때 사용한다.
section > div:nth-child(1) {
background-color: red;
}: section > div:nth-child(1)은 "section의 첫 번째 자식이면서 div일 때"만 해당된다.
section > nav: nth-child(1) {
background-color: red;: 위와 같이 쓸수 있다. "section > nav: nth-child(1)" 을 먼저 봐줘야 한다.
: 즉, 첫 번째 자식이 div가 아니라면 선택되지 않는다!
> nav: nth-child()와 div:nth-child() 을 잘 구분해야 한다.
---
10강 문제
문제 풀이
: (CSS) 부모 요소부터 자식 순으로 정확한 순서대로 작성해야 스타일이 올바르게 적용된다.
<!-- 정답 HTML -->
<section>
<div></div>
<div></div>
<div></div> <!-- section>div*70 -->
<div></div>
</section>/* 정답 CSS */
section {
text-align:center;
}
section > div {
width:13%;
height:100px;
background-color:red;
display:inline-block;
}
section > div:nth-child(7n + 2) {
background-color:orange;
}
section > div:nth-child(7n + 3) {
background-color:yellow;
}
section > div:nth-child(7n + 4) {
background-color:green;
}
section > div:nth-child(7n + 5) {
background-color:blue;
}
section > div:nth-child(7n + 6) {
background-color:navy;
}
section > div:nth-child(7n + 7) {
background-color:purple;
}: 선택자가 꼬이면 원하는 색상이 적용되지 않기 때문에 구조를 꼭 확인해야 한다.
11강
## block 요소 정렬
: div 같은 block 요소는 너비를 지정한 후 margin: 0 auto;를 주면 가운데 정렬이 된다.
div {
width: 300px;
margin: 0 auto;
}: width가 없으면 블록 요소가 부모 너비 전체를 차지하기 때문에 가운데 정렬이 되지 않는다.
: 반드시 width 값을 함께 지정해줘야 한다.
div {
width: 100px;
margin-left: 0;
}: margin-left: 0;만 줘서는 오른쪽으로 붙지 않는다.
왜?
width: 100px; 값을 포기하지 않눈다.
그러나
width: 100px; 없어지면 margin-left: 0;가 왼쪽으로 붙는다.
margin-left:가 auto가 되면 갈피를 잡지 못하고 중간으로 온다.
블록을 정렬시키고 싶으면 margin: 0 auto;로 작성한다.
margin-top과 margin-bottom은 따로 정해져 있지 않기 때문에, 값을 그대로 주면 적용된다.
즉, width/margin-left/margin-right 중 누군가는 자신의 역할을 포기해야된다.
12강
## HTML 태그
개념: 모든 보이는 엘리먼트의 부모는 body이고, 그의 부모는 html 이다.
= 모든 보이는 요소는 <body>의 자식이며, <body>는 <html>태그의 자식이다.
<html>
<body>
<div>콘텐츠</div>
</body>
</html>: 따라서 <html>은 웹 문서의 최상위 요소(root element)이다.
13강
## class, id 차이
## class
: 공통 스타일을 지정한다.(자주 사용)
<div class="box">1</div>
<div class="box special">2</div>.box {
width: 100px;
height: 100px;
background-color: gray;
}: .은 class 선택자이며, 공통 스타일 지정에 사용한다.
: 여러 요소에 같은 class를 줄 수 있다.
---
## id
: 고유한 식별자이다. (한 페이지에 한 번만 사용)
<div id="main-banner">배너</div>#main-banner {
border: 2px solid red;
}: #은 id 선택자
: 중복 불가. 하나의 HTML 문서에 한 번만 사용해야 한다.
: 우선순위 id > class
---
- class vs id 선택자 비교표
| 항목 | class | id |
| 접두어 | . | # |
| 중복 사용 | ✅ 가능 | ❌ 불가 |
| 사용 목적 | 여러 요소에 동일한 스타일 적용 | 단일 요소에 고유한 스타일 적용 |
| 우선순위 | 낮음 | 높음 |
---
## html 단축코드
- a+Tab → <div id="a"></div>
- div+Tab → <div></div>
- div.a + Tab → <div class="a"></div>
---
13강 문제
문제 풀이
v3 조건 : 엘리먼트 5개 사용, 힌트 : body
v4, 조건 : 엘리먼트 4개 사용, 힌트 : body, block
---
마무리
오늘은 nth-child, margin, class vs id 선택자 등 CSS의 구조와 스타일 적용 방식에 대해 배웠습니다.
특히 nth-child 부분이 어렵게 다가왔는데, 이번 복습으로 조금 정리가 된 것 같습니다. 더 복습을 해야될 것 같슴다.
복습 완료! 끝-