HTML의 기본 익히기

byeol·2022년 9월 13일

CHAPTER 01 HTML 문서구조 이해하기

Section 01 웹의 개요

1. 웹이란?

WWW(World Wide Web)이라고 불리우는 웹

인터넷, 컴퓨터, 웹브라우저 ----이미지,동영상,음성---->사용자
인터넷, 컴퓨터, 웹브라우저 <----상호간 소통---->사용자

여기서 웹 브라우저는
서버에서 제공되는 데이터를 분석하여 화면에 보여주는 역할
종류) 익스플로러, 크롬, 사파리, 파이어폭스 등

웹 관련 직업
웹 디자이너 : 웹 브라우저에 들어가는 웹 페이지와 그 안의 콘텐츠, 즉 텍스트, 이미지, 동영상 들을 디자인하는 것
웹 프로그래머 : 웹 브라우저에서 사용자의 마우스, 키보드 조작에 반응하는 기능, 프로그램에 필요한 데이터 저장, 수정, 삭제 등의 기능을 구현

2 웹의 서버와 클라이언트 환경

데이터 센터나 자체 전산센터 내에 존재하는 웹서버는 자신만의 고유 IP 갖으며 인터넷 망에 연결
웹 서버에는 웹서비스 제공에 필요한 HTML, CSS 파일과 이미지, 동영상, 사운드 등의 데이터가 저장되어 있음.
클라이언트 측 사용자가 웹 브랑주에 주소창에 웹페이지 주소인 URL를 입력
-> 이 요청이 인터넷망을 통해 서버에 전달
-> 서버는 요청받은 데이터를 컴퓨터에 전송
-> 클라이언트는 서버가 전송한 데이터를 해석하여 웹브라우저 화면에 출력

데이터센터

✔️ 거대 네트워크가 구축된 대형 빌딩에 거준하는 데이터센터
자신이 보유한 서버와 네트워크를 기업이나 기관에 임대
ex) 삼성SDS, LG CNS, KT, SK, LG유플러스

✔️ 데이터센터에서 제공하는 대용량의 네트워크나 서버를 임대하여 개인이나 기업에 재임대하는 웹서비스를 제공
ex) 고도, 카페24 등

웹 서버

✔️ 인터넷과 같은 네트워크를 통해 클라이언트가 요청하는 서비스를 제공하는 컴퓨터
✔️ 원격에서 인터넷을 통해 웹 서비스를 제공하는 서버 컴퓨터의 소프트웨어
✔️ 하드웨어 자체인 서버컴퓨터

클라이언트

✔️ 원격의 웹 서버에 서비스를 요청하는 컴퓨터 또는 컴퓨터 사용자

웹 사이트와 웹 페이지

웹사이트⊃웹 페이지

웹 호스팅

✔️ 인터넷 접문 업체에서 자신이 보유한 웹서버와 네트워크를 이용하여 개인 또는 기관이 홈페이지를 구축할 수 있도록 서버상의 사용자 계정과 디스크 공간을 임대하는 서비스

IP주소와 DNS

IP주소 : 컴퓨터들끼리 구별되도록 적어도 하나 이상 갖는 고유한 주소
ex) 210.112.132.344와 같이 숫자로 된
-> 기억하기 어렵다
-> 이를 대신하여 도메인 이름 사용

도메인 이름(Domain Name) 알파벳과 숫자로 이루어짐
ex) naver.com, cafe24.com
-> DNS(Domain Name System) 라는 도메인 네임 서버에 등록됨
-> '도메인 이름 - IP주소' 쌍으로 존재

3 웹브라우저

종류 : 크롬, 파이어폭스, 인터넷 익스플로러, 사파리, 오페라 등..

Section 02 실습 환경 구축하기

나는 pycharm으로 실습환경을 구성했다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<h2>HTML 연습</h2>
<p>
    여기세 쓰고 싶은 메세지를 연습 삼아 적어보세요.
</p>
</body>
</html>

Section 03 HTML 태그와 문서구조

HTML HyperText Markup Language의 약어, 웹페이지를 만들 때 사용하는 가장 기본적인 웹 프로그래밍 언어
사용하는 명령어는 태그라고 하며 홑화살괄호인<>를 이용하여 나타낸다
대부분 한쌍으로 이루어져 있다.
ex) <head></head> <body></body> 등

