[HTML/CSS] - html basic

Minji Kim·2022년 10월 14일

html

bootcourse 수강 내용으로 대충 공부할까봐 꼼꼼히 복습하기 위해 작성한 글입니다.

HTML 용어 및 특징

태그
요소
속성 - 속성명 속성값

글로벌 속성은 모든 태그에 사용될 수 있다.

빈태그란 ?

빈 태그는 내용만 비어있을 뿐 화면표시 외의 다른 용도로 사용되는 태그이다.

대표적으로 브라우저가 직접 화면에 내용을 그려줘야하는 경우에 사용
브라우저가 내용을 대체한다고 하여 replacement 태그 라고 함
빈 태그에 대체되는 태그만 있는 건 아니고 실제로 화면에 출력될 내용이 없어 다른 용도로 쓰이는 태그도 존재 (<br>)

[빈 태그의 예시]

<br>
<img src="">
<input type="">

HTML은 기본적으로 두 칸 이상의 공백과 개행을 모두 무시한다.

<h1>Hello, HTML</h1>
<h1>Hello,     HTML</h1>
<h1>
    Hello,
    HTML
</h1>
<!-- 모두 같은 결과를 출력한다. -->

HTML 기본 구조

문서타입 정의는 보통 DTD(doctype)라고 부른다.
이 문서가 어떤 버전으로 작성되었는지 브라우저에 알려주는 선언문이며 반드시 문서 내 최상단에 선언되어야 한다.

<!DOCTYPE html>
<html lang="ko">
	<head>
    <meta charset="UTF-8">
    <title>HTML</title>
  </head>
  <body>
	  <h1>Hello, HTML</h1>
  </body>
</html>

`<html>` 요소

문서 타입 선언 후에는 <html> 태그가 나와야 하고, 자식으로는 <head>태그와 <body>태그가 있다.

<html> : lang 속성은 문서가 어느 언어로 작성되었는지 의미
<head> : head에 위치하는 태그들은 브라우저 화면에 표시되지 않는 대신 문서의 기본 정보 설정이나 외부 스타일 시트 파일 및 js파일을 연결하는 등의 역할
<meta> : charset 속성으로 문자의 인코딩 방식 지정
<body> : 실제 브라우저 화면에 나타나는 내용이 들어가며, 우리가 다루는 태그들의 대부분이 모두 여기에 해당

HTML태그

<b> : bold
<i> : italic
<u> : underline
<s> : 중간선

anchor 요소

앵커 태그를 통해 다른 페이지로 이동하거나 현재 페이지 내에서 특정 위치로 초점을 이동시킬 수 있다.

<a> : 링크를 생성하는 태그

<a href="http://www.naver.com/" target="_blank">네이버</a>

`href` 속성

링크를 만들기 위해서 반드시 href(hypertext reference) 속성을 가져야 한다.

속성값

링크의 목적지가 되는 url

`target` 속성

링크된 리소스를 어디에 표시할지를 나타내는 속성이다.

속성값

_self : 현재 화면에 표시한다는 의미 (default)
_blank : 새로운 창에 표시한다는 의미로 외부 페이지가 나타남
_parent (잘 안 쓰임)
_top (잘 안 쓰임)

그 외 많은 속성값이 있다. 참고

내부링크

내부링크를 사용할 때는 href 속성값에 #을 쓰고 그 뒤에 페이지 내에서 이동하고자 하는 요소의 id 속성값을 적으면 된다.

보통 한 페이지에 내용이 많아 스크롤이 길어질 경우, 최상단으로 이동하기 위해 내부 링크를 주로 사용한다.

의미가 없는 컨테이너 요소

태그 자체에 아무 의미가 없으며, 단순히 요소들을 묶기 위해 사용되는 태그이다. 스타일을 주거나 서버에 보내는 데이터를 담기 위한 용도로 사용된다.

<div> (divsion) : 블록 레벨
span : 인라인 레벨

<div>
  <span>인라인 레벨</span> 블록 레벨
</div>

list 요소

<ul> : unordered list
<ol> : ordered list
<dl> : definition/description list

