오늘 느낀점
📌 html 태그 모두 암기하려고 애쓰지말자 (자주쓰는거 위주로만 알고있자!)
📌 CSS 레이아웃(float,flex,position..) 관련 복습은 해도해도 나쁠거 없다!
1️⃣ html 기본구성
| 태그명 | 설명 |
|---|---|
<head></head> | 정보 관련 태그 |
<meta> | 작자, 내용, 키워드 같은 여러 정보를 검색엔진이나 브러우저에게 제공 name → author, viewport charset(인코딩) → 주로 utf-8 |
<title> | 웹프로젝트의 제목 |
<link> | - rel → stylesheet(css파일) , icon(파일명은 대부분 favicon.png라고 한다)- <script> - <style> : CSS 임베디드 방식 |
<body></body> | 구조 관련 태그 |
<html lang="en"> | 영어기반 사이트 |
<html lang="ko"> | 한국어기반 사이트 |
많이 쓰는 태그위주로 알고있자!
📍 [출처 : https://www.advancedwebranking.com/html/]
- 그외
ol: 넘버링 되어있는 목록ul: 목록
Emmet 사용하기
- html 코드 작성시 아주 유용하다 (하드코딩를 피할 수 있는...)
lorem*300,li*3$: 숫자 카운팅할때 사용 (기본값은 1부터 시작)h$*5: 1부터 5h$@-*5: 5부터 1
그외 Emmet 관련 문서 확인하기
2️⃣ CSS
css 적용 방법 3가지
- 인라인 스타일 : 해당 태그만
- 임베디드 방식 : 해당 페이지의 모든 페이지
- 외부링크 방식 : 사이트 전체의 모든 페이지
사이즈
- px : 고정값
- %: 반응형에 적합
- em : 폰트사이즈 * 숫자 ! (가장 근접한 곳에 있는 폰트 사이즈)
- 반응형에 많이 쓰임
font-size가 14px 일때 10em 은 14*10
- rem : 근접한곳이 아닌 root에 있는 폰트사이즈 (최상위에 적혀있는 폰트사이즈)
- html에 적지 않으면 브라우저 기본폰트인 16px에 적용된다
- root에 있는 font-size * 숫자
- View height, View Width (vh, vw)
- 50vh : 화면 넓인가 1920이라면 1920을 100으로 치고 그중 50
- 결국 1920/2%와vh,vw의 차이는 부모요소의 상속 여부vw는 상위요소 상속이 아니라 무조건 브라우저의 뷰포트의 크기에따라 결정된다.
Float와 clear
float: left, right (왼쪽 혹은 오른쪽으로 정렬시킴)- float 을 사용한후 clear을 해주지 않는 다면 다음 태그에 영향
- float 속성을 준 요소의 자리에 그대로 다음요소가 겹치는 경우가 있기때문에
- float 을 사용한후 clear을 해주지 않는 다면 다음 태그에 영향
clear: left, right, both
UX에 관심많은 프론트 엔드 개발자입니다:)