클라우딩 어플리케이션 엔지니어링 TIL Day 2
# HTML
1. 기본 문법
'<' '>' 를 사용해서 그 안에 태그 이름을 넣는다
콘텐츠를 가지는 태그와 콘텐츠를 가지지 않는 태그가 있음
콘텐츠를 가지는 태그 : <div> 콘텐츠 </div>
콘텐츠를 가지지 않는 태그 : <br />
2. 속성과 값
태그는 기본적으로 속성과 그 속성에 따른 값을 가짐
어떤 태그를 쓰느냐에 따라서 속성과 값이 달라짐
ex) <div title="제목"> Content </div?
title : 속성, "제목" : 값
3. HTML 기본 문서
<!DOCTYPE html>
<!-- 문서 버전 -->
<html lang="en">
<!-- HTML 문서 시작 선언 및 문서 기본 언어 설정 -->
<head>
<!-- 문서에 필요한 정보가 기입되는 곳 <head></head> -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML만들어보기</title>
<!-- 문서 제목 -->
</head>
<body>
안녕하세요? 반갑습니다'
<!-- 문서 내용 -->
</body>
</html>
4. 부모요소 자식요소
- 부모 태그 안에 자식 태그 존재
- 들여쓰기를 보고 어떤 것이 부모 태그이고 자식 태그인지 알 수 있음
- 때문에 들여쓰기에 신경쓰자
5. 주석
개발자가 코드 내에 입력한 메모
<!-- 주석 내용 -->
로 주석 입력 가능
- 중요한 정보는 주석으로 절대 작성 XXX
- 단축키 : ctrl + k + c
# HEAD
1. <head>
사람의 눈에는 보이지 않지만 "문서의 정보" 가 담기는 영역
<head> 가 가질 수 있는 정보의 종류
- 타이틀
- 메타 데이터
- 인코딩 정보
- 문서 설명
- 문서 작성
인코딩이란?
charset 은 문서에서 허용하는 문자의 집합 - UTF8
charset에 선언된 문자의 집합 규칙에 따라 문서에서 사용할 수 있는 문자가 제한
- CSS, Script
2. style, link, script
문서 내용의 외형에 영향을 주는 태그들
<style> : css 지정해주는 태그
<style>
body {
color: blue;
}
</style>
<link> : 콘텐츠를 가지지 않는 단일 태그
다른 파일을 링크시켜주는 태그
<link rel="stylesheet" href="style.css" />
<script> : 콘텐츠 방식과 링크 방식 둘 다 존재
파일확장자 : js
# BODY
1. <body>
사람 눈에 실제로 보이는 콘텐츠 영역
2. block, inline, inline-block
block : 블록 레벨 요소
- 레고 블록처럼 쌓이며 하면 너비가 꽉 차는 요소
- 블록의 크기와 내/외부 여백 지정 가능
- 페이지의 구조적 요소
ex) <div>, <article>, <section>
inline : 인라인 레벨 요소
- 블록 요소 내에 포함되는 요소
- 크기 조절 불가능
- 주로 문장, 단어 같은 작은 부분에 사용
- 블록 레벨 요소를 자식으로 가질 수 없
ex) <span>, <a>
inline-block : 글자처럼 취급, block 태그의 성질을 가짐
- CSS로 성질을 변경한 것, 의미상 인라인 레벨
<!DOCTYPE html>
<!-- 문서 버전 -->
<html lang="en">
<!-- HTML 문서 시작 선언 및 문서 기본 언어 설정 -->
<head>
<!-- 문서에 필요한 정보가 기입되는 곳 <head></head> -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML만들어보기</title>
<link rel="stylesheet" href="style.css" />
<!-- 문서 제목 -->
</head>
<body>
<div>블록</div>
<div>블록</div>
<div>블록</div>
<div>블록</div>
<!-- 블록 레벨 요소는 계층으로 쌓임 -->
<span>인라인</span>
<!-- 인라인 레벨 요소는 콘텐츠가 가진 크기만큼만 차지함 -->
<div>다시 블록 레벨 요소</div>
</body>
</html>
# 레이아웃
1. <div>
가장 흔히 사용되는 레이아웃 태그
단순히 구역 나누는 태그
2. <header>
주요 정보를 담는 태그
3. <footer>
페이지 바닥줄
부차적인 정보 담는 태그
4. <main>
주요 콘텐츠를 담는 태그
한 페이지에 한번만
5. <section>
콘텐츠의 구역을 나누는 태그
6. <article>
독립적인 문서를 전달하는 태그
7. <aside>
문서의 주요 내용에 간접적인 정보를 전달하는 태그
ex) 쇼핑몰 홈페이지 오른쪽 "최근 본 상품"
# 레이아웃 태그를 왜 사용해야 할까?
HTML5 이전에는 <div>를 사용해서 단순하게 나눴음 -> 검색엔진이 어느 부분이 어떤 역할을 하는지 알 수 없었음
HTML5 부터 의미있는 문서를 만들기 위한 Semantic 마크업 사용 시작
새롭게 배운 것 & 깨달은 것
레이아웃 태그를 왜 사용해야 하는지 이유를 모른 채 사용했는데 시맨틱한 마크업이 중요하다는 것을 알게 되었다
HTML의 기본에 대해서 정리할 수 있는 시간이었다