HTML = 구조, CSS = 스타일, JS = 상호작용
1. HTML (HyperText Markup Language)
웹 페이지를 구조적으로 표현하기 위한 언어
2. HTML 태그 (tag)
태그 이름을 꺾쇠 괄호(<>)로 감싸서 표현(보통 시작 태그, 종료 태그 한 쌍으로 구성)
<태그이름> //시작 태그
</태그이름> //종료 태그
· Self-Closing Tag : 태그 내부에 내용이 없다면, (<tag></tag>와 같이 표현되는 경우) : <tag/>와 같이 표기 가능
· 빈 태그 (Empty Tag) : 종료 태그 없이 시작 태그만을 가지는 태그 ex) <img>, <br>, <hr>
<img src="heesue-logo.png"></img>
<img src="heesue-logo.png" /> //빈 태그지만 이렇게 쓸 수도 있다.3. HTML 구조 : 트리형
<!DOCTYPE html> //현재 문서가 HTML5 문서임을 명시
<html> //HTML 문서의 루트 요소를 정의
<head> //HTML 문서의 메타데이터(HTML 문서에 대한 정보) 정의
<title>HTML문서의 제목입니다.</title>
</head>
<body> //웹 브라우저를 통해 보이는 내용 부분
<h1>제목 크기1입니다.</h1>
<h2>제목 크기2입니다.</h2>
<p>이 부분은 단락입니다.</p>
</body>
</html>4. HTML 요소 구조
HTML 요소는 여러 속성을 가질 수 있다.
5. HTML 속성 (attribute) : 속성의 이름 & 속성의 값
[1] <head> 안의 태그와 속성들
<base> : 기준 주소
<link /> : 외부 리소스 연결 (특히, css)
<link /> 속성
1. href 연결할 곳의 주소
2. rel 현재 문서와 연결 문서의 관계 표시
3. type 연결 문서의 미디어 유형 (href 속성이 설정될 때만 사용)
4. media 연결 문서가 표시될 장치 또는 미디어 유형<style> : css 적용
<title> : 문서의 제목 (문서 내에서 한 번만 지정)
<meta /> : 메타데이터 정의
<meta name="name 속성" content="content 속성" />
[2] <body> 안의 태그와 속성들
<script> : 자바스크립트 실행을 위해 사용(<body> 태그의 마지막 부분에 사용)
<script src='./script.js'></script><strong> : 글자 두껍게 강조
<h1>...<h6> : 제목 (heading)
<header> 태그는 <body> 태그의 제목 부분을 영역으로 구분할 때 사용, <h> 태그는 <header> 태그 안에 포함될 수 있음.
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>복소수</h1>
<h2>실수</h2>
<h3>유리수</h3>
<h4>정수</h4>
<h5>양의 정수</h5>
</body>
</html><p> : 문단
<a> : 하이퍼링크(anchor), 새창으로 열 때 target="_block" 포함
<a href="https://heesue.tistory.com" target="_block">heesue의 개발일지</a><section> : 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는 데 사용
<div> : HTML 문서 영역이나 섹션 분할 정의 (한 줄 차지)
<span> : 태그안의 내용만 차지
<link>
<img> : 이미지 삽입
<img src="img.jpg" height="300" width="400"
alt="이미지 설명(없어도 됨)" title="마우스 올려놓으면 뜨는 문구"><br /> : 줄바꿈 (break)
<input> : type 값에 따라 다양한 기능으로 구현
<input type="button">
<input type="checkbox">
<ul> : 순서가 없는 리스트
<ol> : 순서가 있는 리스트 (앞에 숫자 자동 생성)
<li> : 리스트에 속하는 모든 항목
<ul>
<li>apple</li>
<li>orange</li>
</ul><table> : 표
<table border="1"> //표의 테두리 선 두께 = 1px, border(속성이름), 1(속성 값)
<thead> //테이블 제목
<td>나이</td>
</thead>
<tbody> //테이블 내용
<td>20</td>
<tfoot> //끝에 오는 내용
<td>참고</td>
</table>
<td rowspan="숫자"> = 행병합
<td colspan="숫자"> = 열병합※ id vs class
· id = 하나의 태그만 사용할 수 있다.
· class = 한 페이지에 반복적으로 사용되는 스타일을 정의할 수 있다. class 값은 여러 개를 지정할 수 있다.
※ href vs src vs url
· href : HTML에서 link인 경우
· src : HTML에서 link 아닌 경우 (이미지, 비디오 등)
· url : CSS에서!
'TIL 👩🏻💻' 카테고리의 다른 글
| TIL : 이중 for문 (0) | 2021.03.07 |
|---|---|
| TIL : CSS (0) | 2021.03.06 |
| TIL : 반복문 (0) | 2021.03.04 |
| TIL : 조건문, 문자열 (0) | 2021.03.04 |
| TIL : 변수, 타입, 함수 (0) | 2021.03.02 |