본문 바로가기
HTML/HTML,CSS Ex

Ex02

by 요리하다그만둠 2022. 6. 29.

작성 방법

​

1. 먼저 전체 레이아웃을 아래와 같이 구성될 수 있도록 div 박스를 구성합니다.

​

가. 전체 박스 레이아웃 : child_wear (ID)

 

1) 너비 : 700px

2) 높이 : 400px

3) 외곽선 스타일 : 실선

4) 외곽선 색 : #c9ddf8

5) 외곽선 굵기 : 2px

​

2. 다음으로 그 내부에 아래와 같이 div 박스가 구성될 수 있도록 조치합니다.

가. 상품 이미지 section : product_pic (ID)

1) 정렬(플로팅) : 왼쪽

2) 너비 : 350px

3) 높이 : 100%

4) 배경색 : #fff

5) 외곽선 : 10px

6) 내부 정렬 : 가운데

​

나. 상품 설명 section : product_detail (ID)

1) 플로팅 방향 : 왼쪽

2) 너비 : 350px

3) 높이 : 400px

4) 배경색 : #c9ddf8

 

3. 2-나.의 상품 설명 섹션(section) 내부에 들어갈 테이블을 아래와 같이 구성합니다.

​

참고로 아래 예시에서의 각 셀(cell)의 배경색은 코딩의 편이를 위해 삽입한 것이며, 실제 구현색과는 관련이 없습니다.

​

​

 

가. 상품 설명 내부 테이블 section

​

※ 간혹 웹브라우저 및 기기 상황에 따라 글꼴의 크기가 다르게 나올 수 있으니 상황에 맞게 적용하시기 바랍니다.

​

1) 정렬 및 외부와의 간격 : 10px 중앙정렬 : 순서에 유의할 것

2) 글꼴 크기 : 10pt (선택적 적용)

3) 문단내 줄간격 : 27pt (선택적 적용)

4) 글꼴 종류 : 나눔고딕

5) 글꼴색 : #333

6) 테이블 너비 : 320px

7) 외곽선 스타일 : 이중선

8) 외곽선 굵기 : 4x

9) 외곽선 색 : #fff

10) 내부간격 : 10px

11) 배경색 : #e4f0ff

 

나. 표제 타이틀 셀(상품명, 색상, 판매정가, 특별할인가)

​

1) 너비 : 70px;

2) 글꼴 형태 : 굵게

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>상품 소개</title>
    <style>
        @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

        /* 
		페이지 전체 적용 

	    1) 글꼴 : 나눔고딕
	    */

        * {}

        /* 
        화면 전체 section
        
        1) 너비 : 700px
        2) 높이 : 400px
        3) 외곽선 스타일 : 실선
        4) 외곽선 색 : #c9ddf8
        5) 외곽선 굵기 : 2px
        */
        #child_wear {}

        /* 
        상품 이미지 section
        
        1) 정렬(플로팅) : 왼쪽
        2) 너비 : 350px
        3) 높이 : 100%
        4) 배경색 : #fff
        5) 외곽선 : 10px 
		6) 내부 정렬 : 가운데
        */
        #product_pic {}

        /*
        상품 설명 section
        
        1) 플로팅 방향 : 왼쪽
        2) 너비 : 350px
        3) 높이 : 400px
        4) 배경색 : #c9ddf8
         */
        #product_detail {}

        /*
        상품 설명 내부 테이블 section
        
        1) 정렬 및 외부와의 간격 : 10px 중앙정렬 : 순서에 유의할 것
        2) 글꼴 크기 : 10pt (선택적 적용)
        3) 문단내 줄간격 : 27pt (선택적 적용)
        4) 글꼴 종류 : 나눔고딕
        5) 글꼴색 : #333
        6) 테이블 너비 : 320px
        7) 외곽선 스타일 : 이중선
        8) 외곽선 굵기 : 4x
        9) 외곽선 색 : #fff
       10) 내부간격 : 10px 
       11) 배경색 : #e4f0ff
        */
        #product_tbl1 {
            margin: 10px auto;
            /* 순서에 유의할 것 ! */

        }

        /* 상품 타이틀 */
        .product_title {}

        /* 상품 가격 */
        .product_spec_price {
            color: red;
            font-size: 12pt;
        }
    </style>
</head>

<body>

    <!-- 상품 전체 section 시작 -->
    <div id="child_wear">

        <!-- 상품 이미지 -->
        <div id="product_pic">
            <img src="small_suite.jpg">
        </div>

        <!-- 상품 설명 시작 -->
        <div id="product_detail">
            <table id="product_tbl1">
                <tr>
                    <td class="product_title">상품명</td>
                    <td>아동복 여아 체크무늬 셔츠 원피스</td>
                </tr>
                <tr>
                    <td class="product_title">색상</td>
                    <td>레드 블랙 체크</td>
                </tr>
                <tr>
                    <td class="product_title" colspan="2">
                        상품설명
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        아이 피부를 보호하는 매끈한 촉감의 쾌적면<br>
                        천연 소재 사용<br>
                        COTTON USA 인증 제품<br>
                        <b>신장</b> : 110~140cm<br>
                    </td>
                </tr>
                <tr>
                    <td class="product_title">판매정가</td>
                    <td><s>55,000(원)</s></td>
                </tr>
                <tr>
                    <td class="product_title">특별할인가</td>
                    <td class="product_spec_price">46,800(원)</td>
                </tr>
            </table>
        </div>
        <!-- 상품 설명 끝 -->

    </div>
    <!-- 상품 전체 section 끝 -->

