search

👀HTML 한눈에 보기

hashtag
0. HTML이란?

HTML(HyperText Markup Language)은 웹페이지의 구조를 정의하는 언어에요. HTML 구조가 잘 짜여있다면, 검색엔진이 웹페이지를 올바르게 추천해줘요.

hashtag
1. HTML 구조

<!DOCTYPE html>
<html lang="ko">
<head>
    <!-- 문자 인코딩 (한글 깨짐 방지) -->
    <meta charset="UTF-8">
    
    <!-- 반응형 웹을 위한 뷰포트 설정 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 페이지 제목 (브라우저 탭에 표시) -->
    <title>페이지 제목</title>
    
    <!-- CSS 파일 연결 -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    
    <!-- JavaScript 파일 연결 -->
    <script src="script.js"></script>
</body>
</html>

  • <!DOCTYPE html> 이 파일이 HTML 문서임을 선언해요. 선언하지 않으면 CSS와 JavaScript가 제대로 동작하지 않을 수 있어요.

  • <head> 웹페이지의 기본 정보를 담는 영역이에요. 문자 인코딩, 뷰포트 설정, 페이지 제목, CSS 파일 연결 등을 넣어요.

  • <body> 화면에 실제로 보이는 내용을 담는 영역이에요. 각종 태그들을 여기에 넣고, 맨 아래에 JavaScript 파일을 연결해요.

hashtag
2. 태그

HTML은 태그들로 이루어져있어요.

태그는 두 종류로 나뉘어요.

  • Paired 태그: 닫힘태그 있음 예: <a></a>

  • Self-Closing 태그: 닫힘태그 없음 예: <br>

태그 안에는 속성(attribute)이 들어가요. 형식: 속성이름="속성내용"

hashtag
2.1. 글

  • <h1></h1> 제목(heading) 태그에요. <h6>까지 있고 숫자가 커질수록 글씨가 작아져요.

  • <p></p> 하나의 문단을 나타내는 단락(paragraph) 태그에요.

  • <span></span> 특별한 의미는 없고, 글의 일부에 스타일이나 처리를 할 때 쓰는 태그에요.

  • <strong></strong> 중요한 부분을 강하게 강조하는 태그에요. 읽어줄 때도 강조돼요.

  • <em></em> 의미상 중요한 부분을 강조하는 태그에요. 기본으로 기울임 스타일이 적용돼요.

  • <br> 줄을 바꾸는 태그에요. 엔터처럼 문장을 나눠요.

hashtag
2.2. 링크와 이미지

  • <a href=""></a> 다른 페이지나 주소로 이동하는 링크 태그에요. href 속성에 이동할 주소를 써요.

  • <img src=""> 이미지를 보여주는 태그에요. src 속성에 이미지 주소를 써요.

hashtag
2.3. 리스트

  • <ul></ul> 순서가 없는 리스트(unordered list)에요.

  • <ol></ol> 순서가 있는 리스트(ordered list)에요.

  • <li></li> 리스트 안에 들어가는 개별 항목(list item)이에요.

hashtag
2.4. 테이블

테이블안에 줄(table row)을 넣고, 칸(table data)을 넣어요.

hashtag
2.5. 입력란

  • <form></form> 입력한 내용을 자바스크립트로 제출하기 위해 전체를 감싸는 태그에요.

  • <label for=""></label> 입력칸 이름을 붙이는 태그에요. for 속성에는 연결할 input의 id를 써요.

  • <input id="" type="" placeholder=""> 기본 입력 태그에요. type은 "text", "email", "password", "checkbox", "date"가 있어요. 각각 한줄, 이메일, 비밀번호, 체크, 날짜 입력을 뜻해요. placeholder는 비어 있을 때 보여줄 글이에요.

  • <textarea></textarea> 여러 줄의 글을 입력하는 태그에요.

  • <select></select> 여러 항목 중 하나를 고르는 드롭다운 태그에요.

  • <button type="" onClick=""></button> 제출이나 동작 실행을 위한 버튼 태그에요. type은 "submit", "reset", "button"이 있어요. onClick에는 버튼을 눌렀을 때 실행할 함수를 써요. 함수 이름 뒤에 괄호도 같이 써요. (html은 문자열 자체를 저장하고 실행해요)

  • <fieldset></fieldset> 입력 폼에서 관련된 항목들을 하나의 그룹으로 묶는 태그에요.

hashtag
2.6. 시맨틱 태그

시맨틱 태그는 태그의 이름만 봐도 역할과 위치를 알 수 있도록 만든 태그에요.

https://yozm.wishket.com/magazine/detail/2495/arrow-up-right

  • <header> 페이지나 영역의 머리부분이에요. 제목, 로고, 메뉴가 들어가요.

  • <nav> 메뉴나 페이지 이동을 위한 링크들을 묶는 태그에요.

  • <section> 주제가 있는 내용을 묶는 태그에요. 비슷한 내용끼리 한 덩어리로 만들어요.

  • <article> 혼자서도 의미가 되는 독립적인 글이나 콘텐츠에요. 글, 뉴스, 게시글에 써요.

  • <aside> 옆에 붙는 보조 내용이에요. 광고, 관련 링크, 참고 정보에 써요.

  • <footer> 페이지나 영역의 바닥부분이에요. 저작권, 연락처, 추가 정보가 들어가요.

circle-info

hashtag
그외 시맨틱 태그들

  • <figure></figure> 이미지나 그림처럼 독립적인 내용을 감싸는 태그에요.

  • <figcaption></figcaption> <figure>에 들어간 내용에 대한 설명을 적는 태그에요.

  • <details></details> 눌러서 열고 닫을 수 있는 추가 내용을 담는 태그에요.

  • <summary></summary> <details>의 제목 역할을 하는 태그에요.

  • <time></time> 날짜나 시간을 의미적으로 나타내는 태그에요.

  • <abbr title=""></abbr> 줄임말을 나타내는 태그에요. title에 전체 뜻을 적어요.

Last updated