20221202 HTML/CSS

제가 2022.12.01부터 제로베이스 프론트엔드 스쿨 10기 수강생이 되었는데요.

앞으로 강의 수강 중에 학습한 점이나 기억하고 싶은 부분 등을 이곳에 기록하겠습니다. 

 

시멘틱 태그(sementic tag)란

 

- HTML의 구조를 설계하는데 있어 태그에 의미를 부여 함으로써 사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그

 

시멘틱 태그(sementic tag) 예시

 

<h1> </h1> - 이 페이지에서 최상위 제목을 의미

<nav> <nav> - div 태그와 똑같은데 주요 링크를 모아둔 박스를 의미

<header>, <section>, <footer> , <article>, <aside> - layout 태그

 

a태그

 

1. 절대경로

: 인터넷, url로 접속 가능한 경로

 

2. 상대 경로

: (통상적으로) 개발 환경에서 시작되는 경로

: . 현재 파일이 위치한 경로

: .. 이전 경로 / 상위 경로

: / 구분

 

img 태그

 

<img src="경로" alt="대체 텍스트">

image는 따로 style을 주지 않고 태그 안에서 바로 width, height 값을 줄 수 있다.(video태그도 마찬가지)

 

div 태그

 

- 가상의 경계, 가상의 레이아웃

- display : block;

- class명, id명을 직관적으로 누구나 알아볼 수 있게 작명

- 부모 요소 div에 style 효과를 주면 안에 있는 p 태그는 스타일을 상속받지만 button은 상속받지 않습니다.

 

px, ex, rem

 

- 일반적으로 16px === 1em === 1rem

- em : 부모 태그에게 font-size 속성이 있으면, 그 속성을 1em으로 계산합니다.

- rem : html의 font-size를 기준으로 함

- rem으로 font-size를 줘야 하는 이유 chrome에서 글꼴 크기를 설정하면 자동으로 설정에 맞게 변경됨!!