Daily Front_Minhhk

[HTML] HTML (HyperText Markup Language), 시맨틱 요소 본문

Code개발일지

[HTML] HTML (HyperText Markup Language), 시맨틱 요소

Minhhk 2022. 10. 26. 13:25

HTML , CSS , JAVASCRIPT 에 대한 이해

HTML : 웹페이지의 구조를 담당하는 마크업 언어

CSS : 디자인요소를 시각화하는 스타일시트 언어

JAVASCRIPT : 단순한 웹페이지를 프로그램으로 만들어 유저와 상호작용하게 만드는 언어

VISUAL STUDIO 코드 작성하고 꼭! 저장하고 웹페이지에서 새로고침을 해야한다!

→ head body 형식이 갖춰진 상태에서 live server extension 사용시 그냥 저장 하면 새로고침 완료~

HTML (HyperText Markup Language)

  • 웹페이지의 틀을 만드는 작업.
  • HTML은 tag들의 집함.
  • tag란 부등호(<>) 로 묶은 HTML의 기본 구성 요소
  • html 확장자 사용

TREE STRUCTURE (트리구조)

  • HTML 문서 시작
    • html
      • head
        • title : Page titlte
      • body
        • h1 : Hello world
        • div : Convents here
          • span : Here too!

이렇게 자식과 부모노드가 있다!

<!DOCTYPE html> // 이 문서가 HTML 문서임을 선언!
<html>          // html 시작태그로 문서 전체의 틀 구성
	<head>        // head 태그는 문서의 메타데이터를 선언
		<title> Page title </title> // 문서의 제목, 브라우저의 탭에 보여짐
	</head>                       // </태그이름>은 해당 태그가 끝났음을 의미
	<body>                        // body 태그는 문서의 내용을 담음. 
		<h1>Hello world</h1>        // heading을 의미하며 크기에 따라 h1~h6 까지 있음.
		<div>Contents here          // content division을 의미하며 줄바꿈됨
			<span>Here too! </span>   // 줄바꿈이 없는 content 컨테이너
		</div>                      // div태그 끝!
	</body>                       // body태그 끝!
</html>                         // html태그 끝!

SELF-CLOSING TAG (닫는 태그 없는 경우)

태그 내부에 내용이 없다면 ( <tag></tag>와 같이 표현되는 경우)

<tag/> 처럼 표현가능!

tag에 속성이 담겨있는 경우

<img src = "codestates-logo.png" ></img>
<img src = "codestates-logo.png" />
// 둘다 같은 표현이고 scr은 속성이다!
// code~~.logo 는 속성에 대한 값이다!

자주 사용하는 HTML 요소

  • <div> : Division
  • <span> : Span
  • <img> : Image
  • <a> : Link
  • <ul> & <li> : Unorderd List & List Item
  • <input> : Input(Text, Radio, Checkbox)
  • <textarea> : Multi-line Text input
  • <button> : Button

div vs span

<html>
	<head>!!!</head>
	<body>
		<div>div 태그는 한 줄을 차지 합니다.</div>
		<div>division2 </div>
		<span>span 태그는 컨텐츠 크기만큼 공간을 차지 합니다.</span>
		<span>span2</span>
		<span>span3</span>
		<div>division3</div>
	</body>
</html>

img: 이미지 삽입

<img src = “https://~~~.com/asd.jpg”>

img태그는 닫는 태그ㄴㄴ

OR

<img src = “https://~~~.com/asd.jpg” />

self-closingtag ㄱㄱ

a : Hyperlink

<a href = “https://naver.com” target = “_black”>네이버</a>

                주소                                    새탭 시작      이름

ul, li : 리스트

<ul>
	<li> ITEM1 </li>
	<li> ITEM2 </li>
	<li> ITEM3 has nested list </li>
		<ul>
			<li>ITEM 3-1 </li>
		</ul>
	</li>
</ul>

// ● item1
// ● item2
// ● item3 has nested list
//     ○ item 3-1

✅ ul을 ol(Ordered List)로 바꾸면 ● 들이 1,2,3 숫자로 변경

 

input , textarea : 다양한 입력 폼 ( 웹개발에 사용)

<div>
ID <input type = :"text" placeholder = "type here" > // 텍스트박스에 type here문자뜨고 
																										 // 거기에 글쓰기 가능 
</div>
<div>
Password <input type = "password" > // 글쓰면 ●●●●●● 이렇게 패스워드로 나옴
</div>
<div>
<input type= "checkBox"> 다음에 들어오기  // 체크박스생기고 다음에들어오기 텍스트 생김.
</div>
<div>
<input type= "radio" name = "option1" value ="a"> a  // 체크박스는 여러개 체크 가능
<input type= "radio" name = "option1" value ="a"> b  // 라디오는 둘중에 하나
// 라디오에서 name이라는 속성을 이용해서 하나로 묶어줘야 한개만 체크가능.
</div>
<div>
<textarea></textarea> //텍스트 에어리어는 줄바꿈이 가능한 텍스트박스 생성!
</div>
<div>
<button>로그인</button> // 누를수 있는 로그인 버튼 생성!
</div>

