HTML 태그

Jerry95 2024. 4. 6. 11:35

2024. 4. 6. 11:35

1. 구조를 나타내는 요소

div

정의

division, section을 의미
HTML 요소의 구역을 나누는 역할
display:block 속성을 가짐
- 폭(width)만큼 길이를 차지하는 속성을 가짐

사용목적

일단 div 태그로 구역을 나누어서 웹페이지를 구성
유지보수, 협업 용이

2. 텍스트 요소

figure

독립적인 콘텐츠를 표현

pre, blockquote와 같은 태그는 그 자체로 독립적인 내용을 담고 있지 않음
- 이런 태그들을 묶어서 위 혹은 아래에 설명을 추가하는 태그
이미지, 비디오, 도표 등을 묶어서 설명하기도 하는 태그
연관성이 있는 컨텐츠를 묶어줌

3. 임베디드 요소

1) img

빈요소 → 내용을 작성하는 태그가 아님
어떤 이미지를 가져오고 어떻게 띄울지를 속성으로 정함
속성
- src속성에 경로를 넣어줌
- width, height: 사이즈 정해줌
- srcset : 작은 화면에서 접속한 사람은 작은 이미지를, 큰화면에 접속한 사람들은 큰 이미지를 제공
  - 여러개의 경로를 입력할 수 있음
  - 반응형 이미지를 만들기 위함(사용자의 viewport 기준)
  - 2개 이상의 이미지 파일을 쉼표로 구분하고 너비서술자, 픽셀미도서술자 사용
```
<img
  src="images/large.png"
  srcset="image/small.png 300w,
          image/medium.png 450w,
          image/large.png 600w"
>
```
  - srcset속성은 지원이 안되는 브라우저가 존재함 → 반드시 src 속성이 필요함, 그래야 srcset 속성이 지원되지 않는 브라우저에 기본값으로 이미지를 띄워줄 수 있음
  - srcset 속성의 경우 작은화면(300)에서 접속한 사용자의 브라우저에는 medium이나 large 이미지를 미리 다운 받지 않음 → 300을 넘어갈때 medium 이미지를 다운 받아서 보여줌
- size : 특정 조건에 따라서 다른 이미지를 지정된 사이즈로 보여줌
```
  <img 
  src="images/large.png"
  srcset="image/small.png 300w,
          image/medium.png 450w,
          image/large.png 600w"
  size="(min-width: 600px) 600px,
        (min-width: 450px) 450px,
        300px"
  >
```
  - 조건에서 많이 사용하는 것 : min-width, max-width

2) iframe

현재 문서 안에 다른 HTML 페이지를 삽입
일방적으로 사용자들에게 정보를 전달

4. 폼관련 요소

사용자들에게 정보를 입력할 수 있는 장치를 마련해줌

1) form 태그

단독으로 사용하면 눈에 보이는 화면은 없음 → 그자체로 요소인 태그가 아님

action 속성 : form 데이터를 모아 전송할때 전송할 주소 / 목적지의 주소
- 사용자가 정보를 제출 → 어디로 요청을 보내야할지에 관한 정보를 가짐
method 속성 : 양식을 제출할 때 사용할 HTTP 매서드(form 태그가 제출되었을때 어떤 방식으로 정보를 전달할지 방식을 결정
- get
  - url로 어떤 페이지에 접속했는지 표현(경로)
  - ?를 기준으로 정보를 url에 표현
  - &를 통해 정보가 2개이상일 때 정보를 나열(사용자가 입력한 데이터를 주소창에 나열)
  - input태그의 name의 값과 사용자가 입력한 정보의 형태로 전달해줌(name=사용자가 입력한정보)
- post
  - 사용자가 어떠한 정보를 입력했는지 url로 보여주지 않음
  - 서버에다가 action의 값인 url에 정보를 요청

2) input 태그

사용자가 정보를 입력하는 영역

type 속성 : input의 유형을 정함
- text, email, password, button, checkbox 등
- type에 따라 사용할 수 있는 속성이 달라짐input type이 submit 🆚 button
  - input type이 submit인 경우 : form으로 제출 가능
  - input type이 button인 경우 : 버튼을 눌렀을때 form으로 제출 불가
    ⇒ input 태그는 type이 submit일때만 form 제출 가능
  - button type이 submit인 경우 : 제출 가능
  - button의 type이 없는 경우 : 제출 가능
    ⇒ button태그는 type에 상관 없이 form 제출 가능
```
<form action="./result.html" method="get"> 
  <div>ID : <input name="id" type="text" /></div> 
  <div>PW : <input name="password" type="password" /></div> 
  <input type="submit" value="로그인"/> 
  <input type="button" value="로그인" /> 
  <button type="submit">로그인</button> 
  <button>로그인</button> 
</form>
```
name 속성 : 서버에 사용자 정보를 전송할때 전체 form 데이터를 구분하기 위함
- 전체 form 데이터 중 해당 필드가 어떤 데이터를 가지고 있는지 구별
- form태그를 통해 전달되는 정보를 담고 있는 역할(form 데이터 상에서 구분 가능)
id 속성 : 하나의 form에서 중복 불가
minlength 속성 : 글자수를 제한하여 최소글자보다 많이 입력하도록 처리
autocomplete : 자동완성으로 값은 on 또는 off
required 속성 : 필수 속성 지정 시 사용
disabled 속성 : 입력 불가하도록 처리 → form 제출에 해당 input이 포함되지 않음
readonly 속성 : 수정만 불가 → form 제출시 제출 가능(value 속성으로 값 지정도 가능)

