2021.01.08 금
-------------------html------------------------
<!DOCTYPE html> : 문서타입이라는 걸 알려주는 기본 라인
<html lang="en"> : 문서내에서 사용할 언어 지정(한국 : ko)
<head></head> : 브라우저에 표시되는 내용은 아님. 문서의 기본 설정(문자 인코딩 메타파일), 스타일시트 연결 등의 필수적인 역할.
<meta charset ="UTF-8"> : 유니코드 중 가장 널리 사용됨
<meta name="viewport" content="width=device-width, initial-scale=1.0"> : 반응형 웹사이트 만들때 꼭 선언해야함. 뜻 - 기기의 크기와 넓이에 맞춰 표현해라, 1배율로
<meta http-equiv="X-UA-Compatible" content="ie=edge"> : 최신버젼의 브라우저로 랜더링하라
<title> : 문서의 제목을 나타냄
<link rel="stylesheet" href="style.css"> : 스타일시트(css) 연결. href는 상대위치가 디폴트임
------------------css-------------------
css reset : 다양한 브라우저를 위해 기본값을 초기화하는것
nomalize.css : 브라우저의 일관적이지 않은 부분과 버그를 최소화하게 해주는 오픈소스. reset과는 다르게 지우지 않고 보존함
노말라이즈나 리셋을 사용하더라도 각 브라우저의 랜더링 방법이 달아 글씨 크기나 두께 등에 차이가 있을 수 있음.
사용자가 불편함을 느끼지 않을 정도로만 최대한 normalizing하는 것이 목표
box-sizing: border-box or content-box : 길이 값을 보더까지 포함할 것인지 아니면 content만 포함할 것인지 정해야함. border사이즈까지 포함하는 것이 예측하기 쉬움
*{} : 모든 요소에 설정할 값
가상요소를 선택할때는 ::before, ::after을 이용해서 설정할 수 있음
-------------------이론------------------
헤더영역 : 제목, 로고, 짧은 소개말 등을 담는 영역이다. head태그를 이용한다.
navigation bar 영역 : 메뉴, 검색, 페이지 이동 등의 기능을 담고 있는 bar이다. nav태그를 사용한다.
main content 영역 : 본문을 담는 곳. 문서에서 딱 한 번만 사용 가능. main태그 사용
side bar 영역 : 기타 정보나 링크, 광고 등을 담는 곳. navigaion bar와 유사하게 사용될 수 있다. aside태그를 이용한다. main요소 내에 배치되는 경우가 많다.
footer 영역 : 주소, copyright, 연락처 등을 적는 하단 영역. 헤더부분에 비해 중요도가 떨어짐. footer태그 사용.
헤더영역에 navigation bar가 함께 들어가 있는 경우도 많음.
footer영역에 링크를 넣는 형식으로 만들 수도 있음
------------------까먹은거-----------------
float : content를 나눌때 유용. 인자는 left, right. 원래는 수직으로만 div를 쌓을 수 있지만 float를 주면 가로로 배열됨
------------------안되는거-----------------
1. html을 치고 enter키를 누르면 doctype을 비롯한 문서의 기본 태그들이 뜨지 않음. html.json파일을 수정했지만 안됨
해결 : ! + tab 키를 이용하면 됨. 번거롭다..
-------------최종-------------
총 4강(17~20) 수강
vscode extention(snippets, live server) 설치
normalize.css 적용
index.html, style.css로 기본 뼈대 만들었음
'FE > html, css' 카테고리의 다른 글
| HTML 기본, 기초(25~29) (0) | 2021.01.12 |
|---|---|
| HTML 기본, 기초(21~24) (0) | 2021.01.09 |