[CSS] Isaknox / Organic (페이지 따라 만들기)

1. isaknox_teacher.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>Document</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        a { text-decoration: none; color: inherit; }
        li { list-style: none; }
        body { color: #2d2d2d; line-height: 1.6; font-size: 14px; }
        .inner_wrap {
            width: 1100px;
            margin: 0 auto;
        }
        img { vertical-align: top; }
        #header {
            height: 80px;
            background: #000;
            color: #fff;
            text-align: center;
            line-height: 80px;
        }
        #header * {
            vertical-align: middle;
        }
        #header img {
            vertical-align: top;
        }
        .clearBoth::after {
            content: "";
            display: block;
            clear: both;
        }
        #header ul:nth-child(1) {
            float:left;
        }
        #header h1 {
            display: inline-block;
            padding-top: 20px;
        }
        #header ul:nth-child(3) {
            float:right;
        }
        #header ul li {
            float: left;
            padding: 0 16px;
        }
        #visual {
            background: #000;
        }
        #visual img {
            width: 100%;
        }
        #quickmenu {
            border-bottom: 3px double #333;
            padding: 20px 0;
        }
        #quickmenu h2 { float: left; }
        #quickmenu ul { float: right; padding-top: 10px; }
        #quickmenu ul li { float: left; padding: 0 20px; }
        #newproduct {
            text-align: center;
            padding-bottom: 30px;
        }
        #newproduct h2 {
            padding: 20px;
        }
        #newproduct li {
            float: left;
            width: 25%; /* 각각 알아서 나눠가짐 */
        }
        #newproduct img {
            width: 80%;
        }
        #banner div {
            float: left;
        }
        #banner div:nth-child(1) {
            width: 50%;
        }
        #banner div:nth-child(2) {
            width: 50%;
        }
        #banner div:nth-child(3) {
            width: 25%;
        }
        #banner div:nth-child(4) {
            width: 25%;
        }
        #banner img{
            width: 100%; /* 이미지 키우기 */
        }
        #footer {
            padding-top: 30px;
        }
        #footer div:nth-child(1) {
            background: lightcyan;
            border-radius: 8px; /* 모서리 둥글게 */
            padding: 16px;
            text-align: center;
        }
        #footer div:nth-child(1) a {
            float: left;
        }
        #footer div:nth-child(1) ul {
            display: inline-block;
        }
        #footer div:nth-child(1) ul li {
            float: left;
            padding: 0 16px;
        }
        #footer div:nth-child(1) select {
            float: right;
        }
        #footer div:nth-child(2) p {
            float: left;
            width: 70%;
        }
        #footer div:nth-child(2) h1 {
            float: right
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <div class="inner_wrap">
                <ul>
                    <li><a href="#"><i class="material-icons">menu</i></a></li>
                    <li><a href="#"><i class="material-icons">search</i></a></li>
                    <li><a href="#"><i class="material-icons">home</i></a></li>
                </ul>
                <h1><img src="./images/top_logo.gif" alt="isaknox"></h1>
                <ul>
                    <li><a href="#">login<i class="material-icons">chevron_right</i></a></li>
                    <li><a href="#">join<i class="material-icons">chevron_right</i></a></li>
                </ul>
            </div>
        </div>
        <div id="container">
            <div id="visual">
                <div class="inner_wrap">
                    <img src="./images/visual.gif" alt="">
                </div>
            </div>
            <div id="product" class="inner_wrap">
                <div id="quickmenu" class="clearBoth">
                    <h2><img src="./images/so_title.gif" alt="isaknox"></h2>
                    <ul>
                        <li><a href="#">Brands</a></li>
                        <li><a href="#">Product</a></li>
                        <li><a href="#">Store</a></li>
                        <li><a href="#">Customer Center</a></li>
                    </ul>
                </div>
                <div id="newproduct">
                    <h2>NEW PRODUCT</h2>
                    <ul class="clearBoth">
                        <li>
                            <img src="./images/product01.gif" alt="">
                            <h3>X2D2</h3>
                            <p>링클 포커스 세럼 wrinkle</p>
                            <span>focus serum</span>
                        </li>
                        <li>
                            <img src="./images/product02.gif" alt="">
                            <h3>X2D2</h3>
                            <p>링클 포커스 세럼 wrinkle</p>
                            <span>focus serum</span>
                        </li>
                        <li>
                            <img src="./images/product03.gif" alt="">
                            <h3>X2D2</h3>
                            <p>링클 포커스 세럼 wrinkle</p>
                            <span>focus serum</span>
                        </li>
                        <li>
                            <img src="./images/product04.gif" alt="">
                            <h3>X2D2</h3>
                            <p>링클 포커스 세럼 wrinkle</p>
                            <span>focus serum</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="banner" class="inner_wrap clearBoth"> <!-- class 안에 값으로 적기 -->
                <div><img src="./images/main_banner01.gif" alt=""></div>
                <div><img src="./images/main_banner02.gif" alt=""></div>
                <div><img src="./images/main_banner03.gif" alt=""></div>
                <div><img src="./images/main_banner04.gif" alt=""></div>
            </div>
        </div>
        <div id="footer" class="inner_wrap">
            <div>
                <a href="#"><img src="./images/f_icon.gif" alt="페이스북아이콘"></a>
                <ul class="clearBoth">
                    <li><a href="#">Contact us</a></li>
                    <li><a href="#">이용약관</a></li>
                    <li><a href="#">개인정보취급방침</a></li>
                </ul>
                <select name="" id="">
                    <option value="site1">family site1</option>
                    <option value="site1">family site2</option>
                </select>
            </div>
            <div>
                <p>(주)LG생활건강 / 서울틀별시 종로구 세문안로 58 LG광화문빌딩 110-783 대표이사 차석용 / 고객상담실 080-023-7007 / 사업자등록번호 107-81-98143 COPYRIGHT & LG HOUSEHOLD HEALTH CARE LTD. 2015 ALL RIGHT RESERVED.</p>
                <h1><img src="./images/bottom_logo.gif" alt="LG생활건강"></h1>
            </div>
        </div>
    </div>
