Html icons created by Pixel perfect - Flaticon
HTML: Hyper Text Markup Language
하이퍼텍스트 마크업 언어
하이퍼 텍스트:
인터넷에서 사이트끼리 접속을 매개해 주는 링크
마크업:
Tag(태그)들의 집합
Tag: 요소의 배치방식이나 요소간 관계등의 특징을 정의하기 위한 도구.
- html은 요소의 앞과 뒤에 태그를 붙여 특징을 정의한다.
ex) <tag class="hello">요소</tag>
앞에 있는 <tag class="hello"> 태그를 opening tag(여는 태그),
뒤에 있는</tag> 를 closing tag(닫는 태그)라 한다.
- 단일 태그로 존재하는 요소
<br> : 줄바꿈태그. 앞뒤 태그가 따로 존재하지 않는다.
- 태그속성(attribute)
태그에 포함되는 문자를 "속성"이라 한다.
각 요소들의 행동 및 배치구조를 나타내기 위한 도구이다.
<tag class="hello">
위의 코드에 쓰인 class가 바로 속성이다.
요약: HTML이란 링크들와 태그의 집합으로,
웹페이지의 성분을 구성할때 사용하는 언어이다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<header>
</header>
</body>
</html>
html 코드 구조
- Head 헤드태그: html문서의 meta(상태) 데이터를 담는다.
ex) <charset="UTF-8"> "UTF-8" 로 부호화된 문자.
- header 헤더태그: body내부의 태그로 HTML문서의 제목, 로고 탐색을 위한 링크등을 포함한다
- body 태그: html문서의 실질 내용을 포함한다
기타 요소정의 태그들
- <script> 태그:
클라이언트 쪽의 script를 정의하는 역할을 한다.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9 ATKxIep9 tiCxS/Z9 fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
위의 예시들은 부트스트랩 홈페이지에서 가져온 popper와 javascript에대한 script이다.
src: url의 주소를 저장하는 속성,
integrity와 crossorigin은 각각 보안을 위해 추가된 attribute(속성)이다
- <p> 태그: paragraph(문장) 을 나타내는 태그
block 요소라 생성부분에서 줄 바꿈이 이루어진다.
- <link 태그: stylesheet나 fabicon과 같은 HTML문서의 외부 정보저장소로 접근하게 해 준다.
ex) <link rel="stylesheet" href="css/styles.css">
head에 위의 코드가 입력되면, css 폴더안의 styles.css파일을 불러온다
rel속성은 불러오는 외부 파일의 역할을, href속성은 주소를 나타낸다.
- <div> 태그: container(컨테이너) 를 만들어주는 태그
<div> <p>문장.</p> <p>문장</p> </div> 위의 예시는 두개의 문장을 하나의 div컨테이너 내부에 묶은것을 보여주고있다. 컨테이너에대해선 이전에 포스팅한적 있다. https://batcave.tistory.com/19 - <span> 태그: inline태그로, 줄 바꿈을 일으키지 않고 text요소들을 묶어줄 때 사용한다.
혹은 text 내부의 특정요소에만 CSS 스타일 변화를 주기 위해 사용한다.
출력결과: be the red.<p>be the <span style="color: red;">red</span> .</p> - <i> 태그: 이탤릭글씨체를 구현해 주는 태그
부트스탭 icons 또는 FontAwesome 등에서 아이콘을 제공하는 태그로 사용되기도 한다p태그와는 다르게 inline 요소이기 때문에 줄 바꿈이 일어나지 않는다.
출력결과: this is an italic sentence<p>this is <i>italic</i> sentence</p>
- <em> 태그: inline 요소로, 내부의 text를 강조해 주는 태그.
출력결괴: This is important. so need to be emphasized.<p>This is important. so need to be <em>emphasized</em> .</p>
- <ol> 태그: (ordered list) 순서리스트 태그.
내부에 <li> 태그 요소로 순서리스트를 작성한다.
<ol> <li> list1 </li> <li> list2 </li> </ol>
출력결과:- list1
- list2
- <ul> 태그: (unordered list) 비순서리스트 태그.
내부에 <li>태그 요소로 순서리스트를 작성한다.
출력결과:<ul> <li> list1 </li> <li> list2 </li> </ul>- list1
- list2
기타 input, label, form 등등의 태그는 나중에 더 다뤄보겠습니다.
'it공부 (개념) > HTML, CSS' 카테고리의 다른 글
| CSS의 Box Theory(박스이론)이란? content, padding, border, margin 알아보기 (0) | 2023.01.12 |
|---|---|
| CSS MEDIA QUERY(미디어쿼리)란? 개념 및 사용법 (1) | 2023.01.11 |
| 부트스트랩의 Grid(그리드) 레이아웃, +@container(컨테이너), breakpoint(브레이크포인트) (0) | 2023.01.07 |
| html copy의 7가지 선택지 (0) | 2023.01.01 |
| CSS 정리- block, position (0) | 2022.12.31 |