기본문법
<TAG></TAG>
<TAG>CONTENT</TAG>
<h1>토끼와 거북이</h1>
<p>옛날 옛적에 토끼와 거북이가 살았습니다 ...</p>- 태그는 열리고 닫히는 태그 구조를 가지고 있으며 이는 한 쌍이다.
- 닫히는 태그는 태그 이름 앞에 /(슬래시)가 붙는다
- h1은 제목, p는 문단
속성과 값
<TAG 속성="값"></TAG>
<img src="photo.jpg" alt="사진" />
<div class="name">안현주</div>- img는 이미지 삽입태그로, src라는 속성을 사용해서 삽입할 이미지의 경로를 지정, alt라는 속성을 사용해 이미지를 출력하지 못하는 상황에 이미지 대신에 보여진 텍스트 지정, 빈태그
- <div></div>는 의미를 가지지 않는 태그로 어떤 내용이든 묶어낼 수 있다. name이라는 태그 class를 추가
부모 요소,자식 요소
<PARENT>
<CHILD></CHILD>
</PARENT>
<section class="fruits">
<h1>과일 목록</h1>
<ul>
<li>사과</li>
<li>딸기</li>
<li>바나나</li>
<li>오렌지</li>
</ul>
</section><section>는 <h1>과 <ul>의 부모 요소
또한 <ul>은 <li>의 부모 요소
반대로 <h1>과 <ul>은 <section>의 자식 요소
또한 <li>는 <ul>의 자식 요소
- 부모와 자식 요소는 상대적인 개념이다.
빈 태그
<!-- `/`가 없는 빈 태그 -->
<TAG>
<!-- `/`가 있는 빈 태그 -->
<TAG/>
<TAG />- HTML에는 닫히는 개념이 없는 태그들이 있다.
DOCTYPE
<!DOCTYPE html>
<html>
<head>
문서의 정보
</head>
<body>
문서의 구조
</body>
</html>- <html>은 HTML문서의 전체 범위를 지정 (웹 페이지의 제목, 웹 페이지의 문자 인코딩 방식, 연결할 외부 파일의 위치, 웹 페이지를 구조화하기 위한 기본 세팅 값의 정보 점위 등)
- <body> HTML 문서의 구조 범위를 지정 (화면을 통해서 볼 수 있는 내용(콘텐츠)의 형태나 레이아웃 등을 의미하며 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 입력창, 팝업, 광고 등 보이는 모든 것들이 구조에 해당)
- DOCTYPE은 마크업 언어에서 문서형식을 정의
HEAD태그(TITLE, META, LINK, STYLE, SCRIPT)
- <head></head> 안에서 사용하는 태그들은 HTML 문서의 정보를 가진다.
- TITLE은 문서의 제목
- META는 HTML 문서에 관한 정보(표시 방식, 제작자(소유자), 내용, 키워드 등)를 검색엔진이나 브라우저에 제공, 빈태그
속성의미값
<head>
<meta charset="UTF-8"> <!-- 문자 인코딩 방식-->
<meta name="author" content="안현주">
<meta name="description" content="웹 공부">
</head>| 속성 | 의미 | 값 |
| charset | 문자인코딩 방식 | UTF-8, EUC-KR 등.. |
| name | 검색엔진 등에 제공하기 위한 정보의 종류(메타 데이터) | author, description, keywords, viewport 등.. |
| content | name 이나 http-equiv 속성의 값을 제공 |
-LINK는 외부 문서를 연결할 때 사용, 특히 HTML외부에 작성된 CSS를 연결할 때 사용, 빈태그
<head>
<link rel="stylesheet" href="./css/main.css">
<link rel="icon" href="./favicon.png">
</head>
| 속성 | 의미 | 값 |
| rel | (필수)현재 문서와 외부 문서와의 관계를 지정 | stylesheet, icon 등.. |
| href | 외부 문서의 위치를 지정 | 경로 |
- STYLE은 CSS를 HTML 문서 내부에 작성할 때 사용
<style>
img {
width: 100px;
height: 200px;
}
p {
font-size: 20px;
font-weight: bold;
}
</style>
-SCRIPT는 JS를 불러오는 방식
<!-- 불러오기 -->
<script src="./js/main.js"></script>
<!-- 작성하기 -->
<script>
function windowOnClickHandler(event) {
console.log(event);
}
window.addEventListener('click', windowOnClickHandler);
</script>
BODY태그(div, image), 웹 표준 검사
- <body></body> 안에서 사용하는 태그들은 HTML 문서의 구조
- <div></div>는 문서의 부분이나 섹션을 정의, 묶는 태그
<body>
<div>
<p></p>
</div>
<div>
<div>
<h1></h1>
<p></p>
</div>
</div>
</body>
-<img>는 HTML에 이미지를 삽입할 때 사용, 이미지를 삽입하는 방식은 HTML에서 삽입, CSS에서 삽입 2가지가 있다.
<body>
<img src="./kitty.png" alt="냥이"> <!-- src과 alt는 필수 속성이다. 속성이 누락되면 안된다 -->
</body>
웹표준 검사
- validator.w3.org/#validate_by_upload에 접속해서 HTML 문서를 업로드하고 표준에 부합하는지 테스트 해볼 수 있다.
예제
GitHub 페이지의 Header 만들기
1. 화면의 중앙에 몰려있다. 그 중에서도 왼쪽 영역과 오른쪽 영역이 있다.
2. 웹 표준 검사하기
<!DOCTYPE html>
<html lang="ko"> <!--한국어로 설정-->
<head>
<meta charset="UTF-8">
<title>GitHub</title>
</head>
<body>
<div class="header"> <!-- div는 의미가 없는 태그-->
<div class="container">
<div class="container-left">
<div class="logo">
<img src="https://heropcode.github.io/GitHub-Responsive/img/logo.svg" alt="GitHub logo">
</div> <!-- 로고-->
<div class="menu">
<div class="menu-item">Personal</div>
<div class="menu-item">Open Source</div>
<div class="menu-item">Business</div>
<div class="menu-item">Explore</div>
</div> <!--4개의 항목-->
</div>
</div>
</div>
</body>
</html>
'Front-end > Web' 카테고리의 다른 글
| HTML - 주요범위 & 메타데이터 (0) | 2021.02.02 |
|---|---|
| CSS (0) | 2021.02.01 |
| 개요 (0) | 2021.02.01 |
| 웹 애플리케이션 만들기 코드 (0) | 2020.09.07 |
| 나만의 웹 애플리케이션 제작 (0) | 2020.09.07 |
댓글