<ol>
  <li>숫자가 나타나는</li>
  <li>순서가 있는</li>
  <li>리스트</li>
</ol>

<ul> 
  <li>순서가</li> 
  <li>없는</li> 
  <li>리스트</li> 
</ul>

<dl>
  <dt>용어를 나타내는 태그</dt>
  <dd>용어에 대한 정의 또는 설명을 나타내는 태그</dd>
</dl>

image 요소

<img src="./images/pizza.png" alt="피자">

속성

src : 이미지 경로 (필수)
alt : 이미지를 대체하는 글 (필수)
- 웹 접근성 측면에서 중요한 속성이다.
width, height
- 값의 단위는 필요하지 않고 픽셀 단위로 계산한다.
- 값이 없으면 원본 크기대로 노출된다.
- 두 속성 중 한 속성 값만 있다면 비율에 맞게끔 변경되지만 두 속성 모두 선언하면 비율 무관하게 노출된다.

상대경로와 절대경로

상대경로 : 현재 웹 페이지 기준으로 상대적으로 이미지의 위치를 나타내는 경로
절대경로 : 실제 그 이미지가 위치한 곳의 전체 경로

<!-- 상대경로 -->
<img src="./images/pizza.png" alt="피자">

<!-- 절대경로 -->
<img src="C:/users/document/images/pizza.png" alt="피자">
<img src="http://www.naver.com/pizza.png" alt="피자">

지원하는 이미지 파일 형식

table 요소

테이블 구성요소

<table> : 표를 나타내는 태그
<tr> : 행을 나타내는 태그
<th> : 제목 셀을 나타내는 태그
<td> : 셀을 나타내는 태그

병합을 원할 때는 rowspan, colspan 속성을 이용한다.

rowspan - 행 기준으로 늘리는 것이므로 세로로 합치는 것을 의미
colspan - 열 기준으로 늘리는 것이므로 가로로 합치는 것을 의미

테이블 구조와 관련된 태그

<caption> : 표의 제목
<thead> : 제목 행
<tfoot> : 바닥 행
<tbody> : 본문 행

<!DOCTYPE html>
<html lang="ko">
	<head>
    <meta charset="UTF-8">
    <title>HTML</title>
    <style>
      th, td { border: 1px solid; }
	<!-- <style> 태그로 테두리 설정 -->
    </style>  
  
  </head>
  <body>
	  <h1>Table</h1>
    <table>
      <caption>Monthly Savings</caption>
      <thead>
          <tr>
              <th>Month</th>
              <th>Savings</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>January</td>
              <td>$100</td>
          </tr>
          <tr>
              <td>February</td>
              <td>$80</td>
          </tr>
      </tbody>
      <tfoot>
          <tr>
              <td>Sum</td>
              <td>$180</td>
          </tr>
      </tfoot>
  </table>
  </body>
</html>

그 외 테이블 구성요소

<colgroup> : 공통된 속성을 가지는 열들을 묶기 위한 태그
<col> : colgroup으로 묶을 각 공통된 속성 선언

scope, headers ?

스크린 리더기를 위해 설정하는 속성이다. th 요소에 scope 속성을 지정하고 해당 값으로 rowgroup, colgroup를 할당하면 해당 셀이 열의 제목인지,행의 제목인지 등을 알 수 있다.

scope : 스크린 리더기가 읽어줄 방향에 관해 설정한다.
속성값
- col : 해당 셀이 열을 위한 헤더 셀임을 명시
- row: 해당 셀이 행을 위한 헤더 셀임을 명시
- colgroup : 해당 셀이 열의 그룹을 위한 헤더 셀임을 명시
- rowgroup : 해당 셀이 행의 그룹을 위한 헤더 셀임을 명시
headers : 복잡한 테이블 구조라면 header를 통해 해당 셀과 관련된 id 정보를 전달한다.

[예시 코드]

<table>
  <caption>Superheros and sidekicks</caption>
  <colgroup>
      <col>
      <col span="2" class="batman">
      <col span="2" class="flash">
  </colgroup>
  <tr>
      <td> </td>
      <th scope="col">Batman</th>
      <th scope="col">Robin</th>
      <th scope="col">The Flash</th>
      <th scope="col">Kid Flash</th>
  </tr>
  <tr>
      <th scope="row">Skill</th>
      <td>Smarts</td>
      <td>Dex, acrobat</td>
      <td>Super speed</td>
      <td>Super speed</td>
  </tr>
