HTML & CSS
[FrontEnd1] 여러 태그 (a, img 응용, br, div, ul, ol, li, style)과 내부 속성(style 속성) / 토이스토리 게시판 형태 만들기
보라해바라기
2022. 4. 15. 12:57
SMALL
안녕하세요~ 보라해바라기입니다.
오늘은 저번 시간에 이어서 게시판 형태의 토이스토리 소개 웹사이트를 만들기 위해
index.html 과 introduction.html을 따로 만들어 a태그를 이용해 연결시켜주었습니다.
아직 완벽한 설계를 하지 않아
토이스토리의 소개가 담긴 introduction.html은 "바로가기" 하이퍼링크를 누르면 연결될 수 있게 만들었습니다.
게시판의 개요는 다음과 같습니다. (웹디자인 기능사 공식문제를 참고함.)
1. index.html
<!DOCTYPE html>
<html lang="en">
<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>ToyStory</title> <!--웹페이지의 제목-->
<style>
#wrap{
width: 1200px;
height: 700px;
text-align: center;
background-color: antiquewhite;
}
#header{
width: 1200px;
height: 100px;
background-color: antiquewhite;
}
#header>#logo{
width: 300px;
height: 100px;
background-color: lightpink;
float: left;
}
#header>#menu{
width: 900px;
height: 100px;
background-color: lightsalmon;
float: left;
}
#slide{
width: 1200px;
height: 300px;
background-color: antiquewhite;
}
#contents{
width: 1200px;
height: 200px;
background-color: antiquewhite;
}
#contents>#gallery{
width: 400px;
height: 200px;
background-color: lightblue;
float: left;
}
#contents>#banner{
width: 400px;
height: 200px;
background-color: lightgray;
float: left;
}
#contents>#shortcut{
width: 400px;
height: 200px;
background-color: lightgreen;
float: left;
}
#footer{
width: 1200px;
height: 100px;
background-color: antiquewhite;
}
#footer>#logo2{
width: 300px;
height: 100px;
background-color: lightcyan;
float: left;
}
#footer>#copyright{
width: 600px;
height: 100px;
background-color: lightyellow;
float: left;
}
#footer>#sns{
width: 300px;
height: 100px;
background-color: lightseagreen;
float: left;
}
</style>
<!--css파일 대신 style 태그 사용-->
<!--float : left (왼쪽을 기준으로 차례대로 자리 잡음.)-->
<!--칸 구분을 위해 임시로 서로 다른 색 지정-->
</head>
<body>
<div id="wrap"> <!--전체 틀-->
<header id="header">
<div id="logo">
<a href="https://terms.naver.com/entry.naver?docId=3535168&cid=58544&categoryId=58544"><img src="./images/logo.jpg" style="width: 300px; height: 100px;" title="toystory logo"></a>
</div>
<div id="menu">
메뉴 (캐릭터 이름 넣기)
</div>
</header>
<div id="slide">
슬라이드 (toystory 시리즈 포스터)
</div>
<div id="contents">
<div id="gallery">
갤러리 (캐릭터들이 같이 찍은 사진 모음)
</div>
<div id="banner">
배너
</div>
<div id="shortcut">
<a href="./introduction.html">바로가기 (toystory 소개)</a>
</div>
</div>
<div id="footer">
<div id="logo2">
로고2
</div>
<div id="copyright">
카피라이트
</div>
<div id="sns">
SNS
</div>
</div>
</div>
</body>
</html>
2. introduction.html
<!DOCTYPE html>
<html lang="en">
<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>introduction_toystory</title>
<link rel="stylesheet" href="./index.css"> <!--toystory.css 파일과 연결해 css파일의 속성을 적용할 수 있도록-->
<style>
#title{
text-align: center;
color: deepskyblue;
}
</style>
</head>
<body>
<h1 id="title">토이스토리</h1>
<img src="./images/toystory1.jpg" title="토이스토리 포스터">
<p>1995년 월트 디즈니 컴퍼니가 배급하고 픽사 애니메이션 스튜디오가 제작한 장난감을 다룬 <b>3D 애니메이션</b>이다.<br>
픽사의 최초의 <em>장편 애니메이션</em>이고, 전세계 최초의 <em>풀 CG 3D 애니메이션 영화</em>이다</p>
<p>
캐릭터 소개
<ul>
<li>우디</li>
<li>버즈 라이트 이어</li>
<li>제시</li>
<li>보 핍</li>
<li>미스터 포테이토 헤드</li>
<li>슬링키</li>
<li>헴</li>
<li>렉스</li>
</ul>
</p>
</body>
</html>
3. index.css
img {
width: 240px;
height: 320px;
}
/*너비가 240px이고 높이가 320px인 이미지*/** ol : ordered list (순서있는 리스트)
ul: unordered list (순서없는 리스트)
728x90