1. 인라인과 블록 요소 선별

 

1. 인라인과 블록 요소 선별

• 블록 요소: <p>, <ul>, <ol>, <dl>, <li>, <h1>~<h6>, <address>, <hr>
• 인라인 요소: <label>, <b>, <strong>, <mark>, <i>, <br>, <span>, <small>, <sub>, <sup>, <s>, <em>(기울임)

특징

• 블록 요소는 새 줄에서 시작하며, 부모의 너비를 가득 채웁니다.
• 인라인 요소는 같은 줄에 나란히 배치되며, 콘텐츠 크기만큼의 공간을 차지합니다.

2. a 태그의 필수 속성

• href: 링크의 목적지 URL을 지정합니다.

예제

 

xml

<a href="https://example.com">Go to Example</a>

3. img 태그의 필수 속성

• src: 이미지 파일 경로
• alt: 이미지 대체 텍스트 (접근성을 위해 필수)

예제

 

xml

<img src="image.jpg" alt="Sample Image">

4. 절대경로와 상대경로

• 절대경로: 루트 디렉토리 또는 도메인부터 시작하는 전체 경로.
  • 예: /images/photo.jpg 또는 https://example.com/images/photo.jpg
• 상대경로: 현재 작업 디렉토리를 기준으로 경로를 지정.
  • 예: ../images/photo.jpg

5. 폼 태그의 속성 (3가지 이상)

1. action: 데이터를 전송할 URL
2. method: HTTP 메서드 (GET 또는 POST)
3. name: 폼 이름

예제

 

xml

<form action="/submit" method="POST" name="myForm"> <input type="text" name="username"> <button type="submit">Submit</button> </form>

6. 폼 하위 태그를 제어하기 위한 속성

1) 널값을 허용하지 않는 속성

• required

예제

 

xml

<input type="text" name="username" required>

2) 최대 글자수를 제한하는 속성

• maxlength

예제

 

xml

<input type="text" name="username" maxlength="10">

3) 최소 글자수를 제한하는 속성

• minlength

예제

 

xml

<input type="text" name="username" minlength="5">

4) 특정 내용을 미리 표시하는 속성

• placeholder

예제

 

xml

<input type="text" name="username" placeholder="Enter your username">

5) 읽기 전용으로 변환하는 속성

• readonly

예제

 

xml

<input type="text" name="username" value="Read-only text" readonly>

6) 숫자의 최소값을 제어하는 속성

• min

예제

 

xml

<input type="number" name="age" min="18">

7) 숫자의 최대값을 제어하는 속성

• max

예제

 

xml

<input type="number" name="age" max="100">

8) input 길이를 제어하는 속성

• size

예제

 

xml

<input type="text" name="username" size="20">

9) 라디오 버튼이나 체크박스를 미리 선택되게 하는 속성

• checked

예제

 

xml

<input type="radio" name="gender" value="male" checked> <input type="checkbox" name="subscribe" checked>

7. 폼 하위 태그의 입력 데이터 특징

태그특징

input:text	일반 텍스트 입력
input:password	비밀번호 입력 (문자 숨김 처리)
input:email	이메일 형식 검증
input:radio	여러 옵션 중 하나만 선택 가능
input:checkbox	여러 옵션 선택 가능
input:submit	폼 데이터를 서버에 제출
input:reset	입력 필드 초기화
input:button	사용자 정의 버튼
input:file	파일 업로드
input:number	숫자 입력 (최소/최대값 설정 가능)