💡 HTML
텍스트 관련 태그
-
h1 ~ h6 : 제목 태그
-
a : 하이퍼링크를 걸어주는 태그, 인라인 요소
-
p : 문단 태그, 블록 요소
-
br : 줄 바꿈 태그
-
wbr : 현재 요소의 줄 바꿈 규칙으로 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타내는 태그
-
code : 짦은 코드 조각을 작성하는 태그
-
pre : HTML에 작성한 내용 그대로를 표현하는 태그
-
strong : 중대하거나 긴급 콘텐츠를 나타내는 태그로 굵은 글꼴이 기본 적용
-
em : 텍스트의 강세를 나타내는 태그로 기본적으로 기울임 꼴 적영
-
i : 외국어, 등장 인물의 생각 등을 나타내는 태그로 기본적으로 기울임 꼴 적용
-
q : 줄 바꿈이 없는 짦은 이용문 작성 태그
-
blockquote : 긴 이용문 작성 태그
-
cite : 저작물의 출처 표기 태그
-
address : 연락처 정보 태그
-
mark : 하이라이트 텍스트를 정의할 때 사용하는 태그로 형광펜으로 칠한 것처럼 표시
-
abbr : 약어임을 나타내는 태그
-
dfn : 현재 맥락이나 문장에서 정의하고 있는 용어를 나타내는 태그
-
sup : 위 첨자 요소 태그(지수, 서수 표기시 사용)
-
sub : 아래 첨자 요소 태그 (각주, 변수, 화학식 표기시 사용)
-
kbd : 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타내는데 사용하는 태그
목록 관련 태그
ol
정렬된, 순서가 있는 보통 숫자 목록
순서가 중요한 목록에 적용
ul
정렬되지 않은, 보통 불릿으로 표현되는 목록
순서가 중요하지 않는 목록에 적용
li
목록의 항목
단독으로 사용할 수 없고 ol, ul의 자식요소로만 사용 가능
dl
설명 목록
dt - 용어
dd - 용어 설명, 단독 사용 불가능
block
- 언제나 새로운 줄에서 시작하여 좌우 양측으로 최대한 늘어나 가능한 모든 너비 차지
- 앞뒤 요소 사이에 새로운 줄 생성
- 이전 이후 요소 사이에 줄 바꿈 일어남
- 페이지의 구조적 요소를 나타날 때 사용
- 블록요소 -> 인라인요소 안에 중첩 X
인라인요소 -> 블록요소 안에 중첩 O - width, height, padding, border, margin 사용 가능
- 종류 : div, p, li, nav, footer 등
inline
- 항상 블록 레벨 요소 내에 포함
- 컨텐츠에 따라 할당된 공간만 차지
- 문장, 단어 같은 작은 부분에 대해 적용
- 새로운 줄 만들지 않음
- width, height, 상하 margin 사용 불가
padding, border, margin 사용 가능 - 종류 : a, em, strong 등
💡 CSS
단위
- 절대 길이 단위 : px(cm, mm, in, pc, pt...)
- 상대 길이 단위 : %, vw, vh, vmin, vmax, em, rem
px
화면에서 이미지를 표현하는 가장 작은 단위
고정된 값 -> 직관적 사용 가능
%
부모 요소를 기준으로 하는 백분율 단위
vw
뷰포트의 넓이를 기준으로 하는 백분율 단위 (1vw -> 화면의 1%)
vh
뷰포트의 높이를 기준으로 하는 백분율 단위
vmin, vmax
뷰포트의 넓이와 높이 중 가장 작은 값, 큰 값을 기준으로 하는 백분율 단위
em
부모 요소로부터 상속받은 요소의 글자 크기를 기준으로 하는 배수 단위
rem
최상 요소(html)의 글자 크기를 기준으로 하는 배수 단위
가상 클래스 선택자
:first-child
형제 요소 그룹 중 첫번째 요소
:last-child
형제 요소 그룹 중 마지막 요소
:nth-child
형제 사이에서의 순서에 따라 요소 선택
:nth-of-type
형제 그룹 안에서 위치를 기반으로 형제 요소 선택
:only-of-type
동일한 유형의 형제가 없는, 형제 요소 중 유일하게 사용된 태그
:not
부정 선택자
:root
전역 변수를 선언할 대 사용
가상요소( :: )
선택한 요소의 일부에만 스타일을 적용하는 것
ex) ::after, ::before, ::placeholder
CSS 선택자 우선순위
- 후자 우선의 원칙
동일한 선택자에 동일한 속성이 사용되었을 경우 뒤에 적힌 속성을 따름
- 구체성의 원칙
어느 선택자가 더 구체적인가에 대한 가중치를 두어 따름
inline스타일 속성 > id(#) > class(.), 가상 클래스, 속성 선택자 > type(tag), 가상 요소 선택자 - 중요성의 원칙
!important
다른 어떤 선언보다도 우선
CSS Box Model
display 속성
block
요소 전후에 줄 바꿈 생성
inline
줄 바꿈 없이 한 줄에 놓임
inline-block
inline의 특징을 갖추면서 block과 같이 박스 모델의 width, height, margin, padding 값들을 모두 설정 가능
flex
내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 단방향(1차원적)으로 설정
grid
내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 양방향(2차원적)으로 설정
none
접근성 트리에서 해당 요소가 제거되며 해당 요소 및 해당 하위 요소가 사라지고, 스크린 리더에서도 읽히지 않음
출처 : WENIV
