[FE Bootcamp] 3일차

Frontend Study

[FE Bootcamp] 3일차_CSS 기초

킹경후 2023. 2. 15. 21:25

벌써 수요일이 됐다.

오늘은 CSS의 기초에 대해 배웠다.

어제 배운 HTML이 웹 페이지의 뼈대라면, 오늘 배운 CSS는 그 뼈대를 꾸밀때 쓰인다.

꾸미는 것 답게 기본적으로 색상, 크기, 배경색 등의 스타일은 기본이고 정렬, 배치 등의 공간적 요소도 함께 포함하고 있다.

오늘 배웠던 것들 중 가장 중요한 것은 아마 박스 구조와 셀렉터가 아닐까 싶다.

박스 구조는 말그대로 한 페이지의 요소들을 하나의 박스로 감싸는 것이다.

이삿짐을 쌀 때, 모든 짐을 트럭에 한번에 싣는것보다 분류별로 나눠 담아 싣는게 훨씬 효과적일 것이다.

이처럼 박스 구조는 <div> 태그 안에 비슷한 요소 또는 묶어야 하는 요소들을 담아 한번에 제어할 수 있게 만든 구조이다.

박스 구조를 사용하지 않으면, 스타일을 적용하고 싶은 요소들마다 일일히 스타일을 적용해 주어야 한다는 단점이 있다.

<p style="color:red">안녕하세요 나는 롤링 스톤스의 믹 재거입니다.</p>
<p style="color:red">안녕하세요 나는 레드 제플린의 로버트 플랜트입니다.</p>
<button style="color:red">확인</button>
<p style="color:blue">안녕하세요 나는 RATM의 잭 데라 로차입니다.</p>
<p style="color:blue">안녕하세요 나는 림프 비즈킷의 샘 리버스입니다.</p>
<button style="color:blue">확인</button>

하지만 박스 구조를 사용한다면, 같은 스타일을 적용할 요소들을 하나의 박스에 넣어놓고, 한번에 적용할 수 있다.

<div style="color:red">
    <p>안녕하세요 나는 롤링 스톤스의 믹 재거입니다.</p>
    <p>안녕하세요 나는 레드 제플린의 로버트 플랜트입니다.</p>
    <button>확인</button>
</div>
<div style="color:blue">
    <p>안녕하세요 나는 RATM의 잭 데라 로차입니다.</p>
    <p>안녕하세요 나는 림프 비즈킷의 샘 리버스입니다.</p>
    <button>확인</button>
</div>

박스를 만드는데 쓰이는 <div>는 블록 태그이기 때문에, 한 줄을 모두 차지한다.

이때 display를 inline-block 태그로 만들어 준다면 div를 나란히 세우는 것도 가능하다.

또한 박스에는 다양한 여백 및 테두리를 적용할 수 있다.

요소	기능
Margin	바깥쪽 여백
Padding	안쪽 여백
Border	테두리

div{
    margin:20px; 
    padding:20px;
    border:10px solid black;
    width:100px;
    height:100px;
}

margin과 padding을 20px씩, border를 10px씩 주었을 때, 다음과 같이 나타나는 것을 볼 수 있다.

박스의 크기는 제일 안의 파란 박스(Content)를 기준으로 측정이 되기 때문에 잘못 사용하면 다른 요소들을 침범할 수 있다.

* {
  box-sizing: border-box;
}

이를 방지하기 위해, 위와 같은 코드를 넣어주면 박스의 크기는 모든 여백과 테두리를 포함한 크기로 측정되게 할 수 있다.

그 다음은 셀렉터이다.

셀렉터는 말그대로 무언가를 콕 집어 스타일을 적용하는 것이다.

대표적으로는 태그명, id, class명을 이용해 스타일을 적용할 대상을 선택할 수 있다.

셀렉터명	적용 방법
태그명 해당 태그를 가진 모든 요소	<>를 제외한 태그명 div{}
아이디명 해당 아아디를 가진 모든 요소	#아이디 #container{}
클래스명 해당 클래스를 가진 모든 요소	.클래스 .container{}
자식 셀렉터 첫번째 요소의 바로 하위 요소	셀랙터 > 셀렉터 div > ul
후손 셀렉터 첫번째 요소의 모든 하위 요소	셀렉터 셀렉터 ul li
형제 셀렉터 첫번째 요소와 부모가 같고 인접힌 모든 두번째 요소	셀렉터 ~ 셀렉터 input ~ button
인접 형제 셀렉터 첫번째 요소와 부모가 같고 바로 다음에 오는 요소	셀렉터 + 셀렉터 button + div
first-child 첫번째 자식 요소	셀렉터:first-chile ul > li:first-child
nth-child(2n) 짝수번째 요소	셀렉터:nth-child(2n) p:nth-child(2n)

셀렉터 퀴즈에서 몇문제를 틀리는 바람에 다시 꼼꼼히 공부해 보게 되었다.

제일 헷갈렸던 것은 이거.

#id.class{
	//id명이 id이고 class명이 class인 모든 태그 
}
#id .class{
	//id명이 id인 태그의 후손 태그 중 class명이 class인 태그
}

저 띄어쓰기 하나 때문에 셀렉터가 완전히 바뀌었다.

이런 세세한 것들을 놓치지 않도록 해야겠다는 생각이 들었다,

오늘도 끝~