3. label 태그

input에 labeling을 해줌

for 속성 : 어떤 input을 가리키는지 명시
- input 태그의 id 속성과 동일한 값 지정
```
<label for="foodname">음식이름 : </label>
<input type="text" name="food" id="foodname">
```
input 태그를 label의 자식 요소로 작성하면 for 속성을 사용하지 않아도 됨

4. fieldset & legend 태그

<fieldset>
      <legend>FOOD</legend>
      <label for="foodname">음식이름 : </label>
      <input type="text" name="food" id="foodname" />
</fieldset>

fieldset : 여러 컨트롤과 레이블을 묶을 때 사용
- 첫번째 자식이 반드시 legend 태그여야 함
- disabled 속성 : 사용시 모든 자손 input태그 전체가 disabled 처리됨
legend: 부모 fieldset 콘텐츠의 설명을 나타냄

5. button 태그

자식 요소를 가질 수 있음

type 속성 : reset, button, submitinput태그의 type속성 button 🆚 button
- input 태그 : value 속성으로 button의 이름을 설정
- button 태그 : 내용에 text입력으로 button 이름을 설정
- 차이점
  - input의 value는 문자열만 가능
  - button 태그는 내부적으로 스타일링 가능 : 제출하기

6. select & option 태그

select : 드롭다운 메뉴를 만들어주는 태그
option : select의 후보군을 넣어주는 태그
- value 속성 : 서버로 보내질때 사용
  - value 속성을 사용하지 않으면 내용요소를 value값으로 사용
  - value를 사용하지 않으려면 value=""처럼 빈문자열로 처리해야함
    → option 태그의 내용은 한글로 작성하고, 서버로 보낼때 영어로 보내고 싶을 때는토이스토리
  - option태그의 내용은 UI적 요소만을 담당

7. datalist 태그

드롭다운 형태로 값을 추천하고 수정할 수 있는 태그

option 속성 사용

8. textarea태그

여러줄의 text를 입력 받음

rows 속성 : 여러 행을 보여줄 때 사용
cols 속성 : 가로 폭 사이즈를 조정

3. meta 데이터 요소

데이터를 설명하는 데이터(HTML문서를 설명하는 데이터)

head

페이지에 표시되지 않고, 문서에 대한 정보를 제공
메타 데이터들은 head안에 들어있음
검색엔진이 검색결과를 노출시키기 위해 문서의 내용을 확인하고, 그때 메타데이터를 사용해 정보를 분류

1) title

하나의 head에는 하나의 title만 존재
결과 페이지의 순서를 결정하는 구성 요소 중 하나

2**) meta**

빈요소이기 때문에 요소를 가질 수 없고, 속성을 사용해야 함
웹페이지들의 정보를 포함
사용자가 볼수 없음
부가적인 설명이 포함되어, 검색엔진이 웹페이지가 어떤 종류의 사이트인지 판단하는데 도움을 줌

3) link

현재문서와 외부 리소스를 연결할 때 사용(외부파일) - css연결, 아이콘
여러개의 파일 연결 가능 -> 여러개의 링크 태그 사용

4) MIME 타입

오디오, 비디오 등을 링크태그를 사용해서 불러올 때, 경로를 문자열 형탱로 입력
- HTML은 어떤 파일인지 해석할 수 없음
- 단순히 기재된 경로를 문서로 불러올 뿐임
파일이 어떤 파일인지 인지하기 위해 타입을 명시해주는 것

5) style

HTML 내부에서 스타일 태그를 사용해 스타일 지정 가능

6) script

대부분 자바스크립트 코드를 연결하기 위해 사용
외부의 자바스크립트 파일을 연결할 때, HTML 내부에서 직접 자바스크립트를 작성할 수 있게해줌
script태그는 head에서도 body에서도 작성 가능
- HTML문서는 위에서부터 순서대로 문서를 읽어나감
- 문서를 읽다가 script 태그를 만나면 안에 내용을 확인 → 내용에 자바스크립트가 있으면 잠시 멈추고 자바스크립트 코드를 해석
  - 지연발생 → body태그는 head태그보다 뒤에 작성되어 있기 때문
  - body태그의 첫번째에 script태그를 사용한 경우에도 지연 발생!
- 자바스크립트 코드가 포함된 script 태그는 body태그의 제일 마지막에 작성하는 것을 권장

'Dev-log > HTML' 카테고리의 다른 글

전역속성 (0)	2024.04.07
HTML 기초 (0)	2024.04.06
HTML과 웹브라우저 (0)	2024.04.06

jerry