Study/HTML5&CSS

part08_images

슬기로운 개발자 2022. 5. 13. 02:32
728x90

1. 홈디렉토리와 서브디렉토리 구조

- 홈디렉토리 경로 => /lounge

실습예제 구조

2. 웹사이트 구현

[작업조건]

1) 위의 홈디렉토리 구조를 참조하여 결과화면대로 파일을 제작합니다.

2) 명시되지 않은 사항은 작업자가 판단하여 제작합니다.

 

index.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>Lounge Cafe Main</title>
</head>
<body>
    
    <h1>welcome to Cafe Lounge</h1>

    <img src="images/drinks.gif" alt="음료이미지" width="204" height="100">

    <p>
        카페 라운지에서 신선한 <a href="beverage/elixlr.html">음료</a>, 즐거운 대화,
        편안한 음악을 즐길 수 있습니다.
    </p>

    <h2>찾아오시는 길</h2>

    <p>
        웹 마을 중심가에 있습니다.
        자세한 위치는 <a href="about/directions.html">상세약도</a>를 참조하세요.
    </p>

</body>
</html>

결과화면

@ 음료클릭

beverage/elixlr.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>
    
    <h1>음료 목록</h1>

    <div>
        <h2>시원한 녹차</h2>
        <div><img src="../images/green.jpg" alt="녹차" width = "47" height="100">
            <span>
                카밀레 꽃과 생강 한 조각.. 비타민과 미네랄이 가득한 녹차
            </span>
    </div>

    <div>
        <h2>산딸기 농축 과즙</h2>
        <div><img src="../images/lightblue.jpg" alt="산딸기" width = "48" height="100">
        <span>
            레몬 글라스, 산딸기 열매가 첨가된 시원한 주스
        </span>
    </div>

    <div>
        <h2>크렌베리 블래스트</h2>
        <div><img src="../images/red.jpg" alt="크렌베리 블래스트" width = "64" height="100">
        <span>
            풍부한 Vitamin-C와  히비스커스 & 크렌베리 주스
        </span>
    </div>

    <a href="../index.html"><span>[메인 페이지로]</span></a>

</body>
</html>

결과화면

@ 상세약도 클릭

about/directions.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">
    <style>
        div{
            line-height: 26px;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <h1>찾아오시는 길</h1>

    <div>
        웹마을 출구에서 305번 도로 진입 후 600m 직진
        <br>
        교차로에서 우회전 후 400m 직진하면 카페입구!
    </div>

    <br>
        <a href="../index.html"><span>[메인 페이지로]</span></a>

</body>
</html>

결과화면

728x90