[TIL] CSS

CSS

HTML으로 구조를 만들고, CSS로 구조의 외부와 내부를 꾸밀 수 있다.
CSS를 HTML에 적용하는 방법 세가지는 1. 외부 스타일 시트 (가장 권장되는듯)

	<link rel="stylesheet" href="index.css" />

2. 인라인 스타일

    <nav style="background: #eee; color: blue">....</nav>

3. 내부 스타일 시트

    <h1>STUDY HARD!</h1>

		<style>
		h1 {
			color: red;
			}
		</style>

CSS에서 여러 속성을 사용해서 텍스트를 꾸미거나 정렬 등을 할 수 있고,
이 때 selector를 사용해서 특정 요소에 속성을 지정해줄 수 있다.

오늘 배운 것 중 생각나는 속성들은...

• text-aglin 텍스트 정렬
• font-family 글꼴 설정
• color 글자색 (그냥 배경 색은 background나 background-color)
• letter-spacing 글자간 간격
• text-decoration 밑줄이나 가로줄 등
  
  

속성들 값을 지정해줄 때 사용하는 단위로는 절대 단위와 상대 단위가 있다.
절대 단위로는 px, pt 등이 있고,
상대 단위로는 rem, em, vw, vh, % 등이 있다.

박스 모델

요소들이 들어가는 박스는 너비와 높이를 가진 직사각형의 형태이고,
CSS를 이용해 속성과 값으로 너비, 높이 등을 설정 가능.

박스 종류

• block : 줄바꿈o (ex : h1, p )
• inline : 줄바꿈x / width, height 사용 x / (ex : span)
• inline block : 줄바꿈x / width, height 사용 o

박스 크기 측정 기준에는 content-box 와 border-box 이렇게 두 가지가 있는데,
border-box 계산법이 여백과 테두리를 포함한다.
border-box 적용 방법은

	*{
    	box-sizing: border-box;
        }

CSS selector

여러가지 셀렉터들이 존재하지만, 기억에 남는 셀렉터만 소개하자면

우선 자식 셀렉터, 후손 셀렉터를 구분해야 한다.
자식 셀렉터는 부모 셀렉터의 바로 하위 요소까지만 포함하고,
후손 셀렉터는 부모 셀렉터의 자식 요소의 자식 요소까지도 포함한다.

형제 셀렉터, 인접 형제 셀렉터를 구분하는 것은
형제 셀렉터는 같은 부모 요소를 가진 모든 형제 요소들,
인접 형제 셀렉터는 같은 부모를 가지고 있고, 첫번째로 입력된 요소의 바로 뒷 형제요소를 말한다.

그 외 구조 가상 클래스 셀렉터 문제를 풀면서 헷갈렸던 셀렉터들이 있다.

p:first child
div > p:last child
ul > li:nth-child(2n+1)//ul의 자식인 li 요소 중 홀수번째 
div > div:nth-first-child(2)//div 자식 중 앞에서 두번째 div
div:nth-last-child(1) //부모 공유하는 자식들 중 맨 끝이 div면 해당.
p:first-of-type // type이 붙으면 같은 요소끼리만 고려. 
div:last-of-type
ul:nth-of-type(2)
p:nth-last-of-type(1)

복잡한 셀렉터의 경우
우선 자식인지, 후손인지, 형제 요소인지를 파악하고 난 뒤
순차적으로 뒤에 달린 가상 클래스를 해석하는 게 좋은듯.