작성 계기

HTML의 각 태그에 대한 내용은 구글링을 하게 되면 자세히 알 수 있다. 하지만 그래도 내가 지금까지 코딩 공부를 하면서 써본 친구들에 대해서 나 스스로 정리해 본 적이 제대로 없었던 것 같다. 비록 다른 분들이 작성하신 내용들을 정리해 내가 이해할 수 있는 선에서 작성한 것이지만, TIL을 작성하면서 '아 이런거였구나~' 했던 부분도 존재했기 때문에 그리고 왜 튜터님들이 저렇게 했는지 조금 이해가 가는 부분도 있어 좋았다. 많이 미흡하지만 점점 더 내용을 나의 언어로 채워나갈 수 있을 것이라 믿는다.

😂 HTML

😭 body의 구역을 나누는 태그

- div

<div>나는 구역을 나누죠</div>

• division의 약자로 하나의 가로 공간을 만들 때 사용(자동 줄바꿈)
  • block 속성으로 박스 형태의 구간을 잡음
• div 태그의 속성
  • style : 스타일 지정
  • width : 가로 크기 설정 (px 또는 %)
  • height : 세로 크기 설정 (px 또는 %)
  • border : 테두리 굵기 설정
  • background-color : div 태그 안의 배경색 지정
  • float : 좌우 정렬 (가운데 x)
  • margin : 여백 지정 (margin-top, right, bottom, left)

- p

<p>나는 문단이에요</p>

• paragraph의 약자로 하나의 문단 생성 시 사용
• div 태그와 달리 생성된 문단 위 아래로 여백(margin)이 주어짐

- ul

<ul>
    <li>하나</li>
    <li>둘</li>
</ul>

• undordered list의 약자로 순서가 필요없는 리스트 생성
• p 태그와 같이 목록의 위 아래로 여백이 주어지며, 순서가 없기 때문에 bullet point가 각 목록에 주어짐

- ol

<ol>
    <li>하나</li>
    <li>둘</li>
</ol>

• ordered list의 약자로 순서가 있는 리스트 생성
  • 숫자나 알파벳이 붙음
• ol 태그의 속성
  • type : 목록의 마커 지정
    • 1(숫자/기본값)
    • a(엉어 소문자) / A(영어 대문자)
    • i(로마숫자 소문자) / I(로마숫자 대문자)
  • start : 시작 목록의 순번 지정 (숫자로 지정)
  • reversed : 항목을 역순으로 변경

😭 body의 구역 내 콘텐츠 태그

- h1 ~ 6

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

• 제목을 표시할 때 사용하며, 숫자가 커질수록 글자의 크기가 작아짐
• html 문서를 작성할 때, h1 태그를 작성해야 다른 사람이 구글링할 때 나의 문서가 검색될 확률이 큼

- hr

<hr>

• html 문서에서 문단을 의미적으로 분리하고자 할 때 사용(가로로 분리)
• 너비나 높이 등의 스타일을 입히려면 css를 사용

- span

span 태그 : <span style="color:blue">특정</span> <span style="color:red">글자</span>를 꾸밀 때 사용

• div 태그와 같이 영역을 설정할 때 사용
  • span 태그는 줄바꿈 지원 x
  • span 태그는 줄 단위의 영역 설정
  • Inline 속성으로 태그 안의 콘텐츠만 잡음

- a

<a href="http://naver.com/"> 하이퍼링크 -> 네이버로~~ </a>

• 하이퍼링크를 걸어주는 태그
• a 태그의 속성
  • href : 클릭했을 때 이동할 링크
  • target : 링크 오픈 방식
    • _self : 현재 페이지(기본값)
    • _blank : 새 탭
    • _parent : 부모 페이지(iframe이 사용된 환경)
    • _top : 최상위 페이지(iframe이 사용된 환경)
• 예시의 하이퍼링크는 현재 페이지에서 네이버로 가게 되는 것이며, 아래의 코드는 새로운 페이지에서 네이버로 가게 됨

<a href="http://naver.com/" target="_blank">하이퍼링크 -> 네이버로~~ </a>

- img

img 태그 : <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />

• 문서에 이미지를 삽입
• img 태그의 속성
  • src : (필수) 삽입하고자하는 이미지의 경로 지정
  • alt : (필수x) 이지미에 대한 설명
    • 스크린 리더가 해당 값을 읽어 사용자에게 설명
    • 접근성 차원에서 유용
    • 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 해당 값을 대신 제시

- button

button 태그 : <button>BUTTON</button>

• 클릭할 수 있는 버튼을 정의할 때 사용
• 텍스트 또는 이미지 같은 콘텐츠 삽입 가능
• onclick을 통해 버튼을 누르게 되면 수행되는 동작을 지정할 수 있음
  
  

- input

• 사용자로부터 정보를 받는 기능을 위해 사용
• 속성을 사용해 여러 가지 입력 양식으로 변경할 수 있음
  • ex. button 태그를 사용하지 않아도 버튼을 만들 수 있음

    			<input type="button" value="BUTTON"/>

• input 태그의 속성
  • type : 유형
  • value : 사용자에게 맨 처음 보여지는 값
  • name : 서버로 전달되는 이름
  • text : 텍스트 입력 창 생성
  • password : 비밀번호 입력 창 생성
  • radio : 라디오 버튼 생성
  • checkbox : 체크박스 생성
  • file : 파일 이름 입력 창 생성
  • image : 이미지 -> 전송 버튼
  • hidden : 서버에는 전송되나 사용자에게는 보이지 않음
  • submit : 서버로 전송하는 버튼을 만듦(누르면 화면 초기화됨)
  • button : value 값을 초기값으로 보여주는 버튼 생성
    
    

- textarea

textarea 태그 : <textarea>입력하세요</textarea>

• 여러 줄의 텍스트를 개수 제한없이 입력할 수 있는 영역을 정의