✍️ TIL 1 ㆍ HTML 기초

Euiyeon Lee·2021년 5월 11일

HTML / CSS

목록 보기

1/8

✔️ HTML이란?
✔️ HTML 태그(tag) 정리
✔️ 알아두면 유용한 단축키

✔️ HTML이란?

: HTML(HyperText Markup Language)은 웹페이지를 위한 지배적 마크업 언어이다. 쉽게 말해 웹페이지 제작에 있어 가장 기본적이고 구조적인 틀이라고 볼 수 있다. HTML은 웹 페이지 콘텐츠 안의 꺾쇠 괄호에 둘러싸인 "태그(tag)"로 되어있는 HTML 요소 형태로 작성한다.

✔️ HTML 태그(tag) 정리

< HTML 기본 구조 >

<!DOCTYPE html> 맨 위 관용적으로 쓰이는 태그
<html> </html> 웹페이지의 시작과 끝 (최상위층 태그)
<head> </head> 본문을 설명하는 태그
<body> </body> 본문

< 자주 쓰이는 태그 >

<meta charset="utf-8"> 한글 깨질 경우
<title> web 제목, 표지
<h1~h6> 헤드라인 ( 크기 h1 > ∙∙∙ > h6 )
 밑줄
 /  strong은 콘텐츠 자체의 중요성을, b는 텍스트 자체의 중요성을 강조!
 /  br은 강제 줄바꿈, p는 paragraph의 약자로 문단을 바꿀 때 사용
<img src="주소"> 이미지 태그
<li> 리스트, 목차
<ol> 'ordered list'로 자동 numbering되는 목차태그
<ul> 'unordered list'로 <li>의 부모태그

✔️ 알아두면 유용한 단축키

1. html 기본 골조 자동완성

: ! + tab

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2. 원하는 태그와 클래스 생성

: 태그명.클래스명

<!-- ex) div.test -->
<div class="test"></div>

3. 주석 변경 (on/off)

: cmd + /

4. 한줄 복사, 이동, 삭제

:shift + opt + ↓ / opt + ↓ / shift + cmd + K

5. 하위 태그 생성

: 태그명1>태그명2

<!-- ex) div>span -->
<div><span></span></div>

6. List 여러 줄 생성

: (li)*횟수

<!-- (li>a)*3 -->
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

Euiyeon Lee

다음 포스트