나는 오늘도 멋있다

HTML(HyperText Markup Language) 에대해서 본문

Web/HTML&CSS

HTML(HyperText Markup Language) 에대해서

나는 오늘도 멋있다 2023. 12. 13. 19:23
개발자가 사용자에게 보여주고 싶은 컨텐츠를 브라우저가 읽을 수 있도록 만들어 놓은 문서

 

HTML구조

// 문서의 형식을 지정하여 브라우저는 해당문서를 HTML5 문서로 해석한다.
<!DOCTYPE html>

// 문서의 시작을 알리며, lang속성은 문서의 언어를 지정한다.
<html lang="en">

// body태그를 읽기전에 정보들
// html 파일의 기본정보(문서정보, 메타데이터, 스타일시트, 스크립트)
<head>
	// 문서의 문자 인코딩
    <meta charset="UTF-8">
    // 뷰포트의 설정을 정의
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    // 브라우저의 탭에 표시되는 문서의 제목
    <title>Document</title>
</head>

// 문서의 본문으로서 화면에 표시되는 모든내용이 들어감
<body>
    
</body>

</html>

 

 

시멘틱 태그(Semantic Tag)

태그 설명 용도
<header> 문서나 섹션의 헤더를 정의 로고, 제목, 네비게이션
<nav> 네비게이션 링크를 정의 메뉴, 링크목록
<main> 문서의 주요콘텐츠를 정의하며, 하나만 사용해야함  
<article> 독립적으로 구분되거나 재사용가능한 콘텐츠 블록 뉴스, 기사, 블로그 포스트
<section> 문서의 섹션을 정의 제목, 하위섹션
<aside> 사이드바 또는 페이지의 주요 콘텐츠와 연관된 부가정보  
<footer> 문서나 섹션의 푸터를 정의 저작권정보, 연락처정보, 링크
<figure> 이미지, 도표, 캡션 등과 같은 콘텐츠를 포함하는 그룹을 정의  

 

 

HTML Semantic Elements

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

What Is Semantic HTML, and Why Should You Use It?

Semantic HTML tags convey meaning beyond the simple presentational value that they provide in a browser. Here is what they are and when to use them.

www.thoughtco.com

 

CSS 태그 선택자

선택자 설명
요소 선택자 p {...속성}
클래스 선택자 .app {...속성}
가상클래스 선택자 tag:hover {..속성}
(button:hover {...속성})
ID 선택자 #app {...속성}
전체 선택자 * {...속성}
자손 선택자 div p {...속성}
(div 안에있는 모든 p)
자식 선택자 ul > li {...속성}
(직계 자식인 모든 li)
인접 형태 선택자 div + p {...속성}
(div 바로뒤에 있는 p)
일반 형제 선택자 div ~ p {...속성}
(div 다음에 있는 모든 p)
속성 선택자 tag[attribute=value] {...속성}
(input[type="text"])
그룹화 선택자 h1, h2, h3, ... {...속성}

 

저작자표시

'Web > HTML&CSS' 카테고리의 다른 글

Flex  (0) 2024.01.17
Grid  (0) 2023.12.19
'Web/HTML&CSS' Related Articles more