본문 바로가기
MSA-Training/Frontend

DAY. 02

by domsam 2025. 12. 2.
반응형

<hr> 태그, 가로줄을 표시하는 태그, 실무에서 잘 사용하지 않는다. 가로줄이 필요할 때는 CSS와 <div> 태그를 활용하여 만들어 사용하는 편.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>strongtag1.html</title>
</head>
<body>    
    <h1>강조하기 위한 태그들</h1>
    <h2>b 태그 vs. strong 태그</h2>
    <p>
        <b>이 b요소</b>와 <strong>이 strong요소</strong>는 
        같아 보이지만 다른 태그입니다.
    </p>
    <p>
        <i>이 i요소</i>와 <em>이 em요소</em>는 같아 보이지만
        다른 태그입니다.
    </p>
</body>
</html>

 

 

위 코드의 결과물

 

<b>, <strong>은 텍스트에 볼드 효과를 주는 태그이며 <b>태그는 일반 태그 <strong>태그는 시맨틱 태그(Semantic Tag)이다.

<i>, <em>은 텍스트에 이탤릭 효과를 주는 태그이며 <i>태그는 일반 태그 <em>태그는 시맨틱 태그이다. 

 

일반적으로 같은 기능을 하는 태그가 2개 있다면 하나는 일반 태그, 하나는 시맨틱 태그일 가능성이 높으며 이름이 긴 태그가 시맨틱 태그일 확률이 높습니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>supsubtag.html</title>
</head>
<body>
    <h1>첨자 태그</h1>
    <h2>위 첨자 태그</h2>
    <p>
        1<sup>st</sup>, 2<sup>nd</sup>
    </p>

    <h2>아래 첨자 태그</h2>
    <p>
        Yalco<sub>1</sub>, H<sub>2</sub>O
    </p>
</body>
</html>

 

첨자 태그

위 첨자 태그

1st, 2nd

아래 첨자 태그

Yalco1, H2O

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ustag.html</title>
</head>
<body>
    <p>
        <u>u 태그</u>입니다.
    </p>
    <p>
        <s>s 태그</s>입니다.
    </p>
</body>
</html>

 

u 태그입니다.

s 태그입니다.

 

<u>, <s> 태그는 실무에서 잘 사용하지 않습니다. 밑줄, 취소선을 구현하고 싶다면 CSS로 해결하는 편이다.

 

 

태그는 속성(Attribute)를 가질 수 있으며 속성에 값을 대입할 수 있다.

 

<img src="이미지주소" alt="이미지 설명" title="제목">

 

img 태그에 src, alt, title 속성이 있고 각 속성에 값을 대입하는 방법은 속성명="속성값" 으로 처리한다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>qtag.html</title>
</head>
<body>
    &lt;q&gt;, 
    <p>
        <mark>마크 줄 긋기</mark>입니다.
    </p>
</body>
</html>

 

<q>,마크 줄 긋기

입니다.

 

뷰포트에 <, > 를 표시하고 싶다면 &lt;, &gt; 로 표시하는 것이 좋다. mark 태그는 간단하게 형광펜 표시를 할 수 있으며 검색시 검색 키워드를 표시할 때 사용할 수 있다. 물론 mark 태그가 아닌 CSS로 해결하는 것도 가능하다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>abbrtag.html</title>
    <style>
        abbr { text-decoration: none; }
    </style>
</head>
<body>
    <abbr title="Hypertext Markup Language">HTML</abbr>을 표기한 문단
    <abbr title="Single Page Application">SPA</abbr>로 개발 예정
</body>
</html>

 

HTML을 표기한 문단 SPA로 개발 예정

 

약어의 전체 의미를 제공할 수 있는 시맨틱 태그이다. 검색엔진이 약어 내용을 잘 정리할 수 있게 도와주며 시각 장애인이 웹 서핑을 할 때 약어의 의미를 쉽게 이해할 수 있도록 돕는다. 

 

 

 

ul 태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ultag.html</title>
</head>
<body>
    <!-- ul: unordered lists -->
    <h1>수련회 준비물</h1>
    <ul>
        <li>이틀 치 옷</li>
        <li>세면 도구</li>
        <li>학습 도구
            <ul>
                <li>노트북</li>
                <li>필기구</li>
                <li>교재</li>
            </ul>
        </li>
    </ul>