</body>
</html>

+) 이건 내가 하다 망한거 ㅎㅎㅎ

isaknox.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>Document</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <style>
        /* 초기셋팅 */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        li { list-style:  none;}
        a { text-decoration: none; color: inherit; }
        li i { color: white; }
        /* 초기셋팅 /*/
        
        .inner_container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }
        #header {
            text-align: center;
            padding-top: 20px;
            background: black;
            color: white;
        }
        #visual {
            background: black;
            font-size: 0;
        }
        #header #gnbmenu {
            float: left;
            padding-top: 5px;
        }
        #header #menu {
            float: right;
            padding-top: 5px;
        }
        #header #menu li {
            float: left;
            padding: 0 15px;
        }
        #header h1 {
            display: inline-block;
        }
        #header #gnbmenu li {
            float: left;
            padding: 0 15px;
        }
        .clearBoth::after { /* float 쓸 때 미리 만들기, 얘 필수 무조건 ! */
            content: "";
            display: block;
            clear: both;
        } 
        #visual {
            text-align: center;
        }
        #productLink h2 {
            float: left;
        }
        #productLink ul {
            float: right;
            padding-top: 10px;
        }
        #productLink li {
            float: left;
            padding-right: 20px;
        }
        #productLink {
            padding: 20px 0 60px 0;
            border-bottom: 3px double #ccc;
        }
        #newProduct h2 {
            font-size: 24px;
            text-align: center;
            padding-top: 24px;
            font-style: normal;
        }
        #newProduct ul {
            float: right;
        }
        #newProduct li {
            float: left;
        } 
        #newProduct {
            text-align: center;
        }
    </style>