⚠️ <p class = “ paragraph “ > this is a paragraph.</p> 여기서 attribute name (속성의 이름)은 class 다!

 

 😀 <script src = “my-java.js”></script> 엘리먼트가 자바스크립트를 위해 사용

 

😶 <p> paragraph의 약자로 하나의 문단을 표현할 때 사용

 

😆 <section> 엘리먼트는 웹페이지의 하나의 구역을 구분하는데 사용 내부컨텐츠가 그룹화

 

시맨틱 요소란?

✅ HTML의 최신 버전인 HTML5에서는 시맨틱 웹(semantic web)이 중시되면서 여러 시맨틱 요소(semantic element)가 새롭게 만들어졌습니다. 시맨틱이란 ‘의미가 있는, 의미론적인'이라고 해석할 수 있습니다. 다시 말해, 의미를 가진 요소를 사용하는 방식을 추구하기 시작했습니다. 시맨틱 요소 중 하나인 <h1> 요소를 예로 들어 보겠습니다. 최상위 제목(top level heading)을 표현할 때 사용하는 요소인 <h1> 요소를 사용할 경우, 브라우저가 큰 폰트 사이즈를 적용할 뿐 아니라, 위아래로 간격을 주어 제목처럼 보이도록 합니다. 이와 같은 효과는 <div> 요소, <span> 요소에 CSS 속성을 추가하여 <h1> 요소와 똑같이 보이도록 할 수 있습니다. 그러나 <h1> 요소를 사용할 때처럼 의미적 가치는 없다고 할 수 있습니다.

 

✅ 시맨틱 요소가 사용되기 이전에는 각 영역을 지정하기 위해 <div> 요소를 주로 사용했습니다. 그러다 보니 웹 페이지 하나에 <div> 요소 수십 개가 중첩된 이른바 <div> 지옥이 되는 경우가 많았습니다.

 

시맨틱 요소를 사용해야 하는 이유

의미 있는 요소를 사용하는 것보다 <div> 요소를 사용하되 용도에 맞게 스타일을 부여하면 되는데, 왜 시맨틱 요소를 사용하는 것을 추구할까요? 그 이유를 몇 가지 소개해 보겠습니다. 첫째, 검색 엔진이 시맨틱 요소를 더 좋아하기 때문입니다. 네이버, 구글 등은 모두 고유한 검색엔진을 보유하고 있습니다. 여러분이 키워드를 입력하고 검색을 하면 각 웹 페이지를 방문하여 그 키워드를 포함하고 있는지 확인하여 결과를 보여 줍니다. 그런데 검색 엔진이 웹페이지들을 방문할 때, 시맨틱 요소를 중요한 키워드로 고려합니다. 즉, 시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출이 결정될 수 있다는 것입니다. 둘째, 여러 개발자가 함께 작업할 때 <div> 요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 훨씬 더 편리하기 때문입니다. 뿐만 아니라, 요소 안에 채워질 데이터 유형도 예측하기 쉽습니다.

따라서 HTML 요소를 작성할 때, 항상 작성할 데이터를 가장 잘 설명할 수 있는 요소는 무엇일지 고려해야 합니다.

시맨틱 요소의 종류

시맨틱 요소의 종류는 굉장히 다양하지만 주로 쓰이는 몇 가지를 알아보겠습니다.

  • <article> : 독립적이고 자체 포함된 콘텐츠를 지정합니다.
  • <aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.
  • <footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.
  • <header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.
  • <nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에 <ul>을 넣어 목록 형태로 사용합니다.
  • <main> : 문서의 주된 콘텐츠를 표시합니다.

🔥 id : 고유한 이름을 붙일 때

 

⚠️ class : 반복되는 영역을 유형별로 분류할 때

 

<div id="writing-section"> -> selector는 div#writing-section
<li class="comment"> >> selector는 li.comment
저작자표시

'Code개발일지' 카테고리의 다른 글

[CSS] Flexbox // 복습!!  (0) 2022.10.30
[CSS ] css(Cascading Style Sheets), UI,UX,Selector  (0) 2022.10.27
[JS] 반복문 for, while  (0) 2022.10.25
[JS] String 타입을 Number 변환 // +, -, parseInt(), Number(), parseFloat()  (0) 2022.10.25
[JS] Math.pow()  (0) 2022.10.25
'Code개발일지' Related Articles more