HTML
Hyper Text Markup Language :: 웹 페이지를 만들기 위한 표준 마크업 언어
눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어.
웹 페이지를 구성하기 위한 설계도를 짜는 언어. 문서의 구조를 만들기 위한 언어이다.
Mark up ... 표시하다?
변화: 자주 사용하지 않는 용어들은 사라지고 새로운 신조어가 등장한다. (<!DOCTYPE html>은 HTML5를 사용한다는 선언)
Tag
HTML 문서를 이루는 요소
소문자로 작성하자. (대문자도 가능하지만....)
1. 구성 요소
태그명: HTML이 갖고 있는 고유의 기능으로 여는 태그(열린태그)/닫는 태그(닫힌태그) 존재.
열린 태그 안에...
속성(attribute): 태그가 갖고 있는 추가 정보.
속성값: 어떤 역할을 수행하는지 구체적인 명령을 진행하는 내용물. 따옴표를 사용. (공백이 있을 경우에는 필수!)
(* 속성과 속성값: 무엇이 어떤 일을 하는지. 주어와 목적어)
컨텐츠: 열린 태그와 닫힌 태그 사이에 있는 내용물
<h1 style= "color:black;"> Example </h1>2. 기본 구조
<!DOCTYPE html> - HTML5 라는 신조어로 문서를 선언하는 태그
<html>...</html>- 시작과 끝을 의미. 모든 html 태그는 이 안쪽에 써야 한다.
<head>...</head>- 간단한 요약 정보를 담고 있는 영역, 웹사이트에 노출X, 메타 데이터가 삽입됨.
<body>...</body>-눈에 보이는 정보를 담고 있는 영역, 이미지/텍스트
1. <head>안에 들어가야 하는 기본적 사항
<meta charset = "UTF-8"> :: 모든 문자를 웹 브라우저에서 깨짐 없이 쓰겠다.
<title>: 웹 사이트 탭에 나타나는 제목을 적는 태그
2. Visual Studio Code에서 !를 치면 나오는, Html5의 가장 기초 뼈대 코드
<!DOCTYPE html>
<html lang="en">
<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>3. 주요 Tags
자주 쓰는 기본 Tags
<h1></h1>
...<h6></h6>
<p></p>
<br/>
<strong></strong>
<em></em>
<a href="http://..." target="_blank">티스토리</a>
<img src = "http://..." width= "50px" height="50px"/>
<ul></ul> / <ol></ol>
<li>"내용"</li>
<ul style=list-style-type:...>1) <h1>:: <h> 태그:: Heading
제목이나 부제목을 표현한다.
숫자 값과 폰트 사이트가 반비례(값이 클수록 사이즈가 작아짐)
숫자는 정보의 중요도를 나타낸다.
<h1>는 가장 중요한 정보를 담기 때문에, 하나의 html 문서에서 한 번만 사용된다!
▶heading(h1..) / head / header 차이점 https://develop-dbd.tistory.com/6
2) <p></p>:
paragraph 의 약자, 본문 내용을 표현.
웹사이트의 중요 정보를, 열린 태그와 닫힌 태그 사이에 기입한다.
3) <br/> :
bar /한 줄 떼기
4) <strong><em>
</strong>: 의미적으로 강조 + 볼드 처리
</em>: 의미적으로 강조(emphasis)
▶ strong & em vs bold & italic :: semantic 차이
5) <a></a>::
글자/이미지 클릭시 다른 사이트로 이동시키는(=하이퍼링크) 태그.
- a의 하위 속성
herf = "링크": 주소 지정
target = "속성값": 링크된 문서를 어떻게 열 것인가. (어떤 방식으로 페이지로 이동할까?)
="_self" → 현재 탭에서 열기(기본값)
="_blank"→ 새 탭/윈도우로 열기
="_parent"→ 부모 프레임에서 열기
="_top"→ 현재 윈도우 전체에서 열기
="프레임 이름"→ 명시된 프레임(브라우저?)에서 열기
6) <img>
정보값을 갖고 있는 이미지를 삽입한다. 닫힌 태그가 없다.
'어디에서(src, 파일 경로)' '무엇을(alt)' 가져오는지 밝혀야 한다
- alt:
- 웹 사이트가 이미지를 출력하지 못했을 경우 대체되는 텍스트 정보.
- 웹 접근성을 보장하기 위해서 적는 '이미지의 내용'
- 웹 접근성: 모든 사용자가 신체적 조건(장애, 연령 등)과 환경(브라우저)에 구애받지 않고 웹에 접근할 수 있어야 한다.
- 이미지 파일이 깨질 때를 대비하여 이미지' 라고 써주어야 한다.
- src:
- source의 약어, 이미지의 경로를 불러오는 속성
- 경로 관련: 로컬&웹서버 /상대경로&절대경로
+ 이미지의 경로
[[로컬&웹서버]]
1. 로컬
상대경로/절대경로 중 되도록이면 상대경로를 사용하여 가져오는 것이 가장 좋다.(추천, 링크)
2. 웹서버
이미지의 주소를 복사해서 가져오기.
[[상대경로&절대경로]]
절대경로:
고유한 경로로 이미지의 위치(경로)를 그대로 가져오는 방법.
단, 이 경우 폴더 이름을 바꾸는 등 도메인이 변경되면 불러올 수 없다.
ex) C:\house\Downloads\folder\image.jpg
상대경로:
HTML 문서의 위치를 기준으로 이미지 파일의 위치(경로)를 지정하기
./ = 현재 폴더를 의미, 즉 생략 가능.
../ = 한 단계 위의 폴더로 이동. (두 단계 이동시 ../../)
1) 이미지와 html 문서가 같은 위치에 있을 때 = 이미지 이름만 기입
ex) </img src = "image.jpg">
2) 이미지와 html 문서가 다른 위치에 있을 떄
- 이미지가 문서보다 상위 경로에 있을 때
이미지가 있는 폴더가, html문서가 있는 경로보다 상위일 때
../ 를 통해 상위 폴더로 이동하여 탐색
ex) </img src = "..> - 이미지가 문서보다 하위 경로에 있을 때
이미지가 있는 폴더가, html문서가 있는 경로보다 하위일 때
ex) <img src = "(./)lower_folder/image.jpg"/>
참고 사이트:
절대 경로와 상대 경로(참고 사이트: https://webfoxrain.tistory.com/11 )
Html 이미지: img태그 src url 지정하는 방법 https://penguingoon.tistory.com/263
이미지 경로 - 절대경로와 상대경로 http://www.homejjang.com/03/html.php/img_path.php
복습할 때 추가적으로 생각해봐야 하는 것들:
이 포스팅의 마지막 파트: https://webfoxrain.tistory.com/11
<ol>,<ul>,<li>
<ol>: Ordered List, 순서가 있는 리스트 생성
<ul>: Unorderd List, 순서가 없는 리스트 생성
<li>: <ol>과 <ul>의 각 항목 나열 시 사용.
<ul>
<li>ul는 순서 없는 리스트</li>
<li>li는 이렇게 ul/ol의 각 리스트 항목의 앞과 뒤에 나타난다</li>
<li>li는 기본은 동그란 점이지만 바뀔 수 있음</li>
</ul>
<ol>
<li>ol는 순서 있는 리스트</li>
<li>li앞에 숫자가 매겨진다.</li>
</ol>설명할 때 주의할 점:
1. 용어를 통일해서 사용할 것. (열린/닫힌 태그)
2. 공통점과 차이점 확실하게.
3. 헷갈릴 포인트 짚기.
이 파트에서 헷갈릴만한 개념목록
Q.. ▶heading / header / head 차이점
heading은 강조이자 문서의 제목, <body>안에 쓰인다.
header는 시멘틱(의미론적인) 요소로 <body>안에 쓰인다.
head는 html의 기본 구조의 하나. head-body 잊지말자.
Q. ▶ strong & em vs bold & italic :: semantic 차이
strong과 em, 그리고 bold와 italic은 각각 출력되는 화면은 같아 보인다.
하지만 의미적으로 확연히 다른데, 전자는 중요함을 강조하는 것이고 후자는 텍스트의 의미 경중은 알 수 없다.
Q. (여기까지) 닫힌 태그가 필요 없는 것들은?
<br/>
<img src="" alt="" />
<!DOCTYPE html>, <meta>
'공부기록 > HTML&CSS' 카테고리의 다른 글
| [CSS] 애니메이션 (0) | 2022.06.29 |
|---|---|
| [CSS] Display, Float, Clear, 공간 디폴트 세팅(복습 필요) (0) | 2022.06.29 |
| [HTML] 박스 모델, Block, line, 마진 병합 현상 (0) | 2022.06.28 |
| [CSS] 주요 속성 (0) | 2022.06.28 |
| [HTML] Html 구조와 semantic 태그 (0) | 2022.06.28 |