<!DOCTYPE html>
<html>
<head>
    <title>Welcome To My Home</title>
</head>
<body>
   Hello! My name is HTML.
</body>
</html>

👆 소스 코드를 살펴보자
✔️<DOCTYPE! html> : 브라우저에 HTML의 문서버전이 HTML5 문서임으로 알려줌
✔️<html>와 </html> : HTML 문서의 시작과 끝
✔️<head>와 </head> : 브라우저 실행화면에는 보이지 않지만 HTML문서에는 필요한 사항     이나 특수한 기능을 설정할 때
    <title>와 </title> : HTML 문서의 제목,
    <meta> : 문자세트 설정,
    <link> : 외부파일 연결,
    <style> : CSS 정의,
    <scrpit> : 자바스크립트 정의
✔️ <body>와 </body> : 브라우저 실행 화면에 보이는 내용

Section 04 <meta> 태그로 문자 세트 설정하기

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
  안녕하세요~~
</body>
</html>

👆 소스 코드 살펴보기
✔️ UTF-8 문자세트 설정 : <meta charset="utf-8">

Section 05 HTML 태그의 속성

HTML 태그는 그 자신의 속성을 가지고 있다. 즉
<태그 그 안에 여러개의 속성>이 존재

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML 태그의 속성</title>
</head>
<body>
<a href="http://www.naver.com" target="_blank">네이버 사이트로 이동</a>
</body>
</html>

👆 소스 코드 살펴보기
✔️ <a> 태그
     텍스트나 이미지 오브젝트를 클릭하며 미리 설정한 웹 페이지로 이동하는 역할
✔️ <a> 태그의 속성 href
     href로 설정한 사이트로 이동/ 이동할 주소를 설정
✔️ <a> 태그의 속성 target
     _blank는 새 창에서 사이트를 보여줌 / 새 창을 여는 속성

CHAPTER 02 텍스트

Section 01 텍스트 태그

1. 제목 나타내기 - <h1>~<h6>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>제목연습(h1~h6)</title>
</head>
<body>
<h1>글자제목(h1)</h1>
<h2>글자제목(h2)</h2>
<h3>글자제목(h3)</h3>
<h4>글자제목(h4)</h4>
<h5>글자제목(h5)</h5>
<h6>글자제목(h6)</h6>

</body>
</html>

👆 h1이 가장 크고 점점 작아짐

2 줄바꿈과 공백 나타내기 - <br>, `&nbsp`

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>줄바꿈 태크와 공백 문자가 없는 경우</title>
</head>
<body>
안녕하세요.


반갑습니다.
열심히     HTML을     공부해보아요!!!
</body>


</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>줄바꿈과 공백 문자</title>
</head>
<body>
안녕하세요<br>
반갑습니다.<br>
열심히&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HTML을 공부해보아요!!
<
>
&lt;
&gt;
&copy;
</body>
</html>

👆 소스 코드 살펴보기 : 줄바꿈은 <br> , 공백은 &nbsp

3. 단락 구분하기 - <p>와</p>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>단락 연습</title>
</head>
<body>
<h3>튤립</h3>
<p><b>튤립</b>은 여러 종류의 품종으로 나누어져 있어 각기 아름다운 꽃을 감상할 수 있다.</p>
<p><i>햇볕이 잘 들고 배수가 잘되는 토양</i>에 심는 것이 적합하여 회분은 구군의 2~3배 정도 크기가 적당하다.</p>
</body>
</html>

👆 소스코드 살펴보기

단락구분 <p>단락시작 </p> 단락 끝
볼드체 <b> 볼드 시작 </b> 볼드 끝
이탤릭체 <i> 이탤릭체 시작 </i> 이탤릭체 끝

Section 02 목록 태그

순서 없는 목록 : <ul>, <li>
순서 있는 목록 : <ol>, <li>
정의 목록 : <dl>, <dt>, <dd>

1. 순서 없는 목록 나타내기 - `<ul>, <li>`

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>순서 없는 목록</title>
</head>
<body>
<h2>수영장 준비물</h2>
<ul>
    <li>수영복</li>
    <li>썬크림</li>
    <li>물안경</li>
    <li>튜브</li>
    <li> 샌들</li>
