-
[HTML] HTML 기본 문법웹 개발/HTML & CSS 2020. 6. 20. 12:31반응형
내가 보려고 정리하는 HTML 기본 문법
https://heropy.blog/ 를 참고했습니다.
Element
TAG 사이에 콘텐츠를 표시함
<TAG> Content </TAG>* TAG의 예시
<h1> </h1> 제목 (h1~h6)
<p></p> 문단
<br> 줄바꿈
<ol><li></li></ol> ordered list
<ul><li></li></ul> unordered list
<a></a> 하이퍼링크
...
Element 의미 확장
속성값 추가 (attribute)
<TAG 속성 = "값"></TAG>예시1) 이미지 삽입
<img src ="이미지의 위치" alt= "이미지가 삽입되지 못했을 때의 대체 텍스트"/>예시2) 분할
<div class ="name"> ohbox </div>div는 아무런 의미를 가지지 않는 태그이지만
class 속성은 'ohbox'라는 컨텐츠를 name이라는 태그 별명으로 묶었다.
Element 구조 특징
- 부모 자식 요소
태그 내의 콘텐츠에 태그를 삽입할 수 있다.
이럴 경우 두 태그의 관계를 서로 부모(상위, 조상)요소 자식(손주, 하위)요소라고 한다.
<PARENT> <CHILD></CHILD> </PARENT>- 빈 태그 (Empty tag , self-closing tag)
닫히는 태그 개념이 없다.
대부분 속성과 값의 형태를 사용함.
개발환경에 따라 / 의 유무를 결정하지만 혼용하지 말 것.
<TAG> <TAG/> <TAG />*HTML 5 버전에서는 모두 사용할 수 있다.
HTML 기본구조
<!DOCTYPE html> <html> <head> 문서의 정보 </head> <body> 문서의 구조 </body> </html><!DOCTYPE>
: 작성한 문서가 어떤 HTML 버전으로 해석될 것인지 명시 (표준 HTML 5)
HTML 1, 2, 3, 4 ,5
XTML (표기 방식 다름)<html></html>
문서의 시작과 끝 정의
<head></head>
문서가 가지고 있는 정보
<body></body>
실제 출력되는 구조
head의 예시
<title>
웹 사이트 탭에서 이름으로 표시됨 (ex, naver, google..)
<head> <title>웹사이트 이름</title> </head><meta>
html 문서에 대한 모든 정보를 브라우저나 검색엔진에 제공
<head> <meta charset = "UFT-8"> <meta name = "author" content = "ohbox> <meta name = "description" content = "웹 프론트엔드를 공부하고 있습니다"> </head>charset : 문자 인코딩 방식 (필수)
name : 검색엔진에 제공하기 위한 정보의 종류 - author description 등 상황에 맞게 찾아 쓰면 됨
content : name이나 http-equiv의 실질적인 값을 제공
<link>
외부문서를 현재 문서로 가져와 사용할 수 있음
외부문서란 HTML, CSS나 Icon(이미지파일)
주로 CSS를 불러올 때 사용<head> <link rel="stylesheet" href="./CSS/main.css"> <link rel="icon" href="./Icon/favicon.png"> </head>rel : 현재문서와 외부문서와의 관계 지정 (필수)
href : 외부문서의 위치를 지정 (경로)
favicon : 웹페이지의 상단 바에 title과 함께 보여지는 이미지
<style></style>
CSS의 문서를 외부 문서와 연결하지 않고
style 태그 내에 명시할 수 있음
<style> img { width:100px; height:200px; } p{ font-size: 20px; font-weight: bold; } </style><script></script>
java script를 불러오거나 직접 작성할 수 있다.
외부에서 불러올 때 (link)
<script src= "./js/main.js"></script>직접 작성할 때
<script> function windowOnClickHandler(event){ console.log(event); } window.addEventListener('click, windowOnClickHandler); </script>
body의 예시
<div></div>
문서의 부분이나 세션같이 특정부분을 묶는 용도로 사용한다.
css나 java script을 묶인 부분에 따라 제어, 적용할 수 있다.
<body> <div> <h1></h1> </div> <div> <div> <p></p> </div> </div> </body><img>
이미지 삽입
<body> <img src="./ohbox.png" alt="Nickname"> </body>src : 이미지의 위치 (필수)
alt : 이미지가 삽입되지 못했을 때의 대체 텍스트 (필수)
src와 alt와 같은 필수 속성이 들어가지 않는다면 웹 표준 어긋날 수 있음
W3C validator에서 웹 표준 기본적인 검사 가능
https://validator.w3.org/The W3C Markup Validation Service
Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.
validator.w3.org
반응형'웹 개발 > HTML & CSS' 카테고리의 다른 글
[HTML/CSS] Tstory - story 페이지 클론 (0) 2021.04.11 [HTML/CSS] CSS의 수평 수직 정렬구조 (float / flex) (0) 2021.04.08 [HTML/CSS] CSS 기본 레이아웃 요소 정리 (0) 2021.02.17 [CSS] CSS 속성 예시 (0) 2020.06.30 [CSS] CSS 기본 문법 (0) 2020.06.23