[HTML] 홈페이지 마크업

2022. 4. 6. 17:53·Stack/HTML

https://www.gowoonsesang.com/story/view?idx=36 

 

고운세상 코스메틱

고운세상 코스메틱 웹사이트

www.gowoonsesang.com

<!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>
</head>
<body>
    <div id="wrap">
        <!-- 상단영역 -->
        <div id="header">
            <div>
                <h1>
                    <a href="#"><img src="./images/logo.png" alt="고운세상"></a>
                </h1>
                <ul>
                    <li><a href="#">About Us</a>
                        <ul>
                            <li><a href="#">기업소개</a></li>
                            <li><a href="#">연혁</a></li>
                            <li><a href="#">CEO 메시지</a></li>
                            <li><a href="#">고운세상</a></li>
                            <li><a href="#">글로벌 네트워크</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Brands</a>
                        <ul>
                            <li><a href="#">Dr. G</a></li>
                            <li><a href="#">스킨 솔루션</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Sustainability</a>
                        <ul>
                            <li><a href="#">고운실천</a></li>
                            <li><a href="#">윤리경영</a></li>
                        </ul>
                    </li>
                    <li><a href="#">News</a>
                        <ul>
                            <li><a href="#">고운이야기</a></li>
                            <li><a href="#">공지사항</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Careers</li></a>
                    <li><a href="#">Contact</li></a>
                </ul>
                <div>
                    <!-- 검색영역 -->
                    <div>
                        <div><img src="./images/gnb-search.png" alt="돋보기검색아이콘"></div>
                        <div>
                            <div><input type="text"></div>
                            <div class="bg_lightgray"><a href="#">닫기</a></div>
                        </div>
                    </div>
                    <!-- 검색영역 //-->
                    <!-- 언어선택 -->
                    <div>
                        <div>KO</div>
                        <div>
                            <ul>
                                <li class="active">KO</li>
                                <li>EN</li>
                            </ul>
                        </div>
                    </div>
                    <!-- 언어선택 //-->
                </div>
            </div>
        </div>
        <!-- 상단영역 /-->
        <!-- 본문영역 -->
        <div id="container">
            <!-- 메인 비쥬얼영역 -->
            <div id="visual">
                <!-- 왼쪽sns -->
                <div>
                    <ul>
                        <li><a href="#"><img src="./images/gnb-sns04-1.png" alt="블로그바로가기"></a></li>
                        <li><a href="#"><img src="./images/gnb-sns01-1.png" alt="블로그바로가기"></a></li>
                        <li><a href="#"><img src="./images/gnb-sns02-1.png" alt="블로그바로가기"></a></li>
                        <li><a href="#"><img src="./images/gnb-sns03-1.png" alt="블로그바로가기"></a></li>
                    </ul>
                    <div>
                        <a href="#"><img src="./images/go-btn.png" alt=""></a>
                    </div>
                </div>
                <!-- 왼쪽sns //-->
                <!-- 비쥬얼 -->
                <div>
                    <!-- 이미지 -->
                    <div>
                        <img src="./images/visual.jpg" alt="">
                    </div>
                    <!-- 이미지 //-->
                    <!-- 텍스트 -->
                    <div>
                        <p><span>01</span>Gowoonsesang Cosmetics</p>
                        <h2>누구나 피부를 건강하게</h2>
                        <p>우리는 피부 과학으로 세상을 더 건강하고 <br>아름답게 만들고 있습니다.</p>
                    </div>
                    <!-- 텍스트 //-->
                </div>
                <!-- 비쥬얼 //-->
            </div>
            <!-- 메인 비쥬얼영역 //-->
            <!-- 메인 두번째 영역 -->
            <div id="mainMentor">
                <div>
                    <div>
                        <div><img src="./images/ecb97805-9900-42c6-86f6-ebb227b0521e.jpg" alt="사람"></div>
                        <div>
                            <a href="#"><img src="./images/more-btn.jpg" alt=""></a>
                        </div>
                    </div>
                    <div> 
                        <p><span>02</span>Gowoonsesang Cosmetics</p>
                        <h2>함께 성장하는 고운세상</h2>
                        <p>
                            고운세상코스메틱은 누구나 건강한 피부로 행복한 삶을 누리는 세상을 꿈꿉니다.
                            이러한 뜻을 함께하는 사람들이 모여 도전과 성장, 소통과 협력으로
                            
                            고운세상의 아름다운 문화를 만들어 갑니다.
                            임직원 모두가 ‘피부과학 전문가’로 활동하며, 함께 ‘성장하는 고운세상’을 그려가고 있습니다.
                        </p>
                    </div>
                </div>
                <div><img src="./images/main-mentor-bg.png" alt="mentor"></div>
            </div>
            <!-- 메인 두번째 영역 //-->
            <!-- 메인뉴스 영역 -->
            <div id="mainNews">
                <div> 
                    <p><span>03</span>Gowoonsesang Cosmetics</p>
                    <h2>고운세상 이야기</h2>
                    <div>
                       <a href="#">
                            View more <span><img src="./images/more-btn.jpg" alt=""></span>
                       </a>
                    </div>
                </div>
                <div>
                    <ul>
                        <li>
                            <a href="#">
                            <div>
                                <img src="./images/2f7e9856-bfc9-47af-9713-d6c26de4.jpg" alt="">
                            </div>
                            <div>
                                <span>2022-03-15</span>
                                <h3>더마코스메틱 ‘닥터지(Dr.G)’, 배우 송중기와 브랜드 모델 계약 체결</h3>
                                <span class="viewMore">niew more</span>
                            </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                            <div>
                                <img src="./images/2f7e9856-bfc9-47af-9713-d6c26de4.jpg" alt="">
                            </div>
                            <div>
                                <span>2022-03-15</span>
                                <h3>더마코스메틱 ‘닥터지(Dr.G)’, 배우 송중기와 브랜드 모델 계약 체결</h3>
                                <span class="viewMore">niew more</span>
                            </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                            <div>
                                <img src="./images/2f7e9856-bfc9-47af-9713-d6c26de4.jpg" alt="">
                            </div>
                            <div>
                                <span>2022-03-15</span>
                                <h3>더마코스메틱 ‘닥터지(Dr.G)’, 배우 송중기와 브랜드 모델 계약 체결</h3>
                                <span class="viewMore">niew more</span>
                            </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                            <div>
                                <img src="./images/2f7e9856-bfc9-47af-9713-d6c26de4.jpg" alt="">
                            </div>
                            <div>
                                <span>2022-03-15</span>
                                <h3>더마코스메틱 ‘닥터지(Dr.G)’, 배우 송중기와 브랜드 모델 계약 체결</h3>
                                <span class="viewMore">niew more</span>
                            </div>
                            </a>
                        </li>
                    </ul>
                </div>

            </div>
            <!-- 메인뉴스 영역 //-->
            <!-- 메인 사회공헌 영역 -->
            <div id="mainContri">
                <div> 
                    <p><span>04</span>Gowoonsesang Cosmetics</p>
                    <h2>고운세상 사회공헌</h2>
                    <div>
                       <a href="#">
                            View more <span><img src="./images/more-btn.jpg" alt=""></span>
                       </a>
                    </div>
                </div>
                <ul>
                    <li>
                        <div><img src="./images/2cb52cb7-5bfc-4d8b-acc2-240e4e31445a.jpg" alt=""></div>
                        <div>
                            <h3>점자 표기</h3>
                            <p>닥터지는 누구나 원하는 제품을 선택하고 소비자의 권리를 누릴 자격이 있다고 생각합니다. 
                                시각 장애인 고객의 제품 사용 어려움을 개선하고자 2012년부터 단상자에 제품 유형을 점자로 표기하고 있습니다.</p>
                        </div>
                    </li>
                    <li>
                        <div><img src="./images/2f07d310-765d-4616-92e4-f0cd14f91d6a.jpg" alt=""></div>
                        <div>
                            <h3>초록우산 정기 후원</h3>
                            <p>닥터지는 피부 고민으로 어려움을 겪는 어린이들을 돕기 위해 초록우산 어린이재단과 인연을 맺고 2019년부터 정기적인 후원을 하고 있습니다. 
                                지난 2020년에는 유아용 선케어 ‘닥터지 베이비 마일드 업 선’ 제품 판매액의 10% 기부하는 프로젝트도 전개했습니다. 
                                해당 제품의 용기와 패키지에는 초록우산 어린이재단과 함께 하는 아이들이 직접 그린 그림도 담아 기업의 진정성을 더했습니다. 
                                2021년에도 총 5,000만 원의 지원금을 전달했으며 지속해서 치료에 필요한 물품을 적극 지원할 예정입니다.</p>
                        </div>
                    </li>
                    <li>
                        <div><img src="./images/8cc0e539-6e76-441b-966c-8ee405e2b782.jpg" alt=""></div>
                        <div>
                            <h3>피부과학연구재단 정기 지원</h3>
                            <p>국내 피부과학 연구 역량과 경쟁력 향상을 위한 지원을 이어가고 있습니다. 
                                2020년부터 피부과학연구재단에 매년 5,000만 원의 연구비를 국내 피부과 전공의와 교수들의 학술 지원과 피부 과학 연구를 위해 지원하고 있습니다.</p>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 메인 사회공헌 영역 //-->
        </div>
        <!-- 본문영역 /-->
        <!-- 하단영역 -->
        <div id="footer">
            <div>
                <div>
                    <div>
                        <a href="#"><img src="./images/footer-logo01.png" alt="gowoonsesang"></a>
                        <a href="#"><img src="./images/footer-logo02.png" alt="고운세상"></a>
                    </div>
                    <a href="#">Go to Dr.G Site</a>
                </div>
                <div>
                    <p>
                        <span>(주) 고운세상 코스메틱</span>
                        <span>대표이상:이주호</span>
                        <span>주소:경기도 성남시 분당구 분당 로55 퍼스트타워 11F</span>
                        <span>대표전화: 031-724-9000</span>
                    </p>
                    <a href="#">개인정보처리방침</a>
                </div>
            </div>
            <div>
                <p>COPYRIGHT 2022. GOWOONSESANG COSMETICS CO.,LTD.</p>
                <a href="#"><img src="./images/top-icon.png" alt="페이지 위로"></a>
            </div>
        </div>
        <!-- 하단영역 /-->
    </div>
</body>
</html>

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

[HTML] HTML5 시멘틱태그  (0) 2022.04.14
[HTML] label 태그  (0) 2022.04.05
[HTML] div / form 태그  (0) 2022.04.05
[HTML] p / a 태그  (0) 2022.04.05
[HTML] index / list / text / table / image / video 태그  (0) 2022.04.04
'Stack/HTML' 카테고리의 다른 글
  • [HTML] HTML5 시멘틱태그
  • [HTML] label 태그
  • [HTML] div / form 태그
  • [HTML] p / a 태그
7ingout
7ingout
  • 7ingout
    Hello, 7ingout world!
    7ingout
  • 전체
    오늘
    어제
    • 분류 전체보기 (205)
      • Project (5)
      • Stack (173)
        • React (40)
        • JavaScript (50)
        • TypeScript (14)
        • HTML (11)
        • CSS (31)
        • Spring (9)
        • PHP (15)
        • SQL (3)
        • Python (0)
      • ETC (9)
      • Design (13)
        • Illustrator (6)
        • Photoshop (7)
      • Articloid (4)
        • 7ingout (4)
  • 공지사항

    • ☻
  • 인기 글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
7ingout
[HTML] 홈페이지 마크업
상단으로

티스토리툴바