티스토리 뷰

Web

3. Html 태그3 (디스플레이)

muru_ 2024. 4. 5. 15:48

1. 인라인

- content의 크기만큼만 자리를 차지하는 요소
- 텍스트, img (아무리 이미지를 넣어봐야 밑으로 내려가지 않음), span 등

2. 블록

- 라인을 모두 차지하는 요소
- p, h, ul, li, div
- 면의 특징을 가지고 있음

3. span 태그

- 인라인 특징을 가지고 있음
- 글자 단위로 영역을 설정
(아무 글자나 쓰고 span으로 감싸고 css로 디자인)

4. div 태그

- 블록 특징을 가지고 있음
- 면 단위로 영역으로 설정

5. 시맨틱(Semantic) 태그

Semantic: 의미가 있는, 의미론적인
- div > div > div > ... 끝없는 div를 탐색하는 것보다 효율적
- 개발자에게 명확한 의미를 전달
- 스크린 리더를 사용하여 페이지를 탐색할 때 도움
- 검색엔진 봇에게 정보 제공
<div>
    <div id="header">
        <div>
            <div> 

<header>
- 페이지의 제목과 같은 소개, 내용을 포함
- heading<h> 태그나 로고, 검색양식, 작성자 이름등을 포함

<nav> : 메뉴, 목차 등에 사용 
<main> : 주 컨텐츠 영역
<section>
- 구체적인 시맨틱 태그가 없는 문서의 독립적인 영역
- 제목이 있는 컨텐츠에 사용하는 것이 일반적

<article>
- 자체적으로 이미가 있는 웹페이지의 부분
- 독립적으로 배포 또는 재사용되도록 의도된 문서
- 블로그, 게시물, 신문기사

<footer>
- 작성자에 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크, 카피라이트 등을 포함

<aside>
- 간접적으로 문서와 관련된 내용 또는 관련 없는 사이드바


공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/05   »
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함