</ul>

</body>


</html>

2. 순서 있는 목록 나타내기 - `<ol>, <li>`

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>순서 있는 목록</title>
</head>
<body>
<h3>예약방법</h3>
<ol>
  <li> 관공서에 전화를 건다.</li>
  <li> 예약 가능한 시간대가 있는지 물어본다</li>
  <li> 있다면 전화번호와 이름을 남긴다.</li>
  <li> 예약 당일 날 변호사님의 전화를 기다린다.</li>
</ol>
</body>
</html>

3. 정의 목록 나타내기 - `<dl>, <dt>, <dd>`

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>정의 목록</title>
</head>
<body>
<h3>계절별 야샹화</h3>
<dl>
  <dt>봄꽃</dt>
  <dd>봄에 꽃이 피는 다년생 식물은 꽃잔디, 금낭화, 할미꽃, 어성초, 복수초, 산마늘, 붓꽃, 등굴레
  ,삼지구엽초 등이 있다.</dd>

  <dt>여름꽃</dt>
  <dd>여름에 꽃이 피는 식물은 옥잠화, 비비추, 맥문동, 애란, 수국, 인동초, 매발톱, 노루오줌, 금계국,
  달맞이꽃, 금불초, 엉겅퀴, 샤스타데이지 등이 있다.</dd>

  <dt>가을꽃</dt>
  <dd>가을에 꽃이 피는 식물은 구절초, 쑥부쟁이, 감국, 억새, 갈대, 배초향, 톱물, 수크령, 고려 엉겅퀴 등이 있다.</dd>

  <dt>여러 계절</dt>
  <dd>추운 계절을 제외한 계절에  걸쳐 오랫동안 꽃을 볼 수 있는 식물은 분홍바늘꽃, 사계 패랭이꽃, 부용, 사철 채송화 등이 있다.</dd>
</dl>
</body>
</html>

Section 03 링크 태그

링크 : 웹페이지에서 글자나 이미지로 이루어진 메뉴, 배너 등을 클릭하면 지정된 페이지로 이동하게 되는데 그것을 링크라고 한다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>링크연습</title>
</head>
<body>
<a href="page1.html">꽃잔디</a><br><br>
<a href="page2.html">벨리곰</a><br><br>
<a href="page3.html">이태린</a><br><br>
<a href="http://naver.com" target="_blank"><b>네이버 사이트로 이동</b></a><br><br>
<a href="http://google.com" target="_blank"><b>구글 사이트로 이동</b></a>
</body>
</html>

👆 소스코드 살펴보기 : target 속성이 _blank면 새창에서 열린다. 앞에서 배움.

이제 이동하는 페이지를 만들어보자
나는 꽃잔디, 벨리곰, 조카인 이태린 페이지를 넣었다.

href의 경로는 상대경로이며 같은 파일 내에 위치하고 있어서 page1.html표현이 가능하나 만약 다른 파일에 있다면 모든 경로를 다 적어야 한다.

이동하는 페이지의 HTML 문서는 아래와 같다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>꽃잔디 링크(page1)</title>
</head>
<body>
<h3>꽃잔디</h3>
  <img src="ground_pink.jpg" width="300"><br>
  <p>꽃잔디는 아메리카 동부가 원산지로 원래는 건조한 모래땅에서 자라는 여러해살이 풀이며 높이는 10cm
  까지 자란다. 잎은 마주나기이며, 가장자리가 밋밋하고 털이 있다. 붉은색, 자홍색, 분홍색, 흰색 등 다양한 색깔의 꽃이 핀다.</p>
  <a href ="index.html"><u><b>홈으로</b></u></a>
</body>
</html>

Section 04 HTML 주석문

주석문은 시작되는 곳에서는 를 넣는다

CHAPTER 03 이미지와 멀티미디어

Section 01 이미지 태그

