[2025 구름 딥다이브]- 클라우드 엔지니어링 7회차 #3 HTML

도람·2025년 10월 31일

html 구름

구름-클라우드 네이티브 엔지니어링 7회차

목록 보기

3/19

HTML

table - colspan, rowspan

행과 열을 병합하여 보여줄 수 있다.
rowspan
colspan

<body>
    <h2>rowspan, colspan 예제</h2>
    <table border="1">
        <tr>
            <th rowspan="2">이름</th>
            <th colspan="2">점수</th>
        </tr>
        <tr>
            <th>국어</th>
            <th>영어</th>
        </tr>
        <tr>
            <td>홍길동</td>
            <td>90</td>
            <td>85</td>
        </tr>
        <tr>
            <td>김철수</td>
            <td>80</td>
            <td>88</td>
        </tr>
    </table>
</body>

위의 결과는 다음과 같이 나온다.
열을 결합하고 싶으면 colspan을 사용하고,
행(가로 방향이 아닌 세로 방향)을 결합하고 싶으면 rowspan을 사용하여 나타낼 수 있다.
즉, 점수 부분처럼 가로로 셀을 합칠 때는 colspan을, 세로로 셀을 합칠 때는 rowspan을 사용한다.

table - 이미지를 이용한 갤러리 만들기

table 안에 이미지를 넣어 갤러리처럼 만들 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <caption>랙돌 리스트 </caption>
        <td><img border="0" src="고양이.jpeg" alt ="고양이 이미지" width="200" height="400"></td>
        <td><img border="0" src="랙돌2.png" alt ="고양이 이미지" width="200" height="400"></td>
        <td><img border="0" src="아기랙돌.png" alt ="아기 고양이 이미지" width="200" height="400"></td>
    </table> 
</body>
</html>

위 코드를 실행하면 다음과 같이 나온다.

웹브라우저와 멀티미디어

과거에는 웹페이지에서 음악이나 동영상을 재생하려면 플래시(Flash) 나 ActiveX 같은 외부 프로그램을 설치해야 했다.
그래서 <.embed>나 <.object> 태그를 사용해 외부 실행 파일을 웹페이지 안에 삽입하는 방식이 일반적이었다.
현재는 HTML5가 등장하면서 이런 불편함 없이도
브라우저 자체에서 음악과 영상을 재생할 수 있도록
<.audio> 태그와 <.video> 태그가 새로 추가되었다.

비디오 태그

웹페이지에 동영상을 삽입할 때는 <.video> 태그를 사용한다.
이 태그 안에는 재생할 영상의 경로와 다양한 속성을 설정할 수 있다.

src : 비디오 파일의 경로를 지정.
autoplay : 페이지가 열리면 자동으로 재생된다. (단, 브라우저 정책에 따라 음소거가 필요할 수 있습니다.)
controls : 재생, 일시정지, 음량 조절 등의 제어기를 표시할지 여부를 설정한다.
(이 부분을 작성하지 않으면 사용자는 영상에 대한 아무런 제어를 못한다.)
loop : 영상이 끝난 후 자동으로 다시 재생된다.
muted : 영상을 음소거 상태로 재생한다.

예시)

<video src="sample.mp4" width="400" controls autoplay muted>
    브라우저가 video 태그를 지원하지 않습니다.
</video>

비디오 파일 형식

HTML5에서는 여러 형식의 동영상 파일을 지원하지만,
브라우저마다 지원하는 포맷이 다르기 때문에 보통 여러 개의 형식을 함께 제공한다.

<body>
    <h2>비디오 파일 형식 예제</h2>
    <video width="400" controls>
        <source src="sample.mp4" type="video/mp4">
        <source src="sample.ogg" type="video/ogg">
        <source src="sample.webm" type="video/webm">
        브라우저가 video 태그를 지원하지 않습니다.
    </video>
</body>

이런식으로 type 부분에 파일 형식을 지정한다.

type을 꼭 지정해야 할까?

만약 src, video이름이 똑같은 파일이 3개가 있다고 가정한다.
type속성을 지정하지 않으면 그럼 브라우저는 직접 파일을 다운로드해서 포맷을 검사해야 한다.
즉, “이게 mp4인지 webm인지”를 파일 내용을 보고 판단해야 하니까
불필요한 시도(=시간 낭비)가 생기고, 때로는 재생 실패할 수도 있다.

