반응형 웹사이트 시험

sisun·2023년 5월 3일
0

html시험

목록 보기
1/2

05.02 웹사이트 화면구상 시험

평가가이드

1.레이아웃짤때 시맨틱태그나 아이디를 써라
2.ul il로 네비게이션 만들어라
3.파비콘 넣어라
4.css를 정확하게 사용해라
5.컨텐츠 넣을때 시맨틱태그나 아이디 써로
6.실제랑 구조를 비슷하게써라
7.css가 제대로 동작하는지
8.레이아웃이 잘리거나 틀어지지않는지
9.footer에 카피라이트 들어가있는지
10.기간내 제출

따라 만들 홈페이지

홈페이지 화면 구상

개선해야할점:

  • 위에 nav의 위치가 제대로 안되어있다.
  • 잘 몰라서 뭐만하면 margin값으로 맞췄다.
  • 가운데 정렬이 잘 안되었고 px가 많아 반응형 웹사이트를 제작하기에 적합하지 않다.
  • 밑에 제품을 한 줄에 맞춰서 했음에도 불구하고 홈페이지를 조금이라고 줄이면 밑으로 빠진다.

알게 된 점:

  • 먼저 기준점을 잡을 nav를 가로 세로 값을 정리 해야 밑에 애들을 정리할 수 있다
    (가로 100% , 세로 60px = width: 100%; height: 60px;)
  • li를 쓸 때는 부모태그(ul,ol)을 무조건 써야한다. 쓰지 않을꺼면 차라리 p태그로 묶는게 낫다.
  • 로고를 나중에 넣는다한들 일단 div로 묶고 진행 해야 해서 fll을 세개 줘야한다.
  • 구역을 미리 주석으로 정리 해놓고 하는게 그나마 보기 편한 것 같다.

코드

<!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>Samsung</title>
    <link rel="icon" href="favicon.ico">
    <style>
        #wrapper{
            width: 100%;
        }
/* ==========================nav ======================== */
        .first {
            width: 100%;
            height: 60px;
            
        }
        .first li{
            border: solid 1px red;
            overflow: hidden;
            display: inline-block;
            box-sizing: border-box;
        }
        .tet{
            float: left;
        }
        .tit{
            float: left;
        }
        .tat{
            float: right;
        }
/* =======================대표사진 header==================== */
        .eventone{
            width: 100%;
            height: 640px;
            text-align: center;
            margin: 1em auto;
            padding: 0;
            border: dotted violet;
            display: inline-block;
            background-color: cadetblue;
        }
/* =========================이벤트========================== */
        .second{
            text-align: center;
            margin:10px 10% 10px 0px;
        }
        
        .gallay {
            width: 329px;
            height: 568px;
            text-align: center;
            margin: auto;
            padding: 0;
            border: dashed purple ; 
            display: inline-block;
            background-color: rgba(136, 88, 214, 0.493);
        }
        .text {
            margin-top: 0px;
        }
        .evet, .more{
            text-align: center;
            margin-top: 400px;
        }
        
/* ======================이벤트 밑 프로모션============= */
        .botten{
            margin: 50px 50px;
            text-align: center;
        }
        .botten li{
            list-style-type: none;
            border: solid 1px;
            display: inline-block;
            margin-left: 50px;
        }
        .env{
            width: 700px;
            border: 1px solid red;
            display: inline-block;
            text-align: start;
            
        }
        .event {
            border: solid 1px;
            background-color: plum;
            width: 330px;
            height: 327px;
            float: left;
            margin-right: 5.1%;
            
         }
        .eveny {
            border: solid 1px;
            background-color: plum;
            width: 330px;
            height: 327px;
            float: left;
        }
        .event>div, .eveny>div {
            position: relative;
            top: 300px;
        }
        .mor {
            text-align: center;
            background-color: bisque;
            display: inline-block;
            margin: 10px;
        }
 /* ====================주요스토어================            */
        .third{
            width: 1394px;
            height: 811px;
            text-align: center;
            margin: 200px;
            border: dotted rgba(83, 22, 163, 0.877);
            background-color: rgba(196, 37, 37, 0.425);
        }
        .strone{
            border: solid 1px gray;
        }
        .strtwo{
            border: solid 1px gray;
        }
        .strthree{
            border: solid 1px gray;
        }
        .strfour{
            border: solid 1px gray;
        }
        .strfive{
            border: solid 1px gray;
        }
