이미지 불러오기(상대경로)
<body>
<!--같은 폴더에 위치하고 있을 때는 파일명.확장자명-->
<img src="cover.jpg";>
<!--상대경로1 해당 폴더의 하위폴더에 있을 때-->
<img src="images/cover.jpg" alt="바빠시리즈">
<!--상대경로2 ../해당 폴더의 상위폴더에 있을 때-->
<img src="../pf.jpg" alt="바빠시리즈">
<!--상대경로3 ../해당 폴더의 상위-상위폴더에 있을 때-->
<img src="../../gugudan.jpg" alt ="바빠시리즈">
cf.alt는 이미지에 대한 텍스트로, 화면 낭독기가 읽어줌
웹에서 이미지 주소 복사 후 사용하기
<img src="https://www.enforex.com/images/cities/latin-america/cuba-havana.jpg">
그림에 대한 설명 및 크기 설정
<img src="../../gugudan.jpg" alt ="바빠시리즈" width="350" heigh="350">
<figcaption>우리 강아지 쿠키</figcaption> <!--그림에 대한 설명-->
<!doctype html>
<html lang="ko">
<head>
<title>온라인 프로필</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<style>
table {
width:70%; /* 표의 너비 */
border:1px solid #222; /* 1픽셀짜리 표 테두리 */
border-collapse: collapse; /* 중복되는 표와 셀의 테두리를 한 줄로 표시 */
}
thead {
background:#eee; /* 제목 행의 배경 색 */
}
th, td {
border:1px solid #ccc; /* 1픽셀짜리 셀 테두리 */
padding:5px; /* 셀 테두리와 셀 내용 사이의 여백(패딩) */
font-size:0.8em; /* 셀의 글자 크기 */
}
</style>
</head>
<body>
<div id="container">
<!-- 사이드바 -->
<aside>
<div id="namecard">
<img src="images/pf.jpg" alt="">
<h1>Kyunghee Ko</h1>
<p>오늘은 남은 인생이 시작되는 첫째날</p>
</div>
<div id="detail">
<p>Jeju, Korea</p>
<p>funcom@gmail.com</p>
</div>
<div id="sns">
<h2>SNS</h2>
</div>
</aside>
<div id="main">
<!-- 자기 소개 -->
<section>
<h2 class="subtitle">Who am I?</h2>
<p><mark>프런트엔드 웹 기술(Front-end Web Tech.)</mark>에 관심이 많습니다. <br>현재 제주의 한 시골 마을에서 코딩 중입니다.</p>
</section>
<!-- 경력 -->
<section>
<h2 class="subtitle">Experience</h2>
<ul>
<li>프론트엔드 개발
<ul>
<li>업무 내용 업무 내용 업무 내용 </li>
<li>업무 내용 </li>
<li>업무 내용 업무 내용</li>
</ul>
</li>
<li>웹 디자인
<ul>
<li>업무 내용 </li>
<li>업무 내용 업무 내용</li>
</ul>
</li>
</ul>
</section>
<!-- 숙련도 -->
<section>
<h2 class="subtitle">Skills</h2>
</section>
<!-- 학력 -->
<section>
<h2 class="subtitle">Education</h2>
<table>
<caption>학력 사항</caption>
<thead>
<tr>
<th>출신학교</th>
<th>전공</th>
<th>기간</th>
<th>구분</th>
</tr>
</thead>
<tbody>
<tr>
<td>ㅁㅁ대학교</td>
<td>컴퓨터공학</td>
<td>2004.3 ~ 2008.2</td>
<td>졸업</td>
</tr>
<tr>
<td>ㅇㅇㅇ고등학교</td>
<td> - </td>
<td>2001.3 ~ 2004.2</td>
<td>졸업</td>
</tr>
</tbody>
</table>
</section>
</div>
</div>
</body>
</html>'FRONT-END > HTML' 카테고리의 다른 글
| 폼태그 (0) | 2021.04.08 |
|---|---|
| 폼태그 (0) | 2021.04.08 |
| 링크 (0) | 2021.04.06 |
| 테이블 스타일 관련 예제 (0) | 2021.04.06 |
| index-table 실습 (0) | 2021.04.06 |
