Skip to content

KDT5_LeeYongSoo #60

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dragon-it wants to merge 4 commits into
base: main
Choose a base branch
from
Open

KDT5_LeeYongSoo #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0574323
Create project
dragon-it Apr 5, 2023
5d875aa
modify 1.0.1
dragon-it Apr 9, 2023
924e6a3
modify 1.0.2
dragon-it Apr 9, 2023
ca4b69e
1.1.2
dragon-it Apr 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
789 changes: 789 additions & 0 deletions CI/CI.css
View file
Open in desktop

Large diffs are not rendered by default.

288 changes: 288 additions & 0 deletions CI/CI.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,288 @@
<!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>CI 소개 l 회사소개 l 풀무원</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.css">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="../CI/CI.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gothic+A1:wght@500;600;700&family=Gowun+Dodum&family=Noto+Sans+KR:wght@500;700&display=swap" rel="stylesheet">
<script defer src="../js/main.js"></script>
</head>
<body>
<!-- HEADER -->
<section id="section1">
<header>
<div class="inner">
<div class="header_wrap">

<a href="/" class="header_logo">
<img src="../images/logo.png" alt="pulmuone">
</a>

<div class="sub_menu">
<ul class="menu">
<li><a href="https://pulmuone.recruiter.co.kr/appsite/company/index" target="_blank"><img src="../images/top_icon01.png" alt="인재채용">
인재채용</a></li>
<li><a href="https://cs.pulmuone.kr:3443/customer/?gubun=&searchField=&searchWord=&part1=&part2=&page=2&upart=" target="_blank"><img src="../images/top_icon02.png" alt="고객기쁨센터">
고객기쁨센터</a></li>
<li><a href="https://shop.pulmuone.co.kr/" target="_blank"><img src="../images/top_icon03.png" alt="#풀무원">
#풀무원</a></li>
</ul>
</div>

<div class="main_menu_wrap">
<ul class="main_menu">
<li><a href="../company/ceo.html">회사소개</a></li>
<li><a href="../management/overview.html">사회책임경영</a></li>
<li><a href="../viewLohas/viewLohas.html">바른먹거리</a></li>
<li><a href="https://news.pulmuone.co.kr/">뉴스룸</a></li>
</ul>
</div>


<div class="search_wrap">
<input type="search" class="search_box">
<img src="../images/search_icon.png" alt="search_icon">
</div>
<div class="language_select_wrap">
<select name="" id="" class="language_select_box">
<option value="KOR">KOR</option>
<option value="ENG">ENG</option>
<option value="CHN">CHN</option>
<option value="JPN">JPN</option>
</select>
</div>
</div>