</head>
<body>
	<div id="wrap">
        <!-- 상단영역 -->
        <div id="header">
            <div class="inner_container" class="clearBoth">
                <ul id="gnbmenu">
                    <li><a href="#"><i class="material-icons">menu</i></a></li>
                    <li><a href="#"><i class="material-icons">search</i></a></li>
                    <li><a href="#"><i class="material-icons">store_mall_directory</i></a></li>
                </ul>
                <h1><img src="/images/top_logo.gif" alt="isakonox"/></h1>
                <ul id="menu">
                    <li><a href="#">Login<i class="material-icons">chevron_right</i></a></li>
                    <li><a href="#">Join<i class="material-icons">chevron_right</i></a></li>
                </ul>
            </div>
        </div>
        <!-- 상단영역 /-->
        <!-- 본문영역 -->
        <div id="container" >
            <!-- 비주얼영역 -->
            <div id="visual" class="clearBoth">
                <div class="inner_container">
                    <img src="/images/visual.gif" alt="모델과 화장품 이미지"/>
                </div>
            </div>
            <!-- 비주얼영역 /-->
            <!-- 제품링크영역 -->
            <div id="productLink" class="inner_container" class="clearBoth">
                <h2><img src="/images/so_title.gif" alt="isaknox" /></h2>
                <ul>
                    <li><a href="#">Brand</a></li>
                    <li><a href="#">Product</a></li>
                    <li><a href="#">Store</a></li>
                    <li><a href="#">Customer Center</a></li>
                </ul>
            </div>
            <!-- 제품링크영역 /-->
            <!-- 신상품영역 -->
            <div id="newProduct" class="inner_container" class="clearBoth">
                <h2>NEW PRODUCT</h2>
                <ul>
                    <li>
                        <img src="/images/product01.gif" alt="제품사진1"/>
                        <div>
                            X2D2</br>
                            링클 포커스 세럼</br>
                            wrinklefocus serum
                        </div>
                    </li>
                    <li>
                        <img src="/images/product02.gif" alt="제품사진2"/>
                        <div>
                            X2D2</br>
                            링클 포커스 세럼</br>
                            wrinklefocus serum
                        </div>
                    </li>
                    <li>
                        <img src="/images/product03.gif" alt="제품사진3"/>
                        <div>
                            X2D2</br>
                            링클 포커스 세럼</br>
                            wrinklefocus serum
                        </div>
                    </li>
                    <li>
                        <img src="/images/product04.gif" alt="제품사진4"/>
                        <div>
                            X2D2</br>
                            링클 포커스 세럼</br>
                            wrinklefocus serum
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 신상품영역 /-->
            <!-- 배너영역 -->
            <div id="banner" class="inner_container">
                <div>
                    <img src="/images/main_banner01.gif" alt="배너1"/>
                </div>
                <div>
                    <img src="/images/main_banner02.gif" alt="배너2"/>
                </div>
                <div>
                    <img src="/images/main_banner03.gif" alt="배너3"/>
                </div>
                <div>
                    <img src="/images/main_banner04.gif" alt="배너4"/>
                </div>
            </div>
            <!-- 배너영역 /-->
        </div>
        <!-- 본문영역 /-->
        <!-- 하단영역 -->
        <div id="footer" class="inner_container">
            <div>
                <a href="#"><img src="/images/f_icon.gif" alt="페이스북 바로가기"/></a>
                <ul>
                    <li><a href="#"> Contact us</a></li>
                    <li><a href="#"> 이용약관</a></li>
                    <li><a href="#"> 개인정보 취급방침</a></li>
                </ul>
                <select>
                    <option>familysite</option>
                    <option>관련사이트1</option>
                    <option>관련사이트2</option>
                </select>
            </div>
            <div>
                <p> (주)LG생활건강 / 서울틀별시 종로구 세문안로 58 LG광화문빌딩 110-783 대표이사 차석용
                    / 고객상담실 080-023-7007 / 사업자등록번호 107-81-98143 COPYRIGHT & LG HOUSEHOLD HEALTH CARE LTD.
                2015 ALL RIGHT RESERVED.</p>
                <img src="/images/bottom_logo.gif" alt="LG생활건강"/>
            </div>
        </div>
        <!-- 하단영역 /-->
		</div>
    </div>
</body>
</html>

