반응형
1. 웹에서 사용하는 이미지 형식
2. <img> 태그 – 이미지 삽입하기
① 웹 문서에 이미지 삽입할 때 사용
② src 속성 : 이미지 파일 경로 지정
③ 이미지 경로는 웹 문서 위치 기준으로 정해짐.
④ alt 속성 : 이미지를 설명해 주는 대체 텍스트로, 시각장애인을 위한 화면 낭독기에서 이미지는 읽을 수 없기 때문에 대체 텍스트 첨부
⑤ width, height 속성 : 이미지 크기 조정하기
* 이미지 파일 경로 이해하기
① ‘/’는 하위 폴더 표시
② 같은 레벨의 다른 폴더는 폴더명을 입력 ex) <img src=“images/road.jpg”/>
③ ‘..’은 한 레벨위의 폴더 표시 ex) <img src=“../images/road.jpg”/>
④ 웹 상의 이미지 경로 지정 : 웹 상의 이미지 우클릭 후 이미지 주소복사 하여 img 태그 src 속성에 입력
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>추천 관광지</title>
</head>
<body>
<!--h1+img*2-->
<h1>사려니 숲길</h1>
<img src="images/road.jpg" alt="사려니 숲길">
<img src="images/road.jpg" width="250" height="90" alt="사려니 숲길">
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>추천 관광지</title>
</head>
<body>
<img src="https://ssl.pstatic.net/tveta/libs/1348/1348405/b73c33084ae789f65437_20210715155819150.png">
</body>
</html>
3. <figure>, <figcaption> 태그 – 이미지에 설명 글 붙이기
① HTML5 이전에는 <p>를 사용하여 이미지에 설명글 첨부
② <figure>, <figcaption>은 이미지뿐만 아나라 표나 멀티미디어 요소 등 어디에나 설명글 첨부 가능
③ <figure> : 설명을 붙여야 할 대상을 지정, 웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용
④ <figcaption> : 설명 글 첨부하는 태그, 하나 또는 여러 개의 멀티미디어 파일에 설명글 표시 가능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>추천 관광지</title>
</head>
<body>
<!--h1+p+(figure>(img+figcaption))-->
<h1>제주의 오름</h1>
<p>거인 설문대할망이 제주도와 육지 사이에 다리를 놓으라고 치마폭에
흙을 담아 나를 때 치마 틈새로 함줌씩 떨어진 흙덩이들이 오름이 되었다는
전설이 있다.</p>
<!--figure : 제목이나 설명글 첨부할 대상 지정하는 태그-->
<figure>
<img src="images/oreum-1.jpg" alt="용눈이 오름">
<!--figcaption : 지정된 대상에 제목이나 설명글 첨부하는 태그-->
<figcaption>완만하고 부드러운 용눈이 오름</figcaption>
</figure>
</body>
</html>
4. 온라인 프로필 – 이미지 첨부하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>온라인 프로필</title>
<style>
table, th, td {
border: 1px solid black; /*1픽셀 실선 검은색 테두리*/
border-collapse: collapse; /*중복되는 테두리 한 줄로 표시*/
}
th, td {
padding: 15px; /*셀 테두리와 내용 사이의 간격(패딩)*/
}
</style>
</head>
<body>
<!--h1+p+h2+p+hr+h2+(ul>(li>ul>li*8)+(li>ul>li*4))-->
<h1>Hayoon Moon</h1>
<p>이메일 : moonhy7@naver.com</p>
<h2>Who I am?</h2>
<p>웹 개발 경력 6년차이고 현재 비트캠프 강사로 활동중입니다.<br>
학생분들에게 도움이 되는 강사가 되고 싶습니다.</p>
<hr><!--주제 전환-->
<h2>skills</h2>
<ul>
<li>사용언어
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JAVA</li>
<li>Javascript</li>
<li>Jquery</li>
<li>Oracle</li>
<li>C++</li>
<li>WPF</li>
</ul>
</li>
<li>사용 툴
<ul>
<li>eclipse(4years)</li>
<li>Spring Framework(4years)</li>
<li>Sql Developer(4years)</li>
<li>Visual Studio(4years)</li>
</ul>
</li>
</ul>
<!--h2+(table>(caption+(thead>tr>th*4))+(tbody>(tr>td*4)*2))-->
<h2>Academic</h2>
<table>
<caption>학력 사항</caption>
<thead>
<tr>
<th>출신학교</th>
<th>전공</th>
<th>기간</th>
<th>졸업구분</th>
</tr>
</thead>
<tbody>
<tr>
<td>○○고등학교</td>
<td>(해당사항 없음)</td>
<td>2012.3 ~ 2015.2</td>
<td>졸업</td>
</tr>
<tr>
<td>○○대학교</td>
<td>수학과</td>
<td>2019.3 ~ 2021.2</td>
<td>졸업</td>
</tr>
</tbody>
</table>
</body>
</html>
반응형
'💻 1. 웹개발_Front end > 1-2 HTML' 카테고리의 다른 글
| [HTML] 03-3 SVG 이미지와 Modernizr (0) | 2021.09.05 |
|---|---|
| [HTML] 03-2 링크 만들기 (0) | 2021.09.05 |
| [HTML] 02-5 표를 만드는 태그 (0) | 2021.09.05 |
| [HTML] 02-4 W3C HTML 검사기 (0) | 2021.09.05 |
| [HTML] 02-3 목록을 만드는 태그 (0) | 2021.09.05 |
댓글