</body>
</html>

 

수련회 준비물

  • 이틀 치 옷
  • 세면 도구
  • 학습 도구
    • 노트북
    • 필기구
    • 교재

 

 

ol 태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>oltag.html</title>
</head>
<body>
    <!-- ul: unordered lists -->
    <h1>수련회 준비물</h1>
    <ol type="A" start="2">
        <li>이틀 치 옷</li>
        <li>세면 도구</li>
        <li>학습 도구
            <ol type="I">
                <li>노트북</li>
                <li>필기구</li>
                <li>교재</li>
            </ol>
        </li>
    </ol>
</body>
</html>

 

수련회 준비물

  1. 이틀 치 옷
  2. 세면 도구
  3. 학습 도구
    1. 노트북
    2. 필기구
    3. 교재

 

ol 태그는 예전부터 사용성이 낮은 태그였고 ul 태그 또한 최근에는 사용성이 낮아졌습니다. 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://showcases.yalco.kr/html-css/01-04/05.css">
    <title>dltag.html</title>
</head>
<body>
    <dl>
        <dt>프로그래밍</dt>
            <dd>컴퓨터 프로그램을 작성하는 일</dd>
        <dt>넓이</dt>
        <dt>광</dt>
        <dt>면접</dt>
            <dd>일정한 평면에 걸쳐 있는 공간이나 범위의 크기</dd>
    </dl>
</body>
</html>

 

프로그래밍
컴퓨터 프로그램을 작성하는 일
넓이
광
면접
일정한 평면에 걸쳐 있는 공간이나 범위의 크기

 

 

용어와 정의를 나열하는 태그입니다. 사용성은 낮은 편이며 위 예제에서는 link 태그를 통해 외부 css 파일을 import하는 방법을 보여줍니다. 

 

 

이미지 태그는 로컬 컴퓨터 혹은 온라인 상에 위치한 이미지를 표시할 떄 사용하는 태그입니다. 

<img src="이미지주소" alt="이미지 설명" title="제목">

title 속성은 굳이 사용할 필요 없지만 src, alt는 항상 입력할 수 있도록 습관을 들이도록 합시다.

alt 속성은 이미지를 표시할 수 없을 때 이미지 대신 텍스트로 표시를 해주며 시각 장애인용 스크린 리더는 alt 내용을 읽어줍니다.

 

온라인 이미지

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>imagetag1.html</title>
</head>
<body>
    <img src="https://pds.joongang.co.kr/news/component/htmlphoto_mmdata/202201/18/bdeedbfc-bb78-4488-a1ee-d21fa5f95c4f.jpg"     
    alt="김연경 선수">
</body>
</html>

 

김연경 선수

 

온라인 상에 존재하는 이미지는 src 속성에 이미지 주소값을 대입하면 이미지가 표시된다.

 

 

로컬 이미지

ch02/images, ch03/images  폴더를 만들고 각 폴더에 이미지 파일을 위치합니다.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>imagetag2.html</title>
</head>
<body>
    <img src="images/a1.jpg" alt="김연경 환호">
    <img src="./images/a1.jpg" alt="김연경 환호">
    <img src="../ch02/images/a2.jpg" alt="김연경 포스터">
</body>
</html>

 

 

위 코드의 결과물2

 

src속성에 적은 이미지 경로는 상대 경로이다. 상대 경로는 imagetag2.html 파일의 위치에서 이미지 위치의 상대적인 경로를 나타낸다. a1.jpg 파일의 절대 경로는 강사 컴퓨터 기준에서는 "D:\test\fe\html\ch03\images\a1.jpg"가 된다. 

 

./ 는 파일이 있는 폴더를 의미하며 ../ 는 상위 폴더로 이동을 의미한다. 위 예제에서 ../ 는 html 폴더를 의미한다.

 

 

 

 

 

 

 

 

 

 

 

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'MSA-Training > Frontend' 카테고리의 다른 글

DAY. 06  (0) 2025.12.08
DAY. 05  (0) 2025.12.05
DAY. 04  (0) 2025.12.04
DAY. 03  (0) 2025.12.03
DAY. 01  (0) 2025.12.01

관련글

티스토리툴바