1.학습 주제
- html 기본 문법 및 기본 문서
- <head>
- block, inline, inline-block
- 레이아웃 태그
2.주요 메모 사항 소개
html 기본 문법 및 기본 문서
- 태그에는 2가지 종류가 존재
<div>콘텐츠</div><!-- 콘텐츠를 가지는 태그-->
<br/><!-- 콘텐츠를 가지지 않고 혼자 존재하는 태그(단일태그)-->- 속성과 값이 존재
<a href="google.com">구글로 가기</a>
<!-- href가 속성 "google.com"이 값-->- 기본 문서
<!DOCTYPE html> <!-- 문서의 종류 -->
<html lang="en"> <!-- 문서의 기본 언어 설정 -->
<head> <!-- 사람 눈에 보이지 않는 문서의 정보가 담기는 곳 -->
<title>기본 문서</title> <!-- 문서의 이름 -->
</head>
<body>
<!-- 문서의 실제 모습이 보이는 곳 -->
</body>
</html><head>
- 사람 눈에 보이지 않는 문서의 정보가 담기는 곳
- 대표적인 태그로는 <meta>,<style>,<link>,<script>가 존재
- <meta>: 여러 가지 사용법이 있지만 대표적으로는 charset을 이용한 문서에서 사용할 수 있는 언어를 제한한다.
- <style>: 태그들의 스타일을 변환 시킬 때 사용하는 태그, 일정 이상 커질 경우 외부 CSS 파일을 따로 만들어 사용한다.
- <title> : html의 문서의 이름을 나타내는 태그, head 태그에 쓰여도 표시줄에서 확인할 수 있다.
- <link>: 외부 파일을 연결하는 태그. CSS 파일, favicon, 폰트 등을 연결하는 데 사용
- <script>: 외부 js 파일을 연결하는 태그.
<head><!--대표적인 <head> 태그들-->
<meta charset="UTF-8">
<title>TITLE</title>
<link rel="stylesheet" href="test.css">
<script type="text/javascript" src="test.js"></script>
<style>
div{
font-weight:300;
}
</style>
</head>block, inline, inline-block
- block: 레고 블록 처럼 차곡차곡 쌓이고 화면 너비가 꽉차는 요소
- 블록의 크기와 내/외부에 여백을 지정할 수 있고 일반적으로 페이지의 구조적 요소를 나타낸다.
- 인라인 요소를 포함할 수 있으나, 인라인 요소에 포함될 수 없다.
- inline: 블록 요소 내에 포함되는 요소.
- 주로 문장, 단어 같은 작은 부분에 사용되며 한 줄에 나열된다.
- 좌/우에 여백을 넣는 것만 허용된다.
- inline-block: block과 inline 성분을 둘 다 가지는 요소.
- 주로 문장, 단어 같은 작은 부분에 사용되며 한 줄에 나열된다.
- 블록처럼 크기와 내/외부의 여백을 지정가능하다.
block1
block2
block3
inline1
inline2
inline3
inline1
inline2
inline3
레이아웃 태그
- <header>,<footer>,<section>,<article>, <aside> 등이 존재
- 적절한 태그를 사용하여 <div>태그의 남용을 막고 웹 문서와 구조를 의미 있게 전달
- 시멘틱하게 마크업 함으로써 검색엔진의 검색 순위에 가산점을 얻거나 홈페이지 로딩 속도를 높임
3. 공부하며 느낀 점
html을 배우는 데 기초적인 내용을 배웠다. 제대로 더 어려운 내용을 하기 전 기초를 다시 다지는 느낌이 들었다.
4.출처
'프로그래머스 데브코스' 카테고리의 다른 글
| [클라우딩 어플리케이션 엔지니어링 TIL] 12. CSS 기초(선택자, 우선순위) (0) | 2024.04.25 |
|---|---|
| [클라우딩 어플리케이션 엔지니어링 TIL] 11. HTML 기초(콘텐츠 태그) (0) | 2024.04.24 |
| [클라우딩 어플리케이션 엔지니어링 TIL] 10. 프론트엔드 백엔드 연결 (0) | 2024.04.23 |
| [클라우딩 어플리케이션 엔지니어링 TIL] 9. 백엔드 기초 (0) | 2024.04.22 |
| [클라우딩 어플리케이션 엔지니어링 TIL] 8. 웹 프론트엔드 기초(2) (0) | 2024.04.19 |
