[리뷰] HTML 기초

웹 개발에 있어 가장 필요한 3가지 HTML,CSS,JS 중 HTML 정리

 

HTML은 구조를 담당하는 마크업 언어, CSS는 디자인 요소를 시각화하는 스타일시트 언어, JS는 구조와 스타일이 완성된 각각의 요소에 생명을 부여하는 상호작용 역할을 한다고 할 수 있다.

HTML(Hyper Text Markup Language) 이란 ?

• 웹페이지의 틀을 만드는 마크업언어이다.
• HTML은 TAG(태그)들의 집합이며, 태그는 부등호<>로 묶인 HTML의 기본 구성 요소이다.
• TAG는 쌍이 있으며, 여는 순서와 닫는 순서가 철처하게 이루어져 있다.  === TREE STRUCTURE
  <img/>등과 같이 닫는 태그가 없는 SELF-CLOSING TAG 속성도 있다.
  태그에 속성도 담길 수 있다. <img src = "image.png"/>

자주 쓰이는 TAG들

태그	설명
<div>	Divistion
<span>	Span
<img>	Image
<a>	Link
<ul>&<li> <ol>&<li>	Unordered List & List Item Ordered List & List Item
<input>	Input(Text,Radio,Checkbox)
<textarea>	Multi-line Text Input
<button>	Button

중요한 태그들만 외우고 필요 시 구글링(MDN 등)을 참고하여 사용하면 된다.

 

<div>div 태그는 한 줄을 차지</div>

<span>span 태그는 컨텐츠 크기만큼 공간을 차지</span>
<span>span2</span>
<span>span3</span>

<div>
  <p>a: 링크, target="_blank"를 통해 새 창으로 열기 가능</p>
  <a href="https://github.com/JIYEONGSTAR" target="_blank">깃허브 새창으로 바로가기</a>
</div>

<div>
  <p>ul,ol,li: 리스트 ul 순서없는, ol 순서 있는 리스트</p>
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>
      item3
      <ol>
        <li>nestedItem1</li>
        <li>nestedItem2</li>
      </ol>
    </li>
  </ul>
</div>

<div>
  <p>input 기본type 은 text, placeholder는 미리보여주는 내용</p>
  <input type="text" placeholder="작성하세요" />
</div>

<div>
  <p>radio버튼 같은 name에서 하나만 선택</p>
  <input type="radio" name="choice" value="hi" />hi
  <input type="radio" name="choice" value="hello" />hello
</div>

<div>
  <p>textarea: 여러줄의 input 가능</p>
  <textarea cols="30" rows="5"></textarea>
</div>

<div>
  <p>checkbox: checked 명시적으로 표현해서 체크 가능, 여러개 선택 가능</p>
  <input type="checkbox" checked /> checked <input type="checkbox" /> unchecked
</div>

<div>
  <p>button: 버튼</p>
  <button>저장하기</button>
</div>

div 태그는 한 줄을 차지

span 태그는 컨텐츠 크기만큼 공간을 차지 span2 span3

a: 링크, target="_blank"를 통해 새 창으로 열기 가능

깃허브 새창으로 바로가기

ul,ol,li: 리스트 ul 순서없는, ol 순서 있는 리스트

• item1
• item2
• item3
  1. nestedItem1
  2. nestedItem2

input 기본type 은 text, placeholder는 미리보여주는 내용

radio버튼 같은 name에서 하나만 선택

hi hello

textarea: 여러줄의 input 가능

checkbox: checked 명시적으로 표현해서 체크 가능, 여러개 선택 가능

checked unchecked

button: 버튼

시맨틱 요소란?

 

웹 페이지 하나에 div요소 수십 개가 중첩되어 의미를 파악할 수 없게 되었다. 시맨틱이란 '의미가 있는, 의미론적인'으로 해석되며 의미를 가진 요소를 사용하는 방식을 추구하기 시작하였다. div태그에 css속성을 추가하여 시맨틱요소처럼 나타낼 수 도 있지만 의미적 가치는 없다.

검색 엔진은 시맨틱 요소를 더 좋아하기 때문에 시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출 될 수 있다. 또한 여러 개발자가 함께 개발할 때 div요소를 탐색하는 것 보다 요소 안에 채워질 데이터 유형도 예측하기 쉬우며, 의미 있는 코드 블록을 찾는 것이 더 편리하기 때문이다. 

 

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

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

레퍼런스: 나무위키: HTML/태그, MDN:Sementics, w3School:HTML Semantic Elements

 

id와 class

와이어프레임을 설계할 때 id와 class 속성을 사용하여 분류한다.

이름에 따라 어떤 역할을 하는지 파악할 수 있다.

id는 고유한 이름에 사용되고, class는 반복적으로 사용되는 요소를 유형별로 분류할 때 사용한다. 같은 class를 가지고 있는 요소는 같은 유형으로 분류된 요소라는 것을 유추할 수 있다.

id	class
#으로 선택	.으로 선택
한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소 많음
특정 요소에 이름을 붙이는 데 사용	스타일의 분류(classification)에 사용