1. 이미지 삽입하기 - `<img>` 및 `<img>` 태그의 속성

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>야생화</title>
</head>
<body>
<h3>금계국</h3>
 <img src ="flower.jpg" title="금계국(원본)"><br>
 <img src ="flower.jpg" width="300" height="212" title="금계국(300X212)"><br>
 <img src ="flower.jpg" width="150" title="금계국(가로:150 세로: 자동계산)"> <br>
 <p>금계국은 북아메리카 원산이며 관상용으로 화단에서 재배한다. <br>
     6월~8월에 지름 2.5cm~5cm 노란꽃이 줄기와 가지 끝에<br>
     한 송이씩 핀다. 물빠짐이 좋은 모래흙이나 마사토에서 잘 자란다.</p>
</body>
</html>

👆 소스코드 살펴보기

<img>태그 : 이미지 삽입 > src속성 : 경로
title 속성 : 마우스 포인터를 갖다 대면 이미지 이름이 나옴

width, height 속성 : 사진의 크기를 조정 , 만약 둘 중 하나만 지정한다면 그 비율에 맞게 자동적으로 크기가 조정됨

여기서 우리는 jpg를 이용하였는데 이 외에도 웹에서 사용할 수 있는 이미지 파일 포맷이 있다. 아래 표를 통해서 비교를 해보자.

이미지 파일	파일 확장자	특징
PNG	.png	- 원본 손실이 없는 무손실 압축으로 트루 컬러(24bit) 지원 - 투명 이미지 지원 - JPG와 비교하여 사진 이미지 효율이 좋지 않음 - 일반적인 웹에서 가장 많이 사용
JPG	.jpg	- 손실 압축으로 사진 이미지 압축 효율이 좋음 - 주로 사진 이미지를 저장하는데 사용
GIF	.gif	- 무손실 압축으로 256가지의 제한된 색상 사용 - 애니메이션을 지원하기 때문에 애니메이션 용으로 많이 사용

위 3가지는 모두 파일 용량을 줄이기 위해 원본 이미지를 압축한 파일 포맷이다.
표에 손실 압축과 무손실 압축이 있는데 손실 압축이 무손실 압축보다 압축 효율이 좋아 파일 용량을 많이 줄일 수 있다.

Section 02 URL과 경로

URL : 웹페이지에 사용하는 파일(.html,.css,.jpg,.git,.mp3,.mp4 등)의 위치를 나타내는데 사용하며 URL을 지정하는 데에는 절대 경로와 상대 경로를 이용한다.

1. 절대 경로로 나타내기

  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>이미지 삽입 (절대 경로) </title>
</head>
<body>
  <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" title="google">
</body>
</html>

2. 상대 경로로 나타내기

HTML 문서 파일이 존재하는 폴더를 기준으로 경로를 지정
절대경로보다 서버의 폴더 구조나 도메인 변경에 유연하게 대처하며 더 많이 사용됨.
HTML 파일과 같은 폴더 안에 존재한다면
<img src ="ground_pink.jpg">
HTML 파일이 들어 있는 현재 폴더의 하위 폴더(img)로 들어갔다면
①<img src ="./img/ground_pink.jpg">
②<img src ="img/ground_pink.jpg">
어떤 상위 폴더의 하위 폴더 2개에 각각 HTML과 이미지가 들어 있다면
<img src ="../img/ground_pink.jpg">

Section 03 외부, 오디오, 비디오 파일 재생

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>플래시 동영상</title>
</head>
<body>
<embed src="whitebird.swf" width="171" height="141">
<audio src="P1_CH1_HP.mp3" autoplay controls loop></audio>
<audio autoplay controls>
    <source src="P1_CH1_HP.mp3" type="audio/mpeg">
    <source src="P1_CH1_HP.ogg" type="audio/ogg">
</audio>
<vidoe src ="movie.mp4" controls autoplay></vidoe>
<video width="320" height="240" controls autoplay>
    <source src ="movie.mp4" type="video/mp4">
    <source src ="movie.webm" type="video/webm">
    <source src="movie.ogg" type="video/ogg">
</video>
</body>
</html>