/* ==============컬처랩 ===================== */
        .laptotal{
            width: 1393px;
            height: 481px;
            float: left;
            text-align: center;
            padding: 150px;
        }
        .lapphoto{
            width: 1393px;
            height: 481px;
            border: solid 1px powderblue;
            background-color: pink;
            float: left;
            margin-left: 175px;
        }
        .lap{
            width: 409.5;
            height: 453.906;
            border: solid 1px red;
            background-color: palevioletred;
            margin: 55px;
            margin-left: 1000px;
            float: left;
            position: absolute;
            
        }
/* ==================스토리===================== */
        .story{
            border: solid 1px;
            width: 80%;
            height: 387px;
            display: inline-block;
            text-align: left;
            margin-top: 130px;
        }
        .storya{
            border: seagreen 1px solid;
            background-color: rgba(165, 42, 42, 0.5);
            width: 648px;
            height: 380px;
            float: left;
            margin-left:40px;
            display: inline-block;
        }
        .storyleft{
            float: left;
            margin-left: 30px;
        }
        .storyright{
            float: left;
        }
/* ===================스토어================ */
        .store{
            border: 1px solid red;
            background-color: blanchedalmond;
            margin: 50px 0px 100px 175px;
            width: 80%;
            height: 300px;
            
        }
        .storea{
            border: 1px solid blue;
            float: left;
            width: 24.8%;
            height: 300px;
        }
        .storeb{
            border: 1px solid blue;
            float: left;
            width: 24.8%;
            height: 300px;
        }
        .storec{
            border: 1px solid blue;
            float: left;
            width: 24.9%;
            height: 300px;
        }
        .stored{
            border: 1px solid blue;
            float: left;
            width: 24.9%;
            height: 300px;
        }
/* ===================메뉴================ */
        .fourth{
            overflow: hidden;
            width: 100%;
            
        }
        .one{
            border: solid 1px;
            width: 16.666%;
            height: 50%;
            display: inline-block;
            float: left;
        }
        .two{
            border: solid 1px;
            width: 16.666%;
            height: 50%;
            display: inline-block;
            float: left;
            margin-top: 4em;
        }
        .three{
            border: solid 1px;
            width: 16.666%;
            height: 50%;
            display: inline-block;
            float: left;
        }
        .four{
            border: solid 1px;
            width: 16.666%;
            height: 50%;
            display: inline-block;
            float: left;
        }
        .five{
            border: solid 1px;
            width: 16.666%;
            height: 50%;
            display: inline-block;
            float: left;
            margin-top: 5px;
        }
        .six{
            border: solid 1px;
            width: 16%;
            height: 50%;
            display: inline-block;
            float: left;
        }
        
        /* .image {
            width: 1em;
            height: auto;
        }
         */
  </style>
</head>
<body>
    <div id="wrapper">
    <nav class="first">
        <div class="tet">samsung</div>
     <!-- 삼성 아이콘 대신 tet-->
     <div class="tit">
        <ul>
    <li>제품</li>
    <li>이벤트/선물하기</li>
    <li>갤럭시 컴퍼스 스토어</li>
    <li>e식품관</li>
    <li>#YouMake</li>
    <li>스마트상스</li>
    <li>아울렛</li>
    <li>고객 서비스</li>
