[웹 서비스 개발 ] HTML - (4)

김광일·2024년 10월 22일

웹 서비스 개발

목록 보기
23/45
post-thumbnail

[1] ImageMap

1) 설명

: ImageMap은 하나의 이미지에서 여러 영역을 클릭하여 서로 다른 링크로 이동할 수 있는 방식이다.

  • 이를 통해 이미지 내 특정 영역을 지정해 사용자가 클릭할 수 있는 인터랙티브한 요소를 만들 수 있다.
  • 각 영역은 사각형, 원형, 또는 다각형 등 다양한 모양으로 지정할 수 있으며, 이미지와 맵은 usemap 속성을 통해 연결된다.

2) 사용법

  1. <img> 태그의 usemap 속성: 이미지를 맵과 연결한다. usemap 속성의 값은 해당 이미지에 적용할 맵의 이름을 # 기호와 함께 지정한다.

    <img src="image.jpg" alt="Description" usemap="#mapname">

  2. <map> 태그: 이미지에 대한 맵을 정의하며, 여러 개의 클릭 가능한 영역을 설정할 수 있다. name 속성으로 맵의 고유 이름을 지정하고, 이미지의 usemap 속성에서 참조한다.

    <map name="mapname">
  <!-- clickable areas go here -->
</map>

  3. <area> 태그: 이미지 내에서 클릭 가능한 특정 영역을 정의하는 태그이다. shape, coords, 및 href 속성을 사용하여 영역의 모양과 좌표를 지정하고, 클릭 시 이동할 링크를 설정한다.

    <area shape="rect" coords="x1,y1,x2,y2" alt="description" href="link.html">
    • shape: 클릭 가능한 영역의 모양을 지정한다. 가능한 값은 rect (사각형), circle (원형), poly (다각형) 등이 있다.
    • coords: 영역의 좌표를 지정한다. shape에 따라 다르게 설정되며, 이미지의 왼쪽 상단을 (0, 0)으로 시작하는 좌표 체계를 따른다.
    • href: 클릭 시 이동할 링크를 지정한다.

3) 특징

  1. 다양한 클릭 영역: 이미지를 다양한 모양으로 나누어 특정 영역을 클릭하면 각각 다른 페이지나 링크로 연결할 수 있다.
  2. shape 속성의 유연성: 사각형, 원형, 다각형으로 영역을 지정하여 보다 정확하게 이미지를 구획할 수 있다.
  3. 좌표 기반의 제어: coords 속성을 사용해 이미지 내의 정확한 위치를 좌표로 지정해 클릭 가능한 영역을 정밀하게 제어할 수 있다.
  4. 대체 텍스트: alt 속성을 사용하여 각 영역에 설명을 추가해 시각적으로 이미지를 볼 수 없는 사용자에게도 의미를 전달할 수 있다.

[2] z-index

1) 사용법

z-index는 HTML 요소의 쌓임 순서를 제어하기 위해 사용되는 CSS 속성이다. 요소들이 서로 겹칠 때, z-index 값을 통해 어떤 요소가 더 앞쪽에 표시될지를 결정할 수 있다.

.element {
  position: relative; /* 또는 absolute, fixed */
  z-index: 10;
}
  • z-index 속성은 position 속성이 relative, absolute, fixed, 또는 sticky로 설정된 요소에만 적용된다.
  • 숫자가 클수록 화면의 앞쪽에 표시되며, 숫자가 작을수록 뒤쪽에 표시된다. 음수 값도 설정 가능하다.

2) 특징

  1. 쌓임 순서 (Stacking Order): 요소의 z-index 값이 클수록 다른 요소 위에 쌓인다. 기본적으로 z-index를 지정하지 않은 요소는 HTML의 소스 순서대로 화면에 표시된다.

  2. 숫자 값: z-index는 숫자 값을 사용하며, 값이 클수록 앞에 표시된다. z-index는 정수, 음수, 또는 0도 가능하다. 예를 들어, z-index: -1은 요소를 가장 뒤로 보내는 역할을 한다.

  3. z-index의 기본값: z-index 값을 설정하지 않으면, 브라우저는 기본적으로 값이 0인 것으로 취급한다. 요소의 순서는 HTML 문서에 작성된 순서대로 정해진다.

  4. 컨텍스트: 특정 요소에 z-index를 적용하면 그 자식 요소들도 같은 z-index 컨텍스트 내에서만 영향을 받는다. 즉, 자식 요소는 부모 요소의 z-index에 종속된다. 이를 쌓임 맥락 (stacking context)이라고 한다.

  5. Position과의 관계: z-index는 반드시 position 속성과 함께 사용되어야 하며, static이 아닌 relative, absolute, fixed, sticky와 함께 사용될 때만 작동한다.