</body>

</html>

 

 

답안

 
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>상품 소개</title>
    <style>
        @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
        /* 
		페이지 전체 적용 
	    1) 글꼴 : 나눔고딕
	    */
        * {
            font-family:  "Nanum Gothic";
        }

        #child_wear {
            /* 
        화면 전체 section
        
        1) 너비 : 700px
        2) 높이 : 400px
        3) 외곽선 스타일 : 실선
        4) 외곽선 색 : #c9ddf8
        5) 외곽선 굵기 : 2px
        */
        width: 700px;
        height: 400px;
        border : solid;
        border-width: 2px;
        border-color: #c9ddf8;

        }
        #product_pic {
            /* 
        상품 이미지 section*/
        
         
        /*
        1) 정렬(플로팅) : 왼쪽
        2) 너비 : 350px
        3) 높이 : 100%
        4) 배경색 : #fff
        5) 외곽선 : 10px 
		6) 내부 정렬 : 가운데
        */
       
        float: left;
        width: 350px;
        height: 100%;
        background-color: #fff;
        border-width: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        }

        
        #product_detail {/*
        상품 설명 section
        
        1) 플로팅 방향 : 왼쪽
        2) 너비 : 350px
        3) 높이 : 400px
        4) 배경색 : #c9ddf8
         */
        float: left;
        width : 350px;
        height: 400px;
        background-color: #c9ddf8;

          
        }
        #product_tbl1 {
              /*
        상품 설명 내부 테이블 section
        
        1) 정렬 및 외부와의 간격 : 10px 중앙정렬 : 순서에 유의할 것
        2) 글꼴 크기 : 10pt (선택적 적용)
        3) 문단내 줄간격 : 27pt (선택적 적용)
        4) 글꼴 종류 : 나눔고딕
        5) 글꼴색 : #333
        6) 테이블 너비 : 320px
        7) 외곽선 스타일 : 이중선
        8) 외곽선 굵기 : 4x
        9) 외곽선 색 : #fff
       10) 내부간격 : 10px 
       11) 배경색 : #e4f0ff
        */
        margin: 10px auto;
        font-size: 10pt;
        line-height: 27pt;
        font-family: "Nanum Gothic";
        color: #333;
        width: 320px;
        border-style: double;
        border-width: 4px;
        border-color: #fff;
        padding : 10px;
        background-color: #e4f0ff;
            
           
        }

        /* 상품 타이틀 */
        .product_title {
             /* 순서에 유의할 것 ! */
            /*상품 설명 내부 테이블 section*/
            font-weight: bold;
            width: 70px;
        
        
        }

        /* 상품 가격 */
        .product_spec_price {
            color: red;
            font-size: 12pt;
        }
    </style>
</head>

<body>

    <!-- 상품 전체 section 시작 -->
    <div id="child_wear">

        <!-- 상품 이미지 -->
        <div id="product_pic">
            <img src="small_suite.jpg">
        </div>

        <!-- 상품 설명 시작 -->
        <div id="product_detail">
            <table id="product_tbl1">
                <tr>
                    <td class="product_title">상품명</td>
                    <td>아동복 여아 체크무늬 셔츠 원피스</td>
                </tr>
                <tr>
                    <td class="product_title">색상</td>
                    <td>레드 블랙 체크</td>
                </tr>
                <tr>
                    <td class="product_title" colspan="2">
                        상품설명
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        아이 피부를 보호하는 매끈한 촉감의 쾌적면<br>
                        천연 소재 사용<br>
                        COTTON USA 인증 제품<br>
                        <b>신장</b> : 110~140cm<br>
                    </td>
                </tr>
                <tr>
                    <td class="product_title">판매정가</td>
                    <td><s>55,000(원)</s></td>
                </tr>
                <tr>
                    <td class="product_title">특별할인가</td>
                    <td class="product_spec_price">46,800(원)</td>
                </tr>
            </table>
        </div>
        <!-- 상품 설명 끝 -->

    </div>
    <!-- 상품 전체 section 끝 -->

</body>

</html>

'HTML > HTML,CSS Ex' 카테고리의 다른 글

과제 : 상품 패널 완성하기-2  (0) 2022.07.07
2022년 7월 1일 수업중 과제-2 : 반응형 웹 카페 완성하기  (0) 2022.07.01
Ex03  (0) 2022.06.30
2022년 6월 28일 수업중 과제 : 이미지(image) 포함된 문단 완성(CSS)  (0) 2022.06.28
수업중 예제  (0) 2022.06.27

관련글

티스토리툴바