프로그래머스 - 클라우딩 어플리케이션 엔지니어링 TIL 2일차 HTML

석진·2023년 12월 19일

html 클라우딩 어플리케이션 프로그래머스 데브코스

프로그래머스 데브코스

목록 보기

2/19

HTML

📌 HTML

HTML 기본 문법

속성과 값

HTML 기본 문서

부모요소 자식요소

주석

HTML 기본 문법
- 콘텐츠를 가지는 태그
```
<div> 콘텐츠 </div>
```
- 콘텐츠를 가지지 않는 태그
```
<br/>
```
속성과 값

<div title="제목">content</div>. title: 속성 , 제목: 값

HTML 기본 문서

<!DOCCTYPE html>   -> 문서버전 
<html lang="ko">  -> html 문서 시작 선언 및 문서 기본 언어 설정
 <head>           -> 문서에 필요한 정보가 기입되는 곳 
  <title>문서 제목</title> -> 문서의 제목
 </head> -> 실제 사용자가 눈으로 볼 수 있는 문서의 내용이 입력되는 곳 
 
 <body>
  안녕하세요!
 </body>
</html>

부모요소 자식요소
- 들여쓰기를 통해 구분할 수 있다.
- 올바른 코드의 깊이, depth 를 지키는 건 중요하다.

주석
- 개발자가 코드 내에 입력한 메모
```
<! -- 주석내용 -->  기본사용법  시작태그 
```
- 사용자에게는 보이지 않는 주석 이지만, 소스 보기나 개발자 도구로 보면 코드가 보이니 주의!

📌 HEAD

head

style, link, script

head
- 사람 눈에 보이지 않는 '문서의 정보' 가 담기는 영역
- head가 가질 수 있는 정보의 종류
  - 타이틀
  - 메타 데이터
  - 인코딩 정보
    - 'charset '은 문서에서 허용하는 문자의 집합' 이다.
  - 문서 설명
  - 문서 작성자
  - css, javascript

style, link, script

문서 내용이 외형에 영향을 주는 태그들

<link rel ="stylesheet" href="style.css" />
 <script scr="script.js"></script>

<script>
 const hello = 'world';
 console.log(hello);
</script>

📌 BODY

body

block, inline, inline-block

body
- 사람 눈에 실제로 보이는 콘텐츠 영역
block, inline, inline-block
- block
  - 레고 블록처럼 차곡차곡 쌓이고 화면 너비가 꽉 차는 요소
  - 블록의 크기와 내/ 외부에 여백을 지정할 수 있고 일반적으로 페이지의 구조적 요소를 나타낸다.
  - 인라인 요소를 포함할 수 있으나, 인라인 요소에 포함될 수 없다.
  - 대표적인 블록 레벨 요소
  - div, article, section
- inline (인라인 레벨 요소)
  - 블록 요소 내에 포함되는 요소.
  - 주로 문장, 단어 같은 작은 부분에 사용되며 한 줄에 나열된다.
  - 좌/우에 여백을 넣는 것만 허용된다.
  - 대표적인 인라인 레벨 요소
  - span, a , strong
- inline-block
  - 글자처럼 취급되나, block 태그의 성질을 가지는 요소.
  - block과 마찬가지로 크기와 내/외부 여백을 지정할 수 있다.
  - css로 성질을 바꾼 것이기 때문에 의미상 인라인 레벨 요소이다.

📌 레이아웃

콘텐츠 분할 요소 (div>

레이아웃 태그 #1 (header, footer, main)

레이아웃 태그 #2(section, article,. aside)

div
- 가장 흔히 사용되는 레이아웃 태그로 단순히 구역을 나누기 위한 태그
header
- 블로그 글 제목, 작성일 등의 주요 정보를 담는 태그
main
- 페이지의 가장 큰 부분으로 사이트의 내용 즉, 주요 콘텐츠를 담는 태그
section
- 콘텐츠의 구역을 나누는 태그로, 신문지에서 여러 기사가 각자의 구역에서 각자의 정보를 전달하는 의미와 비슷한 역할을 하는 태그
article
- 블로그 포스트, 뉴스 기사와 같은 독립적인 문서를 전달하는 태그
aside
- 문서의 주요 내용에 간접적인 정보를 전달하는 태그로 쇼핑몰의 오른쪽에 따라다니는 '오늘 본 상품' 같은 것으로도 사용할 수 있다.

레이아웃 태그를 왜 알아야 할까?

html5 부터 태그를 의미 있게 사용하기 위해 'semantic(시멘틱)' 태그를 사용하여 문서 구조를 작성

단순히 의미 구분자인 div 를 남발하지 않고 적절한 태그를 사용하여 웹 문서다 담은 정보와 구조를 의미 있게 전달

시멘틱 하게 마크업을 함으로써 검색엔진의 검색 순위에 가산점을 얻거나 홈페이지의 로딩 속도를 높임

석진

내 서비스 만들기

이전 포스트

프로그래머스 - 클라우딩 어플리케이션 엔지니어링 1기 TIL 1일차

다음 포스트

프로그래머스 - 클라우딩 어플리케이션 엔지니어링 TIL 2일차 HTML

프로그래머스 데브코스

HTML

📌 HTML

HTML 기본 문법

속성과 값

HTML 기본 문서

부모요소 자식요소

주석

📌 HEAD

head

style, link, script

📌 BODY

body

block, inline, inline-block

block

inline (인라인 레벨 요소)

inline-block

📌 레이아웃

div

header

footer

main

section

article

aside

프로그래머스 - 클라우딩 어플리케이션 엔지니어링 1기 TIL 1일차

프로그래머스 - 클라우딩 어플리케이션 엔지니어링 TIL 3일차 HTML

0개의 댓글