<p>123
456</p>
위와 같이 적용한다면 웹페이지에서는
123456
으로 표현되므로, 새로운 단락 요소를 만들어 문단을 나눠야 한다.
예를 들어,
<p>123</p>
<p>456</p>
로 표현하면 문단이 웹페이지에서 나뉘어
123
456
으로 표현된다.
| 외부 파일에 CSS코드 저장 (1) | 2024.12.06 |
|---|---|
| 웹페이지에 링크 생성하기 (1) | 2024.12.03 |
| 웹 폼 (Web Form) (0) | 2024.11.30 |
| HTML 레이아웃 (0) | 2024.11.10 |
| HTML 요소(HTML element) (0) | 2024.10.31 |
'웹 폼’은 사용자가 웹 사이트 또는 어플리케이션 사이의 주요한 상호 작용 지점 중 하나이다. 입력한 데이터는 처리 및 저장을 위해 웹 서버로 전송하거나 클라이언트 측에서 인터페이스를 업데이트 하는 데 사용한다.
이러한 웹 폼의 HTML은 하나 이상의 ‘폼 컨트롤’과 전체 폼을 구성하는데 도움이 되는 추가 요소들로 구성되며 이를 흔히 ‘HTML 폼’이라고 한다.
위에서 말하는 폼 컨트롤은 'input'요소로 표현할 수 있으며, 이는 다양한 type 속성을 통해 여러 종류의 입력 필드를 생성할 수 있다.
예를 들어,
<input type=”…”>
(text, number, email, password, date, radio, checkbox, file)
등의 형식으로 작성할 수 있다.
화면에 보여질 입력의 기능을 나타낸다.
예를 들어,
<form action="/" method="GET">
<label for="username">Your name</label>
<input type="text" name="user-name" id="username" />
<label for="usermail">Your email adress</label>
<input type="email" name="user-email" id="useremail" />
<label for="userage">Your age</label>
<input type="number" step="1" name="user-age" id="userage" />
<label for="userpassword">Your password</label>
<input type="password" name="user-password" id="userpassword" />
<label for="birthdate">Your birthdate</label>
<input type="date" id="birthdate" name="birth-date" />
와 같이 다양하게 나타낼 수 있다. (e.g. single line text input, number input, email address input 등 …)
*MDN refrence 참고 가능
옵션 목록이 길거나 radio 버튼을 대신 하고 싶을 때, 드랍다운 메뉴를 사용할 수 있는 요소이며
예를 들어,
<label for="favorite-color">Your favorite color?</label>
<select id="favorite-color">
<option value="color">Red</option>
<option value="color">Green</option>
<option value="color">Blue</option>
</select>
와 같이 나타낼 수 있으며 이는 여러 옵션 중 하나를 선택할 수 있게 합니다
사용자가 여러 옵션 중 하나 이상을 선택할 수 있게 하는 폼 컨트롤이다. HTML에서는 <input> 요소의 type="checkbox" 속성을 사용하여 체크박스를 생성한다.
예를 들어,
<form method="get" action="form-action.html">
<p>색상 선택:</p>
<label><input type="checkbox" name="color" value="blue"> 파란색</label>
<label><input type="checkbox" name="color" value="red"> 빨간색</label>
<p><input type="submit" value="제출"></p>
</form>
와 같이 나타낼 수 있으며, 체크박스는 사용자에게 다양한 선택지를 제공하고 여러 항목을 동시에 선택할 수 있게 하는 유용한 폼 요소이다.
여러 줄의 텍스트 입력이 가능한 컨트롤을 생성한다.
예를 들어,
<label for="usermessage">Your message</label>
<textarea name="usermessage" id="user-message"></textarea>
와 같이 나타낼 수 있으며 이 요소는 빈 요소가 아니므로 시작 태그와 종료 태그 사이에 기본 텍스트를 포함해야 한다.
| 웹페이지에 링크 생성하기 (1) | 2024.12.03 |
|---|---|
| HTML 문단 나누기 (0) | 2024.12.01 |
| HTML 레이아웃 (0) | 2024.11.10 |
| HTML 요소(HTML element) (0) | 2024.10.31 |
| HTML 기본 (0) | 2024.10.31 |
HTML은 다음과 같은 구조을 기반으로 만들어진다
<body>
ㅡ
<header>
<h1>...</h1>
</header>
ㅡ
<main>
<ol>
<li>...<li>
</ol>
</main>
ㅡ
<footer>
<p1>...</p1>
</footer>
ㅡ
</body>
이러한 구조를 참고하여 웹페이지를 만든다면 유지, 관리에 유리하다.
| HTML 문단 나누기 (0) | 2024.12.01 |
|---|---|
| 웹 폼 (Web Form) (0) | 2024.11.30 |
| HTML 요소(HTML element) (0) | 2024.10.31 |
| HTML 기본 (0) | 2024.10.31 |
| HTML이란? (0) | 2024.10.30 |
실제 웹사이트를 만들 때는 제목 외에도 이미지, 부제, 텍스트, 버튼 등이 필요하며 이를 표현하기 위해 HTML 요소를 사용할 수 있는데, 이는 제목, 표제, 일반 텍스트, 이미지, 버튼, 입력란과 같은 콘텐츠를 게시할 수 있으며 이외에도 훨씬 많은 요소들이 있다.
이러한 요소들을 모두 외울 필요는 없으며, ‘MDN Web Docs’ 페이지와 같은 리소스를 사용할 수 있다.
( MDN 요소 링크 참조 : https://developer.mozilla.org/ko/docs/Web/HTML/Element )
이러한 HTML 요소는 일반적으로 아래와 같이 구성된다.
| HTML 문단 나누기 (0) | 2024.12.01 |
|---|---|
| 웹 폼 (Web Form) (0) | 2024.11.30 |
| HTML 레이아웃 (0) | 2024.11.10 |
| HTML 기본 (0) | 2024.10.31 |
| HTML이란? (0) | 2024.10.30 |
실제 웹사이트를 만들 때는 제목 외에도 이미지, 부제, 텍스트, 버튼 등이 필요하며 HTML 요소로는 제목, 표제, 일반 텍스트, 이미지, 버튼, 입력란과 같은 콘텐츠를 게시할 수 있으며 이외에도 훨씬 많은 요소들이 있다.
이러한 요소들을 모두 외울 필요는 없으며, ‘MDN Web Docs’ 페이지와 같은 리소스를 사용할 수 있다.
HTML 텍스트에서 단순히 문자만 입력해도 표출이 되긴 하나, 웹 브라우저는 호환성이 높으므로 텍스트의 형태보다는 HTML 요소로 바꿔 콘텐츠에 대한 설명을 추가하면 검색 엔진과 보조 기술을 사용하는 사람들에게 더 많은 의미를 전달할 수 있다.
각 HTML 요소는 서로 다른 속성을 지원하며 스타일 속성은 모든 HTML 요소에 적용 할 수 있다.
이 때, 속성은 항상 시작 태그에 추가해야 하며 추가하는 속성에 따라 정보를 더하거나 요소의 동작을 변경할 수 있다.
| HTML 문단 나누기 (0) | 2024.12.01 |
|---|---|
| 웹 폼 (Web Form) (0) | 2024.11.30 |
| HTML 레이아웃 (0) | 2024.11.10 |
| HTML 요소(HTML element) (0) | 2024.10.31 |
| HTML이란? (0) | 2024.10.30 |