[클라우딩 어플리케이션 엔지니어링 TIL] 2일차

개발 공부/데브코스 TIL

[클라우딩 어플리케이션 엔지니어링 TIL] 2일차 - HTML 구조

가욤이 2023. 12. 19. 18:01

Intro.

데브코스 2일차,

HTML에 대해 학습했다.

알고있던 내용이었지만 복습하는 느낌으로 꼼꼼하게! 들었다. 🤓

오늘 학습한 내용

: HTML I

HTML 기본 문법

콘텐츠를 갖는 태그

<!-- <> (열리는 태그)와 </> (닫히는 태그)로 구현 -->
<div>Content</div>

콘텐츠를 가지지 않는 태그

<!-- 단일 태그 "/>" 를 셀프 클로징이라고도 함 -->
<br />

HTML 속성과 값

<!-- 속성="값" (title은 전역 속성으로 모든 태그에서 사용) -->
<div title="제목">content</div>

HTML 구조

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="gayeon">
  <title>Document</title>
</head>
<body></body>
</html>

<!DOCTYPE html>: HTML 문서 버전
<html>: html 문서 시작, (lang="ko" 언어를 설정하는 속성 (ko: 한국어 문서))
<head>: 사용자에게 보이지 않는 정보이며 문서의 필요한 정보를 작성
- <meta>: 메타 데이터 (인코딩 정보, 문서 설명, 작성자 등)
  - charset (character set): 문서의 문자 인코딩 방식 설정 (기본 UTF-8)
- <title>: 페이지 제목
- CSS, Script

<body>: 실제로 보이는 콘텐츠 영역

HEAD

<style>

<style>
  body {
    color: blue;
  }
</style>

: style 태그를 써서 html 내에 바로 스타일을 지정할 수 있다.

<link>

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

: link 태그로 css 파일을 불러올 수 있다.

<script>

1. 콘텐츠 방식

<!-- 콘텐츠 방식 -->
<script>
  const hello = 'world';
  console.log(hello);
</script>

2. 링크 방식

<script src="script.js"></script>

: 콘텐츠가 없지만 셀프 클로징을 사용해선 안됨!

BODY

block
- 블록처럼 차곡차곡 쌓이고 화면 너비가 꽉 참
- 블록 크기와 내/외부 여백을 지정할 수 있고 일반적으로 페이지의 구조를 나타냄
- ex) <div>, <article>, <section>, ...
inline
- 블록 요소 내 포함되는 요소
- 문장, 단어 같은 부분에 사용되며 한 줄에 나열된다.
- 좌/우 여백만 허용
- 콘텐츠 크기만큼 자리를 차지한다.
- ex) <span>, <a>, <strong>, ...
inline-block
- 글자처럼 취급되나, block 태그의 성질을 가짐
- CSS로 성질을 바꾼 것이라 의미상 인라인 레벨 요소

레이아웃

: HTML5부터 Semantic 태그를 지향하기로 하였으며, 단순히 <div>를 남발하지 말고 의미있게 전달하고자 레이아웃 태그를 사용한다.

검색엔진의 검색 순위에 가산점을 얻을 수 있고 홈페이지의 로딩 속도도 높일 수 있다.

<div>: 구역 나누는 데 사용
<header>: 글 제목, 작성일 등 주요 정보를 담는 태그
<main>: 페이지의 주요 콘텐츠를 담는 태그 (한 페이지에 한 번만 나와야 한다. (header, footer는 중복 가능))
<section>: 구역을 나누는 태그 (여러 기사가 각자의 구역에 각자의 정보를 전달하는 느낌)
<article>: 뉴스 기사 같은 독립적인 문서를 전달하는 태그
<aside>: 문서 주요 내용에서 부가적인 정보를 전달하는 태그

마무리

배운 내용을 복습할 겸 네이버의 레이아웃 구조를 나누어 보았다. 😃

개발할 때 div 태그 대신 레이아웃 태그를 쓰는 습관을 들이자!

'개발 공부 > 데브코스 TIL' 카테고리의 다른 글

[클라우딩 어플리케이션 엔지니어링 TIL] 240102 - 반응형웹 (1)	2024.01.02
[클라우딩 어플리케이션 엔지니어링 TIL] 5일차 - CSS II (1)	2023.12.22
[클라우딩 어플리케이션 엔지니어링 TIL] 4일차 - CSS (0)	2023.12.21
[클라우딩 어플리케이션 엔지니어링 TIL] 3일차 - HTML 콘텐츠 (0)	2023.12.20
[클라우딩 어플리케이션 엔지니어링 TIL] 1일차 - OT 및 개발 환경 세팅 (0)	2023.12.18

현재글[클라우딩 어플리케이션 엔지니어링 TIL] 2일차 - HTML 구조

웹/앱 개발, JavaScript 등등 개발 기록장

react-native와 supabase, supabase인증기능, 국비지원교육, 코딩부트캠프, 자바스크립트알고리즘, 클라우딩 어플리케이션 엔지니어링, 리액트네이티브모달관리, 자바스크립트개념, 리액트모달관리, 프로그래머스 데브코스, 리액트공통모달, supabase로그인, 오블완, 자바스크립트맵과셋, supabase auth, 맵과셋차이, 티스토리챌린지, mapset, 빅오표기법, 모달컴포넌트구현,

Today :
Yesterday :

일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

👩‍💻 가연의 개발자취 📚

[클라우딩 어플리케이션 엔지니어링 TIL] 2일차 - HTML 구조

Intro.

오늘 학습한 내용

HTML 기본 문법

HTML 구조

HEAD

BODY

레이아웃

마무리

'개발 공부 > 데브코스 TIL' 카테고리의 다른 글

'개발 공부/데브코스 TIL'의 다른글

티스토리툴바

[클라우딩 어플리케이션 엔지니어링 TIL] 2일차 - HTML 구조

Intro.

오늘 학습한 내용

HTML 기본 문법

HTML 구조

HEAD

BODY

레이아웃

마무리

'개발 공부 > 데브코스 TIL' 카테고리의 다른 글

'개발 공부/데브코스 TIL'의 다른글

관련글

티스토리툴바