1. 브라우저 스타일 초기화
CDN reset.css
- Chrome, IE, 사파리 등 각 브라우저마다 기본으로 제공하는 스타일이 존재
- CSS default 값이 모두 다르기 때문에 초기화하고, 브라우저 간의 차이를 없앰
- 크로스 브라우징 구현할 때 유용함
-> 즉, 0에서부터 디자인 시작
- reset.css를 수정할 일은 거의 없으므로 경량화 버전 reset.min.css를 Copy HTML
- main.css를 link하기 전에 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div>HELLO WORLD</div>
</body>
</html>
* 적용 전 *
- margin 자동 생성
* 적용 후 *
- 기본 설정 초기화
2. Emmet
- HTML, XML, XSL 문서 등 편집할 때 빠른 코딩을 위해 사용하는 플러그인
- VScode에서 사용하는 예시
1) HTML5 boilerplate(표준 문서)
"!" 입력 후, "TAP", "HTML" 입력 후, "HTML:5" 선택
2) 하위 요소 생성
ul > li
3) 동급 요소 생성
section > article > h1 + p
4) 반복 태그 생성
ul > li * 7
5) class, id 설정
ul#fruit > li.item*7
6) 넘버링 설정
ul > li*3>{$}
3. DOCTYPE
- 문서의 HTML 버전을 지정
- DTD, Document Type Definition 은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 html 버전의 해석 방식으로 페이지를 이해하면 되는지 알려주는 용도
4. 태그
(1) META 태그 viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 모바일/반응형 브라우저의 뷰포트(스크롤을 움직이지 않고 보이는 화면) 크기 조절을 위해 사용
- width = device-width : 페이지 너비가 각 장치의 화면 너비를 사용
- initial-scale=1.0 : 브라우저에서 페이지를 처음 로드할 때 확대/축소 값 설정, 1.0은 100%를 의미함
(2) 인라인 요소 / 블럭 요소
[인라인 요소 : 글자를 만들기 위한 요소, 자동으로 width, height 줄어듦]
1) span 태그
- 아무 의미 없이 콘텐츠 영역을 구분하는 용도
- 요소가 수평으로 쌓임
- 하나의 글자처럼 취급되기 때문에 width, height 적용안됨
- margin(외부 여백), padding(내부 여백)으로 좌우 여백 조절(인라인은 자동으로 줄어들기 때문에 위아래는 적용 안됨)
- 자식 요소로 블럭 요소는 사용 불가능(글자 안에는 상자를 넣을 수 없기 때문)
- 공백 차이 1 : 가운데 공백 없음
<span>hello</span><span>hello</span>
- 공백 차이 2 : 가운데 공백 있고, span의 글자 크기만 따로 css 설정할 경우에 가운데 공백은 적용이 안됨.
body css의 글자 크기를 수정하면 전체 글자 크기가 수정돼서 공백도 수정됨
<span>hello</span>
<span>hello</span>
2) Image 태그
- 간혹 이미지가 엑박으로 뜨면 alt로 어떤 이미지인지 확인이 가능하기 때문에 src, alt는 필수 속성
- img 요소가 display:block + margin: 0 auto인 경우, width 속성이 없어도 가운데 정렬 가능
- img 태그 겉에 div가 있으면 빈공간이 생김. img 태그에 display : blcok 하면 빈공간 사라짐
3) Anchor 태그
- 하이퍼링크 지정 요소
- href에는 프로토콜 입력 필수
-> 프로토콜을 입력하지 않을 경우, naver.com은 상대경로로 해석함.
- 검색창의 경우, 웹브라우저에서 자동으로 프로토콜을 추가해서 입력하지 않아도 됨
4) Break 태그
5) Label 태그
- 라벨 가능 요소(input 태그)의 제목으로 주로 사용
[블럭 요소 : 상자(레이아웃)를 만들기 위한 요소, 가로 너비가 최대한 늘어남]
1) div 태그
- 아무 의미 없이 콘텐츠 영역을 구분하는 용도
- 요소가 수직으로 쌓임
- 부모 요소의 크기 만큼 자동으로 늘어나고, 포함한 콘텐츠 크기만큼 자동으로 줄어듦
- weight, height, margin, padding 모두 적용됨
- 인라인 요소와 다르게 시각적으로 제어하는 부분에서는 블록 요소가 유리
- 자식 요소로 블록, 인라인 모두 포함 가능
2) Heading 태그
- h1, h2... h6 으로 숫자가 작을 수록 중요한 제목
3) Paragraph 태그
- 글자가 여러개인 문장으로 p 태그는 블록 요소
- p 태그 안에 div 요소 넣으면 무조건 줄바꿈
4) Unordered List 태그
- ul은 순서가 필요없는 목록의 집합
5) List Item 태그
- li는 목록 내 각 항목
[인라인-블럭 요소]
Input 태그
- 사용자가 데이터를 입력하는 요소
- 인라인 요소로 수평으로 값이 쌓이지만, 블록 요소처럼 가로/세로, 위/아래 여백도 사용 가능
- check box/radio 타입 할 땐 label로 감싸기 -> 그럼 label을 선택해도 input 체크박스에 해당됨
- radio 타입은 체크 해제를 할 수 없어서 무조건 name으로 그룹을 만들어야 함. 그래야 둘 중 하나만 선택됨
(3) data-이름="데이터"
- 요소에 데이터를 지정
- <태그 data-이름="데이터"></태그>
- js로 조작 가능
(4) script 태그 - defer 속성
- html 페이지가 모두 로드된 후에 삽입한 외부 스크립트가 실행되도록 함
- src가 없으면 defer 속성은 무시됨
'HTML, CSS' 카테고리의 다른 글
| [CSS] Sprite Image, Animation (1) | 2024.01.11 |
|---|---|
| [HTML] 라이브러리 및 속성 (0) | 2024.01.11 |
| [CSS] 속성 2 (0) | 2024.01.11 |
| [CSS] 속성 1 (0) | 2023.12.28 |
| [CSS] 선언 방식, 선택자, 상속, 명시도 (0) | 2023.12.28 |
1. 브라우저 스타일 초기화
CDN reset.css
- Chrome, IE, 사파리 등 각 브라우저마다 기본으로 제공하는 스타일이 존재
- CSS default 값이 모두 다르기 때문에 초기화하고, 브라우저 간의 차이를 없앰
- 크로스 브라우징 구현할 때 유용함
-> 즉, 0에서부터 디자인 시작
- reset.css를 수정할 일은 거의 없으므로 경량화 버전 reset.min.css를 Copy HTML
- main.css를 link하기 전에 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div>HELLO WORLD</div>
</body>
</html>
* 적용 전 *
- margin 자동 생성
* 적용 후 *
- 기본 설정 초기화
2. Emmet
- HTML, XML, XSL 문서 등 편집할 때 빠른 코딩을 위해 사용하는 플러그인
- VScode에서 사용하는 예시
1) HTML5 boilerplate(표준 문서)
"!" 입력 후, "TAP", "HTML" 입력 후, "HTML:5" 선택
2) 하위 요소 생성
ul > li
3) 동급 요소 생성
section > article > h1 + p
4) 반복 태그 생성
ul > li * 7
5) class, id 설정
ul#fruit > li.item*7
6) 넘버링 설정
ul > li*3>{$}
3. DOCTYPE
- 문서의 HTML 버전을 지정
- DTD, Document Type Definition 은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 html 버전의 해석 방식으로 페이지를 이해하면 되는지 알려주는 용도
4. 태그
(1) META 태그 viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 모바일/반응형 브라우저의 뷰포트(스크롤을 움직이지 않고 보이는 화면) 크기 조절을 위해 사용
- width = device-width : 페이지 너비가 각 장치의 화면 너비를 사용
- initial-scale=1.0 : 브라우저에서 페이지를 처음 로드할 때 확대/축소 값 설정, 1.0은 100%를 의미함
(2) 인라인 요소 / 블럭 요소
[인라인 요소 : 글자를 만들기 위한 요소, 자동으로 width, height 줄어듦]
1) span 태그
- 아무 의미 없이 콘텐츠 영역을 구분하는 용도
- 요소가 수평으로 쌓임
- 하나의 글자처럼 취급되기 때문에 width, height 적용안됨
- margin(외부 여백), padding(내부 여백)으로 좌우 여백 조절(인라인은 자동으로 줄어들기 때문에 위아래는 적용 안됨)
- 자식 요소로 블럭 요소는 사용 불가능(글자 안에는 상자를 넣을 수 없기 때문)
- 공백 차이 1 : 가운데 공백 없음
<span>hello</span><span>hello</span>
- 공백 차이 2 : 가운데 공백 있고, span의 글자 크기만 따로 css 설정할 경우에 가운데 공백은 적용이 안됨.
body css의 글자 크기를 수정하면 전체 글자 크기가 수정돼서 공백도 수정됨
<span>hello</span>
<span>hello</span>
2) Image 태그
- 간혹 이미지가 엑박으로 뜨면 alt로 어떤 이미지인지 확인이 가능하기 때문에 src, alt는 필수 속성
- img 요소가 display:block + margin: 0 auto인 경우, width 속성이 없어도 가운데 정렬 가능
- img 태그 겉에 div가 있으면 빈공간이 생김. img 태그에 display : blcok 하면 빈공간 사라짐
3) Anchor 태그
- 하이퍼링크 지정 요소
- href에는 프로토콜 입력 필수
-> 프로토콜을 입력하지 않을 경우, naver.com은 상대경로로 해석함.
- 검색창의 경우, 웹브라우저에서 자동으로 프로토콜을 추가해서 입력하지 않아도 됨
4) Break 태그
5) Label 태그
- 라벨 가능 요소(input 태그)의 제목으로 주로 사용
[블럭 요소 : 상자(레이아웃)를 만들기 위한 요소, 가로 너비가 최대한 늘어남]
1) div 태그
- 아무 의미 없이 콘텐츠 영역을 구분하는 용도
- 요소가 수직으로 쌓임
- 부모 요소의 크기 만큼 자동으로 늘어나고, 포함한 콘텐츠 크기만큼 자동으로 줄어듦
- weight, height, margin, padding 모두 적용됨
- 인라인 요소와 다르게 시각적으로 제어하는 부분에서는 블록 요소가 유리
- 자식 요소로 블록, 인라인 모두 포함 가능
2) Heading 태그
- h1, h2... h6 으로 숫자가 작을 수록 중요한 제목
3) Paragraph 태그
- 글자가 여러개인 문장으로 p 태그는 블록 요소
- p 태그 안에 div 요소 넣으면 무조건 줄바꿈
4) Unordered List 태그
- ul은 순서가 필요없는 목록의 집합
5) List Item 태그
- li는 목록 내 각 항목
[인라인-블럭 요소]
Input 태그
- 사용자가 데이터를 입력하는 요소
- 인라인 요소로 수평으로 값이 쌓이지만, 블록 요소처럼 가로/세로, 위/아래 여백도 사용 가능
- check box/radio 타입 할 땐 label로 감싸기 -> 그럼 label을 선택해도 input 체크박스에 해당됨
- radio 타입은 체크 해제를 할 수 없어서 무조건 name으로 그룹을 만들어야 함. 그래야 둘 중 하나만 선택됨
(3) data-이름="데이터"
- 요소에 데이터를 지정
- <태그 data-이름="데이터"></태그>
- js로 조작 가능
(4) script 태그 - defer 속성
- html 페이지가 모두 로드된 후에 삽입한 외부 스크립트가 실행되도록 함
- src가 없으면 defer 속성은 무시됨
'HTML, CSS' 카테고리의 다른 글
| [CSS] Sprite Image, Animation (1) | 2024.01.11 |
|---|---|
| [HTML] 라이브러리 및 속성 (0) | 2024.01.11 |
| [CSS] 속성 2 (0) | 2024.01.11 |
| [CSS] 속성 1 (0) | 2023.12.28 |
| [CSS] 선언 방식, 선택자, 상속, 명시도 (0) | 2023.12.28 |