<div class="main_menu_items_wrap">
<ul class="main_menu_items">
<li><a href="../company/ceo.html">총괄CEO인사말</a></li>
<li><a href="../CI/CI.html">CI소개</a></li>
<li><a href="../history/history.html">연혁</a></li>
<li><a href="../value/value.html">가치체계</a></li>
<li><a href="../business/business.html">사업소개</a></li>
<li><a href="../with/with.html">동반성장</a></li>
<li><a href="../corpover/corpover.html">기업지배구조</a></li>
<li><a href="../manageinfo/manageinfo.html">투자정보</a></li>
</ul>
<ul class="main_menu_items">
<li><a href="../management/overview.html">개요</a></li>
<li><a href="../strategy/strategy.html">추진전략</a></li>
<li><a href="../activity/activity.html">활동 및 실적</a></li>
<li><a href="../result/result.html">수상</a></li>
</ul>
<ul class="main_menu_items">
<li><a href="../viewLohas/viewLohas.html">지속가능 식생활</a></li>
<li><a href="../food/food.html">지속가능식품</a></li>
<li><a href="../rule/rule.html">바른먹거리 원칙</a></li>
<li><a href="../campaign/campaign.html">바른먹거리 캠페인</a></li>
<li><a href="../foodevent2/foodevent.html">풀무원 지구식단</a></li>
</ul>
<ul class="main_menu_items">
<li><a href="https://news.pulmuone.co.kr/pulmuone/newsroom/listPulmuone.do?menu=311">풀무원뉴스</a></li>
<li><a href="https://news.pulmuone.co.kr/pulmuone/newsroom/listEsgMain.do">ESG경영</a></li>
<li><a href="https://news.pulmuone.co.kr/pulmuone/newsroom/listMultimedia.do?menu=341">멀티미디어</a></li>
<li><a href="https://news.pulmuone.co.kr/pulmuone/newsroom/listDataroom.do">자료&공지</a></li>
</ul>
<div class="main_menu_image_wrap">
<div class="main_menu_image_left">
<a href="https://www.kimchikan.com/" target="_blank"><img src="../images/20170224161048_뮤지엄김치간2.jpg"></a>
</div>
<div class="main_menu_image_right">
<a href="https://shop.pulmuone.co.kr/orga" target="_blank"><img src="../images/20181015093133_올가.jpg"></a>
</div>
</div>
</div>
</div>
<div class="home_wrap">
<div class="home_move">
<div class="home">
<a href="../index.html">
<img src="../images/loca_home.png" alt="home">
</a>
</div>
<div class="home_main_menu">
<ul>
<div>회사소개 ▾</div>
<div class="home_sub_menu">
<li><a href="../company/ceo.html">회사소개</a></li>
<li><a href="../management/overview.html">사회책임경영</a></li>
<li><a href="../viewLohas/viewLohas.html">바른먹거리</a></li>
<li><a href="https://news.pulmuone.co.kr/">뉴스룸</a></li>
</div>
</ul>
</div>
<div class="home_main_menu2">
<ul>
<div>CI 소개 ▾</div>
<div class="home_sub_menu2">
<li><a href="../company/ceo.html">총괄CEO인사말</a></li>
<li><a href="../CI/CI.html">CI소개</a></li>
<li><a href="../history/history.html">연혁</a></li>
<li><a href="../value/value.html">가치체계</a></li>
<li><a href="../business/business.html">사업소개</a></li>
<li><a href="../with/with.html">동반성장</a></li>
<li><a href="../corpover/corpover.html">기업지배구조</a></li>
<li><a href="../manageinfo/manageinfo.html">투자정보</a></li>
</div>
</ul>
</div>
</div>
<div>
<img src="../images/sub_vis04_01.jpg" alt="top_menu_image">
</div>
</div>
</header>

<main>
<div class="main_wrap">
<div class="main_title">
<h1>CI 소개</h1>
<div></div>
</div>
<div class="main_ci">
<span>자연과 인간의 건강한 미소.<p>
<strong>‘자연을 담는 큰 그릇’</strong>을 표현합니다.
<img src="../images/img_pul03.jpg" alt="ceo">
</span>
</div>
<div class="main_ci2">
<span>
‘풀무’는 대장간에서 쇠를 달구는 화덕에 불을 피울 때 바람을 일으키는 도구입니다. <br>
낡은 연장은 풀무질로 뜨거워진 화덕에서 달군 뒤 두들겨야 새 연장으로 태어납니다. <br>
농부 원경선은 농장을 세우고 ‘인간 풀무질’로 새 사람을 만드는 터전이라는 뜻을 담아 그 이름을 ‘풀무원’이라고 붙였습니다. <br>
원경선의 한 세기에 이르는 삶이 사람과 세상을 옳게 변화시키는 지칠 줄 모르는 풀무질이었듯, <br>
풀무원은 ‘나와 내 가족의 건강, <br>
더 나아가 지구환경의 건강까지 두루 살피는 LOHAS’를 풀무질합니다.<br>
</span>
</div>
<div class="main_ci3">
<span>
<h1>풀무원 CI의 가치<br></h1>
<h2>한국인이 가장 좋아하는 한글 브랜드,<br>
전문디자이너가 꼽은 '가장 인상적인 한국의 디자인 프로젝트 50'중 하나.</h2>
풀무원 CI(Corporate Identity)와 풀무원 디자인은 풀무원만의 참신하고 차별화된 정체성을 표현하며 고객과 전문가들로부터 찬사를 받아왔습니다. '풀무원'이라는 아름다운 이름과 함께 '언제 어디서 보아도 풀무원다운' CI는 한국 디자인 역사에 불은 지핀 탁월하고 소중한 프로젝트로 꼽히고 있습니다.
</span>
<div class="main_ci_logo">
<img src="../images/img_pul15.gif" alt="logo">
</div>
</div>
<div class="main_ci3">
<span>
<h1>풀무원 CI의 심벌<br></h1>
<h2></h2>
'인간과 자연을 함께 사랑하는 로하스 기업' 풀무원이 지향하는 자연과 인간의 조화로운 삶을 시각화 했습니다. 양 끝자락이 살짝 올라간 리드미컬한 곡선은 자연과 인간의 건강한 미소와 '자연을 담는 큰 그릇'을 표현합니다.
</span>
<div class="main_ci_logo">
<img src="../images/img_pul16.gif" alt="logo">
</div>
</div>
<div class="main_ci3">
<span>
<h1>풀무원 CI 코퍼레이트 로고 타입<br></h1>
유연하고 친근하며, 자연스럽고 경쾌한 풀무원입니다. 세리프(돌기)가 있는 글자 모양으로 정성스러운 손글씨 느낌을 살려 친근함을 더했습니다. 고객의 곁으로 좀 더 다가가 고객과 함께, 고객의 입장에서 이야기하고픈 풀무원의 바람을 담았습니다.
</span>
<div class="main_ci_logo">
<img src="../images/img_pul17.gif" alt="logo">
</div>
</div>
<div class="down_box">
<a href="https://www.pulmuone.co.kr/pulmuone/common/dataFileDownload.do?fileName=%ED%92%80%EB%AC%B4%EC%9B%90%20CI%20%EB%A7%A4%EB%89%B4%EC%96%BC.zip">
<img src="../images/btn_down01.gif" alt="btn">풀무원 CI 매뉴얼 다운로드
</a>
</div>
</div>
</main>