이 코드를 보면 position 속성과 관련된 몇 가지 개념이 사용되고 있습니다. 이를 바탕으로 다음과 같은 주제를 선정할 수 있습니다:

[3] position / top, bottom, left, right

1) CSS Positioning

: position 속성은 웹 페이지 레이아웃을 구성하는 데 매우 중요하며, 요소의 배치 방식에 따라 페이지의 전체 구조가 달라질 수 있다.

(1) 주요 개념
  • position: static: 기본값으로, 문서 흐름에 따라 요소가 배치된다.
  • position: relative: 요소가 원래 위치에서 상대적으로 이동하며, 문서 흐름에 여전히 존재한다.
  • position: absolute: 요소가 문서 흐름에서 제거되고, 가장 가까운 relative 부모나 body를 기준으로 배치된다.
  • position: fixed: 요소가 화면에 고정되어, 스크롤해도 같은 위치에 유지된다.
  • position: sticky: 요소가 스크롤에 따라 고정되지만, 특정 위치까지 스크롤될 때만 고정된다.
(2) 사용법 예시
.relative-box {
   position: relative;
   top: 10px;
   left: 20px;
}

2) Relative Positioning

: relative는 요소가 원래 있던 위치를 기준으로 이동할 수 있게 해 주며, 문서 흐름에 영향을 주지 않기 때문에 주변 요소들은 그 자리에 그대로 유지된다.

(1) 주요 개념
  • top, bottom, left, right: relative 속성과 함께 사용하여, 요소를 현재 위치에서 얼마나 이동시킬지를 지정한다.
  • 원래 위치와의 관계: 요소는 문서 내에서 원래 있던 위치에 배치되고, 그 이후에 지정된 값만큼 이동한다.
(2) 사용법 예시
.super {
   position: relative;
   top: -1em;
}

3) Example : Superscript, Subscript, and Shifted Text

: 아래의 super, sub 클래스는 텍스트를 위로 올리거나 아래로 내리는 역할을 한다.

  • 이 방식은 수학적 또는 과학적 표기법(예: 지수, 화학식)에 자주 사용된다.
  • 또한 텍스트의 위치를 왼쪽이나 오른쪽으로 이동시키는 것도 종종 레이아웃 조정에 사용된다.
(1) 주요 개념
  • sup (위 첨자): 텍스트를 기준 위치보다 위로 이동시킨다.
  • sub (아래 첨자): 텍스트를 기준 위치보다 아래로 이동시킨다.
  • 텍스트 이동: left, right 속성을 사용하여 텍스트를 좌우로 이동할 수 있다.
(2) 사용법 예시
.superscript {
   position: relative;
   top: -0.5em;
}

.subscript {
   position: relative;
   bottom: -0.5em;
}

[4] Control - Background Image

1) 설명

: background 속성은 HTML 요소의 배경을 설정하는 데 사용된다.

  • 그중에서 background-image, background-position, background-repeat, background-attachment는 배경 이미지와 관련된 속성들이다.
  • 이 속성들을 사용하면 웹 페이지의 배경을 효과적으로 제어할 수 있다.

2) 종류 및 사용법

  1. background-image: 배경에 이미지를 삽입하는 속성이다.

    • 사용법: 
      background-image: url('image.jpg');
      • url() 안에 이미지 경로를 지정하여 배경으로 설정한다.

  2. background-position: 배경 이미지의 위치를 지정하는 속성이다.

    • 사용법:
      background-position: center;
      • center, top, bottom, left, right와 같은 값으로 이미지의 위치를 설정하거나, 픽셀(px) 또는 백분율(%)로 세부적으로 위치를 지정할 수 있다.
      • 예시:
        background-position: 50% 50%; /* 가운데 정렬 */

  3. background-repeat: 배경 이미지가 반복되는 방식을 지정하는 속성이다.

    • 사용법:
      background-repeat: no-repeat;
      • repeat: 이미지를 가로와 세로로 반복.
      • no-repeat: 이미지 반복 없음.
      • repeat-x: 가로 방향으로만 반복.
      • repeat-y: 세로 방향으로만 반복.

  4. background-attachment: 배경 이미지의 스크롤 동작을 설정하는 속성이다.

    • 사용법:
      background-attachment: fixed;
      • scroll: 배경 이미지가 콘텐츠와 함께 스크롤됨.
      • fixed: 배경 이미지가 고정되어 스크롤되지 않음.
      • local: 배경 이미지가 해당 요소 내에서만 스크롤됨.

