$$config title: 22.08.10, 웹1, 초안페이지 keywords: - E강의장 - 19:00 - 22:00 $$ ## 공지 - 모작만이!!! 코딩왕으로 가는 길입니다!!!!! 꼭 하루에 한시간만이라도 모작을 진행해주세요^^~ 잘 따라와주셔서 항상 감사합니다 여러분 화이팅^^~~
## 디스코드주소 [서버추가 → 서버 참가하기] - 초대주소 : https://discord.gg/EAGX8cnJ ## 만족도 조사 - [이동](st.koreaedugroup.com) ## 개요 - 개강: 2022년 08월 10일 - 페이지: slog.gg/p/9328
## 강사정보 - 강사: 김혜지 - 연락처: 010-4372-1301
## 수업안내 - 수업 시작: 19:00 ~ - 쉬는시간1: 19:50 ~ 20:00 - 쉬는시간2: 20:50 ~ 21:00 - 수업 종료: 21:45
## 관련주소 - 새 펜 열기 : [codepen.io/pen](https://codepen.io/pen) - 폰트어썸 : [to2.kr/dPB](https://to2.kr/dPB) - 주소 줄이기: [to2.kr](https://to2.kr/) - cdnjs : [cdnjs.com](https://cdnjs.com/) - 이미지 호스팅 : [postimages.org](https://postimages.org/)
## 유용한 팁 - VS코드 설치 : [바로가기](https://slog.gg/p/810) - VS코드 안열릴때 : [바로가기](https://slog.gg/p/398) - 없어지지않는 부분모작 이미지 : [바로가기](https://slog.gg/p/83) - Tailwind 사용시 폰트 적용법 : [바로가기](https://slog.gg/p/538)
## 질문 코드 - 마켓컬리 2차메뉴 간단 구현 → 5단계 css에서 ctrl + f /*배우지 않은 개념*/ 검색 - 난이도 : 웹2 중반 목표 - 1단계 : [최상단](https://codepen.io/kimhyeji324/pen/RwMXNaz?editors=1000) - 2단계 : [네비바](https://codepen.io/kimhyeji324/pen/mdxNdqQ?editors=1000) - 3단계 : [2차메뉴 구현](https://codepen.io/kimhyeji324/pen/BarXyzo?editors=1100) - 4단계 : [2차메뉴 커스텀](https://codepen.io/kimhyeji324/pen/mdxNdZY?editors=1100) - 5단계 : [배너 와 상품리스트](https://codepen.io/kimhyeji324/pen/NWYQPxr?editors=1100)
## 1강 HTML/CSS/JS - HTML → 사용자가 인터넷에서 클릭을 통해 자유롭게 이동하면서 해당 정보를 확인할 때 보는 웹 문서 - HTML5 - 웹 표준 → 어떤 브라우저에서든 똑같이 보이게 나온 언어 - HTML 태그로 구성되어 있다 - CSS3(스타일시트) 통해 다양한 레이아웃을 만들 수 있다 - JAVASCRIPT는 동작을 담당해준다 ## 2강 : 툴 세팅 - 깃허브 : [바로가기](https://github.com/) - 깃허브로 가입 추천 - 코드펜 : [바로가기](https://codepen.io/pen) - 이메일인증 필요 - Settings → Editor Prefernces - Syntax Highlighting → 어두운테마/High Contrast Dark, 밝은테마/High Contrast Light - Fonts → Code Font Family/Hack, Code Font Size/시력에 맞게 - Editor Options → Autocomplete/체크
## 3강 : 키보드 및 단축키 사용법 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/abYjLWO) - Q&A - 마우스 사용 최소화 → 작업 속도 향상을 위해 필수 - 단축기는 노트북마다 다를 수 있습니다 - Home → 앞줄로 - End → 뒷줄로 - Ctrl + Home → 최상단 - Ctrl + End → 최하단 - Ctrl + C → 선택영역 복사 - Ctrl + X → 선택영역 잘가내기 - Ctrl + V → 붙여넣기 - Ctrl + A → 전체선택 - Ctrl + Z → 이전 히스토리로 한 단계 이동 - Ctrl + Y → 이후 히스토리로 한 단계 이동 - Shift + 키보드 이동 → 글 선택
- Ctrl + T → 새 탭 열기 - Ctrl + W → 탭 닫기 - Ctrl + F → 단어 찾기 - Ctrl + 1~8 → 탭 이동 - Ctrl + 9 → 마지막 탭 열기 - Ctrl + 0 → 페이지 크기 100% - Ctrl+Tab → 다음 탭 이동 - Ctrl+Shift+Tab → 이전 탭 열기 - Ctrl + Shift + T → 닫은 페이지 복구 - trl + Shift + N → 시크릿 창 열기 - Win + 방향키 → 화면 크기 조절 - Alt + Tap → 새 탭 열기 - f6 → 주소 창 전체선택 - f5 → 페이지 새로고침 - ins → 뒷 글자 지워질때
## 4강 : HTML 태그의 의미 - 개념 : [HTML태그 예시](https://codepen.io/jangka44/pen/MWJVOeK) - Q&A - <여는태그> → 태그 - 내용을 썼을때 그 내용이 어떤 종류인지 컴퓨터에게 알려주는 것, 꼬리표 - <여는태그>내용물 → 엘리먼트
## 5강 : CSS사용법 - 개념 : [열기](https://codepen.io/jangka44/pen/MWJVOeK) - Q&A - 선택자 {속성: 값;}
## 6강 : 배경색, 너비, 높이 - 개념 : [열기](https://codepen.io/jangka44/pen/GRrxONw) - Q&A - background-color → 배경색 - width → 넓이 - height → 높이 - 높이에 값을 넣었을때 넓이가 자동으로 넓어지는 이유 → 엘리먼트 기본 속성 설정 때문
## 7강 : div, section, article 의미, 사용해서 3가지 색의 막대 - 문제 : [3가지 막대가 전부 높이100px, 넓이 기본이 되도록 만들어주세요](https://codepen.io/kimhyeji324/pen/dymjJOE) - 예시 : [보기](https://cdpn.io/pen/debug/VBvPeM) - 정답 : [확인](https://codepen.io/jangka44/pen/VBvPeM)
## 1일차 복습 - 문제 : [codepne을 작업환경에 맞게 만들어주세요](https://codepen.io/pen)
- 문제 : [div로 열린태그와 닫힌태그를 만들어주세요](https://codepen.io/pen) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/zYWJWVd) - 팁 : div + 단축기Tab = < div >< /div >자동완성 - 질문 : 태그가 몇개인가요? - 답 : 닫힌태그1개와 열린태그1개 총 2개
- 문제 : [div안에 텍스트를 넣어서 엘리먼트를 완성시켜주세요](https://codepen.io/pen) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/mdxGxZv) - 질문 : 엘리먼트가 태그와 다른점은 무엇인가요? - 정답 : 열린태그 + 텍스트 + 닫힌태그를 엘리먼트라고 합니다
- 문제 : [텍스트 포함 span 엘리먼트를 만든 후 배경색과 텍스트색상을 바꿔주세요](https://codepen.io/pen) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/RwMYMXv) - Tip : css는 선택자 {속성: 값;} 을 사용해서 커스텀 합니다.
- 문제 : [div 태그를 만든 후 배경색상속성과 높이속성 값500px를 주세요, 넓이 속성 값x](https://codepen.io/pen) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/ExEeLxb) - 질문 : 높이속성 값만 주어도 요소가 생기는 이유는 무엇인가요? - 답 : 기본속성이 display: block이기 때문입니다. - Tip : 넓이 속성에 기본값은 auto입니다. auto값은 *부모엘리먼트*에 넓이를 물려받는다는 것을 의미합니다.
## 8강 : display 속성 개념 - 교재 : 104p ~ - 개념 : [열기](https://codepen.io/jangka44/pen/GRrxyKK?editors=0100) - 문제 : [칸을 채워주세요](https://codepen.io/jangka44/pen/jOrPpxX?editors=1010) - 정답 : [확인](https://codepen.io/jangka44/pen/vYKOaXy) - Q&A - 엘리먼트는 기본 속성이 있다. css는 속성을 생성해주는 것이 아닌, 기본적으로 있는 속성을 바꿔주는 역할이다. - ex) div태그 기본 속성 : color: black; | width: auto | heigth: auto; | display: block; - 공통 : 높이 → 값을 주지않는 이상 최소한으로 줄어든다 - display: block; - 넓이 → 값을 주지않는 이상 최대한으로 늘어난다 - 종류 → div, p, h1~h6, ul. ol. blockquote, form, hr, table, fieldset, address - 특징 → 넓이, 높이, 패딩, 마진 적용O - inline - 넓이 → 값을 주지않는 이상 최소한으로 줄어든다 - 종류 → a ,span, img, object, br, sup, sub, input, textarea, label, button - 특징 → 넓이, 높이, 패딩, 마진 적용X - inline-block - 넓이 → 값을 주지않는 이상 최소한으로 줄어든다 - 특징 → 넓이, 높이, 패딩, 마진 적용O
## 9강 : display 속성 예제1 - 문제 : [세가지 display 유형을 확인하는 문제입니다.](https://codepen.io/kimhyeji324/pen/LYdJyLp?editors=1100) - 예시 : [보기](https://slog.gg/p/9622) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/bGvxWRL?editors=1100)
## 10강 : display 속성 예제2 - 문제 : [예시를 보고 똑같이 만들어주세요](https://codepen.io/kimhyeji324/pen/MWVqmqd) - 예시 : [보기](https://cdpn.io/pen/debug/WKQRGW) - 정답 : [확인](https://codepen.io/jangka44/pen/WKQRGW)
## 11강 : 선택자, 엘리먼트를 칭하는 이름 - 개념 : [열기](https://codepen.io/jangka44/pen/bQqbpZ) - 문제 : [빈칸을 채워주세요](https://codepen.io/kimhyeji324/pen/gOedRRB?editors=1010) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/WNzgOze?editors=1000) - Q&A - 나를 감싸는 엘리먼트 → 부모 엘리먼트 - 내가 감싸는 엘리먼트 → 자식 엘리먼트 - 같은 부모를 둔 엘리먼트 → 형제 엘리먼트
## 12강 : 자주 사용하는 태그 종류와 쓰임새 - 교재 : 21P - 24P - 자료 : [보기](https://slog.gg/p/9618) - 개념 : [구조만 보신 후 외우시지 않으셔도 됩니다. 웹 표준을 왜 사용하는지 정도만 이해하시면 됩니다.](https://codepen.io/kimhyeji324/pen/vYRzgob?editors=1000) - Q&A - 전부 div로 사용해도 되지만 적절한 태그를 사용했을때 장점이 있다. - 사용자 → 적절한 태그를 사용할 경우 브라우저에서 태그를 인식하기 때문에 글자를 읽어주는 부가기능 등이 정상적으로 작동할 수 있다. - 개발자 → 한눈에 보기 쉽기 때문에 유지보수하기 좋다
- < h1 > ~ < h6 > → 제목 - h1 부터 순서대로 사용하는 것이 좋다 - ex) h1 사용 후 h3 사용x, h2사용o - 페이지 당 < h1 > 한개 사용 - 태그 여러개 사용시 < h2 > 사용 - 1에서 6으로 갈수록 글자 크기 줄어듬
- < main > → 본문 - html 문서 하나당 < main > 한개 사용
- < header > → 로고, 핵심 포인트 - < nav > → 이동 네비게이션바 - < aside > → 메인 내용과 상관없는 부가적인 내용(광고, 연관링크) - < article > → 이 부분만 독립적으로 빼서 사용했을때도 문제가 없는 부분(블로그 전체 포스팅, 기사) - < section > → article or main 안에서 연관된 내용으로 구성된 한문단 - < footer > → 사이트 가장 마지막 부분 - < div > → 의미없이 영역만 나눔
- < p > → 문단 또는 문장을 나눌때 사용합니다. 문장 줄바꿈 - < span > → 스타일 적용할 텍스트에 사용 - < br > → 줄바꿈할때 사용
## 중간 TIP - css는 html에서 선택자를 집어서 속성의 값을 바꿀 수 있다. - 속성은 무엇이고 속성값은 무엇일까요? - ex) 속성 : display, background, color, font-size 등등 - ex) 속성값 : block, inline-block, inlne, px, % 등등
- css를 사용하려면 어떤 식을 써야 하나요? - 선택자 {속성: 속성값}; - 식이 끝날때 꼭 ; ← 이런 땀표시를 해야하나요? - 꼭 사용해야 합니다. 사용하지 않으면 다음 속성이 실행되지 않습니다.
- 여러개에 선택자를 집을 수 있나요? - 선택자, 선택자, 선택자 {속성: 속성값}; 처럼 사용할 수 있습니다. - ex) - ![원본이미지](https://i.postimg.cc/Wb1sM5v2/image.png) - html에서 100개에 태그를 한번에 만들 수 있나요? - html에서 * 를 사용하면 됩니다 - ex) - ![원본이미지](https://i.postimg.cc/85YSpS7s/image.png) - inline과 inlne-block 차이점은 한가지다 - 넓이가 최소한으로 줄어들지만 inline은 넓이와 높이 속성이 먹히지 않고, inline-block은 넓이와 높이 속성이 먹힌다. - 어떤 상황마다 써야하나요? - 기본 속성값이 inlne-block 태그는 많이 없습니다. - 대부분 inline과 block이 기본 속성인데요, - inline 속성을 그대로 가지고 높이와 공간을 수정하고 싶을때 inline-block이라는 속성값으로 커스텀하여 사용합니다.
## 13강 : css 속성과 속성값 - 수업 : [codepen](https://codepen.io/pen) - css는 html에서 선택자를 집어서 속성의 값을 바꿀 수 있다. - 속성은 무엇이고 속성값은 무엇일까요? - ex) 속성 : display, background, color, font-size 등등 - ex) 속성값 : block, inline-block, inlne, px, % 등등 - css를 사용하려면 어떤 식을 써야 하나요? - 선택자 {속성: 속성값};
## 14강 : 젠코딩 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/XWEyGvX) - * → 여러개 - $ → 1~n - . → class - {} → 텍스트 - [] → 속성 - () → 그룹 - + → 인접동생 - > → 자식
## 15강 : 하이퍼링크 a와 br - 교재 : 77p - 82p - 개념 : [열기](https://codepen.io/jangka44/pen/zLqQam?editors=1010) - 문제 : [젠코딩을 활용하여 예시와 동일하게 만들어주세요.](https://codepen.io/jangka44/pen/ZEEMPpy) - 예시 : [보기](https://cdpn.io/pen/debug/mddGorY) - 정답 : [확인](https://codepen.io/jangka44/pen/mddGorY) - Q&A - a 링크라고 하며, 앵커 태그라고도 부릅니다. - < a href="이동할 페이지 url" >< /a > - target → 링크를 눌렀을때 창의 열기 방식을 결정하는 속성 - 기본 속성 → target="_self" : 보고있는 페이지가 바뀌면서 열림 - _blank 속성 → target="_blank" : 새 탭이 생성되면서 열림 - _title 속성 → title="" : 링크에 마우스를 올렸을때 부가설명 말풍선이 뜸 - a젠코딩 → a[href="링크"]{텍스트}*숫자 - 예시 : [보기](https://codepen.io/kimhyeji324/pen/GRxPZeq?editors=1100)
## 16강 : 주석 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/WNzYmyY) - Q&A - 주석 활용방법은? - HTML → 레이아웃 구분 - CSS→ 코드 실험, 잠시 지워두고 싶을때 활용도 높음
## 17강 : F12 - 예시 : [예시에서 텍스트 커스텀이 어떻게 되어있는지 확인해주세요.](https://cdpn.io/pen/debug/mjPYqy) - Q&A - 다른 사이트에 코드를 볼 수 있습니다.
## 18강 : 텍스트 커스텀 - 교재 : 96p - 개념 : [열기](https://codepen.io/kimhyeji324/pen/qBoQvXb?editors=1100) - 문제 : [예시와 동일하게 커스텀 해주세요.](https://codepen.io/jangka44/pen/bGgMBPm) - 예시 : [보기](https://cdpn.io/pen/debug/mjPYqy) - 정답 : [확인](https://codepen.io/jangka44/pen/mjPYqy) - Q&A - rem → 기본텍스트(16px) n배 - font-weigh → 두께 - letter-spacing → 자간 - color:rgba(0,0,0,0) → 투명도 - color와 함께 적용됨 - text-decoration → ★ - font-family → ★ - line-height → ★
## 19강 : 선택자 - 교재 : 154p - 개념 : [자식 선택자](https://codepen.io/kimhyeji324/pen/ZExmZBW) - 개념 : [후손 선택자](https://codepen.io/kimhyeji324/pen/RwMqOGJ) - 개념 : [전체 선택자](https://codepen.io/kimhyeji324/pen/XWEyQNN) - 개념 : [동위 선택자](https://codepen.io/kimhyeji324/pen/xxWQeLL) - 구조 선택자 : 다음 수업시간에 하겠습니다. - Q&A - 원래 알고 있던 개념 - 최하단에 있는 속성힘이 가장 강하다. - 새로 알게된 개념 - 최하단에 있는 속성보다 선택자를 사용한 속성이 힘이 더 강하다.
## 20강 : border - 개념 : [선 만들기](https://codepen.io/kimhyeji324/pen/KKorYJM) - 활용방법 - 디테일 작업 전 레이아웃을 먼저 잡을때 활용, 커스텀용도
## 21강 : margin, paddig - 개념 : [열기](https://codepen.io/kimhyeji324/pen/PoRxgQg?editors=1100) - 문제 : [요소 사이를 같은 간격으로 떨어뜨려 주세요.](https://codepen.io/kimhyeji324/pen/NWYeopN?editors=0100) - 정답 : []() - Q&A - padding → 선택자 기준 안쪽공간 생성 - margin : 선택자 기준 바깥공간 생성 - margin: 전체px - 예시 : margin: 10px - margin: 상px 하px 좌px 우px - 예시 : margin: 10px 5px 10px 5px - margin: 상하px 좌우px - 예시 : margin: 5px 10px
## 22강 : text-align - 개념 : [열기](https://codepen.io/jangka44/pen/JBXgNy?editors=1100) - 개념 : [자식 엘리먼트가 작아도 부모 엘리먼트가 자식을 가운데로 정렬하지 못하는 경우](https://codepen.io/kimhyeji324/pen/zYWyGWJ) - Q&A - text-align은 텍스트만 정렬할 수 있습니다. - 자식 엘리먼트를 정렬 하는 속성입니다. 본인을 정렬하는 속성이 아닙니다. - display속성값을 inline-block으로 커스텀하면 텍스트화가 되면서 text-align속성에 의해 움직여질 수 있습니다. *텍스트화 : 도형을 글자 취급 - display: block은 부모 넓이가 1000px이고 자식 넓이가 50px이여도 부모는 자식을 가운데로 정렬시킬 수 없다 - 이유는 block은 inline-block과 다르게 텍스트화가 안되기 때문이다. - dispaly: inline-block으로 속성이 변하는 순간 텍스트화가 되면서 부모에 의해 정렬당할 수 있다. - dispaly: inline-block이 가운데 정렬이 안될때도 있다. - 부모에 넓이와 자식 넓이가 동일한 경우 - 추가정보 - block형태일때 정렬하는 방법이 따로 있다. *수업 진행 예정
## 23강 : 모든 보이는 엘리먼트의 조상은 body이고, 그의 부모는 html 이다. - 즉 처음 생성한 엘리먼트에 부모는 body이기 때문에 모든 속성은 body에게 상속받는다.
## 추가개념 : margin: auto *추가개념은 개념공개 후 수업시간에 다시한번 언급하겠습니다. ## 24강 : margin: 0 auto : display:block요소 중앙정렬 - **추가개념 : [열기](https://codepen.io/kimhyeji324/pen/eYMXygw?editors=1100) - 08.24(수): 추가 설명 하도록 하겠습니다. - 개념 : [열기](https://codepen.io/kimhyeji324/pen/oNqVYQa) - 예시 : [열기](https://codepen.io/kimhyeji324/pen/jOzJMjg?editors=1100)
## 25강 : 중앙정렬 총 정리 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/QWmodNv) - 개념 : [열기](https://codepen.io/kimhyeji324/pen/mdxoROJ) - 개념 : [열기](https://codepen.io/kimhyeji324/pen/JjLzbvv?editors=0100)
## 26강 : ul, li - 개념 : [열기](https://codepen.io/kimhyeji324/pen/GRxeJxa?editors=1100)
## 27강 : 속성 text-deocration - 개념 : [열기](https://codepen.io/kimhyeji324/pen/zYWbYQV)
## 28강 : 속성값 inherit - 개념 : [열기](https://codepen.io/kimhyeji324/pen/JjLzjZg?editors=1000) - 예시 : [열기](https://codepen.io/kimhyeji324/pen/Yzagzvw?editors=1100) - 주의 : [열기](https://codepen.io/kimhyeji324/pen/rNdRNJQ?editors=1100)
## 29강 : 노멀라이즈 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/jOzJOvz) - 예시 : [열기](https://codepen.io/kimhyeji324/pen/GRxeRzW?editors=1100)
## 30강 : body 노멀라이즈 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/jOzJEbe) - 예시 : [열기](https://codepen.io/kimhyeji324/pen/MWVxYyR?editors=1100)
## 31강 : ul, li 노멀라이즈 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/QWmobVE) - 예시 : [열기](https://codepen.io/kimhyeji324/pen/mdxoJKY?editors=1100) ## 32강 : a 노멀라이즈 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/yLKwyNZ) - 예시 : [열기](https://codepen.io/kimhyeji324/pen/GRxeRzW?editors=1100) - 예시 : [열기](https://codepen.io/kimhyeji324/pen/bGvZaPz)
## 33강 : border-radius - 개념 : [열기](https://codepen.io/jangka44/pen/bjwyMd?editors=1100)
## 34강 : 그리드 : 웹사이트는 그리드를 기반으로 디자인된다. - 그리드 용어 - Gutter : 여백 - Margin : 양 옆 공간 - Column : 거터와 마진을 제외한 공간 - Columns : Column 수 - PC - 대표 사이즈 : 1920px - 가로 사이즈 : 1440px ~ 1920px - Column : 12 - Gutter : 40 - Margin : 20
### 그리드 ![원본이미지](https://i.postimg.cc/nc0fdJ3v/Frame-8.jpg)
### 1080px 그리드 정보 - Columns : 12 - Gutter : 20px - Margin : 10px (**좌우 총 : 20px) - Column : 70px - 레이아웃 사이즈 - 2개 : 520px - 3개 : 340px - 4개 : 250px - 5개 : 196px - 6개 : 160px
### 레이아웃 계산법 - 계산기를 활용하여 코딩에 적용할 수 있습니다. : [영상보기](https://youtu.be/oTAQARR7n-4) - 그리드 계산법 : Grid - Margin - Gutter / Columns - ex) 1080기준 2개 계산 : 1080px - 20px - 20px / 2
## 힌트없이 네비바 만들어보기 - 문제 : [열기](https://codepen.io/kimhyeji324/pen/mdxaJeZ?editors=1100) - 예시 : [확인](https://cdpn.io/pen/debug/wvzpQMg)
## 힌트 참고해서 네비바 만들어보기 - 문제 : [열기](https://codepen.io/kimhyeji324/pen/KKobpMW?editors=1100) - 예시 : [확인](https://cdpn.io/pen/debug/wvzpQMg) ## 35강 : 네비바 구현 - [08.22(월) 네비바 코드 열기](https://codepen.io/kimhyeji324/pen/wvmOeZr?editors=0100) - 필요한 개념 - background-color : [열기](https://codepen.io/jangka44/pen/GRrxONw) - display속성 : [열기](https://codepen.io/kimhyeji324/pen/NWYJaJx?editors=1100) - a태그 : [열기](https://codepen.io/kimhyeji324/pen/NWYJyjK?editors=1010) - 자식 선택자 : [열기](https://codepen.io/kimhyeji324/pen/ZExmZBW) - 후손 선택자 : [열기](https://codepen.io/kimhyeji324/pen/RwMqOGJ) - 동위 선택자 : [열기](https://codepen.io/kimhyeji324/pen/xxWQeLL) - ul,li태그 : [열기](https://codepen.io/kimhyeji324/pen/GRxeJxa?editors=1100) - margin : [열기](https://codepen.io/kimhyeji324/pen/dymrZXE?editors=1010) - padding : [열기](https://codepen.io/kimhyeji324/pen/eYMXeqx) - margin, padding 차이점 : [열기](https://codepen.io/kimhyeji324/pen/OJvqzyx) - inline, inline-block 중앙정렬하는 속성 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/bGvZamQ?editors=1100) - 예제 : [확인](https://codepen.io/kimhyeji324/pen/zYWyGWJ) - block요소 중앙정렬하는 속성 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/oNqVYQa) - 예제 : [확인](https://codepen.io/kimhyeji324/pen/eYMXygw?editors=1100) - 예제 : [확인](https://codepen.io/kimhyeji324/pen/jOzJMjg?editors=1100) - 중앙정렬 속성 총 정리 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/QWmodNv) - 개념 : [열기](https://codepen.io/kimhyeji324/pen/mdxoROJ) - 예제 : [확인](https://codepen.io/kimhyeji324/pen/JjLzbvv?editors=0100) - inherit - 개념 : [열기](https://codepen.io/kimhyeji324/pen/JjLzjZg?editors=1000) - 예시 : [확인](https://codepen.io/kimhyeji324/pen/Yzagzvw?editors=1100) - 주의 : [확인](https://codepen.io/kimhyeji324/pen/rNdRNJQ?editors=1100) - text-deocration - 개념 : [열기](https://codepen.io/kimhyeji324/pen/zYWbYQV) - 노멀라이즈 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/jOzJOvz) - a노멀라이즈 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/yLKwyNZ) - 예제 : [확인](https://codepen.io/kimhyeji324/pen/GRxeRzW?editors=1100) - 예제 : [확인](https://codepen.io/kimhyeji324/pen/bGvZaPz) - ul, li노멀라이즈 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/QWmobVE) - 예제 : [확인](https://codepen.io/kimhyeji324/pen/mdxoJKY?editors=1100) - body 노멀라이즈 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/jOzJEbe) - 예제 : [확인](https://codepen.io/kimhyeji324/pen/MWVxYyR?editors=1100) - main>ul>li>a>span 구조 시각적으로 보기 ![원본이미지](https://i.postimg.cc/d15jSP4f/Group-2.jpg)
## 36강 : main>ul>li구조 - main : [열기](https://codepen.io/kimhyeji324/pen/jOzRWEz?editors=1000) - nav : [열기](https://codepen.io/kimhyeji324/pen/XWEQXdQ?editors=1000) - ul : [열기](https://codepen.io/kimhyeji324/pen/LYdvGRV?editors=1000) - li : [열기](https://codepen.io/kimhyeji324/pen/WNzWrRJ?editors=1000) - main>nav>ul>li : [열기](https://codepen.io/kimhyeji324/pen/abYxdKv?editors=1000)
## 37강 : main태그 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/zYWbjyr?editors=1010)
## 38강 : 최상위 엘리먼트 즉, 처음 생성한 엘리먼트에 그리드 잡으면 안되는 이유 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/oNqOeJY?editors=1100)
## 39강 : inline-block여백 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/mdxgMBm?editors=1000) - 예제 : [확인](https://codepen.io/kimhyeji324/pen/LYdvjOG) - 문제 : [inline-block으로 생긴 여백을 제거해주세요.](https://codepen.io/kimhyeji324/pen/yLKroVR?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/poLBrRO) - 응용문제 : [inline-block으로 생긴 여백을 제거해주세요.](https://codepen.io/kimhyeji324/pen/dymLzWM?editors=1100) - 오답 : [확인](https://codepen.io/kimhyeji324/pen/OJvGjmx) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/QWmPMMx?editors=1100)
## 40강 : hover - 문제 : [마우스를 올렸을때 핑크 배경색이 블루배경색으로 바뀌도록 해주세요.](https://codepen.io/kimhyeji324/pen/poLBrVq) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/GRxLvGM?editors=1100) - 문제 : [마우스를 올렸을때 배경색이 아닌 아이템들이 바뀌도록 코드를 수정해주세요.](https://codepen.io/kimhyeji324/pen/GRxLvGM?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/ExEJvRa?editors=1100) - 문제 : [배경색에 마우스를 올렸을때 아이템 색깔이 바뀌도록 코드를 수정해주세요.](https://codepen.io/kimhyeji324/pen/ExEJvRa?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/vYRMJam?editors=1100) - 문제 : [배경색에 마우스를 올렸을때 첫번째 아이템만 색깔이 바뀌도록 코드를 수정해주세요.](https://codepen.io/kimhyeji324/pen/vYRMJam?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/zYWXdJY)
## 41강 : border-radius - 문제 : [열기](https://codepen.io/kimhyeji324/pen/dymLVdm) - 디테일 커스텀 방향 : [확인](https://slog.gg/p/9887) - 문제 : [각 아이템들 모서가 둥글어지도록 만들어주세요. 값은 상관없습니다.](https://codepen.io/kimhyeji324/pen/ZExZXMp?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/MWVREPj) - 문제 : [아이템이 아닌 배경이 둥글어지도록 코드를 수정 해주세요. 단, 둥글어진 모서리가 눈으로 확인 가능해야 합니다.](https://codepen.io/kimhyeji324/pen/MWVREPj) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/ZExZXmB)
## 42강 : 그리드가 아닌 padding으로 커스텀 - 코드 : [열기](https://codepen.io/kimhyeji324/pen/BarEwbX?editors=1100) - 예시 : [확인](https://cdpn.io/pen/debug/wvzpQMg)
## 43강 : 단계별로 제작 - 1단계 : 엘리먼트를 한번에 담아줄 최상위 엘리먼트 생성한 후 border속성으로 형태를 확인해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/eYMoZPv?editors=1000) - 영상 : [열기](https://youtu.be/bDmBKrpn5Tk) - 2단계 : body 노멀라이즈 해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/vYRMGvQ) - 영상 : [열기](https://youtu.be/frWF7XKW98U) - 3단계 : 그림판 또는 디자인툴을 사용하여 시각적으로 레이아웃을 확인해주세요 - 4단계 : 네이게이션바 그리드 제작을 위한 엘리먼트를 생성 해주세요 - 정답 : [열기](https://codepen.io/kimhyeji324/pen/WNzWwPv) - 영상 : [열기](https://youtu.be/TWTgCxdK1ts) - 5단계 : 그리드 잡을 엘리먼트에게 넓이520, 높이70을 준 후 background-color로 형태를 확인해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/qBowZgY) - 영상 : [열기](https://youtu.be/uhb83g3OVak) - 6단계 : 그리드 잡은 엘리먼트를 중앙으로 정렬 해주세요, 배경컬러는 제거하지 마세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/abYxNME) - 영상 : [열기](https://youtu.be/XjCvSm2A_-4) - 7단계 : 리스트를 제작하는 최상위 엘리먼트와 하위 엘리먼트들을 만들어주세요. 하위 엘리먼트 갯수는 총4개입니다. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/abYxNME) - 영상 : [열기](https://youtu.be/B2fzg757T70) - 8단계 : 리스트태그 노멀라이즈 해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/MWVRydp?editors=1100) - 영상 : [열기](https://youtu.be/0RvFNA3EcCk) - 9단계 : 리스트 하위 엘리먼트안에 이동하기 위한 링크태그 추가 후 코드를 정리해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/BarEzay) - 영상 : [열기](https://youtu.be/rI4LPvxk0I0) - 10단계 : 링크태그를 눌렀을때 이동하기 위한 텍스트를 추가해주세요. 단, 적절한 엘리먼트를 추가 후 텍스트를 추가 해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/ZExZOYy) - 영상 : [열기](https://youtu.be/lTXKdIO3uEM) - 11단계 : 링크태그 노멀라이즈 해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/ZExZOYy) - 영상 : [열기](https://youtu.be/v5FsKxaF5pQ) - 12단계 : 링크태그와 텍스트를 모두 가지고 있는 엘리먼트에 배경컬러를 넣고, 나머지 엘리먼트에 배경컬러와 border속성 모두 제거해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/zYWXBBW?editors=1100) - 영상 : [열기](https://youtu.be/YxCm3VdP3hQ) - 13단계 : 링크태그와 텍스트를 모두 가지고 있는 엘리먼트를 가로로 정렬해준 후 넓이가: 130이 되게 해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/jOzRrmB) - 영상 : [열기](https://youtu.be/7hwur_aa4cc) - 14단계 : 모든 상위 엘리먼트가 텍스트 높이에 맞춰지도록 css에서 높이를 지워주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/wvmZWrW?editors=1100) - 영상 : [열기](https://youtu.be/CdECja5W0Fo) - 15단계 : 리스트 태그를 inline-block으로 바꾸면서 생긴 여백을 삭제시켜주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/zYWXBPL?editors=1100) - 16단계 : 여백을 삭제하면서 사라진 텍스트가 다시 나올 수 있도록 해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/LYdvZdv) - 15,16 영상 : [열기](https://youtu.be/E2rIn7GrVzo) - 17단계 : 텍스트를 가로중앙 정렬해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/GRxLqXo) - 영상 : [열기](https://youtu.be/IktnyPhyXjA) - 18단계 : 텍스트 상하간격을 키우면서 자연스럽게 텍스트가 세로정렬이 되도록 해주세요. 모든 엘리먼트에 border를 제거 해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/RwMOReP) - 영상 : [열기](https://youtu.be/ouJ0_rim0R8) - 19단계 : li에 마우스를 올리면 배경컬러와 텍스트가 바뀌도록 해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/QWmPEzq) - 영상 : [열기](https://youtu.be/v8kU42dRkog) **아래 단계부터는 응용단계 입니다. - 20단계 : li에 마우스를 올리면 텍스트만 선택되는 것이 아닌 높이넓이 전체 선택이 되도록 바뀌도록 코드를 수정 해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/mdxgEvV?editors=1100) - 영상 : [열기](https://youtu.be/kLECWQ7QQ8o) - 21단계 : 모서리가 둥글어지도록 커스텀 해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/poLBbMV?editors=1100) - 영상 : [열기](https://youtu.be/Iu2a6dpt9cs) - 전시간에 만들었던 방법 | nav가 아닌 ul에 padding을 사용했을때 | 즉, nav에도 ul에 padding을 사용해도 상관없지만 코드가 길어질 뿐입니다. - 코드 : [열기](https://codepen.io/kimhyeji324/pen/wvmOeZr?editors=0100) - 영상 : [열기](https://youtu.be/oryBEBeBWIE)
## 44강 : 20단계부터는 응용단계 입니다. - li에 마우스를 올리면 텍스트만 선택되는 것이 아닌 높이넓이 전체 선택이 되도록 바뀌도록 코드를 수정 해주세요. - 정답 : [확인](https://codepen.io/kimhyeji324/pen/rNdgrmw?editors=1100)
## 45강 : 21단계 - 모서리가 둥글어지도록 커스텀 해주세요. - 정답 : [확인](https://codepen.io/kimhyeji324/pen/VwXOBmG?editors=1100)
## 46강 : nav와 ul 패딩 차이 - 개념 : [넓이가 고정되어있는 최상위 엘리먼트에 padding을 줬을때](https://codepen.io/kimhyeji324/pen/bGvyKdK) - 결과 : 부모 최종 넓이가 넓어지면서 자식 공간을 침범하지 않는다. - 개념 : [넓이가 고정되어있는 최상위 엘리먼트 자식에게 padding을 줬을때](https://codepen.io/kimhyeji324/pen/ZExNRbd) - 결과 : 부모 최종 넓이를 넘어서면서 자식들 레이아웃이 무너진다. - 결론 : 디자인 할때 패딩공간까지 계산해서 해야한다. 디테일한 커스텀 시작전 레이아웃은 잡고 시작 하는것이 좋다.
## 47강 : a안에 span - 문제 : [네이버 이동을 누르면 사이트로 이동할 수 있도록 html을 수정해주세요.](https://codepen.io/kimhyeji324/pen/WNzByOP) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/dymEKzR)
## 48강 : 부모엘리먼트는 자식엘리먼트에게 가려진다. - 문제 : [부모엘리먼트 배경이 나오도록 해주세요.](https://codepen.io/kimhyeji324/pen/ZExNRaY) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/vYRwrpp) - 문제 : [width를 사용하지 않고 자식엘리먼트보다 넓어지게 해주세요.](https://codepen.io/kimhyeji324/pen/ZExNRaY) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/WNzBydm)
## 마켓컬리 만들어보기 - 마켓컬리 : [이동](https://www.kurly.com/main) ## 49강 : 1080px 그리드 잡기 1단계 - 문제 : [아래 이미지처럼 코드를 짜주세요.](https://codepen.io/kimhyeji324/pen/VwXOdJx?editors=1000) ![원본이미지](https://i.postimg.cc/g2g67hsH/1.jpg) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/xxWNzNr?editors=1100)
## 50강 : 1080px 그리드 잡기 2단계 - 문제 : [아래 이미지처럼 코드를 짜주세요.](https://codepen.io/kimhyeji324/pen/LYdoBVQ) ![원본이미지](https://i.postimg.cc/qMtYqchz/2.jpg) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/abYrjzy)
### 51강 : 520px 안에서 그리드 잡기 - 문제 : [아래 이미지처럼 코드를 짜주세요. border제외](https://codepen.io/kimhyeji324/pen/abYrjzy) ![원본이미지](https://i.postimg.cc/KcMzSPn2/3.jpg) - 1단계 정답 : [width: 130px, span태그](https://codepen.io/kimhyeji324/pen/xxWNMvr?editors=1100) - 2단계 정답 : [inline-block](https://codepen.io/kimhyeji324/pen/mdxYobz) - 3단계 정답 : [border](https://codepen.io/kimhyeji324/pen/RwMmdNY) - 4단계 정답 : [inline-block 여백](https://codepen.io/kimhyeji324/pen/yLKWwYO) - 5단계 정답 : [span태그](https://codepen.io/kimhyeji324/pen/bGvyZVX) - 6단계 정답 : [border제거](https://codepen.io/kimhyeji324/pen/RwMmdre)
### 52강 : 디테일 커스텀1 - 문제 : [아래 이미지처럼 코드를 짜주세요. border제외](https://codepen.io/kimhyeji324/pen/RwMmdre) ![원본이미지](https://i.postimg.cc/HkBW4BCQ/4.jpg) - 1단계 정답 : [html 텍스트 수정](https://codepen.io/kimhyeji324/pen/OJvYqrV?editors=1100) - 2단계 정답 : [text-align: center](https://codepen.io/kimhyeji324/pen/YzabgMb?editors=1100) - 3단계 정답 : [text-align: right](https://codepen.io/kimhyeji324/pen/QWmRoXp?editors=1100)
### 53강 : 디테일 커스텀2 - 문제 : [아래 이미지처럼 코드를 짜주세요. border제외](https://codepen.io/kimhyeji324/pen/QWmRoXp?editors=1100) ![원본이미지](https://i.postimg.cc/nr4ps1k9/5.jpg) - 1단계 : [배송안내 배경색과 공간생성](https://codepen.io/kimhyeji324/pen/MWVdRmG?editors=1100) - 2단계 : [inline-block](https://codepen.io/kimhyeji324/pen/qBoGwjz) - 3단계 : [padding](https://codepen.io/kimhyeji324/pen/KKoLYvQ?editors=1100) - 4단계 : [border-radius](https://codepen.io/kimhyeji324/pen/YzabMYy) - 5단계 : [margin](https://codepen.io/kimhyeji324/pen/MWVdRrB)
### 54강 : 디테일 커스텀3 - 문제 : [아래 이미지처럼 코드를 짜주세요. border제외](https://codepen.io/kimhyeji324/pen/MWVdRrB) ![원본이미지](https://i.postimg.cc/Cx1pY0Wq/6.jpg) - 1단계 : [border 테두리 생성](https://codepen.io/kimhyeji324/pen/ExEzJQJ?editors=1100) - 2단계 : [background-color와 border제거](https://codepen.io/kimhyeji324/pen/wvmbZmq?editors=1100)
### 55강 : 디테일 커스텀4(응용) - 문제 : [아래 이미지처럼 코드를 짜주세요. border제외](https://codepen.io/kimhyeji324/pen/wvmbZmq?editors=1100) ![원본이미지](https://i.postimg.cc/5tyLWs53/7.jpg) - 3단계 : [html 텍스트 분리](https://codepen.io/kimhyeji324/pen/PoRvgep) - 4단계 : [html a태그](https://codepen.io/kimhyeji324/pen/qBoGwKW?editors=1010) - 5단계 : [span에 되어있는 커스텀을 a로 이동](https://codepen.io/kimhyeji324/pen/OJvYGEm?editors=1100) - 6단계 : [inline-block](https://codepen.io/kimhyeji324/pen/gOeJydm?editors=1100) - 7단계 : [a가 포함된 span에 개별 커스텀](https://codepen.io/kimhyeji324/pen/RwMmOvo?editors=1100) - 8단계 : [좌우 padding a로 이동](https://codepen.io/kimhyeji324/pen/rNdgbRb) - 9단계 : [a노말라이즈](https://codepen.io/kimhyeji324/pen/zYWQXXV) - 10단계 : [html class적용](https://codepen.io/kimhyeji324/pen/MWVdRdZ?editors=1100) - 11단계 : [텍스트 디테일 커스텀](https://codepen.io/kimhyeji324/pen/vYRwMog?editors=1100)
## 56강 : img태그 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/MWVMLrd?editors=1000) - 예제 : [열기](https://codepen.io/kimhyeji324/pen/Bargvoo)
## 57강 : 배너이미지에 고정픽셀 - 개념 : [열기](httpshttps://codepen.io/kimhyeji324/pen/rNdEoxJ)
## 58강 : 작은 이미지에 고정픽셀 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/rNdEoMd?editors=1100)
## 59강 : 작은 이미지에 높이 고정 픽셀 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/NWYZoyL)
## 마켓컬리 이미지 레이아웃 잡기 ## 60강 : 1920px 그리드 - 문제 : [아래 이미지처럼 코드를 짜주세요.](https://codepen.io/kimhyeji324/pen/yLKdGgz?editors=1100) ![원본이미지](https://i.postimg.cc/Y0B4g4zZ/8.jpg) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/rNdEoyv?editors=1100)
## 61강 : 1920px 그리드에 배너 이미지 적용 - 문제 : [배너 이미지를 적용 해주세요.](https://codepen.io/kimhyeji324/pen/rNdEoyv?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/ExEBGXd?editors=1100)
## 62강 : 상품리스트 1080xp 그리드 1단계 - 문제 : [아래 이미처럼 코드를 짜주세요.](https://codepen.io/kimhyeji324/pen/ExEBGXd?editors=1100) ![원본이미지](https://i.postimg.cc/v8v8XSYc/9.jpg) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/wvmLRpg?editors=1100)
## 63강 : 배너와 상품리스트 여백 - 문제 : [아래 이미처럼 코드를 짜주세요.](https://codepen.io/kimhyeji324/pen/wvmLRpg?editors=1100) ![원본이미지](https://i.postimg.cc/sgf9N8Cx/10.jpg) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/PoRrXeG?editors=1100)
## 64강 : 상품리스트 1080xp 그리드 2단계 - 문제 : [아래 이미처럼 코드를 짜주세요.](https://codepen.io/kimhyeji324/pen/PoRrXeG?editors=1100) ![원본이미지](https://i.postimg.cc/sDx5PWYG/11.jpg) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/VwXJqBw?editors=1100)
## 65강 : 상품리스트 이미지 적용 - 문제 : [상품 이미지를 적용 해주세요.](https://codepen.io/kimhyeji324/pen/VwXJqBw?editors=1100) - 1단계 : [html_img](https://codepen.io/kimhyeji324/pen/ZExdVMj?editors=1100) - 2단계 : [img 사이즈 조정](https://codepen.io/kimhyeji324/pen/xxWomye?editors=1100)
## 66강 : 텍스트태그 종류 ### p 태그 | 노멀라이즈 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/eYMXmWO?editors=1000) - 노멀라이즈 예시 : [열기](https://codepen.io/kimhyeji324/pen/xxWBGaj?editors=1100) - 문제 : [열기](https://codepen.io/kimhyeji324/pen/MWVLjKN?editors=1100) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/eYMwxNx?editors=1100) ### h1, h2, h3, h4, h5, h6 | 노멀라이즈 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/wvmOBVO?editors=1000) - 노멀라이즈 예시 : [열기](https://codepen.io/kimhyeji324/pen/RwMdPem) ### 텍스트태그 관계 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/yLKwNNY?editors=1000) ### span태그 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/GRxeJrz?editors=1010) ### 텍스트태그 활용예시 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/KKoEpgd?editors=1000)
## 마켓컬리 텍스트 레이아웃 잡기
## 67강 : 상품 리스트 상단 텍스트 추가 - 문제 : [이 상품 어때요? 텍스트를 추가 해주세요.](https://codepen.io/kimhyeji324/pen/xxWomye?editors=1100) - 1단계 : [h1,h2 텍스트 추가 후 중앙정렬 해주세요.](https://codepen.io/kimhyeji324/pen/QWmXzem?editors=1100) - 2단계 : [h태그 노멀라이즈](https://codepen.io/kimhyeji324/pen/OJvedRO?editors=1100) - 3단계 : [텍스트와 상품리스트 간격 30px](https://codepen.io/kimhyeji324/pen/qBozgmb)
## 68강 : 상품 리스트 하단 상품명 추가 - 문제 : [첫번째 상품 이미지 하단 텍스트를 적절한 곳에 추가 해주세요.](https://codepen.io/kimhyeji324/pen/qBozgmb) - 1단계 : [section에 추가 후 커스텀](https://codepen.io/khjsbs324/pen/MWGYrPj?editors=1100) - 2단계 : [noto sans KR 폰트 적용 후 두께 커스텀 해주세요.](https://codepen.io/khjsbs324/pen/gOzboZE) - 3단계 : [모든 상품 이미지에 텍스트를 추가 해주세요.](https://codepen.io/khjsbs324/pen/eYrmyXv?editors=1100) - 4단계 : [텍스트 디테일 커스텀 및 코드수정](https://codepen.io/khjsbs324/pen/xxjbBOo?editors=1100) - css 아무 곳 클릭 → ctrl+f → "추가코드" 검색 *2번까지 있습니다. - html코드도 수정 되었습니다.
## 69강 : 두번째 상품 리스트 추가 - 1단계 : [선물세트판매 공간 추가](https://codepen.io/khjsbs324/pen/QWrwXZV?editors=1100) - 2단계 : [레이아웃 겹침 현상 수정](https://codepen.io/khjsbs324/pen/rNvaEXN?editors=1100) - css 아무 곳 클릭 → ctrl+f → "삭제코드" 검색 - 3단계 : [backgroun-color 및 margin 커스텀](https://codepen.io/khjsbs324/pen/GRdgVKy?editors=1100) - css 아무 곳 클릭 → ctrl+f → "코드" 검색 - 4단계 : [텍스트, 이미지 수정](https://codepen.io/khjsbs324/pen/PoewMPe?editors=1100)
## 네비바 - 배경이미지 - 상품리스트 웹표준으로 제작 [Ver.all_class] - 1단계 : [열기](https://codepen.io/khjsbs324/pen/VwxYoEx?editors=1100) - 2단계 : [열기](https://codepen.io/khjsbs324/pen/MWGwgvv?editors=1100) - 3단계 : [열기](https://codepen.io/khjsbs324/pen/xxjGpWg?editors=1000) - 4단계 : [열기](https://codepen.io/khjsbs324/pen/vYjOdYz?editors=1100) - 5단계 : [열기](https://codepen.io/khjsbs324/pen/poVJaJy?editors=1100) - 6단계 : [열기](https://codepen.io/khjsbs324/pen/MWGwQJJ?editors=1100) - 7단계 : [열기](https://codepen.io/khjsbs324/pen/NWMqYpv?editors=1100) - 최종 : [Ver.all_class](https://codepen.io/khjsbs324/pen/vYjOjZW)
## 네비바 - 배경이미지 - 상품리스트 웹표준으로 제작 - 1단계 : [열기](https://codepen.io/khjsbs324/pen/oNdXQyX) - 2단계 : [열기](https://codepen.io/khjsbs324/pen/gOzpZqB?editors=1010) - 3단계 : [열기](https://codepen.io/khjsbs324/pen/VwxLgeB) - 4단계 : [열기](https://codepen.io/khjsbs324/pen/gOzpqxN?editors=1100) - 5단계 : [열기](https://codepen.io/khjsbs324/pen/YzLXBaB?editors=1100) - 6단계 : [열기](https://codepen.io/khjsbs324/pen/bGMdzOp?editors=1100) - 7단계 : [열기](https://codepen.io/khjsbs324/pen/Jjvdzwj?editors=1100) - 최종 : [Ver.간결한 코드](https://codepen.io/khjsbs324/pen/eYrNoJq?editors=1100)
## 텍스트 줄이 다를때 - 개념 : [text-box 있을때 vertical-align](https://codepen.io/kimhyeji324/pen/OJZPovd?editors=1100) - 개념 : [text-box 없을때 vertical-align](https://codepen.io/kimhyeji324/pen/BaxyOqe)
## 자주 햇갈리는 코드 - 문제 : [block, inline-block 중앙정렬](https://codepen.io/kimhyeji324/pen/bGvXNvg?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/bGvXmPx) - 문제 : [텍스트 중앙정렬](https://codepen.io/kimhyeji324/pen/bGvXNMq) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/dymxgxv) - 문제 : [레이아웃 원리](https://codepen.io/kimhyeji324/pen/KKoOwBy?editors=1010) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/JjLgePR?editors=1100) - 문제 : [레이아웃 안에서 레이아웃 나누기](https://codepen.io/kimhyeji324/pen/LYdwEXw?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/MWVNzgN?editors=1100) - 문제 : [이미지 중앙정렬](https://codepen.io/kimhyeji324/pen/JjLgowq) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/ZExgmGE) - 문제 : [텍스트태그 활용](https://codepen.io/kimhyeji324/pen/KKoOwLo) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/LYdwXVW)
## 70강 : 네비바 복습 - 문제 : [열기](https://codepen.io/kimhyeji324/pen/XWqrrRG)
## 71강 : 이미지 정렬 object-fit 속성 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/VwXoGEo?editors=1100)
## 72강 : contain 속성 값 - 예제 : [열기](https://codepen.io/kimhyeji324/pen/dymxgOY?editors=1100)
## 73강 : object-position 속성 값 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/yLKmREZ?editors=1010) - 예제 : [열기](https://codepen.io/kimhyeji324/pen/LYdwgBN)
## 74강 : 텍스트 태그 활용 - 문제 : [열기](https://codepen.io/kimhyeji324/pen/BaxBBzR) - 방법1 : [확인](https://codepen.io/kimhyeji324/pen/wvjwwWe?editors=1100) - 문제 : [열기](https://codepen.io/kimhyeji324/pen/JjvPPPV?editors=1100) - 방법2: [확인](https://codepen.io/kimhyeji324/pen/rNvBBBZ?editors=1100)
## 75강 : white-space 속성 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/PoeYYKm?editors=1100)
## 76강 : overflow 속성 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/abGooMO?editors=1100)
## 77강 : class - 개념 : [열기](https://codepen.io/kimhyeji324/pen/GRdKRrd?editors=1000)
## 78강 : ul, li [짝꿍 입니다. 홀로 쓸 수 없어요!] - 개념 : [열기](https://codepen.io/jangka44/pen/EpWOam?editors=1000)
## 79강 : vertical-align 속성 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/qBogqBx) - 예제 : [보기](https://codepen.io/kimhyeji324/pen/xxWMzpj?editors=1100)
## 80강 : display속성값에 따라 달라지는 text-decoration - 개념 : [inline | inline | inline-block 비교](https://codepen.io/kimhyeji324/pen/ZEozLXG?editors=1100) - 개념 : [inline | inline | inline-block hover 비교](https://codepen.io/kimhyeji324/pen/rNvBjwO?editors=1100)
## 81강 : 노멀라이즈 주의사항 - 개념 : [열기](https://codepen.io/khjsbs324/pen/rNvNNJV)
## 82강 : 부모 엘리먼트와 자식 엘리먼트 - 문제 : [열기](https://codepen.io/kimhyeji324/pen/jOxNLxy?editors=1000) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/XWqraxE?editors=1100)
## 83강 : 그리드 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/RwybZvb?editors=1000) - 문제 : [그리드를 잡을 수 있는 엘리먼트를 작성해주세요.](https://codepen.io/kimhyeji324/pen/vYjBJbo?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/ZEozJPr?editors=1000)
## 84강 : a태그 hover - 문제 : [a태그 커스텀 없이 커지기](https://codepen.io/khjsbs324/pen/xxjKvvy) - 정답 : [확인](https://codepen.io/khjsbs324/pen/oNdNvNO) - 문제 : [hover가 제대로 작동하도록 코드를 수정해주세요.](https://codepen.io/khjsbs324/pen/PoeYMWv?editors=1100) - 정답 : [확인](https://codepen.io/khjsbs324/pen/XWqrvGE?editors=1100)
## 85강 : ul태그 inline-block - 개념 : [활용방법 열기](https://codepen.io/kimhyeji324/pen/qBYWmVB?editors=1100)
## 86강 : line-height속성과 속성 값 단위 - 개념 : [열기](https://codepen.io/khjsbs324/pen/abGbbpv?editors=1000) - 예제 : [px 예제 확인](https://codepen.io/khjsbs324/pen/vYjYYap?editors=1100) - 예제 : [em 예제 확인](https://codepen.io/khjsbs324/pen/VwxwwEr?editors=1100) - 예제 : [단위없이 예제 확인](https://codepen.io/khjsbs324/pen/ZEoEENQ) - 예제 : [세로 중앙 정렬](https://codepen.io/khjsbs324/pen/KKRKMMb)
## 87강 : font-famail 속성 - 한글 폰트 : [눈누](https://noonnu.cc/) - 사이트 버벅거림, 로딩안됨 오류가 가끔씩 있습니다. - 영문 폰트 : [구글폰트](https://fonts.google.com/earlyaccess) - 개념 : [눈누 한글폰트 적용](https://codepen.io/khjsbs324/pen/gOzOMmo?editors=1100) - 개념 : [구글 한글폰트 적용](https://codepen.io/khjsbs324/pen/JjvjRKO?editors=1100) - 개념 : [구글 영문 폰트 적용](https://codepen.io/khjsbs324/pen/vYjYXgV?editors=1100) - 개념 : [한글폰트가 안될때 영문폰트도 안되면 기본폰트](https://codepen.io/khjsbs324/pen/OJZJRge) - 개념 : [포인트 폰트 적용](https://codepen.io/khjsbs324/pen/bGMGwoG?editors=1100)
## 88강 : icon - 링크 가져오기 : [cdnjs](https://cdnjs.com/) - 관련사이트 : [폰트어썸](https://fontawesome.com/) - 개념 : [링크 불러오기, 아이콘 적용](https://codepen.io/khjsbs324/pen/LYmYRQr) - 개념 : [아이콘 커스텀](https://codepen.io/khjsbs324/pen/LYmYRQr)
## 89강 : font-weight 값 종류 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/KKRwyKo?editors=1010)
## 90강 : 웹폰트에 font-weight 속성 적용 - 한글 폰트 : [눈누](https://noonnu.cc/) - 사이트 버벅거림, 로딩안됨 오류가 가끔씩 있습니다. - 개념 : [열기](https://codepen.io/kimhyeji324/pen/MWGYENX)
## 91강 : background-image 속성 - 개념 : [열기](https://codepen.io/khjsbs324/pen/LYmEOqb?editors=1100) - 예제 : [background-size](https://codepen.io/khjsbs324/pen/vYjEWJy) - 예제 : [background-position](https://codepen.io/khjsbs324/pen/WNJbXBL) - 예제 : [background-repeat](https://codepen.io/khjsbs324/pen/XWqJzGJ?editors=1100) - 예시 : [사용예시 열기](https://codepen.io/khjsbs324/pen/poVvpzX?editors=1100) - 문제 : [header이미지를 background-image로 바꿔주세요.](https://codepen.io/kimhyeji324/pen/qBozgmb) - 정답 : [확인](https://codepen.io/khjsbs324/pen/ExLaoXZ)
## 90강 : margin병합 - 개념과 예제 : [열기](https://codepen.io/khjsbs324/pen/qBYEpqj?editors=1100) - 문제 : [header와 section사이에 마진병합 현상을 해결해주세요.](https://codepen.io/kimhyeji324/pen/yLjyEXX?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/oNdgyWJ?editors=1100)
## 질문 코드 - 마켓컬리 2차메뉴 간단 구현 → 5단계 css에서 ctrl + f /*배우지 않은 개념*/ 검색 - 난이도 : 웹2 중반 목표 - 1단계 : [최상단](https://codepen.io/kimhyeji324/pen/RwMXNaz?editors=1000) - 2단계 : [네비바](https://codepen.io/kimhyeji324/pen/mdxNdqQ?editors=1000) - 3단계 : [2차메뉴 구현](https://codepen.io/kimhyeji324/pen/BarXyzo?editors=1100) - 4단계 : [2차메뉴 커스텀](https://codepen.io/kimhyeji324/pen/mdxNdZY?editors=1100) - 5단계 : [배너 와 상품리스트](https://codepen.io/kimhyeji324/pen/NWYQPxr?editors=1100)
- 마켓컬리 탑바-배너-리스트 구현 - 난이도 : 웹2 초중반 목표 - 1단계 : [탑바 레이아웃 깨지는 원인 해결, 주석, 탑바 css코드 정리](https://codepen.io/kimhyeji324/pen/KKRPabw?editors=1100) - 2단계 : [탑바 디테일 커스텀](https://codepen.io/kimhyeji324/pen/wvjwJMw?editors=1100) - 3단계 : [상품 리스트 커스텀](https://codepen.io/kimhyeji324/pen/LYmPWyJ?editors=1100) - 질문 : 노멀라이즈 없을때 인라인 블록을 하니 밑줄이 없어진 이유 - 답변 : 80강 : display속성값에 따라 달라지는 text-decoration에 올려 두었습니다^^~ - 질문 : section이 inline-block처리가 되어있어서 h2를 사용하면 깔끔한 이유 - 답변 : 아래 자료 처럼 inline요소인 span태그를 사용해버리면 이미지와 한줄에 표현 되어버리기 때문에 css에서 span을 block으로 바꿔줘야하는 - 귀찮은 일이 발생하게 됩니다. 하지만 block요소인 h태그를 활용한다면 커스텀을 다시 안해주어도 됩니다^^~~ - 관련 자료 : [텍스트태그 활용 열기](https://codepen.io/kimhyeji324/pen/KKoOwLo)
- 폰트 굵기 적용하기 - 1단계 : [border적용해서 선택자가 제대로 적혀있는지 확인](https://codepen.io/kimhyeji324/pen/NWMPORx?editors=1100) - border적용 했을때 작동이 되지 않음으로 선택자에 문제가 있음을 알 수 있습니다. - 2단계 : [선택자 제대로 수정하기](https://codepen.io/kimhyeji324/pen/rNvaqyp?editors=1100) - h3 대신 부모엘리먼트인 section을 넣었을때 border가 정상 작동 되는것을 확인할 수 있습니다. - 최종 : [확인](https://codepen.io/kimhyeji324/pen/NWMPOgr?editors=1100)

게시글 상세