2. organic.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>Document</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { color: #2d2d2d; line-height: 1.6; font-size: 14px; background: #fbfbfb; }
        #wrap {
            width: 1000px;
            margin: 0 auto;

        }
        #header h1 {
            text-align: center;
            font-size: 58px;
        }
        #header h2 {
            text-align: center;
            font-size: 32px;
            font-weight: lighter;
        }
        #header p {
            text-align: center;
        }
        #container {
            border-bottom: 1px solid #ccc;
            padding-bottom: 40px;
        }
        #greenimg {
            padding-top: 40px;
            float: left;
            width: 30%;
            /* background: pink; */
        }
        .content {
            padding-top: 40px;
            padding-left: 50px;
            width: 70%;
            /* background: lightcyan; */
            float: right;
            line-height: 1.4;
        }
        .clearBoth::after {
            content: "";
            display: block;
            clear: both;
        }
        .content p {
            padding-top: 10px;;
        }
        .content ul {
            padding-left: 20px;
            padding-top: 10px;
        }
        #profile {
            float: right;
        }
        #profile p {
            float: left;
            text-align: right;
            padding-right: 10px;
        }
        #profile img {
            float: left;
        }
        .styleview {
            padding-top: 30px;
            padding-bottom: 30px;
            width: 100%;
        }
        #pic1 {
            float: left;
            width: 33.333%;
        }
        #pic2 {
            float: left;
            padding-left: 15px;
            width: 33.333%;
        }
        #pic3 {
            float: right;
            padding-left: 30px;
            width: 33.333%;
        }
        #pic1 p {
            float: left;
        }
        #pic2 p {
            float: left;
        }
        #pic3 p {
            float: left;
        }
        #pic1 a {
            padding-left: 70px;
        }
        #pic2 a {
            padding-left: 35px;
        }
        #pic3 a {
            padding-left: 30px;
        }
        .styleview h3 {
            padding-bottom: 10px;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <h1>ORGANIC</h1>
            <h2>오가닉</h2>
            <p>러프한 소재와 함께 자연 속의 공간을 풍부하게 경험할 수 있는 오가닉한 스타일</p>
        </div>
        <div id="container" class="clearBoth">
            <div id="greenimg"><img src="./images/green_img.gif" alt="오가닉디자인"></div>
            <div class="content">
                <h3><img src="./images/title03_01.gif" alt="컨셉설명"></h3>
                <p>내추럴 컨셉을 표방하는 오가닉 네이처는 예스럽지만 세련된 느낌의 공간으로 중년층의 라이프 스타일과 취향을 반영한 스타일입니다. 
                    전체적으로 밝은 아이보리와 베이지, 브라운 컬러를 사용하여 생활에 지친 사람들에게 쉼과 힐링을 제공하는 인테리어입니다.</p>
                <ul>
                    <li>자연 친화적인 공간 연출</li>
                    <li>자재: 티크나 월넛 수종의 바닥재, 텍스처가 살아있는 벽지, 나뭇결의 거친 느낌을 강조한 도어</li>
                    <li>소품: 자연소재 그대로의 스툴, 나뭇가지 형태의 플로어램프, 한국적 저어의 툇마루 공간, 모던하게 재해석한 사방탁자</li>
                </ul>
            </div>
            <div id="profile" >
                <p>책임디자이너 <br> 김미화</p>
                <img src="./images/photo.gif" alt="책임디자이너김미화">
            </div>
            <div class="content">
                <h3><img src="./images/title03_02.gif" alt="라이프스타일"></h3>
                <h3><img src="./images/title04.gif" alt="그린라이프스타일"></h3>
                <p>물질적인 풍요를 바라기 보다 현재 상황에 만족하고 감사함을 가지며 소외된 계층에 관심을 가지고 
                    더불어 잘사는 사회를 만들기 위해 작은 금액이라도 나눔을 실천하려고 노력합니다. 
                    그린라이프 스타일의 사람들은 자연의 느낌을 좋아하지만 그렇다고 도시에서 멀리 떨어진 곳에서 살려고 하지는 않습니다. 
                    대신 자연의 아름다움을 담은 주거 공간에서의 삶을 살고자 합니다.</p>
            </div>
        </div>
        <div id="footer">
            <div class="styleview clearBoth">
                <h3><img src="./images/title03_03.gif" alt="스타일뷰"></h3>
                <div id="pic1" class="clearBoth">  
                    <img src="./images/view_img01.gif" alt="오가닉키워드">
                    <p>Keyword <span>| 오가닉키워드</span></p>
                    <a href="#"><img src="./images/detail_view.gif" alt="자세히보기"></a>
                </div>
                <div id="pic2" class="clearBoth">
                    <img src="./images/view_img02.gif" alt="오가닉키워드">
                    <p>Image Map <span>| 오가닉이미지맵</span></p>
                    <a href="#"><img src="./images/detail_view.gif" alt="자세히보기"></a>
                </div>
                <div id="pic3" class="clearBoth">
                    <img src="./images/view_img03.gif" alt="오가닉키워드">
                    <p>Material Photo <span>| 오가닉마감재</span></p>
                    <a href="#"><img src="./images/detail_view.gif" alt="자세히보기"></a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

드디어 float만으로 페이지 구성 성공 !

스타일뷰 밑에 사진 더 깔끔하게 정리하는 방법이 있을텐데에 ~

'Stack > CSS' 카테고리의 다른 글

[CSS] Igloo (페이지 따라 만들기 2) (0)	2022.04.13
[CSS] hover / position / overflow / transition / transform 연습 (0)	2022.04.12
[CSS] display / float 복습 또 복습 (0)	2022.04.11
[CSS] 의사 요소 (before / after) (0)	2022.04.11
[CSS] float 복습 끄적끄적 (0)	2022.04.11

'Stack > CSS' 카테고리의 다른 글

티스토리툴바