<!-- FOOTER -->
<footer>
<div class="footer_wrap">
<div class="footer_logo">
<img src="../images/ft_logo.gif" alt="footer_logo">
</div>
<div class="footer_information">
<span><a href="../policy/policy.html">개인정보처리방침</span></a>
<span><a href="../email/email.html">이메일주소 무단수집 거부</span></a>
<span><a href="https://cp.pulmuone.kr:3444/cyber/">사이버감사실</span></a>
<span><a href="https://tour.pulmuone.kr:3445/factory/">공장견학</span></a>
<span><a href="https://pulmuone.recruiter.co.kr/appsite/company/index">풀무원채용</span></a>
</div>
<div class="footer_location">
<span>법인명 : (주)풀무원</span>
<span>서울시 강남구 광평로 280 로즈데일빌딩</span>
<span>대표전화:080-022-0085</span><p>
<span class="copyright">Copyright ⓒ Pulmuone Corporate All Rights Reserved.</span>
</div>
<div class="footer_sns">
<span>공식계정</span>
<li><a href="https://www.facebook.com/pulmuonelove" target="_blank"><img src="../images/icon_ft_sns01.gif" alt="facebook"></a></li>
<li><a href="http://pulmuone.tistory.com/" target="_blank"><img src="../images/icon_ft_sns02.gif" alt="facebook"></a></li>
<li><a href="https://twitter.com/yalp_mandu" target="_blank"><img src="../images/icon_ft_sns03.gif" alt="facebook"></a></li>
<li><a href="https://www.youtube.com/user/pulmuonelove" target="_blank"><img src="../images/icon_ft_sns04.gif" alt="facebook"></a></li>
<li><a href="https://www.instagram.com/pulmuone/" target="_blank"><img src="../images/sns09.jpg" alt="facebook"></a></li>
<li><a href="https://post.naver.com/my.nhn?memberNo=29383844" target="_blank"><img src="../images/sns08.png" alt="facebook"></a></li>
<div class="footer_affiliate">
<span class="modal">계열사/브랜드 사이트
<div class="mini_modal">
<ul class="modal_box">
<div>풀무원</div>
<li><a href="https://www.kimchikan.com/">뮤지엄김치간</a></li>
<li><a href="https://shop.pulmuone.co.kr/">#풀무원</a></li>
<li><a href="https://pulmuone.recruiter.co.kr/appsite/company/index">풀무원채용</a></li>
<li><a href="https://efresh.pulmuone.co.kr/ef/member/main">efresh 모니터</a></li>
<li><a href="http://www.pulmuonefoundation.org/">풀무원재단</a></li>
</ul>
<ul class="modal_box">
<div>계열사</div>
<li><a href="http://www.pulmuonegreenjuice.com/">풀무원녹즙</a></li>
<li><a href="http://www.foodmerce.com/">풀무원푸드머스</a></li>
<li><a href="http://www.ecmd.co.kr/">풀무원푸드앤컬처</a></li>
<li><a href="http://www.danone.co.kr/">풀무원다논</a></li>
<li><a href="http://www.pulmuonewater.com/">풀무원샘물</a></li>
<li><a href="http://www.pulmuonefoodsusa.com/">Pulmuone Foods USA</a></li>
<li><a href="https://www.pulmuone-lohas.com/">풀무원건강생활</a></li>
<li><a href="http://www.asahico.co.jp/">아사히코</a></li>
<li><a href="http://www.pumeiduo.com/">푸메이뚜어</a></li>
</ul>
<ul class="modal_box">
<div>브랜드</div>
<li><a href="https://www.pulmuoneamio.com/">풀무원아미오</a></li>
<li><a href="https://dm.pulmuone.com/">디자인밀</a></li>
<li><a href="https://www.pulmuone-lohas.com/pc/brand/index.do">풀무원로하스</a></li>
<li><a href="https://www.montereygourmetfoods.com/">Montereygourmetfoods</a></li>
<li><a href="https://wildwoodfoods.com/">WILDWOOD</a></li>
<li><a href="https://www.nasoya.com/">Nasoya Foods USA</a></li>
<li><a href="https://choolchool.kr/">출출박스</a></li>
</ul>
</div>
</span>
</div>
<div>
<img src="../images/icon_footer_220822.png" alt="">
</div>
</div>
</div>
</footer>

