나중에 내가 다시 보려고 정리하는 패스트캠퍼스 리액트 강의 중 HTML & CSS
강의자료: https://heropy.blog/2019/04/24/html-css-starter/
강의영상: 패스트캠퍼스 프론트엔드 개발 올인원 패키지 with React Online https://fastcampus.co.kr/
1. HTML 문법
◾️ 기본 형태
- 태그는 각자의 의미를 가지고 있고 다음과 같은 형태를 가짐
- 태그는 열리고 닫히는 구조를 가지고 있고 이는 한 쌍임(시작하고start 종료되는end 구조라고 하기도 함)
- 시작하는 태그부터 종료되는 태그까지의 한 세트를 요소라고 함
<TAG>CONTENT</TAG> # 이를 하나의 요소라고 함
<h1>토끼와 거북이</h1> # 제목1~6
<p>옛날 옛적에 토끼와 거북이가 살았습니다...</p> # 문단
◾️ 속성(attribute)과 값(value)
<TAG 속성="값"><TAG>
<img src="./my_photo.jpg" alt="내 프로필 사진" />
<div class="name">홍길동</div>
<!-- 다음과 같이 이해할 수 있습니다. -->
<이미지삽입 소스위치="./my_photo.jpg" 대체텍스트="내 프로필 사진" />
<의미없는분할 태그별명="name">홍길동</의미없는분할>- <img />는 이미지를 삽입할 때 사용하는 태그
- <img />는 닫히는 태그가 없이 끝나는 빈 태그(Empty Tag)
- TAG 이름: img, 속성: src(source, 삽입할 이미지의 경로를 지정), 속성: alt(alternative, 이미지를 출력하지 못하는 상황에 이미지 대신 보여질 텍스트를 지정)
- <div></div>는 의미를 가지지 않는 태그로 어떤 내용이든 묶어낼(Wrap) 수 있음
◾️ 부모와 자식 요소
- 태그A가 태그B의 콘텐츠로 사용되면, 태그B는 태그A의 부모 요소, 태그A는 태그B의 자식 요소라고 함
<PARENT>
<CHILD></CHILD>
</PARENT>
◾️ 빈 태그
- 닫히는 태그가 없는 태그
- 대부분의 경우 속성과 값의 기능을 확장해서 빈 태그와 함께 사용함
<!-- `/`가 없는 빈 태그 -->
<TAG>
<!-- `/`가 있는 빈 태그 -->
<TAG/>
<TAG />2. HTML 문서의 범위
<!DOCTYPE html>
<html>
<head>
문서의 정보
</head>
<body>
문서의 구조
</body>
</html>◽️ <html> 태그
- HTML 문서의 전체 범위를 지정
- 웹 브라우저가 해석해야 할 HTML 문서가 어디에서 시작하며, 어디에서 끝나는지 알려주는 역할
◽️ <head> 태그
- HTML 문서의 정보 범위를 지정
◽️ <body> 태그
- HTML 문서의 구조 범위를 지정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="홍길동">
<meta name="description" content="우리 사이트가 최고!">
<title>내 사이트</title>
<link rel="stylesheet" href="./css/main.css">
<script src="./js/main.js"></script>
</head>
<body>
<section>
<h1></h1>
<div>
<ul>
<li></li>
<li></li>
</ul>
</div>
</section>
</body>
</html>
◽️ DOCTYPE(DTD, 버전 지정)
- DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의
- 웹 브라우저에 제공할 HTML 문서를 어떤 HTML 버전의 해석 방식으로 구조화하면 되는지를 알려줌
- 현재의 표준 모드는 HTML5
<!-- HTML 5 -->
<!DOCTYPE html>
<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. HTML 문서의 정보
1) <head></head> 안에서 사용하는 태그들
◾️ TITLE(웹 페이지의 제목) 태그
- HTML 문서의 제목을 정의
- 웹 브라우저의 각 사이트 탭에서 이름으로 표시됨
<head>
<title>네이버</title>
</head>
◾️ META(웹 페이지의 정보) 태그
- HTML 문서(웹페이지)에 관한 정보(표시 방식, 제작자(소유자), 내용, 키워드 등)를 검색엔진이나 브라우저에 제공
- 빈 태그
<head>
<meta charset="UTF-8">
<meta name="author" content="홍길동">
<meta name="description" content="우리 사이트가 최고!">
</head>
<!-- 다음과 같이 이해할 수 있습니다. -->
<문서의정보범위>
<정보 문자인코딩방식="UTF-8">
<정보 정보종류="사이트제작자" 정보값="홍길동">
<정보 정보종류="사이트설명" 정보값="우리 사이트가 최고!">
</문서의정보범위>
- META 태그에서 사용되는 속성들
| 속성 | 의미 | 값 |
| charset | 문자 인코딩 방식 | UTF-8, EUC-KR 등.. |
| name | 검색엔진 등에 제공하기 위한 정보의 종류(메타 데이터) | author, description, keywords, viewport 등.. |
| content | name 이나 http-equiv 속성의 값을 제공 |
◾️ LINK(CSS 불러오기) 태그
- 외부 문서를 연결할 때 사용
- 특히 HTML 외부에서 작성된 CSS 문서나 ICON을 불러와 연결할 때 사용
- JS 문서는 불러오지 못함
- 빈 태그임
- 속성 rel은 필수임
<head>
<link rel="stylesheet" href="./css/main.css">
<link rel="icon" href="./favicon.png">
</head>
<!-- 다음과 같이 이해할 수 있습니다. -->
<문서의정보범위>
<외부문서연결 관계="CSS" 문서경로="./css/main.css">
<외부문서연결 관계="사이트대표아이콘" 문서경로="./favicon.png">
</문서의정보범위>
◾️ STYLE(CSS 작성하기) 태그
- CSS를 외부 문서에서 작성하여 연결하지 않고, HTML 문서 내부에 직접 작성할 때 사용
◾️ SCRIPT(JS 불러오거나 작성하기) 태그
- <script> 태그로 JS를 불러오거나 JS를 직접 작성할 수 있음
2) <body></body> 안에서 사용하는 태그들
◾️ DIV(막 쓰는 태그)
- 명확한 의미를 가지지 않기 때문에 정말 많은 경우 단순히 특정 범위를 묶는(wrap) 용도로 사용
◾️ IMG(이미지 넣는 태그)
- <img>는 HTML에 이미지를 삽입할 때 사용
- 웹 페이지에 이미지를 삽입하는 방식은 크게 2가지로, ‘HTML에서 삽입(IMG)’과 ‘CSS에서 삽입(background)’
<body>
<img src="./kitty.png" alt="냥이">
</body>
<!-- 다음과 같이 이해할 수 있습니다. -->
<body>
<이미지 경로="./kitty.png" 대체텍스트="냥이">
</body>| 속성 | 의미 | 값 |
| src | (필수)이미지의 URL | URL |
| alt | (필수)이미지의 대체 텍스트(alternate)를 지정 |
4. 웹 표준 검사하기
- HTML 문서가 표준에 부합하는지 테스트를 해볼 수 있음
- 완벽하진 않지만, 기본적인 검사들을 해줌
'Develop > HTML & CSS' 카테고리의 다른 글
| Part6. HTML 요소 - 인라인 텍스트 & 수정 (0) | 2021.07.10 |
|---|---|
| Part5. HTML <body> 요소 - 콘텐츠 구분 & 문자 콘텐츠 (0) | 2021.07.10 |
| Part4. HTML 요소 - 주요범위 & 메타데이터 (0) | 2021.07.10 |
| Part3. HTML & CSS 첫걸음/CSS (0) | 2021.07.04 |
| Part1. HTML & CSS 첫걸음 (0) | 2021.07.02 |