[HTML] 태그
HTML의 몇가지 태그를 알아보겠습니다.
먼저 Head 태그에 존재하는 태그들입니다.
script : 헤드 태그에 존재하고, 외부파일과 연결할 때 사용합니다.
link : <link href = "외부 CSS 파일 경로" rel = "stylesheet" type = "text/css"> 형식으로 사용하는데
href는 css파일을 불러오는 역할이고
rel = "stylesheet"는 연결파일이 stylesheet이라는 의미입니다.
type = "text/css"는 stylesheet가 텍스트로 구성되어 있는 css유형이다라는 것을
명시해두는 것입니다.
다음은 body태그에서 자주 사용하는 태그입니다.
h1 : 글자의 크기가 가장 큰 머리말로 설정하는 태그입니다.
h6 : 글자의 크기가 가장 작은 머리말로 설정하는 태그입니다.
h1 ~ h6까지 크기를 다양하게 설정할 수 있습니다.
div : 의미는 없지만 목적에 따라 컨텐츠를 묶을 때 사용합니다. (줄바꿈 기능 포함)
, 텍스트가 들어 있는 줄까지 포함
span : 의미는 없지만 목적에 따라 컨텐츠를 묶을 때 사용합니다. (줄바꿈 기능 포함 X)
, 텍스트가 들어 있는 영역만 포함
br : 줄바꿈 기능을 합니다.
hr : 줄바꿈 + 밑줄 기능을 합니다.
p : 두 줄을 바꿔주는데 문단을 나눌 때 주로 사용합니다.
  : 띄어쓰기를 한 번 해줍니다.
ul (unordered list) / ol (ordered list) : 리스트를 나타내는 태그입니다.
=> 순서 있고 없고의 차이
<ol [속성 = "속성값"]>
type : 1 (숫자 기본값)
: a (영어 소문자)
: A (영어 대문자)
: i (로마숫자 소문자)
: I (로마숫자 대문자)
li : ol과 ul안에 각 항목을 나열할 때 사용합니다.
다음은 글자 관련 태그입니다.
font : <font size = "7" face = "궁서" color = "#3DB7CC"> ㅋㅋㅋㅋㅋ </font> <br>
size는 크기, face는 글자체, color는 글자 색을 의미합니다.
글자 크기 max size가 거의 7이 Maximum이므로 잘 사용하지는 않습니다.
b : 글자를 굵게 해줍니다.
i : italic, 기울임체로 바꿉니다.
em : emphasized, 글자를 강조합니다.
strong : 글자를 강조합니다.
u : 글자에 밑줄을 추가합니다.
자주 사용하게 될 태그인 input 태그에 대해서 살펴보겠습니다.
input : 사용자가 정보를 입력하는 부분이 필요할 때 사용합니다.
type에 따라 어떤 형식으로 정보를 받을지 결정합니다.
<input type = "유형" 속성 = "속성값">
type :
hidden : 사용자한테는 안보임, 서버로 값을 보낼때
text : 텍스트 입력
search : 검색
password : 비밀번호 입력
range : 숫자를 조절할 수 있는 슬라이드 막대
number : 숫자를 조절할 수 있는 화살표
checkbox : 체크박스 (여러가 선택 가능 O)
radio : 라디오 버튼 (1개만 선택 가능 O)
이외에 image, submit, reset, button, file, 등이 있습니다.
속성 :
readonly : 읽기 전용으로 만들기
placeholder : 힌트 표시(input에 입력하면 내용 사라짐)
autofocus : 그 위치에 마우스 커서 표시됨
autocomplete : 자동완성
maxlength : 최대로 입력할 수 있는 글자 수 설정
value : 초기값 설정
등이 자주 사용되는 속성입니다.
다음은 fieldset 태그입니다.
fieldset태그는 연관된 요소들을 하나의 그룹으로 묶을 때 사용합니다.
legent태그는 이 fieldset에 대한 설명란이라고 생각하면 됩니다.
<fieldset><legent>정보입력</legent></fieldset>
다음으로 볼 label 태그는 <input>이 무엇인지 라벨링을 해주는 용도로 사용합니다.
이때 for 속성과 id 속성값이 같아야합니다.
<ul>
<li>
<label for = "name">이름</label>
<input id = "name">
</li>
</ul>
<ul>
<li>
<label for = "mail">메일주소</label>
<input id = "mail">
</li>
</ul>
이외에도 많은 태그가 있지만
실습을 해보면서
사용하게 된 태그를 그때그떄 기록해보도록 하겠습니다!