Topic
Hyperlink
Text
List
Table
Multimedia
Form
Link
Script
Semantic tag
What I Learned
1. Hyperlink
하이퍼링크
하이퍼링크(Hyperlink)는 웹 페이지에서 클릭 가능한 링크를 의미합니다.
사용자가 이 링크를 클릭하면 해당 웹 페이지나 문서, 이미지, 비디오, 음악 파일 등 다른 컨텐츠로 이동할 수 있습니다.
HTML에서 클릭 가능한 텍스트를 만들기 위해서는 <a> 태그를 사용합니다.
<a> 타겟 속성
<a>태그의 타겟(target) 속성은 링크된 페이지를 어떻게 열지 지정하는 데 사용됩니다._self링크된 페이지를 현재 창 또는 탭에서 엽니다(기본값)._blank링크된 페이지를 새 창이나 탭에서 엽니다._parent현재 프레임의 상위 프레임에서 링크된 페이지를 엽니다._top현재 모든 프레임을 새로운 창 또는 탭으로 대체하고, 링크된 페이지를 엽니다.framename링크된 페이지가 지정된 이름을 가진 프레임 또는 iframe에 로드됩니다.- 하지만 frame은 검색 엔진 최적화(SEO)에 좋지 않은 영향을 미칠 수 있고, 일부 브라우저에서는 더 이상 지원되지 않을 수 있습니다. 그러므로 최신 웹 개발에서는
<iframe>보다는 다른 방식을 사용하는 것이 좋습니다.
- 하지만 frame은 검색 엔진 최적화(SEO)에 좋지 않은 영향을 미칠 수 있고, 일부 브라우저에서는 더 이상 지원되지 않을 수 있습니다. 그러므로 최신 웹 개발에서는
URL
- URL(Uniform Resource Locator)은 URI의 한 형태로, 인터넷에서 리소스의 위치를 나타냅니다.
- URL은 프로토콜, 호스트명, 포트 번호, 경로, 쿼리를 포함할 수 있습니다.
URI
- URI(Uniform Resource Identifier)는 인터넷에서 특정한 리소스를 나타내는 유일한 식별자입니다.
URI의 구조
scheme:[//[user:password@]host[:port]][/]path[?query][#fragment]URI Scheme- URI를 구분하는 스키마(프로토콜)를 나타냅니다.
- 예를 들어,
http,https,ftp,mailto,tel등이 있습니다. - 각 스키마는 특정 프로토콜을 사용하여 리소스에 접근하는 방법을 정의합니다.
- 예를 들어, "http://"는 웹 서버에 접근하는 프로토콜을 나타냅니다.
- IANA의 URI Scheme list 참조
user:password@- 선택적으로 사용되며, 인증 정보를 나타냅니다.
host- 리소스를 호스팅하는 호스트 이름을 나타냅니다.
- 예를 들어, "www.example.com"과 같은 도메인 이름을 사용할 수 있습니다.
port- 선택적으로 사용되며, 리소스에 접근하는 데 사용되는 포트 번호를 나타냅니다.
- 각 프로토콜은 기본 포트를 가지고 있으며, 명시적으로 다른 포트를 사용할 때에만 지정됩니다. 예를 들어, "80"은 HTTP의 기본 포트이고, "443"은 HTTPS의 기본 포트입니다.
path- 리소스의 경로를 나타냅니다.
- 서버 내부의 파일 경로 또는 RESTful API 엔드포인트 등이 될 수 있습니다.
- 예를 들어, "/index.html"과 같은 경로를 사용할 수 있습니다.
query- 선택적으로 사용되며, 리소스에 대한 추가적인 정보를 전달하는 데 사용됩니다.
- 주로 웹 서버에 파라미터를 전달하는데 사용되며, "key=value"와 같은 형식으로 작성됩니다.
fragment- 선택적으로 사용되며, 리소스의 특정 부분을 나타내는 앵커를 나타냅니다.
- 웹 페이지에서 특정 섹션 또는 위치로 바로 이동할 때 사용됩니다.
- 예를 들어, "#section1"과 같이 사용합니다.
2. Text tags
<h1>~<h6>제목 태그<p>본문<br>줄바꿈<strong>중요(bold)<em>강조(italics)<s>취소 선<blockquote>/<q>긴/짧은 인용(quote)<sub>/<sup>아래/위 첨자<hr>주제 전환(Horizontal Line)<pre>Preformatted Text<code>짧은 코드- Markup meaning을 이해하고 쓰는 것이 중요합니다.
3. List tags
<ol>ordered list<ul>unordered list<li><ol>,<ul>의 자식 요소로 사용<ol>type attribute- 1, a, A, i, I 등
<ul>type attribute- disc, circle, square 등
<ol>,<ul>에 list-style property를 활용할 수 있습니다.list-style: list-style-type list-style-position list-style-image
4. Table
<table>표를 만드는 데 사용되는 태그입니다.<caption>표의 캡션을 정의합니다.<thead>표의 헤더 역할을 하는 부분을 정의합니다.<tbody>표의 주요 내용을 나타내는 부분을 정의합니다.<tfoot>표의 요약 부분을 정의합니다.<tr>각 표의 행(row)을 나타냅니다.<td>각 행의 셀(cell)을 나타냅니다.<th>각 열의 제목 셀을 나타냅니다. 브라우저에 따라 bold, center align으로 처리됩니다.- 예시
<table> <caption>이번 달 지출 내역</caption> <thead> <tr> <th>날짜</th> <th>지출 내용</th> <th>금액</th> </tr> </thead> <tbody> <tr> <td>4/1</td> <td>점심</td> <td>10,000원</td> </tr> <tr> <td>4/3</td> <td>지하철 요금</td> <td>1,250원</td> </tr> <tr> <td>4/6</td> <td>생필품 구입</td> <td>30,000원</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">총 지출</td> <td>41,250원</td> </tr> </tfoot> </table> border-collapse속성은 인접한 셀의 경계선을 병합할 것인지 여부를 결정합니다.collapse(기본값) 속성은 인접한 셀의 경계선을 병합합니다. 이 때, 인접한 셀들의 경계선이 중복되지 않습니다.separate속성은 인접한 셀의 경계선을 병합하지 않습니다. 이 때, 인접한 셀들의 경계선이 중복됩니다.
border-spacing속성은 인접한 셀 간의 간격을 설정합니다.border-collapse속성의 값이 separate인 경우에만 적용됩니다.- 이 속성의 값은 길이 또는 백분율로 지정할 수 있습니다. 양수 값으로 지정하여 인접한 셀 간의 간격을 늘리고, 음수 값으로 지정하여 간격을 줄일 수도 있습니다.
5. Multimedia
<img>
- 이미지를 삽입하는 태그입니다.
- 닫는 태그가 없으며, 이미지의 소스를 지정하는 src 속성이 필수적으로 필요합니다.
src이미지 파일의 경로를 지정합니다. 경로는 상대 경로나 절대 경로 모두 사용할 수 있습니다.alt이미지가 로드되지 못했을 때 대신 표시할 텍스트를 지정합니다. 스크린 리더와 같은 보조 기술을 사용하는 사용자들에게 이미지에 대한 정보를 제공하기 위해 사용됩니다.<img>태그는 기본적으로 가로폭과 세로폭이 이미지의 크기에 따라 자동으로 설정됩니다. 그러나 width와 height 속성을 사용하여 이미지의 크기를 수동으로 조정할 수도 있습니다.- 예시
<img src="이미지 경로" alt="대체 텍스트" width="100" height="100">
<video>
- HTML5에서 도입된 태그로, 동영상 콘텐츠를 삽입하는 데 사용됩니다.
- 닫는 태그가 필요하며, 비디오의 소스를 지정하는 src 속성이 필수적으로 필요합니다.
src비디오 파일의 경로를 지정합니다. 여러 개의 비디오 포맷을 지원하는 브라우저를 대비해, 두 개 이상의 소스를 지정할 수도 있습니다.width,height비디오의 가로폭과 세로폭을 지정합니다.controls비디오 플레이어에 컨트롤러를 표시합니다. 이 속성을 생략하면 컨트롤러가 표시되지 않습니다.autoplay비디오가 로드되자마자 자동으로 재생됩니다. 브라우저에 따라 muted 속성이 있어야 autoplay 속성을 사용할 수 있습니다. (Chrome)muted비디오가 음소거 상태로 재생됩니다.<video>태그는 다른 요소와 함께 사용하여 비디오를 더욱 풍부하게 표현할 수 있습니다. 예를 들어,<source>요소를 사용하여 동영상 파일의 다양한 포맷을 지정할 수 있습니다. 또한,<track>요소를 사용하여 자막이나 캡션을 추가할 수도 있습니다.- 예시
<video width="640" height="360" controls muted autoplay> <source src="비디오 파일 경로.mp4" type="video/mp4"> <source src="비디오 파일 경로.webm" type="video/webm"> <track label="한국어 자막" kind="subtitles" srclang="ko" src="자막 파일 경로.vtt"> <track label="영어 자막" kind="subtitles" srclang="en" src="자막 파일 경로.vtt"> </video>
<audio>
- HTML5에서 도입된 태그 중 하나로, 웹 페이지에서 오디오 콘텐츠를 재생하는 데 사용됩니다.
- 닫는 태그가 필요하며, 오디오의 소스를 지정하는 src 속성이 필수적으로 필요합니다.
src오디오 파일의 경로를 지정합니다. 여러 개의 비디오 포맷을 지원하는 브라우저를 대비해, 두 개 이상의 소스를 지정할 수도 있습니다.controls오디오 플레이어에 컨트롤러를 표시합니다. 이 속성을 생략하면 컨트롤러가 표시되지 않습니다.autoplay오디오가 로드되자마자 자동으로 재생됩니다. 브라우저에 따라 muted 속성이 있어야 autoplay 속성을 사용할 수 있습니다. (Chrome)muted오디오가 음소거 상태로 재생됩니다.loop반복 재생을 설정합니다.width,height속성이 없습니다.- 예시
<audio controls muted autoplay loop> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> <source src="audio.wav" type="audio/wav"> Your browser does not support the audio element. </audio>
<iframe>
- 웹 페이지 내에서 다른 웹 페이지나 독립적인 HTML 문서를 삽입하는 데 사용됩니다.
- 닫는 태그가 필요하며, 삽입할 문서의 URL을 지정하는 src 속성이 필수적으로 필요합니다.
src삽입할 문서의 URL을 지정합니다.width,height삽입된 문서의 크기를 조절합니다.frameborder테두리를 표시합니다.allowfullscreeniframe 내에서 전체 화면 재생을 허용할 수 있습니다.- 예시
<iframe src="https://www.example.com" width="500" height="500"></iframe>
6. Form
<form>
- 웹 페이지에서 사용자로부터 데이터를 수집하기 위한 양식을 정의하는 데 사용됩니다.
<form>태그는 다른 HTML 요소들을 포함할 수 있으며, 이러한 요소들은 사용자가 입력할 수 있는 입력 필드, 제출 버튼, 선택 상자, 라디오 버튼 등입니다.- 사용자가
<form>태그에 데이터를 입력하면, 이러한 데이터는 보통 웹 서버로 전송되어 처리됩니다.
form attributes
action폼 데이터를 전송할 URL을 지정합니다.methodHTTP 요청 방법을 지정합니다. 일반적으로 GET 또는 POST 값을 갖습니다.target폼 데이터를 전송한 후 결과를 표시할 위치를 지정합니다.enctype폼 데이터를 서버로 전송할 때 사용되는 인코딩 유형을 지정합니다. 기본값은 application/x-www-form-urlencoded 입니다.autocomplete자동 완성을 사용할지 여부를 지정합니다. on 또는 off 값을 갖습니다.
<input>
- 사용자가 데이터를 입력할 수 있는 입력 필드를 만드는 데 사용됩니다.
<input>태그는 다양한 종류의 입력 필드를 만들 수 있습니다. 예를 들어, 텍스트 입력 필드, 비밀번호 입력 필드, 라디오 버튼, 체크박스, 파일 업로드 필드 등이 있습니다.
input과 label 연결하기
- input 태그를 label 태그 내부에 넣으면 됩니다.
- input 태그의 id를 label 태그의 for 속성값으로 주면 됩니다.
input attributes
type입력받을 데이터의 유형을 지정합니다.text텍스트 입력email이메일 입력password비밀번호 입력date날짜 입력number숫자 입력min,max,stepattribute를 사용하여 입력 가능한 값의 범위와 증가 단위를 지정할 수 있습니다.
range슬라이더 형태의 입력checkbox체크박스name의 값이on,off라는 문자열로 지정됩니다.value속성을 써서name의 값을value속성값(문자열)로 지정할 수 있습니다.
radio라디오 버튼- checkbox와 비슷하지만 여러 항목 중 하나의 항목만 선택할 수 있습니다.
file파일 업로드acceptattribute를 써서 허용할 파일 확장자들을 정할 수 있습니다.multipleattribute를 써서 여러 개의 파일을 선택할 수 있게 할 수 있습니다.
submit서버로 폼 데이터 전송
name입력받은 데이터의 이름을 지정합니다. 서버로 전송될 때 데이터를 식별하는 데 사용됩니다.value입력받은 데이터의 값입니다.type속성값에 따라 다르게 사용됩니다.placeholder입력 필드 내부에 힌트 또는 예시를 제공합니다.required입력 필드가 반드시 채워져야 하는지 여부를 나타냅니다.readonly입력 필드를 읽기 전용으로 만듭니다. 즉, 사용자가 값을 변경할 수 없습니다.disabled입력 필드를 비활성화합니다. 사용자가 값을 입력할 수 없습니다.
<button> attribute
submit폼 데이터를 서버로 제출합니다. 이 버튼이 클릭되면<form>요소에서 action 속성에 지정된 URL로 데이터가 전송됩니다.- default event로 url에 qurey string으로 input의 name=value 값을 전달합니다.
reset폼 데이터를 초기화합니다. 이 버튼이 클릭되면 모든 폼 필드의 값을 초기 값으로 되돌립니다.button일반 버튼을 생성합니다. 이 버튼을 클릭해도 아무 일도 발생하지 않습니다. 이 속성을 사용하여 자바스크립트 이벤트 핸들러를 버튼에 연결할 수 있습니다.
다른 form element
<select>- 옵션 목록을 제공하며, 사용자가 목록에서 값을 선택할 수 있도록 합니다.
- 이 요소는 다음과 같은 속성을 가질 수 있습니다
name요소의 이름(Name)을 지정합니다. 폼 데이터의 이름으로 사용됩니다.
-multiple여러 옵션을 선택할 수 있도록 합니다.
-size목록에서 표시되는 옵션의 수를 지정합니다.
- 내부에
value속성을 갖는<option>태그를 넣어서 구현합니다. - 예시
<select name="fruit"> <option value="apple">사과</option> <option value="banana">바나나</option> <option value="orange">오렌지</option> </select> ```
<textarea>- 여러 줄의 텍스트를 입력할 수 있는 텍스트 영역을 제공합니다.
- 이 요소는 다음과 같은 속성을 가질 수 있습니다
name요소의 이름(Name)을 지정합니다. 폼 데이터의 이름으로 사용됩니다.
-rows텍스트 영역에 보여지는 줄의 수를 지정합니다.
-cols텍스트 영역에 보여지는 칸의 수를 지정합니다.
- 예시
``````html
7. 다른 코드 불러오기
<link>
- HTML 문서에서 다른 문서와의 연결(link)을 지정하는 데 사용됩니다.
- 보통 스타일 시트, 아이콘, 웹 폰트 등의 외부 리소스와의 연결을 지정하는 데 사용됩니다.
- 이 요소는 다음과 같은 속성을 가질 수 있습니다
href연결할 문서의 URL을 지정합니다.rel현재 문서와 연결된 문서와의 관계(Relationship)를 지정합니다. 일반적으로 스타일 시트를 연결할 때는 "stylesheet" 값을 사용합니다.type연결된 문서의 MIME 타입을 지정합니다. 스타일 시트를 연결할 때는 "text/css" 값을 사용합니다.media연결된 문서가 적용될 미디어 타입(Media Type)을 지정합니다. 기본값은 "all" 입니다.
- 예시
<head> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="fonts.css"> <link rel="icon" type="image/png" href="favicon.png"> </head>
<script>
- script 태그는 HTML 문서에 스크립트를 삽입하는 데 사용됩니다.
- 스크립트는 보통 클라이언트 측에서 실행되며, 동적인 기능을 추가하거나 웹 페이지의 동작을 제어하는 데 사용됩니다.
- 이 요소는 다음과 같은 속성을 가질 수 있습니다
src실행할 스크립트 파일의 URL을 지정합니다. 이 속성을 사용하면<script>요소 내부에 스크립트 코드를 작성하지 않고 외부 스크립트 파일을 불러올 수 있습니다.type스크립트 코드의 MIME 타입을 지정합니다. 일반적으로 "text/javascript" 값을 사용합니다. HTML5부터는 이 속성을 생략해도 기본값으로 "text/javascript"가 지정됩니다.
<script>요소를 사용하여 스크립트를 작성할 때는 다음과 같은 사항을 고려해야 합니다<script>는 종료 태그가 필요합니다.<script>요소를 사용하여 작성된 스크립트는 일반적으로 웹 페이지의 렌더링이 완료된 후 실행됩니다. 따라서, 스크립트에서 HTML 요소를 조작하거나 스타일을 변경하는 등의 작업을 수행하려면 HTML 문서가 모두 로드된 후에 실행되도록 해야 합니다.<script>요소를 사용하여 외부 스크립트 파일을 불러올 때는 파일의 URL이 유효한지, 스크립트 파일이 존재하는지 등을 확인해야 합니다.- 스크립트 파일의 크기가 크거나, 로딩 시간이 길어질 경우 페이지의 로딩 속도가 느려질 수 있습니다. 이러한 경우, 스크립트 파일을 압축하거나, 필요한 경우 비동기적으로 로딩하는 방법을 고려할 수 있습니다.
<script>를<body>태그 내부 마지막에 작성하는 것이 권장되는 이유- 웹 페이지가 로딩되는 동안 스크립트 파일을 다운로드하는 시간이 추가되어 페이지 로딩 속도가 느려질 수 있기 때문입니다.
- 웹 페이지 내용이 전부 렌더링 되기 전에
<script>내부에서 렌더링 되지 않은 DOM 요소에 접근하려 한다면 예기치 못한 오류가 발생할 수 있기 때문입니다.
8. Semantic Tag
Semantic Tag
- HTML5에서 소개된 태그 중 하나로, 웹 페이지의 콘텐츠의 의미를 설명하는 역할을 합니다.
- 웹 페이지의 구조와 콘텐츠의 의미를 명확하게 나타낼 수 있어 검색 엔진이나 스크린 리더 등이 웹 페이지를 더 잘 이해하고 처리할 수 있습니다.
semantic taglist<header>도입부에 해당하는 콘텐츠<nav>HTML 문서 사이를 탐색할 수 있는 링크의 집합<main>HTML 문서 내에 한 번만 사용할 수 있는 주요 콘텐츠<footer>사이트의 작성자나 저작권 정보, 연락처 등이 있는 콘텐츠<article>독립적인 하나의 콘텐츠<section>전체적인 내용과 관련이 있는 콘텐츠<aside>부가 정보나 광고 등이 있는 콘텐츠<figure>image와 image caption이 있는 콘텐츠로<figcaption>을 자식 요소로 쓰곤 한다
Feedback
- html 요소들은 자주 사용하지 않으면 까먹기 쉬우므로 잘 기억하도록 하자
- 내일은 '프로그래밍 시작하기 in JavaScript' 코드잇 콘텐츠를 수강할 예정이다
Reference
job's done