TIL 24.10.15

윤지·2024년 10월 15일

TIL html

프로그래머스 데브코스

목록 보기

2/44

HTML 목록 태그의 종류와 사용법

1. 비순서형 목록 (Unordered List)

태그: <ul>, <li>

특징: 글머리 기호로 항목을 나열

type 속성: 기본값은 disc이며, circle, square 등으로 변경 가능

예시:

<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>메론</li>
</ul>

2. 순서형 목록 (Ordered List)

태그: <ol>, <li>

특징: 숫자, 알파벳, 로마 숫자 등으로 순서를 표시

type 속성:

1: 숫자 (기본값)
a: 소문자 알파벳
A: 대문자 알파벳
i: 소문자 로마 숫자
I: 대문자 로마 숫자

예시:

<ol>
  <li>아침 먹기</li>
  <li>점심 먹기</li>
  <li>저녁 먹기</li>
</ol>

3. 정의형 목록 (Definition List)

태그: <dl>, <dt>, <dd>

특징: 용어와 그에 대한 정의를 나열

예시:

<dl>
  <dt>HTML</dt>
  <dd>웹 문서의 구조를 설계하기 위한 마크업 언어</dd>
</dl>

주의사항

<ul>과 <ol>의 직계 자식 요소로는 반드시 <li>만 사용함
<li>의 자식 요소로는 다양한 HTML 요소가 올 수 있음:
이러한 유연성을 통해 복잡한 구조의 목록을 만들 수 있으며, 필요에 따라 다양한 콘텐츠를 목록 항목 내에 포함시킬 수 있음
실무에서는 CSS로 스타일을 지정하므로 type 속성은 잘 사용하지 않음
의미에 맞는 적절한 태그 사용이 중요함 (검색 엔진 최적화를 위해)

HTML 목록 태그를 올바르게 사용하면 문서의 구조를 명확히 하고, 웹 접근성을 향상시키며, 검색 엔진 최적화에도 도움이 됨

링크와 이미지

링크 (a 태그)

HTML이 주목을 받게 된 이유도 이 <a> 태그의 영향이 큼. 당시 하이퍼링크로 흩어진 HTML 페이지를 연결해 주는 것은 혁명적이었음.

속성:

필수 href: 반드시 함께 사용해야 함href에는 이동할 경로를 지정 예시:
```
   <a href="naver.com">네이버</a>
```
선택 target="_blank": 새 탭에서 열기
1. document.referrer를 통해 이전 방문 사이트 추적 가능
  1. rel="noreferrer"로 방지 가능
2. window.opener를 이용해 이전 페이지 조작 가능
  1. rel="noopener"로 방지 가능
```
if (window.opener) {
  window.opener.location = "hack.html";
}
```
- 설명: 새 창에서 부모 창(원래 창) 존재 여부 확인 (window.opener 확인)• 부모 창 존재 시, 부모 창의 location을 "hack.html"로 강제 리디렉션
  
  a 링크에서 target 속성이 _blank일 때, rel 속성에 아래 예시처럼 작성하면 내 사이트를 이용하는 사람들의 정보를 보호해 줄 수 있음
  
  예시:
```
<a href="naver.html" target="_blank" rel="noopener noreferrer">클릭</a>
```

이미지 (img 태그)

필수 속성:

src - 이미지 파일의 경로

권장 속성:

alt - 대체 텍스트. 이미지가 링크일 경우, 적절한 설명 텍스트 사용 권장

상대적 경로
1. ./ ⇒ 현재 폴더(생략 가능)
2. ../ ⇒ 상위 폴더
3. / ⇒ 루트 도메인
./ / 주요 차이점:
1. 범위: /는 루트 도메인, ./는 현재 디렉토리
2. 사용 맥락: /는 절대 경로, ./는 상대 경로에서 사용
3. 유연성: ./는 파일 구조 변경 시 더 유연하게 대응 가능
절대적 경로
1. https:// ⇒ 완전한 URL

