HTML 기초 1

🔎 HTML (HyperText Markup Language)

마크업언어 : 자료의 구조를 표현하기 위한 언어
모두 .html로 끝나야함.
메인페이지는 보통 index.html

📌 모든 html에 들어가야 할 기본 템플릿

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!- - vscode로 실시간 미리보기 띄우려면 extention에서 live server 설치하기 → 파일 내에서 우클릭해서 open with live server - ->

<p>글 내용</p>
- p : Paragraph의 약자 (본문)
- <body></body> 안에 적는다.
<h1>제목</h1>
- h : Heading의 약자
- 제목 1-6까지 크기별로 작성 가능

📌 웹 페이지 만들 때 모든 요소는 태그 안에 넣어야 한다.

→ 마크업 언어이므로 글자의 용도와 목적을 파악할 수 있어야 하기 때문. 딱 봐도 제목, 본문 등 파악 가능해야 함 → 웹 표준을 잘 지킨다.

<img src=”이미지경로 ~”>
- 끝나는 테그 없음
- src는 속성
<button>버튼이름</button>
<a herf=”주소”>링크이름</a>
- a : ahcor의 약자
- herf는 속성
<ul><li>리스트</li></ul>
- ul : unordered list
- li : list item
- ol : ordered list (ul대신 ol사용 ) → 번호 지정됨.

<ul>
    <li>항목1</li>
    <li>항목2</li>
</ul>

📌 일부 태그는 속성 기입 가능

→ src, href 등

📌 태그 안에 태그 가능

[전체 실습]

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h3>¡Hola!</h3>
    <p>¡Mucho gusto!</p>
    <button>버튼</button>
    <ol>
        <li>항목1</li>
        <li>항목2</li>
    </ol>

    <a href="https://google.com">링크</a>
    <img src="burano.jpg">

</body>
</html>

저작자표시

': ) Web > 웹 스터디' 카테고리의 다른 글

HTML 꾸미기 - 자기소개 화면 만들기 (0)	2023.11.09
HTML 꾸미기 (0)	2023.11.09
HTML 기초 복습 - 원하는 페이지 만들어보기 (1)	2023.11.08
HTML 기초 - 특정 글자 클릭 시 링크로 이동하기 (0)	2023.11.08
HTML 기초 - 이미지 누르면 링크로 이동하기 (0)	2023.11.08

Hallo, Auf Wiedersehen

HTML 기초 1

🔎 HTML (HyperText Markup Language)

': ) Web > 웹 스터디' 카테고리의 다른 글

티스토리툴바

HTML 기초 1

🔎 HTML (HyperText Markup Language)

': ) Web > 웹 스터디' 카테고리의 다른 글

관련글

티스토리툴바