HTML

gunwooko·2020년 5월 20일
0

HTML & CSS 노트

목록 보기
1/2
post-thumbnail

HyperText Markup Language은 웹을 이루는 가장 기초적인 구성 요소이다. 웹 페이지의 틀을 만든다.

HTML은 <tag>들의 집합이다. (부등호)
tag는 열고 닫는 구성으로 이뤄져있고, 열고 닫는 순서가 철저하게 지켜지고 있다. 이를 Tree Structure라고 한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" /> <!--어디서든 한글이 잘 나올 수 있도록 해주는 유닛 코드 세팅-->
    <title>Page title</title>
  </head>
<!--여기까지가 눈에 보이지 않는 부분이다. body부턴 눈에 보이는 영역이다.-->
  <body>
    <h1>Hi there!<h1>
    <div>Contents here!
      <span>Contents here!</span>
    </div>
  </body>
</html>

닫는 태그가 없는 경우도 존재한다. Self-Closing tag라고 부른다.

<img src = "helloworld.png"></img>

<img src = "helloworld.png" /> <!--"/>"로 대체 가능하다. 
                               src는 img 태그의 속성이다.-->

tags

- <div></div> 컨텐츠가 태그 한 줄을 차지한다.
- <span></span> 컨텐츠 크기만큼 공간을 차지한다.
- <img src=""> 닫는 태그가 필요없고, src 속성을 이용해 이미지를 추가할 수 있다.
- <a href="링크주소" target="_blank">브라우저에 보여지는 이름</a>
	링크를 삽입할 수 있는 태그다. 
	href 속성을 이용해 링크 주소를 삽입할 수 있고
	target 속성을 이용해 새창에서 브라우저를 열 수 있게 할 수 있다. 
- <ul></ul> unordered list
- <li></li> list
- <ol></ol> ordered list

입력폼이 들어가는 tags

- <input type="text" placeholder="type here">
- <input type="password">
  여기에 사용자가 아이디 혹은 비밀번호를 넣을 수 있다.
- <input type="checkbox" checked> checked
- <input type="checkbox"> unchecked
  첵크박스는 여러개 선택이 가능하다.
- <input type="radio" name="choice" value="a">a
- <input type="radio" name="choice" value="b">b
  라이오버튼은 둘 중 하나, 셋 중 하나만 가능하다. 그룹을 설정할 수 있다. 
  name 속성을 사용해서 그룹을 지정해준다. 
  그룹이 다르거나 지정해주지 않는다면 하나의 보기가 아니라 
  의도하지 않게 둘 다 선택이 가능하게 될 수 있다.
- <textarea></textarea>
  열고 닫는 태그가 필요하다. 줄 바꿈이 가능한 입력폼이다.
- <button>누르세요</button> 버튼을 생성해준다. 

HTML 영역을 의미있게 구분하기 (Semantic tag)

HTML의 영역을 그냥 작성하는 것이 아닌, 누구나 코드를 봤을 때 코드의 의미를 이해할 수 있도록 작성하는 것이 중요하다.
이 작업을 도와주는 semantic tags가 몇가지 있다: <section>, <header>, <footer>, <code>.

profile
첫걸음

0개의 댓글