[HTML] 기본적인 HTML 내용 정리

*이 포스팅은 생활코딩 WEB1 (https://opentutorials.org/course/3084) 수강내용을 기반으로 작성되었습니다.

<!DOCTYPE html>

해당 문서내용이 HTML로 작성했음을 선언

<html> </html>로 크게 감싸주기

<head>
<title>WEB1 - HTML</title>

<meta charset="utf-8">
</head>

본격 내용 작성 전, <head> 에 들어갈 내용

<title> </title> 인터넷 탭 제목 설정
<meta charset="utf-8"> 한글이 안될 경우, utf-8 타입으로 지정 필요

<body>
    <h1><a href="index.html">WEB</a></h1>
    
    <img src="https://s3-ap-northeast-2.amazonaws.com/opentutorials-user-file/module/3135/7648.png" width="100%">

    <ol>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>
    </ol>

    <input type="checkbox">

    <p>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/jSJM9iOiQ1g" frameborder="0" allowfullscreen></iframe>
    </p>

    <p style="margin-top:45px;">
        <a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 specification">Hypertext Markup Language (HTML)</a> is the standard markup language for 
    <strong>creating <u>web</u> pages</strong> 
    and web applications.</p>

<h1></h1> ~ <h6></h6> : 헤드라인 1~6단계 지정

<p> </p> : 단락 설정

내부에서 CSS로 스타일 설정 가능 (display, margin-top, margin-bottom, margin-left, margin-right)

<li> </li> : 목록 만들기

<ul></ul> : 순서가 정해져 있지 않은 목록 (점 목록 생성)
<ol></ol> : 순서가 정해진 목록 (1. 2. 형식의 목록 생성)
<ul> 또는 <ol> 태그로 감싸고 내부에 <li>로 목록 생성해야 함‼️

<input type=" "> : 다양한 속성 삽입 가능

button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, range, reset, search, submit, tel, text, time, url, week

<img> : 사진 삽입 (닫지 않는 태그)

src 속성에 링크 또는 폴더에 있는 사진파일 이름 삽입
width, height로 크기 조정

<iframe></iframe> : 동영상 삽입

width, height로 크기 조정
src 속성에 링크 삽입
frameborder, allowfullscreen 등 속성 지정 가능

<a> </a> : 링크 삽입

href에 링크 지정
target으로 어느 탭에서 페이지를 열지 설정 (_blank, _self, _parent, _top 등)
title로 커서가 접근할 경우에 뜨는 제목 설정

기타 태그

<br> : 줄바꿈 태그 (닫지 않는 태그)
<strong> </strong> : 굵게
<u> </u> : 밑줄

⭐HTML 문서 결과 확인하기 ⭐

인터넷 브라우저에서 Ctrl+O로 해당 html 문서 열기 가능

Visual Studio Code 기준)

Live Server Extension 설치 후, 우측 하단의 Go live 누르면 창 열리면서 확인가능

✅코드 저장시, 바로 새로고침되기 때문에 코드를 수정하면서 확인하기에 편리

저작자표시 (새창열림)

일	월	화	수	목	금	토
					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

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

🤯공돌이의 자습공간🤯

[HTML] 기본적인 HTML 내용 정리

⭐HTML 문서 결과 확인하기 ⭐

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역