<embed> 태그 : 플래시 영상과 같은 외부 파일을 재생하기 위한 방법
오디오 파일 재생하기 <audio>
MP3, WAV, Ogg 오디오 파일 포맷 사용가능
- autoplay 속성 : 웹 페이지 로딩될 때 자동 재생
- controls 속성 : 플레이어 UI 화면에 출력
- loop 속성 : 음악 무한 반복
- 브라우저 마다 지원하는 오디오가 다르므로 <audio>태그를 사용할 때는 다양한 브라우저에서 오디오가 작동하도록 <source>태그를 사용하여 변경할 수 있다.
```
<audio autoplay controls>
 <source src="P1_CH1_HP.mp3" type="audio/mpeg">
 <source src="P1_CH1_HP.ogg" type="audio/ogg">
</audio>
```
비디오 파일 재생하기 <video>
오디오 태크 속성과 유사

CHAPTER 04 테이블과 폼 양식

Section 01 테이블 태그

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>기본 테이블 만들기</title>
    <style>
        table,th,td,tr{
         border: solid 1px red;
         border-collapse: collapse;
         padding: 8px;
        }
    </style>
</head>
<body>
<h3>오늘의 날씨</h3>
<table>
    <tr>
        <th>지역</th>
        <th>현재기온</th>
        <th colspan="2">불쾌지수/습도(%)</th>
        <th>풍속(m/s)</th>
    </tr>
    <tr>
        <td rowspan="2">서울/경기도</td>
        <td>23</td>
        <td>60</td>
        <td>80</td>
        <td>4.7</td>
    </tr>
     <tr>
        <td>25</td>
        <td>66</td>
        <td>81</td>
        <td>4.3</td>
    </tr>
     <tr>
        <td>인천</td>
        <td>20</td>
        <td>56</td>
        <td>77</td>
        <td>3</td>
    </tr>
</table>
</body>
</html>

👆 소스코드 살펴보기

