링크 예제
<style>
a {
text-decoration : none; <!--링크에 밑줄 없애기-->
color: blue;
}
</style>
</head>
<body>
<a href="https://www.naver.com" target="_blank">네이버</a> //새창으로 열기
<a href="https://www.google.com">구글 </a>
<img src="../../gugudan.jpg" alt ="바빠시리즈" width="350" heigh="350">
<figcaption>우리 강아지 쿠키</figcaption> <!--그림에 대한 설명-->
</body>
</html></html>
앵커 만들기
<title>앵커만들기</title>
</style>
</head>
<body>
<ul>
<li> <a href="#a1"> 이력서 : 내용이 많아 스크롤이 내려갈 때 각각의 섹션으로 빨리 이동할 수 있도록 앵커 만듦 </a> </li>
<li> <a href="#a2"> 자기소개서 </a> </li>
<li> <a href="#a3"> 포트폴리오 </a> </li>
<li> <a href="#a4"> 홈페이지 </a> </li>
</ul>
<section id="a1"> 이력서 </section>
<section id="a2"> 자기소개 </section>
<section id="a3"> 포트폴리오</section>
<section id = "a4"> 홈페이지 </section>
</body>
</html></html>
<style>
table{
width: 70%; /*표너비*/
border: 1px solid #222;
border-collapse : collapse; /*중복되는 표와 셀의 테두리를 한줄로 표시 */
}
thead{
background-color: #eee; /*제목행의 배경색*/
}
th, td{
border: 1px solid #ccc; /*1픽셀 짜리 셀 테두리*/
padding: 5px; /*셀 테두리와 셀 내용 사이의 여백(패딩)*/
font-size: 1em; /*글자 크기*/
}
a, a:visited{ /*방문 후에 글씨색 유지*/
color:#222;
text-decoration: none;
}
#sns > ul{
padding-left:0;
}
#sns >ul >li{
display: inline-block;
width:80px;
}
자기소개 페이지 만들기 예제
<!DOCTYPE html>
<html lang = "ko">
<head>
<title>온라인 프로필</title>
<meta charset='utf-8'>
<link rel ="stylesheet" href="css/style.css"> <!--css와 링크 연결-->
<!-- <meta http-equiv='X-UA-Compatible' content='IE=edge'> -->
<!-- <meta name='viewport' content='width=device-width, initial-scale=1'> -->
<style>
table{
width: 70%; /*표너비*/
border: 1px solid #222;
border-collapse : collapse; /*중복되는 표와 셀의 테두리를 한줄로 표시 */
}
thead{
background-color: #eee; /*제목행의 배경색*/
}
th, td{
border: 1px solid #ccc; /*1픽셀 짜리 셀 테두리*/
padding: 5px; /*셀 테두리와 셀 내용 사이의 여백(패딩)*/
font-size: 1em; /*글자 크기*/
}
a, a:visited{
color:#222;
text-decoration: none;
}
#sns > ul{
padding-left:0;
}
#sns >ul >li{
display: inline-block;
width:80px;
}
</style>
</head>
<body>
<div id="container">
<!-- 사이드바-->
<aside>
<div id="namecard">
<img src="images/pf.jpg" alt="">
<h1> tired out </h1>
<p> 쿨쿨 자고 싶다. </p>
</div>
<div id ="detail">
<p> Seoul Korea</p>
<p> jmin16@naver.com</p>
</div>
<div id = "sns">
<h2> SNS </h2>
<ul>
<li><a href="https.//www.facebook.com"> facebook</a></li>
</ul>
</div>
</aside>
<div id="main">
<!-- 자기소개-->
<hr>
<section>
<h2 class ="subtitle"> Who am I?</h2>
<p><mark>프론트엔드 웹 기술(Front-end Web Tech)</mark>에 관심이 많습니다.</p>
<br>현재 제주의 한 시골 마을에서 코딩 중입니다.
</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>
</ul>
</li>
</section>
<!--숙련도-->
<section>
<h2 id= "subtitle"> Skills</h2>
</section>
<!--학력-->
<section>
<h2 id="subtitle"> Education</h2>
<table>
<caption>학력사항</caption><!--caption: 표제목-->
<thead>
<tr>
<th>출신학교</th> <th>전공</th><th>기간</th><th>구분</th>
</tr>
</thead>
<tbody>
<tr>
<td>대학교</td><td>경영학</td><td>2013.3~2020.2</td><td>졸업</td>
</tr>
</tbody>
<tbody>
<tr>
<td>고등학교</td><td>-</td><td>2010.3~2013.2</td><td>졸업</td>
</tr>
</tbody>
</table>
</section>
</div>
</div>
</body>
</html>
이미지에 링크 걸기
<script src= "modernizr-custom.js"></script> <!--svg, 태그 지원하지 않는 버전을 이용하는 유저라 해도 볼 수 있게 함-->
<body>
<img src="images/event.jpg" alt= "신간안내" usemap="#eventMap"> <!--usemap으로 연결시켜줘야함-->
<map name = "eventMap">
<!--원의 중심 x좌표, y좌표, 반지름 > 그림판으로 구할 수 있음, 원쪽으로 가면 링크 걸리도록-->
<area shape="circle" coords="330,240,55" href="http://www.easyspub.co.kr/12_Menu/BoardView/C200/123/EDU"
alt = "시간 소개 페이지로 가기" target="_blank">
<area shape="circle" coords="62,1230,20" href="http://www.easyspub.co.kr/12_Menu/BoardView/C200/123/EDU"
alt = "시간 소개 페이지로 가기" tager ="_blank">
<!--사각형, x,y좌표-->
<area shape="rect" coords="40,772,360,1170" href="http://www.easyspub.co.kr/20_Menu/BookList/EDU"
alt = "본문 pdf 다운로드 페이지로 가기" tager ="_blank">
</map>
</body>
'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 |
