5일차 / HTML 기초

HTML이란?

---

HyperText Markup Language

웹페이지의 틀을 만드는 마크업언어. 구조를 구성

 

웹페이지 작성에 필요한 HTML, CSS, JS 각각 역할

HTML 구조 마크업 언어.

CSS 스타일 스타일 시트 언어

JS 상호작용 웹페이지를 프로그램으로 만들어 유저와 상호작용할 수 있게 만들어주는 프로그래밍언어

 

 

 

 

 

 

 

HTML 태그

---

HTML 태그 정리 참고

https://pridiot.tistory.com/6

헷갈릴 때 참고하기 좋음

 

 

 

 

태그 안에 속성이 담길 수 있음

<img src=""/>

<a href=""> </a>

<a href="~" target="_blank"> </a> //target으로 새페이지로 열기

 

 

 

ul과 li는 , ol의 차이

ul 요소는 unordered list(목록)의 약자로, 순서가 없는 데이터를 표현하는 경우에 적절합니다. 다음과 같이 사용합니다.

ul : unordered list 글자 앞에 기호가 붙는다

ol: ordered list 숫자, 영문 알파벳이 붙는다(type으로 속성 지정할 수 있다)

li: ul과 ol 아래에서 리스트

 

 

 

 

input textarea 입력 폼

type, placeholder 속성

<input type="text" palaceholder="type here">

<input type="password">

<input type="checkbox" checked> 

<input type ="radio" name="choice" value="a">

input 태그에서 체크박스와 라디오 차이

체크박스는 여러개 선택 가능

라디오는 name으로 그룹화하여 하나만 선택 가능

 

 

 

 

div 와 section의 차이

HTML <section> 요소는 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는 데 사용됩니다. 이 엘리먼트는 HTML5 표준의 탄생과 함께 생겨난 시맨틱 요소의 일부입니다. HTML 요소의 이름에 의미를 충분히 담고 있기 때문입니다.

<div> 요소는 HTML5 이전에는 하나의 구역(division)을 나타내기 위해 사용할 수 있었지만, 지금은 어떤 큰 구역을 구분하기 위하여 사용되는 것은 지양되고 있습니다. 다만, 작은 구역에서 불가피하게 div를 사용해야 하는 "최후의 수단(as a last resort)"으로는 사용해도 괜찮습니다. 좋은 스택 오버플로우 답변을 소개합니다.

 

 

 

 

 

 

 

 

 

시맨틱요소

---

HTML의 최신 버전인 HTML5에서는 시맨틱 웹(semantic web)이 중시되면서 여러 시맨틱 요소(semantic element)가 새롭게 만들어졌습니다. 시맨틱이란 ‘의미가 있는, 의미론적인'이라고 해석할 수 있습니다. 다시 말해, 의미를 가진 요소를 사용하는 방식을 추구하기 시작했습니다. 

 

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

검색 엔진이 시맨틱 요소를 더 좋아하기 때문입니다. 시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출이 결정될 수 있다는 것입니다. 둘째, 여러 개발자가 함께 작업할 때 <div> 요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 훨씬 더 편리하기 때문입니다. 뿐만 아니라, 요소 안에 채워질 데이터 유형도 예측하기 쉽습니다.

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

 

 

 

시맨틱 요소의 종류

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

HTML Semantic Elements

 

 

 

 

 

 

 

 

 

attribute 속성

---

특정 태그에 속성명을 붙여 선택할 수 있게 함

attribute name과 attribute value이 있다.

id, class, name은 attribute name이다.

id, class, name에 붙인 이름이 attribute value.

<div class="등록"></div>
//'class'는 attribute name
//'등록'은 attribute value

 

 

 

selector로 id와 class를 선택할 수 있다.

id는 '#', class는 '.'으로 선택. 아마 CSS, JS에서 사용 가능.

아래처럼 사용할 수도 있다. 정확히 어떤 경우에 사용하는지 찾아보기.

<div id="등록섹션"></div> 
===
div#등록섹션

 

 

 

attribute name id와 class, name의 차이

id는 고유한 이름을 붙임

class 반복되는 영역을 유형별로 분류할 때 사용하기 때문에 고유하지 않음

 

 

출처: https://penguingoon.tistory.com/116

 

 

 

 

 

 

 

 

 

 

 

기억하기

---

<p> 태그

HTML <p> 요소는 paragraph(문단)의 약자로, 하나의 문단을 표현하기 위하여 사용됩니다. HTML 문서 작성 시, 가능하면 이 요소의 본래 목적에 맞게 사용하는 것이 권장됩니다.

 

 

header와 h1

header는 상단부 영역을 구분하는 의미의 태그, h1은 제목에 쓰이는 태그

 

 

?트리구조가 뭘까  ?

 

 

<textarea>줄바꿈이 되는 입력 폼</textarea>