<table>태그 : table의 시작과 끝에 <table></table>
<tr> : table의 한 행을 만들 때
<th> : table의 헤드라인, 열제목 , 기본값: 가운데 정렬, 볼드체
<td> : 태그 내 내용 작성
셀 병합하기
- 열병합 |||->| | :<td colspan="열병합 개수"> 내용</td>
- 행병합 ⊟->▯ : ``` 내용

Section 02 폼양식

웹 페이지에서 로그인, 회원가입, 게시판 글쓰기, 검색 등을 위한 형태의 폼 양식을 흔히 사용한다. 자세히 알아보자

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
<h3>회원 가입 양식</h3>
<form>
 <table>
     <tr>
         <td> -아이디 </td>
         <td> <input type="text"> </td>
     </tr>
     <tr>
         <td> -비밀번호</td>
         <td> <input type="password"></td>
     </tr>
     <tr>
         <td> -비밀번호 확인</td>
         <td> <input type="password"></td>
     </tr>
     <tr>
         <td> -이름</td>
         <td><input type="text"></td>
     </tr>
     <tr>
         <td> -생년월일</td>
         <td><input type="datetime-local"></td>
     </tr>
     <tr>
         <td> -성별</td>
         <td><input type="radio" name="info"> 여성 <input type="radio" name="info">남성</td>
     </tr>
       <tr>
         <td> -취미</td>
         <td><input type="checkbox" name = hobby1> 등산 </input> <input type="checkbox" name = hobby2> 낚시 </input>
             <input type="checkbox" name = hobby3> 공부 </input> <input type="checkbox" name = hobby4> 명상 </input></td>
     </tr>
     <tr>
         <td> -전화번호</td>
         <td> <select>
             <option>02</option>
             <option>010</option>
             <option>직접입력</option>
         </select>
         -<input type="text">-<input type="text"></td>
     </tr>
     <tr>
         <td>-이메일</td>
         <td><input type="text"> @
         <select>
             <option>선택</option>
             <option>naver.com</option>
             <option>hanmail.net</option>
             <option>직접 입력</option>
         </select></td>
     </tr>
     <tr>
         <td> -자기소개</td>
         <td><textarea cols ="50" rows="5"></textarea></td>
         <td> 파일첨부 : <input type="file"> *2MB까지 가능</td>
     </tr>
 </table>
</form>

</body>
</html>

👆 소스코드 살펴보기

<form>태그 : 사용자가 키보드나 마우스로 입력한 내용을 받아들이는 HTML 폼을 생성할 때 사용한다. 폼의 시작은 <form>, 폼의 끝은 </form> 이 폼 태그 사이에는 최소 <input>, <select>, <option>, <textarea>, <button> 등의 태그가 최소 하나 이상 들어가게 된다.
<input> 태그 : 사용자의 입력 폼을 정의하며 생성가능한 입력 폼은
text, password, checkbox, rodio등의 속성 값을 통해 생성된다.
- text : 직사각형 상자 안에 내용 입력
  (아이디, 이름, 이메일 @ 앞 부분, 전화번호 중간, 뒷값)
- password : 입력하는 비밀번호가 *로 표시된다.
  (비밀번호, 비밀번호 확인)
- radio : 여러 항목 중에 하나를 선택하며 (성별)
  - name이라는 속성값으로 이름을 정해서 묶는다. 즉 그룹을 만드는 것.
  - checked 속성은 기본값으로 어떤 값이 미리 선택되어져 있도록 하는 것
  <input type="radio" name="info" checked> 여성 </input> <input type="radio"name="info">남성</input>
  
  여기서는 여성이 기본값으로 설정됨.
- checkbox : 여러 항목 중에 여러 개를 선택 (취미)
  - name 속성 값 : 여러개 선택이 가능하므로 그룹 이름이 모두 다르다.
  <input type="checkbox" name = hobby1> 등산 </input> <input type="checkbox" name = hobby2> 낚시 </input>
  등산 낚시
선택박스 만들기 : <select>와 <opint>태그 (전화번호 앞자리, 이메일 @ 뒤)
<select> <option>1</option> <option>2</opint></selcet>
다중 입력 창 만들기 : <textarea rows="5" cols="50"> 태그 (자기소개)
파일 선택 창 만들기 : <input type="file"> (파일첨부)

HTML5 폼 양식 만들기(생년월일)

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>html5 폼 양식</title>
</head>
<body>
<form>
  <input type="color"><br>
  <input type="datetime-local"><br>
  <input type="month"><br>
  <input type="number"><br>
  <input type="range"><br>
  <input type="time"><br>
  <input type="week"><br>
</form>
</body>
</html>

html5 폼 양식

byeol

꾸준하게 Ready, Set, Go!

이전 포스트

Chapter15-2 입출력 I/O(4~7)

다음 포스트

HTML의 기본 익히기

CHAPTER 01 HTML 문서구조 이해하기

Section 01 웹의 개요

1. 웹이란?

2 웹의 서버와 클라이언트 환경

데이터센터

웹 서버

클라이언트

웹 사이트와 웹 페이지

웹 호스팅

IP주소와 DNS

3 웹브라우저

Section 02 실습 환경 구축하기

Section 03 HTML 태그와 문서구조

Section 04 <meta> 태그로 문자 세트 설정하기

Section 05 HTML 태그의 속성

CHAPTER 02 텍스트

Section 01 텍스트 태그

1. 제목 나타내기 - <h1>~<h6>

2 줄바꿈과 공백 나타내기 - <br>, &nbsp

3. 단락 구분하기 - <p>와</p>

Section 02 목록 태그

1. 순서 없는 목록 나타내기 - <ul>, <li>

2. 순서 있는 목록 나타내기 - <ol>, <li>

3. 정의 목록 나타내기 - <dl>, <dt>, <dd>

Section 03 링크 태그

Section 04 HTML 주석문

CHAPTER 03 이미지와 멀티미디어

Section 01 이미지 태그

1. 이미지 삽입하기 - <img> 및 <img> 태그의 속성

Section 02 URL과 경로

1. 절대 경로로 나타내기

2. 상대 경로로 나타내기

Section 03 외부, 오디오, 비디오 파일 재생

CHAPTER 04 테이블과 폼 양식

Section 01 테이블 태그

Section 02 폼양식

Chapter15-2 입출력 I/O(4~7)

CSS의 기본 익히기

0개의 댓글

관련 채용 정보

2 줄바꿈과 공백 나타내기 - <br>, `&nbsp`

1. 순서 없는 목록 나타내기 - `<ul>, <li>`

2. 순서 있는 목록 나타내기 - `<ol>, <li>`

3. 정의 목록 나타내기 - `<dl>, <dt>, <dd>`

1. 이미지 삽입하기 - `<img>` 및 `<img>` 태그의 속성