-
01⠀HTML 의 개념과 구조web/HTML + CSS 2022. 2. 10. 19:21
HTML (Hypertext Markup Language)
웹 문서를 만드는 기본 언어 (웹 브라우저에 내용을 보여주는 텍스트, 이미지, 영상 등의 위치를 표시)
HTML 문서의 기본 구조
<!doctype html>
웹 문서의 유형을 지정
<html> ~ </html>
HTML 파일의 시작과 끝
*<html lang="ko">
문서에서 사용할 언어 지정 (ko=한국어)
<head> ~ </head>
웹 브라우저에 문서 정보를 알려주는 태그 (화면에는 보이지 않음)
*<meta>,<title>,<style> 등의 시맨틱 태그 (<style> 에는 css 나 js 를 넣음)
<meta> 닫x
웹 문서와 관련된 정보를 지정함 (문자 세트 인코딩 지정, 제작자 등)
*<meta charset="UTF-8">
웹 문서를 인코딩할 문자세트 지정 (utf-8 문자세트 사용 시 화면에 한국어로 인코딩하여 표시)
*<meta name="keywords" content="공부 블로그">
웹 문서의 키워드 지정
*<meta name="description" content="사진 전공자가 웹 개발을 공부한다네요">
웹 문서의 설명
*<meta name="author" content="징쨩">
웹 문서의 소유자나 제작자
<title> ~ </title>
웹 문서의 제목 (웹 브라우저의 제목 표시줄에 표시)
<body> ~ </body>
웹 브라우저에 표시할 내용
*<header>,<section>,<nav>,<article>,<footer> 등의 시맨틱 태그들이 화면을 구성
<header> ~ </head>
주로 위쪽이나 왼쪽에 위치하며 머리말, 제목을 표현하기 위해 쓰임
*<header> 안에 다른 <header>,<footer> 가 자손으로 올 수 없음
*<address> ,<footer>,다른 <header> 의 자손이 될 수 없음
<nav> ~ </nav>
웹 문서 안에서 다른 위치로 연결하거나 연결하려는 링크를 만듬 (위치 영향 X)
+내용 추가
수평 내비게이션이라고 보면됨 메뉴 항목을 가로로 구현함
<section> ~ </section>
웹 문서에서 본문 콘텐츠 영역을 나타냄 (대분류)
*<section> 안에 <section> 을 또 넣을 수 있음
*의미를 묶는 것이 아닌 단순 스타일 적용을 위해 콘텐츠를 묶는다면 <div> 사용
<article> ~ </article>
웹에서 실질적으로 보여주고 싶은 내용을 넣음 (독립적인 느낌)
*쇼핑몰의 외투 / 상의 / 하의 / 악세서리 를 <section> 에 넣는다면 각 외투 상품, 상의 상품, 하의 상품을 <aricle> 에 넣음
<main> ~ </main>
웹 문서에서 핵심이 되는 내용을 담음 (<main> 태그는 웹 문서에 한번만 사용)
<aside> ~ </aside>
사이드 바 영역을 나타냄 (ex본문 옆 광고링크)
<footer> ~ <footer>
웹 화면 구조 중 제일 아래에 위치하며 사이트 제작 정보나 저작권, 연락처 등을 넣음
*<footer> 안에 <header>,<section>,<article> 등 다른 태그 사용 가능 (?)
*<address>,<header>,다른 <footer> 의 자손이 될 수 없음
아니 이거 책에서는 푸터안에 다른 태그 사용 가능하다는디 검색해보면 자손으로 못쓴다는디 모가 맞어 ㅅㅂㅅㅂㅅㅂㅅㅂ일단 나중에 div 좀 배우면 알 것 같기도 해서 패스 ...<adress> ~ </adress>
주소나 연락처 정보를 넣음
<div> ~ </div>
문서 구조를 만들거나 스타일을 적용할 때 사용 (css)
<body> 구조 'web > HTML + CSS' 카테고리의 다른 글
02-2⠀CSS 박스모델 / 테두리 / 여백 / 레이아웃 / 위치지정 (0) 2022.02.18 02-1⠀CSS 텍스트 / 목록 / 표 스타일 속성 (0) 2022.02.17 02⠀CSS (Cascading style sheets) 의 문법과 선택자 (0) 2022.02.14 01-2⠀입력 양식 태그 (0) 2022.02.13 01-1⠀텍스트 / 목록 / 표 / 이미지 / 오디오와 비디오 / 하이퍼링크 태그 (0) 2022.02.10