폼의 구성요소 (상호 작용 요소)

1. `<form>` 태그

폼의 시작을 의미하는 태그

action: 폼 데이터를 전송할 서버의 URL
method: 데이터 전송 방식 (기본값은 GET)

폼 전송 방식

GET 메서드:

웹 브라우저에서 주로 사용
URL에 데이터가 노출되므로 보안에 취약
대부분의 API 요청에 사용

POST 메서드:

데이터를 요청 본문에 포함하여 전송
보안성이 높고 대용량 데이터 전송에 적합
사용을 위해 별도의 프로그램이나 설정이 필요할 수 있음

프론트엔드 개발 시 대부분의 경우 GET 메서드를 사용하며, 필요에 따라 POST나 다른 메서드를 활용함

2. `<input>` 태그

<input> 입력 요소

속성: type

자주 사용하는 것 ~~잘 사용하지 않는 것~~

text: 한 줄 텍스트 입력
password: 비밀번호 입력 (입력값 자동 마스킹)
tel: 전화번호 입력
number: 숫자 입력
url: URL 입력
search: 검색어 입력
email: 이메일 주소 입력 ('@' 필수)
checkbox: 체크박스 생성(다중선택)
- ex) 약관 동의
- checked 속성: 기본 선택된 체크박스 지정
- value 속성: 체크박스의 값 설정 (서버로 전송될 때 사용)
  
  예시:
```
<form>
  <input type="checkbox" id="agree" name="terms" value="accepted" checked>
  <label for="agree">이용약관에 동의합니다</label>
</form>
```
  주의사항:
- 복수 선택이 가능하므로, 관련 체크박스들은 동일한 name 속성을 가질 수 있음
radio: 라디오 버튼 생성(단일선택)
- ex) 성별 선택
- name 속성 필수: 같은 name을 가진 라디오 버튼들이 하나의 그룹을 형성
- value 속성: 각 라디오 버튼의 고유한 값 지정
- checked 속성: 기본 선택 항목 설정
  
  예시:
```
<form>
  <input type="radio" id="male" name="gender" value="male" checked>
  <label for="male">남성</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">여성</label>
</form>
```
file: 파일 업로드
~~button~~: 버튼 생성 (value 속성으로 텍스트 지정)
- button 태그가 이미 존재하며, 시맨틱하므로 button 태그 사용 권장
~~image~~: 이미지 버튼 생성
- 대신 <button> 태그 내에 <img> 태그를 포함하여 사용
hidden: 숨겨진 입력 필드
date: 날짜 선택
기타: month, week, time, range, color, ~~submit~~, ~~reset~~ 등

3. `<label>` 태그

<label> 태그는 폼 요소에 레이블을 연결하는 데 사용됨. 이는 접근성을 향상시키고 사용자 경험을 개선함.
디자인에 따라 lable 사용법은 달라짐

장점

클릭 영역 확대: 레이블 클릭으로 폼 요소 선택
접근성 개선: 스크린 리더 사용자에게 목적 전달
사용 편의성: 작은 요소도 레이블로 쉽게 선택
모바일 친화적: 터치 기기에서 큰 터치 영역 제공

⇒ 폼 사용성 향상

명시적 방법 for 속성과 input의 id 속성을 일치시켜 관계 설정

<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username">

암묵적 방법 input 요소를 label 태그 내부에 직접 포함
```
<label>
  비밀번호:
  <input type="password" name="password">
</label>
```
주의사항:
- id와 class는 모든 HTML 요소의 공통 속성임
- 한 문서에서 id 값은 고유값이어야 함
  
  레이블 사용 시 클릭 영역이 넓어져 입력이 편해짐

암시적+명시적 방법

<label for="username">
  사용자 이름:
  <input type="text" id="username" name="username">
</label>

4. `<textarea>` 태그

여러 줄의 텍스트를 입력받을 수 있는 입력 필드를 생성함.