</section>










</body>
</html>
50 changes: 14 additions & 36 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,23 @@
# 👀 자신이 원하는 사이트 레이아웃 클론
# 사이트 클론

원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.
평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.
과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
레퍼런스 사이트 : https://www.pulmuone.co.kr/pulmuone/main/Index.do#anchor1
클론 코딩 사이트 : https://rainbow-salmiakki-81ec15.netlify.app

## 과제 수행 및 제출 방법

1. 현재 저장소를 로컬에 클론(Clone)합니다.
1. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, `git branch KDT0_ParkYoungWoong`)
1. 자신의 본명 브랜치에서 과제를 수행합니다.
1. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(`main` 브랜치에 푸시하지 않도록 꼭 주의하세요, `git push origin KDT0_ParkYoungWoong`)
1. 저장소에서 `main` 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, `main` <== `KDT0_ParkYoungWoong`)
# 완성도

- `main` 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
50%도 되지 않지만 기본적으로 헤더, 푸터, 사이트 연결 등 공통적으로 포함되어 있는 부분은 연결 해놓았습니다.

## 필수 요구사항
# 설명

- [ ] 과제에 대한 설명을 포함한 `README.md` 파일을 제공하세요!
- [ ] 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
- [ ] 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요!
- [ ] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
헤더 부분의 풀드랍 부분과 서브 메뉴바에만 간단한 자바스크립트를 사용하였습니다.

## 선택 요구사항
클론 한 사이트가 아닌 원본에 연결된 링크들은
a 링크에 target _blank를 주었습니다.
때문에 새탭으로 나오는 웹페이지는 클론 사이트가 아닙니다.

- [ ] `<header>`, `<section>` 등 시멘틱 태그를 최대한 활용해보세요.
- [ ] 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
- [ ] 부분적으로 BEM 방법론을 도입해보세요.
- [ ] JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
- [ ] JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
- [ ] SCSS 등의 CSS 전처리도구를 도입해보세요.
- [ ] SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해보세요.
원본 사이트의 마우스 스크롤 위치에 따라 컨텐츠가 아래에서 나오게 하는 자바스크립트 동작은
키프레임으로 컨텐츠 마다 지연 시간을 늘려서 마우스 스크롤에 따라 컨텐츠가 나오는 것 처럼
느껴지게 만들었습니다.

## 손쉬운 이미지 추출 방법

사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 [Image Downloader](https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=ko)를 사용하세요.

1. 원하는 사이트 접속
1. Image Downloader 확장 프로그램 실행
1. 다운로드 원하는 이미지 선택
1. 서브 폴더 이름(Save to subfolder) 명시
1. 다운로드!
메인 페이지에서 7개의 section을 만들고 앵커를 연결해서 이동할 수 있게 했습니다.
Loading