</table>

<!-- id를 이용한 예제 -->
<table>
 <tr>
  <th>&nbsp;</th>
  <th id="imported" colspan="2">수입품목</td>
 </tr>
 <tr>
  <th>&nbsp;</th>
  <th id="cosmetic">화장품</td>
  <th id="car">자동차</td>
 </tr>
 <tr>
  <th id="america">미국</th>
  <td headers="imported cosmetic america">7000</td>
  <td headers="imported car america">30</td>
 </tr>
 <tr>
  <th id="japan">일본</th>
  <td headers="imported cosmetic japan">5000</td>
  <td headers="imported car japan">80</td>
 </tr>
</table>

Form 요소

서버에 데이터를 전달하기 위해 사용된다.

`<form>`

form 요소들을 감싸는 태그로 데이터를 묶어서 실제 서버로 전송해주는 역할을 하는 태그이다.

속성

action : 데이터를 처리하기 위한 서버의 주소

method : 데이터를 전송하는 방식을 지정

**속성값**

- get
    - 데이터가 전송될 때 주소창에 파라미터 형태로 붙어 데이터가 노출된다.
    - 민감한 정보를 다루는 폼에서는 사용하면 안된다.
- post
    - 데이터가 전송될 때 데이터가 노출되지 않는다.
    - 회원가입, 아이디와 비밀번호를 입력하는 곳에서 사용한다.

`<input>`

대표적인 폼 요소로, 내용이 없는 빈 요소이며 type 속성을 통해 여러 종류 입력 양식을 나타낼 수 있다.

type 속성값

text : 일반적인 텍스트 입력
password : 암호화하기 위한 내용 입력
radio : 라디오 버튼 (중복 선택 불가)
checkbox : 체크박스 버튼
radio, checkbox 추가 속성
- checked : boolean 값
- name : 항목의 그룹화를 할 때 사용
file : 파일을 서버에 올릴 때 사용
submit : form 값을 전송하는 버튼
reset : form 값을 초기화하는 버튼
image : 이미지를 삽입할 수 있는 버튼 (submit 동작과 동일)
button : 아무 기능이 없는 버튼

`<select>`

몇 개의 선택지를 리스트 형태로 노출하는 태그로, 드롭다운 상자 또는 콤보박스라고 불린다.

<option> 은 각 항목을 나타내며 selected라는 속성으로 초기 선택값을 지정할 수 있다.

<select>
  <option>서울</option>
  <option>경기</option>
  <option>강원</option>
</select>

`<textarea>`

여러 줄의 텍스트를 입력하기 위해 사용하는데, 입력박스라고 생각하면 된다.

rows : 세로 크기를 조절하는 속성으로 화면에 보여지는 줄 수
cols : 가로 크기를 조절하는 속성으로 한 줄에 들어가는 글자의 수 (평균적인 글자 너비로 적용)

`<button>`

type 속성값

submit
reset
button
- input 태그와 차이는 버튼의 텍스트 입력방식인데, button태그는 태그 사이에 입력을 하며 input 태그는 value 속성값에 입력함으로써 나타난다.

해당 기능들은 input태그와 동일한 기능으로 구현된다.

`<label>`

form 요소의 이름과 form 요소를 명시적으로 연결시켜주기 위해 사용한다.

form 요소들의 id 속성값과 label의 for 속성값을 동일하게 입력해주어야 한다.

해당 태그를 이용하면 클릭했을 때 해당 form 요소를 클릭한 것처럼 연결된 input 입력칸이 활성화된다.

스크린리더기를 통해 듣게 되면 해당 태그를 함께 읽어주게 된다.

사용성, 접근성 측면에서 중요한 역할을 하므로 반드시 써주는 게 좋다.

<label for="name">이름</label>: <input type="text" id="name"><br>
<label for="nickname">이름</label>: <input type="text" id="nickname"><br>

`<fieldset>, <legend>`

form 요소를 구조화 하기 위해 필요한 태그

<fieldset> : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용
- 보통 form의 성격에 따라 구분
<legend> : 폼 요소의 제목으로 <fieldset> 내부에 작성
- <fieldset>의 자식으로 반드시 최상단에 위치해야 합니다.

컨텐츠 모델

요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙이 있는데, 이 규칙의 그룹화한 것을 컨텐츠 모델이라 한다.

Metadata : 콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들

Flow : 문서의 자연스러운 흐름에 의해 배치되는 요소들

Sectioning : 문서의 구조와 관련된 요소들

Heading : 각 section의 header를 정의하는 heading 태그가 포함되는 요소들

Phrasing : 문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소들

Embedded : 외부 콘텐츠를 표현하는 요소들이 포함되며 오디오나 비디오, 이미지 등 멀티미디어 관련 요소들

Interactive : 사용자와 상호작용을 하는 요소들이 포함되며 대표적으로 form 요소들

시멘틱 마크업

컴퓨터가 잘 이해할 수 있도록 명시하기 위해 사용한다.

코드의 결과는 화면상으로 같게 나오지만 (row 기준), 컴퓨터가 받아들일 땐 의미 유무의 차이가 있다.

<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>

블록 & 인라인

블록 레벨 요소

부모 요소의 영역을 가로 영역에 맞게 꽉 채워져 표현된다.

양 옆으로 다른 요소가 배치되지 않게 박스를 생성하므로 박스의 위아래로 줄 바꿈이 생기게 된다.

블록 레벨 요소는 일반적인 모든 레벨의 요소를 포함할 수 있다.

인라인 레벨 요소

하나의 라인 안에서 자신의 내용만큼의 박스를 만든다.

라인의 흐름을 끊지 않고 요소 앞 뒤로 줄바꿈이 되지 않아 다른 인라인 요소들이 자리할 수 있다.

인라인 레벨 요소는 블록 레벨 요소를 포함할 수 없지만 예외적으로 <a> 는 인라인 레벨 요소지만 자손으로 블록 레벨 요소를 가질 수 있다.

참고

참고
https://www.boostcourse.org/cs120
https://seulbinim.github.io/WSA/table.html#scope-id-headers-속성
http://www.tcpschool.com/html-tag-attrs/th-scope

Minji Kim

애기코더 응애

이전 포스트

[JavaScript] - Math.min, Math.max, apply 함수

다음 포스트

[HTML/CSS] - html basic

HTML 용어 및 특징

빈태그란 ?

HTML 기본 구조

`<html>` 요소

HTML태그

anchor 요소

`href` 속성

`target` 속성

내부링크

의미가 없는 컨테이너 요소

list 요소

image 요소

table 요소

테이블 구성요소

테이블 구조와 관련된 태그

Form 요소

`<form>`

`<input>`

`<select>`

`<textarea>`

`<button>`

`<label>`

`<fieldset>, <legend>`

컨텐츠 모델

시멘틱 마크업

블록 & 인라인

블록 레벨 요소

인라인 레벨 요소

참고

[JavaScript] - Math.min, Math.max, apply 함수

[HTML/CSS] - css basic 1

0개의 댓글

[HTML/CSS] - html basic

HTML 용어 및 특징

빈태그란 ?

HTML 기본 구조

<html> 요소

HTML태그

anchor 요소

href 속성

target 속성

내부링크

의미가 없는 컨테이너 요소

list 요소

image 요소

table 요소

테이블 구성요소

테이블 구조와 관련된 태그

Form 요소

<form>

<input>

<select>

<textarea>

<button>

<label>

<fieldset>, <legend>

컨텐츠 모델

시멘틱 마크업

블록 & 인라인

블록 레벨 요소

인라인 레벨 요소

참고

[JavaScript] - Math.min, Math.max, apply 함수

[HTML/CSS] - css basic 1

0개의 댓글

`<html>` 요소

`href` 속성

`target` 속성

`<form>`

`<input>`

`<select>`

`<textarea>`

`<button>`

`<label>`

`<fieldset>, <legend>`