[Day3] HTML문서 해부, css선택자, 단위

💀TIL

HTML 문서 해부

🕘 HTML 문서 해부

<!DOCTYPE html>

‘이 문서는 html Living Standard 문서!라는 의미

<html>

HTML 문서의 최상단 요소
lang 속성을 통해 주 언어 설정이 가능하다.
언어코드(소문자) - 국가코드(대문자)
- ko-KR 대한민국
- en-US 미국, en-GB 영국, en-PH 필리핀

<head>

기계가 식별할 수 있는 문서 정보(메타데이터)를 담는다.
meta 메타데이터: 어떤 목적을 위해 만들어진 데이터
- charset="utf-8" : 문자 코드 설정
- utf-8: 전 세계적인 언어들 지원, 국제적인 코드 규약

🕚 선택자

전체 선택자

head를 포함한 HTML 문서 내의 모든 요소 선택

* {
	margin:0;
	padding:0;
}

타입 선택자(태그 선택자or 요소 선택자)

특정 태그 선택

h1 {
	font-weight:bold;
}
p{
	font-size: 24px;
}

아이디 선택자 #

HTML 페이지 내 id는 유일해야한다

<header id="header">
...
</header>

#header {
	padding: 10px;
}

클래스 선택자 .

클래스 선택자는 여러개 존재 가능

<h1 class="hello">hello wolrd</h1>

.hello {
	border: 1px solid black;
}

특성 선택자 []

주어진 특성을 가진 모든 요소를 선택

[type="button"]{
	border:0;

}

그룹 선택자 ,

h1 {font-weight:bold;}
h2 {font-weight:bold;}
h3 {font-weight:bold;}

h1, h2, h3{ font-weight:bold;}

복합 선택자

자손 선택자

공백 띄어쓰기를 통해 구분
자식, 자손 모두 선택가능

section p{
	border:0;
}

자식 선택자 >

자손은 선택 불가능

section > p{
  color:royalblue;
}

일반 형제 선택자

h1 ~ p{
  text-decoration:underline;
}

인접 형제 선택자

h1 가까이에 있는 p 에게 적용

h1 + p{
  background:yellow;
}

🕜 단위

단위

절대 길이 단위: px (cn, mm, in ...)
상대 길이 단위: %, vw, vh, em, rem

Pixel (Picture + Element)
고정된 값, 디바이스 화면에서 이미지를 표현하는 가장 작은 단위
다양한 디바이스가 생겨나며 픽셀 밀도가 다양해졌다. ->
절대 단위의 값 사용 시 디바이스 별로 위치, 크기가 달라져 px단위만 사용시 문제 발생

부모 요소를 기준으로 하는 백분율 단위

vw, vh

뷰포트 넓이, 높이를 기준으로 하는 백분율 단위
(화면) (w) (h)
1vw = 화면의 1%

vmin, vmax

화면의 넓이와 높이 중 min, max 값을 기준으로 하는 백분율

부모요소로부터 상속받은 요소의 글자 크기를 기준으로 하는 배수 단위

rem

root em
최상의 요소 <html> 의 글자 크기를 기준으로 하는 배수 단위
<html> 기본 폰트 사이즈는 16px

html{
    font-size:10px;
}


.em{
    font-size: 2em;
    /* 20px */
}

.em .btn1{
    font-size: 1.5em;
    /* 
    html 의  font-size :10 px
    부모인 em은 2배인 20px
    현재 30px
     */
}

.rem{
    font-size: 2rem;
    /* 20px */
}

.rem .btn1{
    font-size: 3rem;
    /* rem은 html 기준으로 글자 크기 
    html : 10px
    2rem: 상속 없이 2배
    3rem: 30px
    */
}

🙉 Review

1일 1커밋 완료!
em과 rem 에 대해 velog 작성을 해보도록 하좌

8시간 앉아서 공부하는게 재밌다 프론트엔드 하길 잘한 듯 싶다. 🙉
대학교 교수님들의 웹 혐오(ㅋ ㅋ , ,)가 심해서 웹 개발 수업도 없었고 웹 개발 한다고 하면 그거 굶어죽는다고
맨날 라즈베리파이랑 아두이노 하라했는데 난 그거 했으면 노잼이라 진즉 탈주했을거다..
대학교 멋사 동아리 해본 경험이 얼마나 값진 것이었는지 다시 한번 깨닫는 하루였다.
멋사 동아리 안했다면 난 지금쯤 뭐한다고 하고 있었을까😶‍🌫️

'멋쟁이사자처럼 FE 5기 > TIL' 카테고리의 다른 글

[Day6] 레이아웃, 시맨틱 태그, 웹 접근성, float (0)	2023.03.07
[Day5] 이미지 태그와 position, z-index (0)	2023.03.06
[Day4] 목록 태그, CSS 가상 선택자, Box Model (0)	2023.03.03
[Day2] CS상식 / Git, GitHub 기초 / VSC 기본 (0)	2023.03.01
[Day1] 멋쟁이 사자처럼 프론트엔드 스쿨 5기 (0)	2023.03.01