[FrontEnd1] 여러 태그 (a, img 응용, br, div, ul, ol, li, style)과 내부 속성(style 속성) / 토이스토리 게시판 형태 만들기

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

저작자표시

'HTML & CSS' 카테고리의 다른 글

[FrontEnd1] 토이스토리 페이지 보강(로그인창, 오피셜 트레일러 삽입, 노래 삽입, 메뉴창) (0)	2022.04.23
[FrontEnd1] 4월 3째주 한 페이지 개념 정리 (0)	2022.04.19
[FrontEnd1] html의 기본 구조와 여러 태그 _ 토이스토리 소개 페이지 만들기 (0)	2022.04.13
[HTML & CSS] 기본 개념 정리 (0)	2022.01.21
[HTML & CSS] 모각코 활동 후기 :) (0)	2021.12.01