티스토리 뷰
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>
- 간접적으로 문서와 관련된 내용 또는 관련 없는 사이드바
'Web' 카테고리의 다른 글
5. Html Css 선택자 (0) | 2024.04.11 |
---|---|
4. (과제1) 닷홈 호스팅을 이용한 웹 페이지 만들기 (0) | 2024.04.05 |
3. Html 태그종류2 (하이퍼링크, 책갈피, 테이블, 아이프레임, 폼) (0) | 2024.04.04 |
2. Html 태그종류 (문단, 제목, 서식, 목록, 이미지) (0) | 2024.04.03 |
1. Html 이론 (1) | 2024.04.03 |
- Total
- Today
- Yesterday
- Python
- Enclosing
- animation적용
- 닷홈
- 절대위치
- 파이썬SQL연동
- JavaScript
- 폼
- 줄 간격
- trasform
- 변수
- DB프로그램만들기
- 고정위치
- 출력
- __call__
- CSS
- 클래스문
- 솔로의식탁
- MySQL
- 상대위치
- EPL정보프로그램
- 박스사이징
- HTML
- MySQLdb
- FOR
- 로또번호생성
- html이론
- 리스트
- DB단어장
- 셋
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |