HTML Basic 3

12. HTML Links 👩‍💻

1. Hyperlinks

사용자의 클릭에 의해 page를 이동시킨다.

Syntax

<a href="[Address]">
    [Text | HTML element]
</a>

1 ) Hyperlinks with A Text

<a href="https://sbpark88.github.io">This link is my blog</a>

This link is my blog

2 ) Hyperlinks with An Element

Links는 단순 텍스트 뿐 아니라 HTML element와 사용하는 것이 가능하다.

<a href="https://sbpark88.github.io">
  <img src="/assets/images/banners/home.jpeg" alt="My Blog Main Image" style="width:300px">
</a>

3 ) Link to an Email Address

href attribute 의 주소를 mailto:[E-mail Address]로 작성하면, 해당 이메일 주소로 새 메일을 보내도록 메일 앱을 연다.

<a href="mailto:someone@example.com">Send email</a>

Send email

4 ) Button as a Link

Button elements 에 JavaScript를 이용해 Link elements 의 기능을 구현할 수 있다.

See the Pen Link to an Email Address by SB Park (@sbpark88) on CodePen.

‘CSS’ 를 이용한 버튼 모양의 ‘Links’ 와 비교해보자.

2. Link `target` attribute

_self : 기본값으로 현재 document와 동일한 window/tab에서 연다.
_blank : 새 window 또는 새 tab에서 연다.
_parent : nested frame 구조에서 하나 위 frame, 즉, parent frame에서 연다.
_top : nested frame 구조에서 최상위 frame, 즉, _parent를 여러 번 해 최상위 docuemnt에서 _self로 여는 window의 full body로 연다. 것과 같다.

See the Pen HTML Target by SB Park (@sbpark88) on CodePen.

(CodePen 구조상 _self는 작동하지 않으며, 위 embed의 _parent는 이 페이지가 아니라 CodePen Pens 의 페이지다.)

3. Link Titles

title attribute 는 Link elements 와 자주 사용되어 마우스 오버 시 툴팁으로 추가적인 정보를 제공한다.

<a href="https://sbpark88.github.io" title="Go to My Blog Main Page">This link is my blog</a>

This link is my blog

<a href="https://sbpark88.github.io" title="Go to My Blog Main Page">
  <img src="/assets/images/banners/home.jpeg" alt="My Blog Main Image" style="width:300px">
</a>

4. Link with CSS

1 ) Default Hyperlinks

HTML Links는 기본적으로 기방문, 미방문, 클릭 상태를 다르게 표현한다.

See the Pen Untitled by SB Park (@sbpark88) on CodePen.

link(미방문) : 밑줄 & 파란색
visited(기방문) : 밑줄 & 보라색
active(클릭) : 밑줄 & 빨간색

2 ) Hyperlinks with CSS

물론, CSS를 이용해 사용자화 할 수 있다.

See the Pen Untitled by SB Park (@sbpark88) on CodePen.

link(미방문) : 밑줄 X & 녹색 & 배경 X
visited(기방문) : 밑줄 X & 분홍색 & 배경 X
hover(마우스오버) : 밑줄 O & 빨간색 & 배경 X
active(클릭) : 밑줄 O & 노란색 & 배경 X

3 ) Hyperlinks with Button Style

Button elements 를 사용하지 않고 CSS를 이용해 Link elements 를 Button elements 처럼 보이게 할 수 있다.
사용자가 볼 때는 Link elements 로 구현한 버튼과 Button elements 로 구현한 버튼에 차이는 없겠지만 Link elements 를 이용하면 HTML 문서를 분석할 때 화면의 버튼이 페이지 이동을 위한 것임을 좀 더 명확히 할 수 있다.

See the Pen Untitled by SB Park (@sbpark88) on CodePen.

‘button’ 태그를 이용한 ‘Hyperlinks’ 구현 과 비교해보자.

5. Link Bookmarks

Link elements 는 URL을 이용해 페이지를 이동하는 것 뿐 아니라, id attribute 를 인식해 페이지 내 해당 id와 일치하는 HTML element 로 이동시킨다.

Syntax

<!-- Other page -->
<a href="[URL][#ID]"></a>
<!-- Same page -->
<a href="[#ID]"></a>

See the Pen Untitled by SB Park (@sbpark88) on CodePen.

13. HTML Images 👩‍💻

1. HTML Images Syntax

src : 이미지 파일 위치
alt : 이미지 파일이 없을 경우 대체할 텍스트로, 시각 장애인이 사용하는 스크린 리더 프로그램은 물론 SEO에도 사용되므로 생략하지 않는 것이 좋다.
width : 이미지 너비(pixel), width 와 height 를 attributes 로 설정하는 방법은 권장되지 않는다. CSS를 이용하는 것이 권장된다.
height : 이미지 높이(pixel), width 와 height 를 attributes 로 설정하는 방법은 권장되지 않는다. CSS를 이용하는 것이 권장된다.

<img> 태그는 웹 페이지에 이미지를 embed하기 위해 사용된다. 하지만 기술적으로는 실제로 이미지를 페이지에 삽입하는 것이 아니라, 참조된 이미지(referenced image)를 위한 공간을 생성하고 유지한다.

<img> 태그는 <br> 태그나 <hr> 태그와 마찬가지로 Empty Elements로 종료 태그가 없다.

<img src="/assets/images/banners/home.jpeg" alt="My Blog Main Image" style="width:300px">

2. Image Size

이미지의 크기를 지정하는 우선순위는 다음과 같다.

HTML attributes < Internal/External CSS < Inline CSS

See the Pen Link with Title by SB Park (@sbpark88) on CodePen.

따라서, HTML attributes 로 크기를 지정하면, Internal/External CSS 이 우선순위가 높아 설정값 일부를 덮어쓰게된다.

이미지 크기는 항상 지정해주는 것이 권장된다. 이미지를 크기를 미리 지정하지 않으면, 이미지가 로딩됨에 따라 페이지 레이아웃이 고정되지 않아 페이지가 로드되는 동안 레이아웃이 변경되며 화면이 깜빡일 수 있어 사용성이 떨어진다.

3. Image Floating

CSS의 float property 를 이용하면 element 를 글씨의 왼쪽 또는 오른쪽에 별도의 레이어로 띄운다.
정확한 CSS Properties로 이야기하자면, display: inline-block; 속성이 된다(즉, float을 사용하면 display: absolute;와 동시에 사용될 수 없다).

float: none; (default)

See the Pen Untitled by SB Park (@sbpark88) on CodePen.

float: left;

See the Pen Float left by SB Park (@sbpark88) on CodePen.

float: right;

See the Pen Float right by SB Park (@sbpark88) on CodePen.

4. HTML Image Maps

1 ) Image Maps

이미지 위에 클릭 가능한 영역을 지도를 표시하듯 정의한다.

<img src="/assets/images/posts/2022-12-10-w3schools-html-part3/workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="https://www.w3schools.com/html/computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="https://www.w3schools.com/html/phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="https://www.w3schools.com/html/coffee.htm">
</map>

아래 이미지의 랩탑, 스마트폰, 커피는 각각 클릭 가능한 영역을 정의하고있다.

Workplace

img > usemap : usemap attribute 는 #[map-name]을 이용해 이미지 맵에 연결한다(# 을 붙여서 id 값일 것 같지만 name 이다).

map : <map> 태그는 반드시 name attribute 를 가져야한다.

area : <map> 태그의 children으로 1 ~ n 개로 정의하며, 각각의 클릭 가능한 영역을 정의한다. <area> 태그는 shape와 coords attributes 를 제외하면, <a> 태그와 동일하다.

2 ) Shape & Coords Attributes

클릭 가능한 영역의 모양을 정의하는 shape는 다음 4 가지로 분류되며, shape에 따라 coords는 각각 다른 형태로 정의된다.

default : 이미지 전체 영역

rect : 사각형

circle : 원

poly : 다각형

Shape=”rect”

shape의 값이 rect일 때, coords는 (x, y) 좌표계를 이용해 (x₁, y₁) ~ (x₂, y₂) 로 클릭 가능한 영역을 정의한다.

From

Rectangular Shape

<area shape="rect" coords="34,44,270,350" alt="Computer" href="https://www.w3schools.com/html/computer.htm">

Shape=”circle”

shape의 값이 circle일 때, coords는 (x, y) 좌표계를 이용해 원의 중심과 반지름으로 클릭 가능한 영역을 정의한다.

Center

Radius

Circular Shape

<area shape="circle" coords="337,300,44" alt="Coffee" href="https://www.w3schools.com/html/coffee.htm">

Shape=”poly”

포토샵 다각형 도구를 사용하듯 여러 점을 잡아 다각형을 포착한다.

All edges

Polygonal Shape

<area shape="poly" 
      coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" 
      alt="Bread" 
      href="https://www.w3schools.com/html/croissant.htm">

5. HTML Background Images

1 ) Background Image on a HTML Element

HTML 의 거의 모든 elements 는 Background Image를 가질 수 있으며, Background Image는 style attribute 의 background-image property 를 이용해 삽입한다.

See the Pen Untitled by SB Park (@sbpark88) on CodePen.

물론, CSS 로 빼서 사용하는 것도 가능하다.

See the Pen Untitled by SB Park (@sbpark88) on CodePen.

2 ) Background Image on a Page

<body> element 에 추가하면 웹 페이지의 배경으로 사용할 수 있다.

See the Pen Background-Image on a Page by SB Park (@sbpark88) on CodePen.

3 ) Background Repeat

하지만 사진 크기가 작을 경우 화면이 반복된다. CSS의 background-repeat property 를 이용해 제어할 수 있다.

See the Pen Background-Image No-Repeat by SB Park (@sbpark88) on CodePen.

4 ) Background Cover

반복은 멈췄지만 사진이 화면을 채우지 못 한다. Background 관련된 몇 가지 CSS properties 를 추가로 정의해주면 이를 제어할 수 있다.

원본 비율 유지

See the Pen Background Cover by SB Park (@sbpark88) on CodePen.

풀커버

See the Pen Untitled by SB Park (@sbpark88) on CodePen.

6. HTML Picture Element

1 ) HTML Picture Element

picture 태그는 이미지를 하나의 블럭에 조건에 따라 전환시켜준다. 즉, 이미지를 위한 switch-case와 같다.

See the Pen Untitled by SB Park (@sbpark88) on CodePen.

화면 폭이 650 이상이면 음식 이미지, 화면 폭이 465 이상 ~ 650 미만이면 자동차 이미지, 그 외(source 미지원 또는 465 미만)는 소녀의 이미지를 보여준다.

picture는 하나 또는 그 이상의 source 태그를 자식으로 갖는다.

source 태그의 조건은 media attribute 에 의해 정의되며, 그때 매칭할 사진은 srcset attribute 에 정의한다.

img 태그는 반드시 포함되어야하는 태그로, 매칭되는 케이스가 없거나 source 를 지원하지 않는 경우에 default로 사용된다.

즉, picture 태그 는 switch, source 태그는 각 case, media attribute 는 조건, srcset attribute 는 매칭 될 경우의 이미지, img 태그는 default에 해당한다.

picture 태그는 이미지를 조건에 따라 다르게 보여주지만 HTML 태그에 여러 개를 뿌려 놓고 display: none; 또는 visibility: hidden; 처리를 하는 것이 아니다. CSS태그를 제어하는 것이 아닌 브라우저의 Web API에 의해 제어된다. 따라서 이미지 전환이 CSS의 영향으로부터 자유롭다.

2 ) When to use the Picture Element

화면 크기에 따라 구별 : 화면이 작을 경우 굳이 큰 이미지가 필요하지 않다. 따라서 작은 화면에는 작은 이미지를 제공해 대역폭을 절약할 수 있다. 또한, 이미지에 텍스트가 포함된 경우 작은 화면에서 보여주기 어려운 경우 작은 화면에 맞춘 별도의 이미지를 만들어 화면 크기에 맞는 이미지를 제공할 수 있다.
포맷 미지원 문제 해결 : 브라우저에 따라 지원되는 이미지 포맷이 다르다. 보통 jpeg, png 같은 것들은 문제가 되지 않지만, 일부 브라우저가 지원하지 못 하는 이미지 포맷일 가능성이 있는 경우, picutre 태그를 이용해 여러 이미지를 제공하면, 브라우저는 인식 가능한 첫 번째 이미지를 사용한다.

14. HTML Favicon 👩‍💻

favicon은 브라우저의 탭에 해당 웹 페이지를 나타낼 수 있는 작은 이미지다. 일반적으로 웹 서버의 root 또는 별도의 이미지 디렉토리를 만들고 이미지 디렉토리의 root에 저장하며, 이름은 favicon.ico를 사용한다.

favicon의 위치나 이름, 확장자는 고정된 것이 아니다. 실제로 이 블로그가 사용하는 favicon의 위치와 이름은 다음과 같다.
assets/images/favicon/greendreamtree.png

브라우저의 favicon 포맷 지원 현황

Browser	ICO	PNG	GIF	JPEG	SVG
Edge	Yes	Yes	Yes	Yes	Yes
Chrome	Yes	Yes	Yes	Yes	Yes
Firefox	Yes	Yes	Yes	Yes	Yes
Opera	Yes	Yes	Yes	Yes	Yes
Safari	Yes	Yes	Yes	Yes	Yes

15. HTML Tables 👩‍💻

1. HTML Tables

Tables Generator - HTML 을 이용하면 좋다.

table 태그는 tr태그로 이루어지고, tr태그는 다시 th 태그 또는 td태그로 이루어진다.

table : 테이블 블럭을 정의
tr : 테이블 row 를 정의
th : 테이블 header cell 을 정의
td : 테이블 cell 을 정의

즉, 테이블은 row 가 기본 구조이며, th, td 어떤 셀을 어느 위치에 생성하냐에 따라 가로 테이블이 될 수도 있고, 세로 테이블이 될 수도 있다.

위 4개의 태그가 테이블을 구성하는 가장 기본적인 태그이고, 추가적으로 다음 태그를 사용할 수 있다.

caption : 테이블 설명을 정의
colgroup : 아래 col 태그를 children 으로 갖는 태그로 col 태그를 하나의 그룹으로 묶는다.
col : 테이블의 column 에 특정 스타일을 적용한다.
thead : 테이블의 header 콘텐츠를 그룹화 한다.
tbody : 테이블의 body 콘텐츠를 그룹화 한다.
tfoot : 테이블의 foot 콘텐츠를 그룹화 한다.

caption

See the Pen Untitled by SB Park (@sbpark88) on CodePen.

thead, tbody, tfoot

See the Pen Untitled by SB Park (@sbpark88) on CodePen.

2. Table Borders

1 ) Table Borders and Collapsing

테이블의 border는 전체 테이블을 구성하는 table 태그와 각 셀을 구성하는 th, td 태그에 적용한다.

See the Pen Untitled by SB Park (@sbpark88) on CodePen.

Margin 은 Collapsing이 기본값이지만 (Margin Collapsing) Table Borders는 중복을 피하기 위해 명시적으로 border-collapse: collpased; 스타일을 주어 Collapsing을 해줘야한다.

See the Pen Untitled by SB Park (@sbpark88) on CodePen.

2 ) border-style property

border-style property 는 주로 사용되는 solid 외에도 다양한 값을 가질 수 있다.

dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden

3 ) border-radius property

border-radius property 를 이용하면 border 를 둥글게 표현할 수 있다.

See the Pen Table with Rounded Borders by SB Park (@sbpark88) on CodePen.

3. Table Sizes

CSS의 width와 height properties 를 이용해 테이블의 전체 크기 및 각 row, column 의 크기를 조절할 수 있다.

See the Pen Table width and height by SB Park (@sbpark88) on CodePen.

4. Table Headers

th, td 태그는 셀을 생성하는 태그로 horizontal 이든 vertical 이든 header로 생성하기를 원하는 셀에 td 태그 대신 th태그를 사용하면 된다.

See the Pen Table Headers by SB Park (@sbpark88) on CodePen.

위 시간표의 Weekday, Weekend, Mon ~ Sun, Morning, Afternoon, Evening은 th 태그에 의해 생성된 header cell이다.

추가로 위 시간표는 thead, tbody, tfoot으로 나뉘어있다.

5. Padding & Spacing

1 ) Cell padding

글씨가 테이블 border 에 딱 달라붙지 않도록 셀에 padding 을 주기를 원한다면, th, td 태그에 padding을 준다.

See the Pen Table Padding by SB Park (@sbpark88) on CodePen.

2 ) Cell margin

셀에 margin 을 주고 싶을 경우, th, td 태그에 적용한 margin을 주는 것이 아니라 table 태그에 border-spacing을 준다.

See the Pen Table border-spacing by SB Park (@sbpark88) on CodePen.

6. Colspan & Rowspan

테이블 셀을 합치고 싶을 경우, th, td 태그에 colspan, rowspan attribute 를 사용한다.

colspan : column 을 합친다.
rowspan : row 를 합친다.

예제는 4. Table Headers 를 참고한다.

7. Table Styling

1 ) Zebra Stripes

tr:nth-child(even) {
  background-color: #D6EEEE;
}

Zebra Stripes

2 ) Vertical Zebra Stripes

td:nth-child(even), th:nth-child(even) {
  background-color: #D6EEEE;
}

Vertical Zebra Stripes

3 ) Combine Vertical and Horizontal Zebra Stripes

tr:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

Combine Vertical and Horizontal Zebra Stripes

4 ) Horizontal Dividers

tr {
  border-bottom: 1px solid #ddd;
}

Horizontal Dividers

5 ) Hoverable Table

:hober 셀렉터를 이용해 마우스 오버시 하이라이트를 줄 수 있다.

tr:hover {background-color: #D6EEEE;}

See the Pen Hoverable Table by SB Park (@sbpark88) on CodePen.

8. Table Colgroup

1 ) Colgroup Syntax

colgroup 태그는 col 태그와 함께 테이블의 column 에 특정 스타일을 적용하며, colgroup의 위치는 다음과 같다.

<table>
    <caption></caption>
    <colgroup>
        <col>
        <col>
    </colgroup>
    <thead></thead>
    <tbod></tbod>
    <tfoot></tfoot>
</table>

See the Pen Table Colgroup and Col by SB Park (@sbpark88) on CodePen.

2 ) Prefer CSS to Colgroup

하지만 colgroup과 col은 제한된 CSS(width, visibility, background, border)만 지원하며, 우선순위가 CSS에 비해 낮으므로 CSS를 사용하는 것이 더 좋다.

See the Pen Untitled by SB Park (@sbpark88) on CodePen.

:nth-col은 CSS pseudo-class로 아직 experimental로 지원되는 브라우저가 없으므로 nth-child를 사용한다.

16. HTML Lists 👩‍💻

HTML 은 Unordered Lists, Ordered Lists, Description Lists 를 사용할 수 있다.

1. Unordered Lists

1 ) Unordered Lists Syntax

<ul>
  <li></li>
  <li></li>
</ul>

ul 태그는 list-style-type을 style property 로 갖는다.

disc : default, bullet ● 으로 표현된다.
circle : 속이 빈 bullet 과 같다. ○ 으로 표현된다.
square : ■ 로 표현된다.
none : 아무런 표시도 하지 않는다.

See the Pen Unordered Lists by SB Park (@sbpark88) on CodePen.

2 ) Nested Unordered Lists

See the Pen Nested Unordered Lists by SB Park (@sbpark88) on CodePen.

3 ) Horizontal Unordered Lists with CSS

CSS를 이용하면 리스트의 방향을 세로에서 가로로 바꿀 수 있다.

See the Pen Untitled by SB Park (@sbpark88) on CodePen.

2. Ordered Lists

1 ) Ordered Lists Syntax

<ol>
  <li></li>
  <li></li>
</ol>

ol 태그는 type attribute 를 갖는다.

1 : default, 숫자로 표현된다.
A : 알파벳 대문자로 표현된다.
a : 알파벨 소문자로 표현된다.
I : 대문자 로마 숫자로 표현된다.
i : 소문자 로마 숫자로 표현된다.

See the Pen Ordered Lists by SB Park (@sbpark88) on CodePen.

2 ) Control Ordered List Counting

See the Pen Control Ordered Lists Counting by SB Park (@sbpark88) on CodePen.

3 ) Nested Ordered Lists

See the Pen Nested Ordered Lists by SB Park (@sbpark88) on CodePen.

3. Description Lists

HTML Lists 는 ul과 ol 외에도 dl을 사용할 수 있다.

Syntax

<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>

dl : description lists 를 정의한다.
dt : description term 을 정의한다.
dd : description term 을 설명한다(describe).

See the Pen Description Lists by SB Park (@sbpark88) on CodePen.

17. HTML Block & Inline 👩‍💻

모든 HTML Elements 는 CSS display property 의 값으로 block 또는 inline을 기본으로 갖는다.

1. Block-level Elements

가능하다면 항상 라인 하나를 차지한다(new line, full width).
브라우저는 자동으로 앞, 뒤에 margin을 일부 추가한다.

대표적으로 p, div 태그가 해당되며, 리스트는 다음과 같다.

2. Inline Elements

Inline Elements는 대표적으로 span 태그가 해당되며, Block-level Elements와 반대로 new line을 생성하지 않으며, width 역시 필요한 만큼만 사용한다.

리스트는 다음과 같다.

Reference

“HTML Tutorial.” W3Schools. accessed Dec. 10, 2022, W3Schools-HTML.

12. HTML Links 👩‍💻

1. Hyperlinks

2. Link target attribute

3. Link Titles

4. Link with CSS

5. Link Bookmarks

13. HTML Images 👩‍💻

1. HTML Images Syntax

2. Image Size

3. Image Floating

4. HTML Image Maps

5. HTML Background Images

6. HTML Picture Element

14. HTML Favicon 👩‍💻

15. HTML Tables 👩‍💻

1. HTML Tables

2. Table Borders

3. Table Sizes

4. Table Headers

5. Padding & Spacing

6. Colspan & Rowspan

7. Table Styling

8. Table Colgroup

16. HTML Lists 👩‍💻

1. Unordered Lists

2. Ordered Lists

3. Description Lists

17. HTML Block & Inline 👩‍💻

1. Block-level Elements

2. Inline Elements

2. Link `target` attribute