1. HTML

  • HTML의 요소 하나하나는 태그
  • HTML은 태그들의 집합
  • 태그를 활용하여 어떤 요소인지 명시 

2. HTML 문서 구조

<!DOCTYPE html>
<html>
  <head>
  	<!-- head 입력 -->
  </head>
  <body>
  	<!-- body 입력 -->
  </body>
</html>
  • DOCTYPE html : 브라우저에게 HTML파일임을 알려줌
    • Document Type의 약어
    • 웹문서가 어떠한 형식으로 작성되었는지 최상단에 선언
  • html 태그 : head + body로 이루어짐(페이지 전체의 컨텐츠를 감싸는 루트요소)
    • head 태그 : 사용자가 body태그를 읽기 전에 알아야 할 정보, html 파일의 기본적인 정보
      1. 사람이 읽을 수 있는 정보는 아님(화면에 나타나지 않음) → 브라우저가 식별할 수 있는 정보
      • body 태그 : 사용자에게 보여주고 싶은 컨텐츠

3. 태그

  • <태그이름> 으로 선언
  • 여는태그와 닫는태그로 구성 
    <div>내용(content)</div>
  • 내용 : 요소의 내용
    • 컨텐츠(내용)에는 문자열이 들어가거나 다른 태그가 들어갈 수도 있음 
      <p>
	컨텐츠가 들어갑니다.
	<span>그렇군요</span>
</p>
  • 요소 : 여는태그, 닫는태그, 내용을 통틀어서 표현
    • 위에서 2개의 요소로 이루어져있음(p태그, span태그)

 

  • 빈태그(컨텐츠가 필요로 하지 않는 태그) : 열고 닫는 태그로 구성할 필요 없음 
    • 내용을 가지지 않는 요소
    • 대표적으로 <img>, <hr>, <br>
    • 닫는 태그를 추가로 명시하지 않아도 문법적으로 문제가 없음

 

  • 태그들은 계층적으로 이루어져 있음(요소는 중첩 가능) 
    <body>
	태그들은 계층적으로 이루어져 있다
	<p>
		컨텐츠를 입력!
		<span>
			안녕하세요
		</span>
	</p>
</body>
    • p태그를 기준으로 body태그는 부모 태그
    • span태그는 자식태그
      • 자식 태그들은 부모 태그가 닫히기 전에 닫혀야 함

 

4. 태그를 구분짓는 특성

1) 구획을 나누는 태그

  • 단독으로 사용했을 때에 눈에보이지 않음
  • layout을 위한 태그
  • 여러가지 요소들을 묶어서 그룹화

2) 그 자체로 요소인 태그

  • 단독으로 사용했을 때에도 눈으로 확인 가능

 

5. 시멘틱 태그

  • 특별한 의미를 가지는 태그
  • 구획을 나누는 태그로 단독으로 사용했을 때는 눈에 보이지 않음
  • 단순 스타일링을 위해 사용하지 않도록 주의
    •  <strong></strong>태그는 의미적으로 강조할때만 사용
      → 글자를 굵게 만들기 위해 사용하지 않기

 

6. 블록과 인라인

태그가 정의될때 블록인지 인라인인지 정해짐
1️⃣ 블록

  • 블록 레벨 요소는 새로운 줄에서 시작, 좌우 양쪽으로 최대한의 너비를 차지
    • 화면 전체를 차지한다는 의미는 아님 : 부모가 허용한 최대 너비를 차지
    • 상자를 아래로 쌓는것

2️⃣ 인라인

  • 인라인 요소는 줄의 어느 곳에서나 시작 가능
  • 바로 이전 요소가 끝나는 지점에서 시작하여 요소(content)의 내용만큼 차지
포함규칙
- 같은 형태의 다른 요소를 안에 포함할수 있음(블록 > 블록, 인라인 > 인라인)
- 대부분의 블록 요소는 다른 인라인 요소를 안에 포함할 수 있음
⚠️ 인라인 요소는 블록 요소를 포함할 수 없음

 

7. 경로

1) 절대경로

  • 인터넷, url로 접속가능한 경로 
    <a href="www.naver.com">네이버</a>

2) 상대경로

  • (통상적으로) 개발 환경에서 시작되는 경로
  • 디렉토리 
    HTML
├── **test**
│   ├── sample.html
├── index.html
├── style.css
    • index.html 
      <!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" ***href="style.css"*** />
  </head>
  <body>
    <a href="./test/sample.html">sample</a>
  </body>
</html>
      • ./ : 현재 파일이 위치한 경로
      • 현재파일이 위치한 상대 경로 ./는 생략 가능
    • sample.html 
      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>test 폴더의 sample.html입니다.</h1>
    <a href="../index.html">index로 돌아가기</a>
  </body>
</html>
      • ../ : 상위 경로 또는 이전 경로

 

8. 벡터 이미지 🆚 래스터 이미지

  • 벡터 이미지
    • 이미지를 확대해도 이미지가 깨지지 않음
    • 점과 점을 이어주는 직선으로 연결되어 있음(아이콘, 그래프) 
    • SVG
  • 비트맵 이미지
    • 확대되면 이미지가 깨지는 현상(풍경사진)
    • 브라우저의 해상도에 맞게 하나의 픽셀로 이루어져 렌더링(격자 하나하나가 정보를 가짐)
    • JPEG : 정적이미지(손실 압축에 적합)
    • PNG : 정적이미지 + 투명도가 필요한 경우
    • GIF : 여러장의 이미지로 이루어진 애니메이션 표현 가능
    • WEBP : 압축등이 우수하나 브라우저가 제한적

 

 

'Dev-log > HTML' 카테고리의 다른 글

전역속성  (0) 2024.04.07
HTML 태그  (0) 2024.04.06
HTML과 웹브라우저  (0) 2024.04.06

+ Recent posts

티스토리툴바