2) 간단한 사용 예시

body {
    background-image: url('background.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

위의 예시는 화면 가운데에 위치한 배경 이미지를 고정하고, 반복 없이 배경을 설정하는 방식이다.

3) 요약

  • background-image: 배경 이미지 설정
  • background-position: 배경 이미지의 위치 설정
  • background-repeat: 배경 이미지의 반복 여부 설정
  • background-attachment: 배경 이미지의 스크롤 고정 여부 설정

[5] Div

: div 요소는 HTML에서 블록 레벨 요소로 사용되며, 웹 페이지의 레이아웃을 구성하는 데 중요한 역할을 한다.

1) Block-Level Element

  • 설명: div 요소는 블록 레벨 요소로, 기본적으로 새로운 줄에서 시작하고, 전체 너비를 차지한다. 다른 블록 요소들과 함께 사용할 때는 세로로 쌓인다.
  • 사용법: <div>...</div> 태그를 사용하여 콘텐츠를 그룹화하고 스타일을 적용한다.

2) Width and Height

  • 설명: div의 너비와 높이는 CSS에서 width와 height 속성을 사용하여 설정할 수 있다. 퍼센트(%) 단위로 지정하면 부모 요소에 대한 상대적 크기를 정의할 수 있다.
  • 예시: 
<div style="width: 30%; height: 30%;">...</div>

3) Background Color

  • 설명: div 요소에 배경색을 지정하여 시각적인 구분을 줄 수 있다. background-color 속성을 사용하여 설정한다.
  • 예시: 
div { background-color: orange; }

4) Text Alignment

  • 설명: text-align 속성을 사용하여 div 내의 텍스트 정렬 방식을 설정할 수 있다. center, left, right 등의 값을 사용할 수 있다.
  • 예시: 
<div style="text-align: center;">...</div>

5) Overflow

  • 설명: overflow 속성은 콘텐츠가 div의 경계를 넘어설 때의 처리 방식을 지정한다. scroll, hidden, auto 등의 값을 사용할 수 있다.
  • 예시: 
<div style="overflow: scroll;">...</div>

6) Floating Elements

  • 설명: float 속성을 사용하여 div를 왼쪽이나 오른쪽으로 띄울 수 있다. 이 경우, 텍스트나 다른 요소가 div 주위로 흐르게 된다.
  • 예시: 
<div style="float: right;">...</div>

7) Clearing Floats

  • 설명: float 속성을 사용하여 요소를 띄운 경우, 이후에 오는 요소가 제대로 배치되도록 하려면 clear 속성을 사용해야 한다. clear 속성은 플로팅 요소와 관련된 요소의 위치를 조정하는 데 사용된다.
  • 예시: 
<p style="clear: right">...</p>

8) Margin

  • 설명: margin 속성을 사용하여 div 요소의 외부 여백을 설정할 수 있다. 요소 간의 간격을 조정하는 데 유용하다.
  • 예시: 
div { margin-bottom: 0.5em; }

[6] Border Setting

1) border-style이란?

border-style 속성은 HTML 요소의 테두리 스타일을 설정하는 데 사용된다. 이 속성은 요소의 외부 테두리 모양을 정의하며, 다양한 스타일을 선택할 수 있다. border-style을 설정하면, 요소의 border-width와 border-color 속성과 함께 테두리의 전체적인 모양이 결정된다.

2) 종류

