메뉴 건너뛰기

2022.04.16 15:22

5장 오픈챌린지 관련

조회 수 82 댓글 0

<!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>Document</title>

    <style type="text/css">

       body{

    padding:0;

    margin:0;

width:100%;

}

 

#header{

    height:20%;

    background-color: yellow;

   float:left;

    margin:0 auto;

    position:relative;

}

.class_title{

    text-align: center;

}

    #snb{width:15%;

        height:80%;

        background-color: orange;

      float: left;

      position:relative;

     

     

     

    }

    #content{

        width:85%;

        height:80%;

        background-color: aqua;

        float:left;

        position:relative;

    }

       .photo p{

           width:1179px;

           height:650px;

           background:url(homework/hand.jpg) no-repeat;

           

           text-align: center;

           position:relative;

           margin:auto;

       }

#footer{

   width:100%;

    height:20%;

    background-color: blueviolet;

    position:relative;

    clear:both;

    float:left;

}

       

    </style>

</head>

<body>

    <div id="header">

    <h1 class="class_title">스마트폰</h1>

    <p>

        스마트폰은 컴퓨터를 결합한 무선 휴대전화기이다. pc에서 실행되는 운영체제보다 적게 만든 모바일 운영체제를 탑재하여 인터넷 검색, 전자우편, 간단한 문서 편집, 카메라, 오디오 및 비디오 재생 등 pc의 기능을 거의 모두 갖추고 있다.

    </p>

</div>

<div id="main">

   

    <div id="snb">

        <h2>목차</h2>

        <ul>

        <li><a href="#">역사</a></li>

        <li><a href="#">안드로이드폰</a></li>

        <li><a href="#">아이폰</a></li>

        <li><a href="#">샘플</a></li>

        </ul>

    </div>

    <div id="content">

        <div class="history">

            <h2><a href="#">역사</a></h2>

            최초의 스마트폰은 사이먼(Symon)으로 추정된다. IBM사가 1992년 설계하여 그해에 미국 네바다 주의 라스베이거스에서 열린 컴댁스에서 컨셉 제품으로 전시되었다.

        </div>

        <div class="android">

            <h2><a href="#">안드로이드</a> </h2>

            안드로이드(영어:Android)는 휴대 전화를 비롯한 휴대용 장치를위한 운영 체제와 미들웨어, 사용자 인터페이스 그리고 표준 응용 프로그램(웹 브라우저, 이메일 클라이언트, 단문 메시지 서비스(SNS), 멀티미디어 메시지 서비스(MMS)등)을 포함하고 있는 소프트웨어 스택이자 모바일 운영 체제이다.

        </div>

            <div class="iphone">

            <h2><a href="#">아이폰</a></h2>

            아이폰(영어:iphone)은 2007년 1월 9일, 애플이 발표한 휴대전화 시리즈이다. 미국 샌프란시스코에서 열린 맥월드 2007에서 애플 창업자 중 한명인 스티브 잡스가 발표햤다.

        </div>

            <div class="photo">

               

            <h2>샘플</h2>

           

            <p class="class_photo">스마트폰샘플</p>

        </div>

    

    </div>

</div>

    <div id="footer">

        <h4><a href="#">설문조사</a></h4>

        <p>copyright</p>

    </div>

</body>

</html>

 

 

css 영역에서 snb 영역을 footer까지 내리고 싶은데 어떻게 해야할까요?

?

QnA

공부하면서 궁금했던 것을 질문해보세요.

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.20 14691
372 예제 8-9(373p) 1 열공이 2022.05.29 43
371 timerID값이 null인 이유 1 열공이 2022.05.26 26
370 length 프로퍼티 2 열공이 2022.05.21 26
369 9장 실습문제3번 2 열공이 2022.05.17 54
» 5장 오픈챌린지 관련 시급함 2022.04.16 82
367 교제 254페이지 1 쿠웨이트 2022.04.12 58
366 5장 실습문제 8번 2 쿠웨이트 2022.04.12 71
365 5장 실습문제 10번 1 쿠웨이트 2022.04.12 52
364 이미지파일 6 스물다섯 2022.04.08 49
363 4장 171쪽 2 chu 2022.04.04 26
362 html5 태그 검사 2 열공이 2022.03.10 63
361 2장 실습문제 1번 질문드립니다! 1 망나뇽 2022.03.06 95
360 안녕하세요 관리자님 실습 문제 짝수본 zip 파일은 제공 되지 않는 건가요? 1 문의 2022.02.25 118
359 r/w는 무슨 뜻인가요? 1 ㅇㅁㅇㅈ 2021.12.22 162
358 웹 워커 13-7 결과 55가 출력되지 않습니다. 1 chg115 2021.12.03 83
357 연습문제의 미디어 파일 1 부산 2021.11.25 112
356 document.getElementBy~ 2 tc0712 2021.11.22 89
355 윈도우 브라우저와 윈도우 탭 2 tc0712 2021.11.22 47
354 5장 내용 중 궁금한 점 있습니다! 1 file 2021.10.15 178
353 5장 5-(2) 질문 있습니다! 1 2021.10.14 95
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 19 Next
/ 19
위로