주요 속성:
- rows: 보이는 행의 수 지정
- cols: 보이는 열의 너비 지정
- maxlength: 최대 입력 가능한 문자 수 제한

예시:

<textarea rows="4" cols="50" maxlength="200">
여기에 여러 줄의 텍스트를 입력하세요.
</textarea>

5. `<button>` 태그

클릭 가능한 버튼 요소를 생성하는 태그임.

속성:

type: submit (기본값), reset, button

특징:

주로 form 태그 내에서 사용됨
submit 타입 버튼 클릭 시 페이지가 새로고침되며 form 내 input 값이 전송됨

6. `<fieldset>` 태그

폼 요소를 그룹화할 때 사용하는 태그임.

div로도 그룹화 가능하지만, form 요소 내에서는 시맨틱한 fieldset 사용을 권장함
태그와 함께 사용되어 그룹의 제목이나 설명을 제공함

7. `<select>` 태그

콤보박스를 생성하는 데 사용됨.

주요 속성:
• size: 한 번에 보이는 옵션의 수 지정
• multiple: 다중 선택 허용

주요 특징:

<option> 태그와 함께 사용하여 선택 항목을 정의

<select name="fruit">
  <option value="apple">사과</option>
  <option value="banana">바나나</option>
  <option value="orange">오렌지</option>
</select>

초기값 지정: selected 속성을 사용하여 기본 선택 옵션을 설정할 수 있음

```html
<select name="fruit">
  <option value="apple">사과</option>
  <option value="banana" selected>바나나</option>
  <option value="orange">오렌지</option>
</select>
```

위 예시에서 '바나나'가 기본 선택되어 있음

각 <option>에는 value 속성이 필수 (서버로 전송될 값)

<optgroup>로 각 <option>태그를 그룹화시킬 수 있음

<select name="area">
  <optgroup label="서울시">
    <option value="gangnam">강남구</option>
    <option value="mapo">마포구</option>
    <option value="jongno">종로구</option>
  </optgroup>
  <optgroup label="경기도">
    <option value="suwon">수원시</option>
    <option value="seongnam">성남시</option>
    <option value="anyang">안양시</option>
  </optgroup>
</select>

form 식구 공통 속성

disabled: 요소 비활성화
- 사용자 입력 불가
- 서버로 데이터 전송되지 않음
readonly: 읽기 전용 설정
- 사용자 입력 불가
- 서버로 데이터 전송됨
maxlength: 입력 가능한 최대 문자 수 제한
- 텍스트 입력 필드(<input type="text">)와 텍스트 영역(<textarea>)에 적용 가능
- 사용자가 지정된 길이를 초과하여 입력하는 것을 방지
- 예시: <input type="text" maxlength="50"> (최대 50자 입력 가능)
placeholder: 입력 필드의 힌트 텍스트
- 사용자가 입력을 시작하면 사라짐
required: 필수 입력 필드 지정
- 값이 비어있으면 폼 제출 불가
hidden: 사용자에게 보이지 않는 입력 필드 생성
- 폼 제출 시 서버로 데이터 전송됨
- 페이지에 표시되지 않는 정보를 포함할 때 유용
- 프레임워크로 개발되지 않은 사이트에서 form 내의 hidden 속성을 이용해 로그인 시 메인 페이지로 리다이렉트하는 경우 존재 (예: 머스트잇 사이트)

표 table

HTML 표(<table>)는 기본적으로 컨테이너 너비에 맞춰 자동 조절됨 ⇒ 반응형

<table>: 표 전체를 감싸는 태그
<tr>: 표의 행(row)을 나타내는 태그

<th>: 표의 헤더 셀을 나타내는 태그

scope 속성: 제목(<th>)의 범위를 지정 접근성 향상

row: 해당 제목이 행(가로줄)에 적용됨을 나타냄

