오늘은 다양한 선택자들과 flex의 레이아웃, 상속,웹폰트, 폰트, 그리고 단위에 대해서 공부했다.
가상 클래스 선택자
> first-child ->형제 요소 중 첫번째 요소를 선택
:first-of-type -> :first-child 와 비슷해 보이지만 약간 다른 선택자
형제 요소 중 자신의 유형과 일치하는 제일 첫 요소를 취급
:nth-child(n)
모든 형제 요소 중 n번째 요소를 선택하는 가상 클래스 선택자입니다.
:nth-child(n)의 n자리에 간단한 함수가 들어올 수도 있고 특정한 숫자가 들어올 수도 있습니다.
:nth-of-type(n)
형제 요소 중 특정 형제의 n번째 요소를 선택하는 가상선택자 입니다.
:nth-child(n)과 마찬가지로 n자리에 함수와 특정 숫자 모두 올 수 있습니다.
:active
활성화된 요소를 선택하는 가상 클래스 선택자입니다.
❗️ 활성화 된 요소란 버튼등을 클릭해서 요소의 동작이 활성화 되어있는 상태를 뜻합니다.
:focus
focus를 받고있는 입력창들의 요소를 선택하는 가상 클래스 선택자입니다.
❗️focus를 받고 있는 요소란 입력창의 커서가 활성화 되어있는 요소를 뜻합니다.
:visited
사용자가 방문한 적 있는 링크를 선택하는가상 클래스 선택자입니다.
가상 요소 선택자
:before , :after
가상 요소 선택자로는 before과 after가 있으며 가상 요소 선택자를 이용하면 실제로 html요소를 수정하지 않고, css만으로 가상 요소를 추가해 선택할 수 있습니다. 즉, html을 길게 쓰지 않고도 css만으로도 간단히 새로운 요소를 만들거나 조작할 있다는 의미가 됩니다.
형제 요소 선택자
A ~ B {
property : value
}
flex 레이아웃
flex-wrap
flex-item이 여러개일 때, item들의 줄바꿈을 허용할 것인지 말 것인지 결정합니다.
만일 줄바꿈을 허용하지 않을 경우, item이 아무리 많아져도 무조건 한줄에 들어가도록 합니다.
flex-wrap : nowrap (기본값)
flex-item 속성들
flex-container란 display:flex가 적용된 요소를 뜻합니다.
flex-item이란 flex-container가 안의 각각의 아이템을 뜻합니다.
order : item의 순서를 지정합니다.
flex-basis : item의 기본사이즈를 지정합니다.
flex-shrink : 설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item요소의 크기가 축소됩니다.
flex-grow : flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언합니다.
CSS 상속
기본적으로 css는 부모 요소에 지정한 속성값을 자식 요소에게도 상속해서 적용합니다.
CSS 상속의 우선순위 - Cascading
Cascading이라는 이름의 규칙이 우선순위를 결정합니다.
HTML의 글씨체 바꾸기
font-family
HTML 요소의 글씨체를 바꾸고 싶다면 font-family 라는 속성을 이용하면 됩니다.
선택자{
/ 폰트이름에 공백이 있는 경우 /
font-family:"폰트 이름","폰트 이름2","폰트 이름3"
/ 폰트이름에 공백이 없는 경우 /
font-family:폰트이름,폰트이름2,폰트이름3
/ 혼용해서 사용할 경우 /
font-family:폰트이름,"폰트 이름2"
}
웹폰트
@import
@font-face
폰트 관련 속성
-font-size
-font-weight
-text-decoration
-color
-line-height
-letter-spacing
-word-spacing
-text-align
-vertical-align
-text-indent
-text-transform
-word-break
-overflow-wrap
overflow
overflow: visible | hidden | scroll | auto
text-overflow
text-overflow: clip | ellipsis
단위
CSS에는 사용할 수 있는 단위는 크게 절대 단위 와 상대 단위 로 분류됩니다.
절대단위 란 말 그대로 외부 요인의 영향을 받지 않고 절대적인 값을 지니는 단위입니다.
절대단위의 대표적 예시로 cm, m, kg, g같은 것들을 들 수 있습니다.
이에 반해 상대단위는 외부 요인의 영향을 받아 유동적인 값을 지니는 단위입니다.
상대 단위의 대표적인 예시로는 %가 있습니다.
절대 단위
px = pixel = 화소
화면을 구성하는 가장 기본이 되는 단위
pt(포인트) = 1/72 inch(인치)
인쇄를 위한 단위
상대 단위
%
부모 요소의 해당 속성 값에 비례하여 지정한 비율의 값을 적용합니다.
em
스타일 지정 요소의 font-size 속성값에 비례하여 값을 결정합니다.
/ font-size : 16px 인 경우 /
1em => 16 1 = 16px
0.8em => 16 0.8 = 12.8px
3em => 16 3 = 48px
rem
최상위 html 요소의 font-size속성 값에 비례하여 값을 결정합니다.
/ font-size : 16px 인 경우 /
1rem => 16 1 = 16px
0.8rem => 16 0.8 = 12.8px
3rem => 16 3 = 48px
오늘도 정말 많은 것들을 배웠다. css를 활용하면 정말 다양한 방면으로 웹 화면을 디자인 할 수 있겠다는 걸 느꼈다. 이 많은 것들은 절대로 암기할 수 없다. 실무에 자주 나오고 인기있는 것들은 자주 사용하다 보면 익숙해지고 저절로 외워질거고, 그렇지 않은 것들은 필요할때마다 구글 선생님의 도움을 받으면 될 것 같다.
-CSS 2일차 끝-