->브라우저가 직접 판단해야 해서 비효율적이고 오류 가능성이 있다.
-> 이것을 해결하기 위해 type을 선언해준다.

<source src="sample.mp4" type="video/mp4">
<source src="sample.ogg" type="video/ogg">
<source src="sample.webm" type="video/webm">

이런식으로 타입을 지정해주면
-> 브라우저는 혼란 없이 올바른 파일을 정확하고 빠르게 재생할 수 있게 되는 것이다.

Audio

오디오(audio) 태그는 비디오(video) 태그와 사용 방식이 거의 동일하다.
controls, autoplay 등 속성도 비디오와 비슷하게 사용되며,
단지 태그 이름이 <.audio><./audio>로 다를 뿐이다.

오디오 역시 비디오와 마찬가지로 type 속성을 지정하지 않으면
브라우저가 파일 형식을 정확히 인식하지 못해 재생 오류가 발생할 수 있으므로
type을 명시해주는 것이 좋다.

다만, 모든 브라우저가 동일하게 지원하는 오디오 형식은 아직 없기 때문에
호환성을 높이기 위해 <.source> 태그를 함께 사용하는 것이 일반적이다.

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type="audio/ogg">
    <source src="music.wav" type="audio/wav">
    브라우저가 audio 태그를 지원하지 않습니다.
</audio>

브라우저가 source 를 위에서부터 하나씩 확인한다.
-> audio/mpeg 실행 -> "mp3" 실행 가능 확인 -> 가능하면 사용
-> 안되면 다음 source(audio/ogg) 로 넘어감
-> 마지막까지 안 되면 “브라우저가 audio 태그를 지원하지 않습니다.” 문구 표시

홈페이지 레이아웃

header : 웹페이지의 상단 영역으로, 사이트 로고나 제목, 상단 메뉴 등이 위치하는 부분이다.
nav : 사이트의 주요 메뉴를 제공하는 네비게이션 영역이다.
aside (left) : 왼쪽에 위치하는 보조 영역으로, 카테고리나 광고, 링크 등을 표시하는 부분이다.
section : 본문 콘텐츠를 담는 중심 영역으로, 하나 이상의 article을 포함할 수 있다.
article : 독립적인 콘텐츠 단위로, 뉴스 글이나 게시물 등 하나의 완결된 내용을 의미한다.
aside (right) : 오른쪽 보조 영역으로, 관련 글이나 배너 등을 표시하는 부분이다.
footer : 페이지 하단 영역으로, 저작권 정보나 연락처 등을 포함하는 부분이다.

┌────────────────────────────────────────┐
│                  header                │
├────────────────────────────────────────┤
│                   nav                  │
├───────────┬───────────────────┬────────┤
│ aside(L)  │     section       │aside(R)│
│           │ ┌───────────────┐ │        │
│           │ │   article 1   │ │        │
│           │ ├───────────────┤ │        │
│           │ │   article 2   │ │        │
│           │ └───────────────┘ │        │
├───────────┴───────────────────┴────────┤
│              footer                    │
└────────────────────────────────────────┘

iframe

iframe은 현재 페이지 안에 외부 페이지나 문서, 유튜브 영상, 지도 등을 불러올 때 사용한다.
말 그대로 "웹 안의 또 다른 웹"을 표시하는 기능이다.

<iframe src="https://www.example.com" width="600" height="400"></iframe>

src : 불러올 웹페이지의 주소(URL)

ex) 유튜브 영상 삽입 코드

<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
    title="YouTube video player"
    frameborder="0"
    allowfullscreen>
</iframe>

이것을 실행하면 유튜브 영상을
이런식으로 삽입할 수 있다.

시맨틱 웹

시맨틱 웹(Semantic Web) 이란, 웹 3.0이라고도 불리며
W3C(World Wide Web Consortium) 에서 제안한 차세대 웹 표준 개념이다.
시맨틱 웹의 목표는 단순히 문서를 사람만 이해하는 웹이 아니라,
컴퓨터(기계)도 웹의 정보를 ‘의미(semantic)’ 단위로 이해하고 처리할 수 있도록 만드는 것이다.

즉, 지금의 웹이 단순히 “글자와 링크의 모음”이라면
시맨틱 웹은 “데이터 간의 관계와 의미까지 인식할 수 있는 지능형 에이전트”를 만드는 것을 목표로 한다.