1. head 부분
| HTML <head> <meta charset="UTF-8"> // 문자 인코딩을 지정하는 meta 태그 <meta http-equiv="X-UA-Compatible" content="IE=edge"> // 뷰포트(모바일에서 웹페이지를 볼때 화면에 보여지는 영역) 지정하는 meta 태그 <meta name="viewport" content="width=device-width, initial-scale=1.0"> // 웹페이지의 설정을 설명하는 meta 태그 <title>yj's portfolio</title> // 포트폴리오를 담은 웹페이지의 제작 웹페이지 name에 meta tag를 추가 <meta name="auther" content="yj.cho"> <meta name="description" content="세계에서 짱먹는 개발자"> 웹페이지의 상단탭에 아이콘을 추가 <link rel="icon" type="image/png" href="./images/title_icon.png"> html에 script.js와 style.css의 링크 걸어주기 (CSS와 JavaScript를 별도의 파일 안에 작성할 예정) <link rel="stylesheet" href="./style.css"> <script src="./script.js" defer></script> html에 fontawesome의 사용이 가능하도록 변경 (fontawesome 웹사이트에서 가져온 아이콘을 정상적으로 적용할 예정) <script src="https://kit.fontawesome.com/133260cff9.js"></script> </head> |
| CSS 폰트의 지정 @font-face { // 다운로드받은 '청정원고딕R.ttf' 폰트파일을 'cjw'라는 이름을 부여하여 웹페이지에 지정. font-family: 'cjw'; src: url('./청정원고딕R.ttf') format('woff2'); // WOFF2(Web Open Font Format 2) 폰트 파일을 포맷함. font-weight: 700; // 폰트 파일을 포맷함. font-style: normal; } 변수의 지정 :root { --color-white: white; --color-black: black; --color-mypink: #FFFDFF; --font-large: 48px; --font-medium: 28px; --font-regular: 18px; --font-small: 14px; --font-micro: 12px; --animation-duration: 300ms; // ms: micro seconds. 300ms:0.3초 --size-border-radius: border-radius 4px; // 모서리를 4px 둥글게 만듦. } 공통 * { box-sizing: border-box; // 박스모델 크기 계산방법을 width + margin을 전체크기로 지정. } body { font-family: 'cjw'; // body의 글꼴을 '청정원고딕R., 글자를 가운데정렬, 모든방향의 마진을 0을 줌. text-align: center; margin: 0; } a { text-decoration: none; // a 태그에 속해있는 링크에 밑줄이 출력되지 않도록 함. color: var(--color-mypink); // root에서 지정한 글꼴색이 담긴 변수를 사용 } ul { padding-left: 0; } li { list-style: none; // 순번 앞에 붙은 특수문자를 제거 } button { background-color: lightcyan; border: none; // 테두리 제거 outline: none; // 바깥쪽 테두리 제거 cursor: pointer; // 커서를 올리면 포인터 모양 } h1 { font-size: var(--font-large); font-weight: bold; color: var(--color-black); margin: 16px 0px; } h2 { font-size: var(--font-medium); color: var(--color-black); margin: 8px 0px; } h3 { font-size: var(--font-regular); color: var(--color-black); margin: 8px 0px; } p { font-size: var(--font-regular); color: var(--color-black); margin: 4px 0px; } |
2. navbar 부분
| HTML // section 설정 <section id="section_navbar"> // nav 설정 <nav id="navbar"> // navbar의 logo 설정 <div class="navbar__logo"> 이름을 부여할 때 언더바2개(_ _)를 사용하는 것을 추천 <i class="fa-brands fa-connectdevelop"></i> // fontawesome에서 가져온 logo를 사용. <a href="#">yj.cho</a> </div> // nav의 action과 관련한 설정 <div class="navbar_action"> // menu의 리스트 설정 <ul class="navbar__menu"> // goToScroll()이 리스트를 클릭 시 실행될 수 있게 함. class의 이름을 기준으로 이동. <li class="navbar__menu__item active" onclick="goToScroll('home__container')">home</li> // active의 효과를 줌 <li class="navbar__menu__item" onclick="goToScroll('section__introduce')">introduce</li> <li class="navbar__menu__item" onclick="goToScroll('section__technic')">skill</li> <li class="navbar__menu__item" onclick="goToScroll('section__project')">project</li> <li class="navbar__menu__item" onclick="goToScroll('section__resume')">resume</li> <li class="navbar__menu__item" onclick="goToScroll('section__contact')">contact me</li> </ul> </div> // 버튼 시작 (과제1) <button class="navbar__toggle-btn" onclick="Menu_active()"> // Menu_active()함수가 작동할 navbar__toggle-btn 버튼 생성 <i class="fa-solid fa-burger"></i> // fontawesome에서 가져온 icon 사용.(햄버거 이미지 클릭 시 메뉴창 팝업) </button> </nav> |
| CSS // navbar id 전체 적용 #navbar { position: fixed; // 포지션의 위치를 고정.(스크롤이 움직여도 navbar 유지) width: 100%; // 해당 요소가 포함된 부모 요소의 100% 크기만큼 가로폭을 차지 display: flex; // 가로로 나란히 배열 justify-content: space-between; // navbar 내부에서 item들 간의 간격을 균등하게 분배 align-items: center; // 세로 방향으로 가운데 정렬 padding: 16px; // 해당 요소의 내부 여백(padding)을 16px로 지정 background-color: lightblue; transition: all var(--animation-duration) ease-in-out; // 요소에 모든 속성에 대해 transition 효과를 부여. 시작과 끝 부분을 부드럽게 해주는 효과를 부여. z-index: 10; // menu로 사용할 예정이므로, z-index를 부여 } // navbar의 logo에 적용 .navbar__logo { font-weight: bold; color: var(--color-mypink); } // navbar class의 logo에 커서를 갖다 댈 경우(hover) 적용 .navbar__logo:hover { border-color: var(--color-white); background-color: var(--color-black); } // navbar__menu에 적용 .navbar__menu { display: flex; margin: 0; } // navbar__menu가 active 상태일 시 적용 .navbar__menu.active{ position: relative; // position이 relative하도록 함 margin: 0 auto; text-align: center; width: 100%; display: block; // 해당 요소를 블록 레벨 요소로 표시하도록 지정. } // navbar_action class가 active 상태일 시 적용 .navbar_action.active{ align-self: center; // navbar 내부에서 개별적으로 정의된 item의 수직 정렬 지정. } // navbar__menu의 item에 적용 .navbar__menu__item { padding: 8px 12px; // 위 아래 여백을 8px, 좌 우 여백을 12px로 지정하는 것을 지정 margin: 0 4px; color: var(--color-white); cursor: pointer; // cursor를 올렸을 때 pointer모양이 출력되도록 지정. border-radius: var(--size-border-radius); } // navbar__menu의 item이 active 상태일 시 적용 .navbar__menu__item.active { border: 1px solid lightblue; } // navbar__menu의 item에 커서를 갖다 댈 경우(hover) 적용 .navbar__menu__item:hover { border-color: var(--color-white); background-color: var(--color-black); } // navbar class의 toggle 버튼에 적용 .navbar__toggle-btn { position: absolute; // position을 절대 위치(해당 요소가 포함된 부모 요소의 위치와 상관 없이 절대적인 위치)로 배치. top: 24px; // 해당 요소를 상위 요소에서 상대적으로 24px 만큼 위쪽으로 이동 right: 32px; // 해당 요소를 상위 요소에서 상대적으로 32px 만큼 오른쪽으로 이동 font-size: 24px; columns: var(--color-white); display: none; // 해당 요소를 화면에서 숨김. } |
3. Home 부분
| HTML // section 설정 <section id="home"> // div 설정 <div class="home__container"> // img scr으로 증명사진을 삽입 <img src="./images/yj_photo.jpg" alt="yj_photo" class="home__avatar"> </div> </section> |
4. Introduce 부분
| HTML // section 설정 <section id="about" class="section section__container"> // 제목 삽입 <h1>introduce</h1> // 제목글 삽입 <p>LLorem ipsum dolor sit a...ctus eius magni! s.</p> // 과목 전체 묶음에 대한 div 설정 <div class="about__majors"> // 'frontend' 과목에 대한 div 설정 <div class="major"> // 'frontend' 과목의 icon에 대한 div 설정 <div class="major__icon"> // fontawesome에서 가져온 icon 삽입 <i class="fa-solid fa-code"></i> </div> <h2 class="major__title">frontend</h2> // frontend 제목 삽입 <div class="major__description"> // frontend의 내용 div 삽입 HTML, CSS, JavaScript, TypeScript, React </div> </div> // 'backend' 과목에 대한 div 설정 <div class="major"> // 'backend' 과목의 icon에 대한 div 설정 <div class="major__icon"> // fontawesome에서 가져온 icon 삽입 <i class="fa-brands fa-python"></i> </div> <h2 class="major__title">backend</h2> // backend 제목 삽입 <div class="major__description"> // backend의 내용 div 삽입 Python, Node.js, Django </div> </div> // 'AI' 과목에 대한 div 설정 <div class="major"> // 'AI' 과목의 icon에 대한 div 설정 <div class="major__icon"> // fontawesome에서 가져온 icon 삽입 <i class="fa-solid fa-robot"></i> </div> <h2 class="major__title">AI</h2> // AI 제목 삽입 <div class="major__description"> // AI의 내용 div 삽입 data analyze, machine learning, <br>deep learning, Tensorflow, Pytoch </div> </div> </div> // 경력 전체 묶음에 대한 div 설정 <div class="about__job"> // 경력에 대한 div 설정 <div class="job"> // 경력1(wooyang)에 대한 logo img 삽입 <img src="./images/wooyang2.jpg" alt="wooyang" class="about__jobs__icon"> // 경력1(wooyang)에 대한 description div 삽입 <div class="jobs__description"> <p class="job__name">(주)우양 영업본부 영업2팀</p> <p class="job__period">2021.07-2022.01</p> </div> // 경력2(daesang)에 대한 logo img 삽입 <img src="./images/daesang.png" alt="daesang" class="about__jobs__icon"> // 경력2(daesang)에 대한 description div 삽입 <div class="jobs__description"> <p class="job__name">대상주식회사 소재기획총괄 Global영업본부 BIO영업팀</p> <p class="job__period">2022.04-2023.01</p> </div> </div> </div> </section> |
| CSS // 과목 전체 묶음에 적용 .about__majors { display: flex; // 가로로 나란히 배열 justify-content: space-between; // navbar 내부에서 item들 간의 간격을 균등하게 분배 margin: 80px 0; } // 과목 각각의 icon에 적용 .major__icon { width: 100px; height: 100px; line-height: 100px; // 해당 텍스트가 100px 만큼의 높이를 가짐. font-size: 50px; margin: auto; // 요소가 수평 중앙에 위치 color: var(--color-mypink); border: 1px solid var(--color-mypink); border-radius: 50%; margin-bottom: 16px; } // 과목 각각의 icon 이미지에 적용 .major__icon i { color: gray; transition: all var(--animation-duration) ease; } // 과목 각각의 icon 이미지에 커서를 갖다 댈 경우(hover) 적용 .major__icon:hover i { color: lightblue; transform: rotate(-30deg) scale(1.1); // 반시계 방향으로 30º 회전하면서 크기를 1.1배로 커지게 transform } // 과목 전체의 제목과 설명글에 적용 .major__title, .major__description { color: gray; } // 과목의 설명글에 적용 .major__description { font-size: var(--font-small); } // 경력에 전체 적용 .job { display: flex; // 가로로 나란히 배열 align-items: center; // 수직 가운데로 정렬 } // 경력의 설명글에 적용 .jobs__description { margin: 0 16px; text-align: left; } // 경력의 회사명, 재직기간에 적용 .job__name, .job__period { width: 150px; color: gray; margin-left: 5%; } // 경력의 회사명에 적용 .job__name { font-size: var(--font-small); } // 경력의 재직기간에 적용 .job__period { font-size: var(--font-micro); } // 경력 각각의 icon에 적용 .about__jobs__icon { width: 200px; height: 120px; line-height: 100px; font-size: 50px; margin: auto; color: var(--color-mypink); border: 1px solid var(--color-mypink); border-radius: 5%; margin-bottom: 16px; } // 경력 각각의 icon 이미지에 커서를 갖다 댈 경우(hover) 적용 .about__jobs__icon:hover { transition: all var(--animation-duration) ease-in; } |
5. technic 부분
| HTML // section 설정 <section id="skills" class="section"> // technic 전체 묶음에 대한 div 설정 <div class="section__container"> <h1>technic</h1> // 제목 <h2>introduce</h2> // 소제목 <p> Lorem ipsum dolor sit a...ctus eius magni! </p> // 소개글 // technic 전체 묶음에 대한 div 설정 <div class="skillset"> // technic 하단 표의 왼쪽 부분에 대한 div 설정 <div class="skillset__left"> <h3 class="skillset__title">Language</h3> // 왼쪽부분의 제목 (Language) // Language의 내용1에 대한 div 설정 <div class="skill"> // Language의 내용1에 대한 div 설정 <div class="skill__description"> <span>JavaScript</span> <span>3.8%</span> </div> // Language의 내용1에 대한 퍼센트바 설정 <div class="skill__bar"> <div class="skill__value" style="width: 3.8%"></div> </div> </div> // Language의 내용2에 대한 div 설정 <div class="skill"> // Language의 내용2에 대한 설명글 div 설정 <div class="skill__description"> <span>DBMS</span> <span>3.8%</span> </div> // Language의 내용2에 대한 퍼센트바 설정 <div class="skill__bar"> <div class="skill__value" style="width: 3.8%"></div> </div> </div> // Language의 내용3에 대한 div 설정 <div class="skill"> // Language의 내용3에 대한 설명글 div 설정 <div class="skill__description"> <span>Python</span> <span>7.2%</span> </div> // Language의 내용3에 대한 퍼센트바 설정 <div class="skill__bar"> <div class="skill__value" style="width: 7.2%"></div> </div> </div> // Language의 내용4에 대한 div 설정 <div class="skill"> // Language의 내용4에 대한 설명글 div 설정 <div class="skill__description"> <span>data analyze</span> <span>1.2%</span> </div> // Language의 내용4에 대한 퍼센트바 설정 <div class="skill__bar"> <div class="skill__value" style="width: 1.2%"></div> </div> </div> // Language의 내용5에 대한 div 설정 <div class="skill"> // Language의 내용5에 대한 설명글 div 설정 <div class="skill__description"> <span>machine learning/deep learning</span> <span>3.2%</span> </div> // Language의 내용5에 대한 퍼센트바 설정 <div class="skill__bar"> <div class="skill__value" style="width: 3.2%"></div> </div> </div> </div> // technic 하단 표의 오른쪽 부분에 대한 div 설정 <div class="skillset__right"> // Tools의 전체 묶음에 대한 div 설정 <div class="tools"> <h3 class="skillset__title">Tools</h3> // 오른쪽부분1의 제목 (Tools) <ul class="tools__list"> // Tools의 리스트 설정 <li><span>Visual Studio Code</span></li> <li><span>Google Colaboratory</span></li> <li><span>Pycham</span></li> <li><span>Jupyter notebook</span></li> <li><span>Github Desktop</span></li> </ul> </div> // Etc.의 전체 묶음에 대한 div 설정 <div class="etc"> <h3 class="skillset__title">Etc.</h3> // 오른쪽부분2의 제목 (Etc.) <ul class="etc__list"> // Etc.의 리스트 설정 <li><span>Math</span></li> <li><span>English</span></li> <li><span>Chinese</span></li> </ul> </div> </div> </div> </div> </section> |
| CSS // technic 전체 묶음에 적용 #skills { background-color: lightblue; } // technic 하단 표의 제목에 적용 .skillset__title { color: var(--color-black); } // technic 하단 표의 전체 묶음에 적용 .skillset { display: flex; background-color: var(--color-mypink); color: var(--color-black); margin: 20px 0; } // Language 전체 묶음에 적용 .skillset__left { flex-basis: 60%; background-color: lightblue; padding: 20px 40px; border: 2px solid var(--color-mypink); } // Language 각각의 내용의 전체 묶음에 적용 .skill { margin-bottom: 32px; } // Language 각각의 내용의 설명글에 적용 .skill__description { display: flex; justify-content: space-between; } // Language 각각의 내용의 퍼센트바에 적용 .skill__bar { width: 100%; height: 3px; background-color: var(--color-mypink); } // Language 각각의 내용의 퍼센트바 값에 적용 .skill__value { height: 3px; background-color: lightblue; } // Tools, Etc. 각각의 내용의 전체 묶음에 적용 .skillset__right { background-color: lightblue; flex-basis: 40%; border: 1px solid var(--color-mypink); } // Tools 각각의 내용의 전체 묶음에 적용 .tools { padding: 20px; background-color: lightblue; border: 1px solid var(--color-mypink); } // Etc. 각각의 내용의 전체 묶음에 적용 .etc { padding: 20px; border: 1px solid var(--color-mypink); } |
6. workspace 부분
HTML // section 설정 <section id="work" class="section"> // 제목, 소제목, 버튼의 전체 묶음인 div 설정 <div class="section__container"> <h1>workspace</h1> // 제목 <h3>project</h3> // 소제목 // 버튼의 전체 묶음인 div 설정 <div class="work__categories"> // 현재 selected 된 상태인 버튼1 설정 <button class="category__btn selected"> all <span class="category__count">7</span> </button> // 버튼2 설정 <button class="category__btn"> frontend <span class="category__count">2</span> </button> // 버튼3 설정 <button class="category__btn"> backend <span class="category__count">3</span> </button> // 버튼4 설정 <button class="category__btn"> AI <span class="category__count">2</span> </button> </div> // 프로젝트 내용의 전체 묶음인 div 설정 <div class="work__projects"> // project1로 이동하는 a 태그 설정 <a href="#" class="project" target="_blank"> // project1의 사진 삽입 <img src="./" alt="" class="project__img"> // project1의 설명 삽입 <div class="project__description"> <h3>youtube clonecoding</h3> <span>this is chinese</span> </div> </a> // project2로 이동하는 a 태그 설정 <a href="#" class="project" target="_blank"> // project2의 사진 삽입 <img src="./" alt="" class="project__img"> // project2의 설명 삽입 <div class="project__description"> <h3>project2</h3> <span>this is chinese</span> </div> </a> // project3으로 이동하는 a 태그 설정 <a href="#" class="project" target="_blank"> // project3의 사진 삽입 <img src="./" alt="" class="project__img"> // project3의 설명 삽입 <div class="project__description"> <h3>project3</h3> <span>this is chinese</span> </div> </a> // project4로 이동하는 a 태그 설정 <a href="#" class="project" target="_blank"> // project4의 사진 삽입 <img src="./" alt="" class="project__img"> // project4의 설명 삽입 <div class="project__description"> <h3>project4</h3> <span>this is chinese</span> </div> </a> // project5로 이동하는 a 태그 설정 <a href="#" class="project" target="_blank"> // project5의 사진 삽입 <img src="./" alt="" class="project__img"> // project5의 설명 삽입 <div class="project__description"> <h3>project5</h3> <span>this is chinese</span> </div> </a> // project6으로 이동하는 a 태그 설정 <a href="#" class="project" target="_blank"> // project6의 사진 삽입 <img src="./" alt="" class="project__img"> // project6의 설명 삽입 <div class="project__description"> <h3>project6</h3> <span>this is chinese</span> </div> </a> // project7로 이동하는 a 태그 설정 <a href="#" class="project" target="_blank"> // project7의 사진 삽입 <img src="./" alt="" class="project__img"> // project7의 설명 삽입 <div class="project__description"> <h3>project7</h3> <span>this is chinese</span> </div> </a> </div> </div> </section> |
CSS // 버튼의 전체 묶음에 적용 .work__categories { margin: 40px; } // 각각의 버튼에 대한 적용 .category__btn { border: 1px solid var(--color-mypink); border-radius: var(--size-border-radius); font-size: var(--font-regular); padding: 8px 48px; color: var(--color-mypink); } // 버튼의 selected된 상황과, 버튼에 커서를 갖다 댈 경우(hover) 적용 .category__btn.selected, .category__btn:hover { background-color: lightgray; color: black; } // selected, hover된 버튼의 내용과 item의 수에 적용 .category__btn.selected .category__count, .category__btn:hover .category__count { opacity: 1; // 투명도: 1 (불투명) top: 0; // 위치: 0 (버튼 위에 위치) } // 버튼에 위치한 item의 수에 적용 .category__count { background-color: lightblue; border-radius: 50%; color: grey; font-weight: bold; width: 24px; height: 24px; line-height: 24px; // height와 line-height와 같다면 정중앙에 글자가 출력 display: inline-block; // 요소를 인라인처럼 배치하면서도 블록 요소처럼 크기와 여백을 지정할 수 있도록 함. position: relative; // 상대적인 position 적용 top: -20px; left: 4px; opacity: 0; // 투명도 0 transition: all var(--animation-duration) ease-in; // transition 적용 } // 프로젝트 전체 내용 묶음에 적용 .work__projects { display: flex; flex-wrap: wrap; justify-content: center; } // 프로젝트 전체 내용에 애니메이션 효과를 적용 .work__projects.anim-out { opacity: 0; // 투명 transform: scale(0.96) translateY(40px); // 크기를 96%로 축소하고, y축 방향으로 40px만큼 요소를 이동 } .project.invisible { display: none; // 각 프로젝트 박스에 숨김효과를 적용 } // 각 프로젝트 박스에 적용 .project { position: relative; // 상대적인 position 적용 display: flex; // 가로로 배열 justify-content: center; // 수평방향으로 정렬 align-items: center; // 수직방향으로 정렬 width: 280px; height: 250px; margin: 2px; background-color: lightblue; } // 각 프로젝트 박스의 이미지에 적용 .project__img { max-width: 100%; max-height: 100%; align-self: center; // 수직중앙으로 정렬 } // 각 프로젝트 박스의 설명글에 적용 .project__description { position: absolute; // position을 절대 위치(해당 요소가 포함된 부모 요소의 위치와 상관 없이 절대적인 위치)로 배치. display: flex; // 해당 요소를 flexbox 레이아웃으로 배치 flex-direction: column; // flexbox 레이아웃을 수직으로 정렬. justify-content: center; // 수평방향으로 정렬 width: 100%; height: 100%; top: 0; left: 0; opacity: 0; transform: translateY(10px); // 해당 요소를 아래에서 위로 10px만큼 이동하는 듯한 애니메이션 효과. transition: all var(--animation-duration) ease-in; // 시작 부분에서 느리게 시작하고 나중에 빠르게 이동하는 애니메이션 효과 } // 각 프로젝트 박스의 설명글에 커서를 갖다 댈 경우(hover) 적용 .project:hover .project__description { opacity: 0.8; transform: translateY(0px); } // 각 프로젝트 박스의 설명글의 부제목에 적용 .project__description h3 { font-weight: bold; color: grey; } // 각 프로젝트 박스의 설명글의 부제목 뒤에 새로운 요소를 적용 .project__description h3:after { content: ''; // 생성된 새로운 요소에 내용이 없도록 설정 display: block; position: relative; left: 50%; width: 25px; height: 2px; margin-left: -12px; margin-top: 8px; color: grey; background-color: lightblue; } |
7. resume 부분
HTML // section 설정 <section id="testimonials" class="section"> // resume 전체 묶음 div 설정 <div class="section__container"> <h1>resume</h1> // 제목 <h3> Lorem ipsum dolor sit a...ctus eius magni! </h3> // 소제목 </div> // 추천내용 전체 묶음 div 설정 <div class="testimonials"> // 추천내용1 div 설정 <div class="testimonial"> <img src="./images/wooyang.png" alt="wooyang" class="testimonial__avatar"> // 추천내용1 내용글 div 설정 <div class="testimonial__speech-bubble"> <p> Lorem ipsum dolor sit a...ctus eius magni! </p> <p class="name"><a href="#">Mr.ChatGPT</a> / OpenAI </p> </div> </div> // 추천내용2 div 설정 <div class="testimonial"> <img src="./images/daesang.png" alt="daesang" class="testimonial__avatar"> // 추천내용2 내용글 div 설정 <div class="testimonial__speech-bubble"> <p> Lorem ipsum dolor sit a...ctus eius magni! </p> <p class="name"><a href="#">Mr.ChatGPT</a> / OpenAI </p> </div> </div> </div> </section> |
CSS // resume 전체 섹션에 적용 #testimonials{ background-color: lightblue; } // 추천내용 전체 묶음에 적용 .testimonials{ margin: 40px; } // 추천내용 각각의 묶음에 적용 .testimonial { display: flex; margin: 32px 0; } // 각각의 추천내용 업체의 logo에 적용 .testimonial__avatar{ width: 120px; height: 80px; line-height: 100px; border-radius: 10%; } // 각각의 추천내용 업체의 홀수번째 요소에 적용 .testimonial__avatar:nth-child(odd){ margin-right: 40px; // 오른쪽으로 40px 이동 } // 각각의 추천내용 업체의 짝수번째 요소에 적용 .testimonial__avatar:nth-child(even){ margin-left: 40px; // 왼쪽으로 40px 이동 } // 추천내용 내용글 전체 묶음에 적용 .testimonial__speech-bubble { padding: 18px; background-color: var(--color-mypink); } // 추천내용 내용글 본문에 적용 .testimonial__speech-bubble p { color: black } // 추천내용 내용글 본문 링크에 적용 .testimonial__speech-bubble a { color: black } |
8. contact 부분
HTML // section 설정 <section id="contact" class="section"> <h1 class="contact__title">contact me</h1> // 제목 <h2 class="contact__email">junesnever@naver.com</h2> // 소제목 (이메일) // contact link div 설정 <div class="contact__links"> <a href="#" target="_blank"> <i class="fa-brands fa-github"></i> </a> <a href="#" target="_blank"> <i class="fa-brands fa-instagram"></i> </a> <a href="#" target="_blank"> <i class="fa-solid fa-blog"></i> </a> </div> <p class="contact__rights"> 2023 yj.cho - All rights reserved </p> </section> |
CSS // contact 전체 섹션에 적용 #contact{ background-color: var(--color-mypink); } // title, email, rights에 적용 .contact__title, .contact__email, .contact__rights { color: var(--color-black); } // title에 적용 .contact__title{ margin: 32px 0; } // link에 적용 .contact__links { font-size: var(--font-large); margin: 24px 0; transition: all var(--animation-duration) ease-in; } // link icon에 적용 .contact__links i{ margin-right: 2%; color: lightblue; } link icon에 커서를 갖다 댈 경우(hover) 적용 .contact__links i:hover { transform: scale(1.1); color: lightblue; } |
9. 미디어쿼리 적용
CSS // 출력화면의 크기를 줄이는 미디어쿼리 적용 (스마트폰 화면) @media screen and (max-width: 768px) { // navbar의 toggle버튼에 적용 .navbar__toggle-btn { display: block; } // navbar에 적용 #navbar { flex-direction: column; align-items: flex-start; } // navbar의 menu에 적용 .navbar__menu{ flex-direction: column; text-align: center; width: 100%; display: none; } // navbar의 menu가 open일 시 적용 .navbar__menu.open { display: block; } // 과목 전체 묶음에 대해 적용 .about__majors { flex-direction: column; // 세로로 정렬 } // 과목에 대해 적용 .major { margin-bottom: 40px; } // 경력에 대해 적용 .job { flex-direction: column; } // technic에 대해 적용 .skillset { flex-direction: column; } // project에 대해 적용 .project { flex-grow: 1; // 해당 flex item이 가용한 모든 공간을 최대한 활용하여 크기를 확장. } // resume의 logo에 적용 .testimonial__avatar{ width: 80px; height: 80px; } } |
10. 완성 화면
과제
과제1
미디어쿼리를 이용하여 화면이 축소되었을 때 햄버거 icon을 출력.
햄버거 icon을 누르면 menu가 수직으로 팝업되며, menu를 클릭하면 슬라이딩하여 해당 섹션으로 이동.
HTML <button class="navbar__toggle-btn" onclick="Menu_active()"> <i class="fa-solid fa-burger"></i> </button> |
CSS .navbar__menu { display: flex; margin: 0; } .navbar__menu__item { padding: 8px 12px; margin: 0 4px; color: var(--color-white); cursor: pointer; border-radius: var(--size-border-radius); } .navbar__menu__item.active { border-color: var(--color-white); background-color: var(--color-black); } .navbar__menu__item:hover { border-color: var(--color-white); background-color: var(--color-black); } .navbar__toggle-btn { position: absolute; top: 24px; right: 32px; font-size: 24px; columns: var(--color-white); display: none; } @media screen and (max-width: 768px) { .navbar__toggle-btn { display: block; background-color: transparent; } #navbar { flex-direction: column; align-items: flex-start; } .navbar__menu{ flex-direction: none; text-align: center; width: 100%; display: none; } .navbar__menu.action{ position: relative; margin: 0 auto; flex-direction: none; text-align: center; width: 100%; display: block; } .navbar_action.action{ align-self: center; } .navbar__menu.open { display: block; } } |
과제2
navbar의 menu 요소를 클릭하면 슬라이딩되어 해당 섹션으로 이동. (a태그의 책갈피를 사용하지 않음.)
해당 섹션으로 이동했을 때 menu의 요소를 활성화.
+
home을 벗어나면 화살표버튼이 생성 및 활성화. 화살표버튼을 누르면 home으로 슬라이딩하여 이동.
HTML <div class="navbar_action"> <ul class="navbar__menu"> <li class="navbar__menu__item active" onclick="goToScroll('home')">home</li> <li class="navbar__menu__item" onclick="goToScroll('about')">introduce</li> <li class="navbar__menu__item" onclick="goToScroll('skills')">skill</li> <li class="navbar__menu__item" onclick="goToScroll('work')">project</li> <li class="navbar__menu__item" onclick="goToScroll('testimonials')">resume</li> <li class="navbar__menu__item" onclick="goToScroll('contact')">contact me</li> </ul> </div> |
JavaScript // 스크롤 슬라이딩 이벤트 function goToScroll(name) { const location = document.querySelector('#'+name).offsetTop; window.scrollTo({ top: location - 65, behavior: 'smooth' }); } // 스크롤 이벤트(화살표 및 nav버튼) const btn = document.querySelector('.arrow-up'); const sections = document.querySelectorAll('.section'); const navList = document.querySelectorAll('.navbar__menu__item'); const home = document.querySelector('#home'); window.addEventListener('scroll', () => { const scroll = window.scrollY; if (scroll > home.offsetTop + home.offsetHeight) { btn.classList.add('visible') } else { btn.classList.remove('visible') } sections.forEach((data, i) => { if(scroll > data.offsetTop - 300) { document.querySelector('.active').classList.remove('active'); navList[i].classList.add('active'); } }); if(scroll >= document.body.offsetHeight - window.innerHeight - 100){ document.querySelector('.active').classList.remove('active'); navList[navList.length - 1].classList.add('active'); } }) |
과제3
project의 각 버튼에 project의 갯수를 표시.
버튼을 클릭하면 해당 project의 갯수만 표시.
JavaScript // projectbtn window.onload = () => { const allCount = document.getElementsByClassName('project'); const front = document.getElementsByClassName('front'); const back = document.getElementsByClassName('back'); const ai = document.getElementsByClassName('ai'); document.getElementsByClassName('all__count')[0].innerText = allCount.length; document.getElementsByClassName('front__count')[0].innerText = front.length; document.getElementsByClassName('back__count')[0].innerText = back.length; document.getElementsByClassName('ai__count')[0].innerText = ai.length; } function ProjectButtonClick(project, me) { const allCount = document.getElementsByClassName('project'); const projectCount = document.getElementsByClassName(project); const selected = document.getElementsByClassName('selected')[0]; for(let i=0; i<allCount.length; i++){ allCount[i].classList.add('none'); } for(let i=0; i<projectCount.length; i++){ projectCount[i].classList.remove('none'); } selected.classList.remove('selected'); me.classList.add('selected'); } |