</ul>
</div>
    <!-- /*-------------------*/ -->
    <div class id="tat">
        <ul>
    <li>멤버십</li>
    <li>삼성스토어</li>
    <li>지속가능경영</li>
    <!-- -----옆에 아이콘----------- -->
    <li>비즈니스</li>
    <!-- -----옆에 아이콘------- -->
    <!-- -----돋보기 아이콘------- -->
    <!-- -----카트 아이콘------- -->
    <!-- -----사람 아이콘------- -->
</ul>
</div>


</nav>
    <header>
        <!-- 프로모션 사진 -->
        <div class="eventone">
            <h2>삼성전자 에너지
            세이빙 특별전</h2>
            <p>2022.03.21~2022.03.31</p>
        </div>
    </header>
    <section class="second">
        <h2>이벤트</h2>
        <div class="gallay">
        <h3 class="evet">이달의 혜택</h3>
        <p class="text">매월 새롭게 제공되는 혜택</p>
        <span class="more">자세히보기</span>
    </div>
        <!-- 선물상자 사진 -->
        <div class="gallay">
        <h3 class="evet">웨딩 이벤트</h3>
        <p class="text">눈부신 선물&혜택</p>
        <span class="more">자세히보기</span>
        </div>
        <!-- 웨딩사진 -->
        <div class="gallay">
        <h3 class="evet">입주 이벤트</h3>
        <p class="text">당신만을 위한 맞춤제안</p>
        <span class="more">자세히보기</span>
        </div>
        <!-- 소파사진 -->
        <div class="gallay">
        <h3 class="evet">이달의 카드 혜택</h3>
        <p class="text">스마트한 소비생활</p>
        <span class="more">자세히보기</span></div>
        <!-- 카드사진 -->
        <div class="botten">
        <ul>
            <li>#전체</li>
            <li>#모바일</li>
            <li>#가전</li>
            <li>#IT</li>
            <li>#스토어</li>
            <!-- 버튼타입으로 만들기 -->
        </ul>
    </div>
    <div class="env">
        <div class="event">사진
            <div>
                <h3>삼성전자 에너지 세이빙 특별전</h3>
            <p>2023.03.21~2023.05.31</p>
            <span class="more">자세히보기</span>
        </div>
    </div>

            <div class="eveny">사진<div>
        <div>      
            <h3>고효율 가전제품 환급 혜택</h3>
            <p>2022.01.01~2023.12.31</p>
            <span class="more">자세히보기</span>
         </div>
        <span class="mor">이벤트 더 알아보기</span>
    </div>
</div>
    </section>
    <article>
        <div class="third">
        <h2>주요 스토어 안내</h2>
        <div class="strone">
        <h3>삼성스토어 갤러리아 광교</h3>
        <!-- 아이콘 -->
        <p>스토어 상담 예약</p>
    </div>
    <div class="strtwo">
        <h3>삼성스토어 포항</h3>
        <!-- 아이콘 -->
        <p>스토어 상담 예약</p>
    </div>
    <div class="strthree">
        <h3>삼성스토어 경산</h3>
        <!-- 아이콘 -->
        <p>스토어 상담 예약</p>
    </div>
    <div class="strfour">
        <h3>삼성스토어 부산</h3>
        <!-- 아이콘 -->
        <p>스토어 상담 예약</p>
    </div>
    <div class="strfive">
        <h3>삼성스토어 검단</h3>
        <!-- 아이콘 -->
        <p>스토어 상담 예약</p>
    </div>
</div>
<div class="more">
<div class="lapptotal">
    <div class="lapphoto"></div>
    <div class="lap">
        <h2>삼성컬처랩</h2>
        <p>전국 삼성 스토어에서 제품을 직접 체험해보고<p>
        <p>다양한 문화 콘텐츠를 즐길 수 있는 소비자교육 프로그램도 함께 경험해보세요.
        </p>
        <h4>진행 프로그램</h4>
        <ul>
            <li>키즈 과학/코딩 클래스</li>
            <li>모바일, 가전제품 활용 클래스</li>
            <li>BESPOKE 인테리어/소품 제작 클래스</li>
            <li>쿠킹/와인 클래스</li>
            <li>SmartThings활용 클래스</li>
        </ul>
        <p>※자세한 클래스 신청방법은 삼성스토어 공식 SNS 채널을 확인해주세요</p>
        <p>Instagram @samsungstore.official</p>
        <p>Naver @samsung_store</p>
    </div>
</div>
    <div class="story">
        <div class="storyleft">
        <h4>스토리</h4>
        <p>당신의 삶을 특별하게 해줄 새로운 아이디어</p> 
        <p>스마트하게 사는 새로운 방법을 알아보세요.</p>
    </div>
        <!-- 영상 -->
        <div class="storya"></div>
        <div class="storyright">
        <p>01</p>
        <strong><p> 디테일러와 함께하는 신혼가전 구매 꿀팁</p> </strong>
        <p>02</p>
        <strong><p> JOIN THE BESPOKE</p> </strong>
        <p>03</p>
        <strong><p>하나의 폰, 캐스팅은 더블 갤럭시 S21</p> </strong>
    </div>
</div>
    <div class="store">
        <div class="storea">
            <!-- 아이콘 -->
    <h3>신규 오픈 스토어</h3>
    <p>삼성스토어에서 신규로 오픈한 스토어를 둘러보세요.</p>
    <span>자세히보기</span>
</div>
<div class="storeb">
         <!-- 아이콘 -->
         <h3>스토어 찾기</h3>
         <p>가까운 스토어를 찾고 스토어 이벤트도 확인해보세요.</p>
         <span>자세히보기</span>
        </div>
        <div class="storec">
              <!-- 아이콘 -->
    <h3>스토어 상담 예약</h3>
    <p>나에게 맞는 맞춤 상담을 예약하면 전문 상담사가 상담해드려요.</p>
    <span>자세히보기</span>
</div>
<div class="stored">
         <!-- 아이콘 -->
         <h3>언택트 쇼핑 안내</h3>
         <p>자유롭게 제품을 체험하고 특별한 혜택도 받아보세요</p>
         <span>자세히보기</span>
         </div>
</div>
</div>
    </article>
    
        <aside class="fourth">
          <div class="one">
            <h4>제품</h4>
            <ul>
                <li>갤럭시</li>
                <li>스마트폰</li>
                <li>태블릿</li>
                <li>워치</li>
                <li>버즈</li>
                <li>갤럭시북</li>
                <li>모니터</li>
                <li>프린터</li>
                <li>메모리/스토리지</li>
                <li>TV</li>
                <li>Lifestyle TV</li>
                <li>사이드바</li>
                <li>하만</li>
                <li>BESPOKE</li>
                <li>냉장고</li>
                <li>김치냉장고</li>
                <li>식기세척기</li>
            </div>
            <div class="two">
                <li>전기레인지</li>
                <li>오븐/전자레인지</li>
                <li>큐커</li>
                <li>정수기</li>
                <li>세탁기</li>
                <li>건조기</li>
                <li>에어드레서</li>
                <li>슈드레서</li>
                <li>에어컨</li>
                <li>공기청정기</li>
                <li>청소기</li>
                <li>스마트싱스</li>
                <li>엑세사리 & 소모품</li>
                <li>데이코</li>
            </ul>
                <!-- 아이콘 -->
            </div>
            <div class="three">
                <h4>이벤트/선물하기</h4>
                <ul>
                <li>기확전 모두보기</li>
                <li>삼성닷컴 단독</li>
                <li>선물하기</li>
                <li>공동구매</li>
                <li>아울렛</li>
                <li>갤럭시 컴퍼스 스토어</li>
                <li>삼성닷컴 Live</li>
                <li>웨딩,신혼샵</li>
                <li>커스텀 스튜디오</li>
                <li>스토어 진열 할인 상품</li>
                <li>닷컴 회원 혜택</li>
                <li>이벤트존</li>
                <li>e식품관</li>
                <li>MD 초이스 샵</li>
                <li>스토리</li>
            </ul>
            </div>
        <div class="four">
            <h4>고객서비스</h4>
            <ul>
                <li>메뉴얼 & 다운로드</li>
                <li>삼성닷컴 FAQ</li>
                <li>매장 찾기</li>
                <li>서비스센터 찾기</li>
                <li>Samsung Care+(모바일/PC)</li>
                <li>Samsung Care+(가전/TV)</li>
                <li>삼성스토어</li>
                <li>삼성전자 멤버십</li>
                <li>MD 비지니스 협력제안</li>
                <li>비지니스 협력제안</li>
                <!-- 아이콘 -->
                <li>삼성멤버스 커뮤니티</li>
                <!-- 아이콘 -->
                <li>E-카탈로그</li>
                <!-- 아이콘 -->
                <li>삼성닷컴 경험조사</li>
                <!-- 아이콘 -->
            </ul>
        </div>    
          <div class="five" >
            <H4>지속가능경영</H4>
            <ul>
                <li>환경</li>
                <li>보안 & 개인정보 보호</li>
                <li>접근성</li>
                <li>다양성·형평성·포용성</li>
                <li>사회공헌</li>
                <!-- 아이콘 -->
                <li>Conporate Susutainability</li>
                </ul>
                <ul>
                <!-- 아이콘 -->
                <h4>윤리&준법경영</h4>
                <li>경영원칙</li>
                <!-- 아이콘 -->
                <li>부정제보</li>
                <!-- 아이콘 -->
                <li>법위반제보</li>
                <!-- 아이콘 -->
            </ul>
          </div>
          <div class="six">
            <h4>회사소개</h4>
            <ul>
                <li>기업정보</li>
                <li>사업정보</li>
                <li>브랜드 아이덴티티</li>
                <li>채용용</li>
                <li>투자자 정보</li>
                <li>뉴스룸</li>
                <!-- 아이콘 -->
                <li>윤리</li>
                <li>디자인 삼성</li>
                <!-- 아이콘 -->
                <li>배당조회</li>
                <!-- 아이콘 -->
                <li>공지사항</li>
            </ul>
        <h4>부가정보</h4>
        <ul>
            <li>협력회사 사이버 신문고</li>
            <!-- 아이콘 -->
            <li>페카트리지 회수신청</li>
        </ul>
          </div>
        </aside>
        <footer class="fifth">
           <b><p>삼성전자 주식회사 대표이사:한종희 | 사업자등록번호:124-81-00998 (사업자 정보확인) | 통신판매업 신고: 2000-경기수원-0515</p>
           <p>사업장주소: 경기도 수원시 영통구 삼성로 129(매탄동) | 호스팅서비스사업자: 한국아이비엠(주) | 대표번호:02-2255-0114 | 제품/서비스/멤버십:1588-3366(통화요금:발신자부담) | 구매문의: 1588-6084 | e식품관 문의: 1811-9228
           </p></b> 
           <p>본 사이트에서 판매되는 상품 중에는 등록된 개별 판매자가 판매하는 상품이 포함되어 있습니다</p>
            <p>개별 판매자 판매 상품의 경우 삼성전자(주)는 통신판매중개업자로서 통신판매의 당사자가 아니므로, 개별 판매자가 등록한 상품, 거래정보 및 거래 등에 대해 책임을 지지 않습니다. (소비자분쟁해결기준)</p>
        <p>본 사이트의 컨텐츠는 저장권법의 보호를 받는 바 무단 전재, 복사, 배포 등을 금합니다.</p>
    </footer>
</div>
</body>
</html>
profile
풀스택 국비수강중

0개의 댓글