border-style 속성에는 여러 가지 스타일이 있으며, 각 스타일은 서로 다른 시각적 효과를 제공한다. 주요 종류는 다음과 같다:

  1. none: 테두리가 없음을 나타낸다. 기본값이다.

    border-style: none;

  2. solid: 실선 테두리를 나타낸다.

    border-style: solid;

  3. dashed: 대시가 있는 선형 테두리를 나타낸다. 점선처럼 보인다.

    border-style: dashed;

  4. dotted: 점으로 이루어진 테두리를 나타낸다.

    border-style: dotted;

  5. double: 이중 테두리를 나타낸다. 두 개의 실선이 겹쳐 보인다.

    border-style: double;

  6. groove: 3D 효과를 주는 홈 모양의 테두리를 나타낸다. 조명 각도에 따라 다르게 보일 수 있다.

    border-style: groove;

  7. ridge: 3D 효과를 주는 능선 모양의 테두리를 나타낸다. groove와 반대되는 효과를 낸다.

    border-style: ridge;

  8. inset: 테두리가 내부로 눌려져 있는 듯한 효과를 주는 스타일이다.

    border-style: inset;

  9. outset: 테두리가 외부로 부풀어 있는 듯한 효과를 주는 스타일이다.

    border-style: outset;

[7] CSS Dropdown Menu

: 아래의 예시 코드는 기본적인 CSS 드롭다운 메뉴를 구현한 HTML 문서이다. 드롭다운 메뉴는 사용자가 특정 메뉴 항목에 마우스를 올리면 하위 메뉴 항목이 나타나는 형태로, 웹사이트의 내비게이션을 효과적으로 구성하는 데 유용하다.

1) 예시 코드

<!DOCTYPE html>
<head>
    <title>
        Drop-Down Menu
    </title>
    <style type="text/css">
        body {
            font-family: arial, sans-serif;
        }
        div.menu {
            font-weight: bold;
            color: white;
            border: 2px solid #225599;
            text-align: center;
            width: 10em;
            background-color: #225599;
        }
        div.menu:hover a {
            display: block;
        }
        div.menu a {
            display: none;
            border-top: 2px solid #225599;
            background-color: white;
            width: 10em;
            text-decoration: none;
            color: black;
        }
        div.menu a:hover {
            background-color: #dfeeff;
        }
    </style>
</head>
<body>
    <div class="menu">Menu
        <a href="#">Home</a>
        <a href="#">News</a>
        <a href="#">Articles</a>
        <a href="#">Blog</a>
        <a href="#">Contact</a>
    </div>
</body>
</html>

2) 코드 구성 요소

  • HTML 구조

    • <div class="menu">: 드롭다운 메뉴를 포함하는 div 요소이다. 메뉴 제목으로 "Menu"라는 텍스트가 표시된다.
    • <a> 태그: 메뉴 항목을 나타내며, 각각의 링크가 하위 메뉴로 포함되어 있다. 링크에는 "Home", "News", "Articles", "Blog", "Contact"라는 항목이 있다.

  • CSS 스타일링

    • body { font-family: arial, sans-serif; }: 본문 텍스트의 글꼴을 Arial 또는 기본 산세리프체로 설정한다.
    • div.menu: 메뉴의 기본 스타일을 설정한다. 배경색, 글자색, 경계선, 정렬, 너비 등이 정의되어 있다.
    • div.menu:hover a { display: block; }: 메뉴에 마우스를 올릴 경우 하위 링크가 보이도록 설정한다.
    • div.menu a: 기본적으로 하위 링크는 표시되지 않도록 display: none;으로 설정하고, 링크에 대한 스타일을 정의한다. 배경색, 경계선, 너비, 글자색이 포함되어 있다.
    • div.menu a:hover { background-color: #dfeeff; }: 하위 메뉴 항목에 마우스를 올리면 배경색이 변경되어 시각적 효과를 준다.

3) 기능 설명

  • 메뉴에 마우스를 올리면 하위 메뉴 항목이 나타나고, 사용자가 특정 항목에 마우스를 올릴 경우 해당 항목의 배경색이 변경된다.
  • 이 드롭다운 메뉴는 단순하지만 효과적으로 사용자에게 선택할 수 있는 옵션을 제공하며, 웹사이트의 탐색성을 높인다.

profile
김광일
안녕하세요, 사용자들의 문제 해결을 중심으로 하는 프론트엔드 개발자입니다. 티스토리로 전환했어요 : https://pangil-log.tistory.com
이전 포스트

[웹 서비스 개발] HTML - (3)

다음 포스트

[웹 서비스 개발] HTML_CSS_class_id_24_posted

0개의 댓글