HTML (HyperText Markup Language)
태그 ; 웹 페이지의 디자인, 기능 결정
<태그이름>내용</태그이름>
# 빈 태그 ; <img><br><hr>등과 같이 종료 태그 없는 태그
태그
<태그이름 속성명 = 속성값> 내용 </태그이름>
ex) <p class = "para"> 내용 </p>
기본 구조
<!DOCTYPE html>
<html lang="ko">
<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>
<!DOCTYPE html>
; 현재 문서가 HTML5 문서임을 명시, 종료태그 없음
html
; HTML문서의 루트 요소 정의
- lang="ko"로 한국어로 작성될 것임을 명시
head
웹페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS)같은 웹페이지의 보이지 않는 정보 작성
ex) <title>,<style>,<meta>,<link>,<script>,<base> 태그
meta
; HTML 문서에 관한 정보(표시 방식, 제작자, 내용, 키워드 등)를 검색엔진이나 브라우저에 제공, 빈 태그, head 안
ex) <meta charset="UTF-8"> ; 문자인코딩 방식
ex) <meta name="author" content="홍길동"> ; name="정보의 종류" content="정보의 값"
ex) <meta name="viewport" content="width=device-width, initial-scale=1.0"> ; 스마트폰에서 웹 페이지의 가로 너비 설정
title
; HTMl 문서의 제목을 의미
ex) <title> 네이버 </title>
link
; rel은 문서와의 관계, href는 위치를 알려줌
ex) <link rel="stylesheet" href="./css/main.css"> ; css 불러오기 or <style></style> 태그 안에 작성해도 됨
ex) <link rel="icon" href="./favicon.png"> ; title옆에 있는 로고 설정(로고를 보통 favicon(favorite Icon)이라 부름)
script
ex) <script src="./js/main.js"></script> ; JS불러오기 or <script></script>태그 안에 작성해도 됨
body
; 사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 네비게이션 같은 웹페이지의 보여지는 구조를 작성
semantic element(의미 요소)
; 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해주는 요소
- header ; 섹션부분에 대한 헤더, 한 문서 내에 여러 개의 header요소 존재할 수 있음
- nav ; HTML문서 사이를 탐색할 수 있는 링크의 집합
- section ; 제목을 가지고 있으며, HTML문서의 전체적인 내용과 관련있는 콘텐츠들의 집합
- article
- figure ; 그래픽과 비디오 등의 독립적인 콘텐츠 정의할 때 사용 / figcaption ; figure요소 정의할 때 사용
- footer ; 작성자, 저작권 정보, 연락처 명시
팁
깔끔한 코드
; 가독성을 높여줌. 처음 작성할 때부터 꼼꼼/깔끔 작성하는 습관 들이기 !!
첫 코드 작성 습관이 코딩 인생을 좌우함 !!
상대경로
./ ; 현대 디렉토리에서 탐색(생략 가능)
../ ; 상위 폴더로 올라감
ex) ../../ ; 두 단계 상위 디렉토리 이동
절대경로
http ; 원격의 다른 사이트
/ ; 최상의 디렉토리(C:)로 이동
index.html ; 파일에서 가장 먼저 찾는 html문서
ex) <a href="/about"></a>라 하면, /about/index.html문서부터 찾음
'WebProgramming > HTML' 카테고리의 다른 글
| [HTML] HTML 작성 가이드라인 & 팁 (0) | 2022.06.02 |
|---|---|
| [HTML] 전역 속성 (0) | 2022.05.24 |
| HTML 문서에서 입력(form,input) (0) | 2022.05.05 |
| HTML 글자/단락 태그 + CSS (0) | 2022.05.05 |
HTML (HyperText Markup Language)
태그 ; 웹 페이지의 디자인, 기능 결정
<태그이름>내용</태그이름>
# 빈 태그 ; <img><br><hr>등과 같이 종료 태그 없는 태그
태그
<태그이름 속성명 = 속성값> 내용 </태그이름>
ex) <p class = "para"> 내용 </p>
기본 구조
<!DOCTYPE html>
<html lang="ko">
<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>
<!DOCTYPE html>
; 현재 문서가 HTML5 문서임을 명시, 종료태그 없음
html
; HTML문서의 루트 요소 정의
- lang="ko"로 한국어로 작성될 것임을 명시
head
웹페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS)같은 웹페이지의 보이지 않는 정보 작성
ex) <title>,<style>,<meta>,<link>,<script>,<base> 태그
meta
; HTML 문서에 관한 정보(표시 방식, 제작자, 내용, 키워드 등)를 검색엔진이나 브라우저에 제공, 빈 태그, head 안
ex) <meta charset="UTF-8"> ; 문자인코딩 방식
ex) <meta name="author" content="홍길동"> ; name="정보의 종류" content="정보의 값"
ex) <meta name="viewport" content="width=device-width, initial-scale=1.0"> ; 스마트폰에서 웹 페이지의 가로 너비 설정
title
; HTMl 문서의 제목을 의미
ex) <title> 네이버 </title>
link
; rel은 문서와의 관계, href는 위치를 알려줌
ex) <link rel="stylesheet" href="./css/main.css"> ; css 불러오기 or <style></style> 태그 안에 작성해도 됨
ex) <link rel="icon" href="./favicon.png"> ; title옆에 있는 로고 설정(로고를 보통 favicon(favorite Icon)이라 부름)
script
ex) <script src="./js/main.js"></script> ; JS불러오기 or <script></script>태그 안에 작성해도 됨
body
; 사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 네비게이션 같은 웹페이지의 보여지는 구조를 작성
semantic element(의미 요소)
; 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해주는 요소
- header ; 섹션부분에 대한 헤더, 한 문서 내에 여러 개의 header요소 존재할 수 있음
- nav ; HTML문서 사이를 탐색할 수 있는 링크의 집합
- section ; 제목을 가지고 있으며, HTML문서의 전체적인 내용과 관련있는 콘텐츠들의 집합
- article
- figure ; 그래픽과 비디오 등의 독립적인 콘텐츠 정의할 때 사용 / figcaption ; figure요소 정의할 때 사용
- footer ; 작성자, 저작권 정보, 연락처 명시
팁
깔끔한 코드
; 가독성을 높여줌. 처음 작성할 때부터 꼼꼼/깔끔 작성하는 습관 들이기 !!
첫 코드 작성 습관이 코딩 인생을 좌우함 !!
상대경로
./ ; 현대 디렉토리에서 탐색(생략 가능)
../ ; 상위 폴더로 올라감
ex) ../../ ; 두 단계 상위 디렉토리 이동
절대경로
http ; 원격의 다른 사이트
/ ; 최상의 디렉토리(C:)로 이동
index.html ; 파일에서 가장 먼저 찾는 html문서
ex) <a href="/about"></a>라 하면, /about/index.html문서부터 찾음
'WebProgramming > HTML' 카테고리의 다른 글
| [HTML] HTML 작성 가이드라인 & 팁 (0) | 2022.06.02 |
|---|---|
| [HTML] 전역 속성 (0) | 2022.05.24 |
| HTML 문서에서 입력(form,input) (0) | 2022.05.05 |
| HTML 글자/단락 태그 + CSS (0) | 2022.05.05 |