col: 해당 제목이 열(세로줄)에 적용됨을 나타냄

 <table>
  <thead>
    <tr>
      <th scope="col">구분</th>
      <th scope="col">중간고사</th>
      <th scope="col">기말고사</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">전공</th>
      <td>A+</td>
      <td>B+</td>
    </tr>
    <tr>
      <th scope="row">교양</th>
      <td>A+</td>
      <td>C+</td>
    </tr>
  </tbody>
</table>

<td>: 표의 데이터 셀을 나타내는 태그
<caption>: 표의 제목 지정
- 웹 접근성 향상
- CSS 처리로 시각적으로 숨길 수 있음 (예: position: absolute; top: -9999px;)

<col>: 한 개의 열에 대한 개별 속성을 지정

<col>을 사용한 표:

<table>
  <col style="width: 50%;">
  <col style="width: 25%;">
  <col style="width: 25%;">
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>직업</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>30</td>
    <td>개발자</td>
  </tr>
  <tr>
    <td>김철수</td>
    <td>25</td>
    <td>디자이너</td>
  </tr>
</table>

width 속성으로 열의 너비 설정 가능
span 속성으로 여러 열에 동일한 속성 적용 가능

<colgroup>: 여러 열을 그룹화하여 속성 지정

<colgroup>을 사용한 표:

<table>
  <colgroup>
    <col style="width: 50%;">
    <col span="2" style="width: 25%;">
  </colgroup>
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>직업</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>30</td>
    <td>개발자</td>
  </tr>
  <tr>
    <td>김철수</td>
    <td>25</td>
    <td>디자이너</td>
  </tr>
</table>

이름	나이	직업
홍길동	30	개발자
김철수	25	디자이너

<col> 요소를 포함하여 사용
열 그룹에 대한 스타일이나 속성을 한 번에 적용 가능

그룹화
- <thead>: 표의 헤더 부분을 그룹화
- <tbody>: 표의 본문 부분을 그룹화
- <tfoot>: 표의 footer 부분을 그룹화
속성
- border: 표의 테두리 두께 지정
- 병합
  - colspan: 셀이 차지하는 열의 수 지정
  - rowspan: 셀이 차지하는 행의 수 지정

예시:

<table border="1">
  <tr>
    <th>이름</th>
    <th>나이</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>30</td>
  </tr>
  <tr>
    <td>김철수</td>
    <td>25</td>
  </tr>
</table>

윤지

프론트엔드 공부 기록 아카이빙🍁

이전 포스트

TIL 24.10.14

다음 포스트

TIL 24.10.15

프로그래머스 데브코스

HTML 목록 태그의 종류와 사용법

1. 비순서형 목록 (Unordered List)

2. 순서형 목록 (Ordered List)

3. 정의형 목록 (Definition List)

주의사항

링크와 이미지

링크 (a 태그)

이미지 (img 태그)

폼의 구성요소 (상호 작용 요소)

1. `<form>` 태그

2. `<input>` 태그

3. `<label>` 태그

4. `<textarea>` 태그

5. `<button>` 태그

6. `<fieldset>` 태그

7. `<select>` 태그

form 식구 공통 속성

표 table

TIL 24.10.14

TIL 24.10.16

0개의 댓글

TIL 24.10.15

프로그래머스 데브코스

HTML 목록 태그의 종류와 사용법

1. 비순서형 목록 (Unordered List)

2. 순서형 목록 (Ordered List)

3. 정의형 목록 (Definition List)

주의사항

링크와 이미지

링크 (a 태그)

이미지 (img 태그)

폼의 구성요소 (상호 작용 요소)

1. <form> 태그

2. <input> 태그

3. <label> 태그

4. <textarea> 태그

5. <button> 태그

6. <fieldset> 태그

7. <select> 태그

form 식구 공통 속성

표 table

TIL 24.10.14

TIL 24.10.16

0개의 댓글

1. `<form>` 태그

2. `<input>` 태그

3. `<label>` 태그

4. `<textarea>` 태그

5. `<button>` 태그

6. `<fieldset>` 태그

7. `<select>` 태그