$$config title: 웹 퍼블리셔 과정_1 2기 keywords: - IT - ... $$ # 개요 - 개강: 2022년 10월 4일 - 페이지: slog.gg/p/10647 # 스터디정보 - 강사: 고대호 - 연락처: 010-4090-0041 # 관련주소 - 새 펜 열기 : [codepen.io/pen](codepen.io/pen) - 폰트어썸 : [to2.kr/dPB](to2.kr/dPB) - 주소 줄이기: [to2.kr](to2.kr) - cdnjs : [cdnjs.com](cdnjs.com) - 이미지 호스팅 : [postimages.org](postimages.org) - 모작 사이트 : [디비컷 이동](https://www.dbcut.com/) - 모작 기록 : [블로그 가입](https://slog.gg/p/) # 목차 - 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강 : 키보드 및 단축키 사용법 # 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태그 예시 - Q&A - <여는태그> → 태그 - 내용을 썼을때 그 내용이 어떤 종류인지 컴퓨터에게 알려주는 것, 꼬리표 - <여는태그>내용물 → 엘리먼트 # 5강 : CSS사용법 - 개념 : 열기 - Q&A - 태그{css} # 6강 : 배경색, 너비, 높이 - 개념 : [열기](https://codepen.io/kodaeho/pen/KKRRvLM) - Q&A - background-color → 배경색 - width → 넓이 - height → 높이 - 높이에 값을 넣었을때 넓이가 자동으로 넓어지는 이유 → 엘리먼트 기본 속성 설정 때문 - 7강 : div, section, article 의미, 사용해서 3가지 색의 막대 - 문제 : 3가지 막대가 전부 높이100px, 넓이 기본이 되도록 만들어주세요 - 예시 : 보기 # 문제 - 문제 : div로 열린태그와 닫힌태그를 만들어주세요 [문제](https://codepen.io/pen) - 정답 : [확인](https://codepen.io/kodaeho/pen/MWGGvRJ) - 팁 : div + 단축기Tab = < div >< /div >자동완성 - 질문 : 태그가 몇개인가요? - 답 : 닫힌태그1개와 열린태그1개 총 2개 - 문제 : div안에 텍스트를 넣어서 엘리먼트를 완성시켜주세요[문제](https://codepen.io/pen) - 정답 : [확인](https://codepen.io/kodaeho/pen/MWGGvRJ) - 질문 : 엘리먼트가 태그와 다른점은 무엇인가요? - 정답 : 열린태그 + 텍스트 + 닫힌태그를 엘리먼트라고 합니다 - 문제 : 텍스트 포함 span 엘리먼트를 만든 후 배경색과 텍스트색상을 바꿔주세요[문제](https://codepen.io/pen) - 정답 : [확인](https://codepen.io/kodaeho/pen/mdLLMgo) - Tip : css는 선택자 {속성: 값;} 을 사용해서 커스텀 합니다. - 문제 : div 태그를 만든 후 배경색상속성과 높이속성 값500px를 주세요, 넓이 속성 값x[문제](https://codepen.io/pen) - 정답 : [확인](https://codepen.io/kodaeho/pen/KKRRvLM) - 질문 : 높이속성 값만 주어도 요소가 생기는 이유는 무엇인가요? - 답 : 기본속성이 display: block이기 때문입니다. - Tip : 넓이 속성에 기본값은 auto입니다. auto값은 부모엘리먼트에 넓이를 물려받는다는 것을 의미합니다. # 8강 : display 속성 개념 - 개념 : [열기](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강 : 선택자, 엘리먼트를 칭하는 이름 - 개념 : [열기](https://codepen.io/jangka44/pen/bQqbpZ) - 문제 : [빈칸을 채워주세요](https://codepen.io/kimhyeji324/pen/gOedRRB?editors=1010) # Q&A - 나를 감싸는 엘리먼트 → 부모 엘리먼트 - 내가 감싸는 엘리먼트 → 자식 엘리먼트 - 같은 부모를 둔 엘리먼트 → 형제 엘리먼트 - css는 html에서 선택자를 집어서 속성의 값을 바꿀 수 있다. - 속성은 무엇이고 속성값은 무엇일까요? - ex) 속성 : display, background, color, font-size 등등 - ex) 속성값 : block, inline-block, inlne, px, % 등등 - css를 사용하려면 어떤 식을 써야 하나요? - 선택자 {속성: 속성값}; - 식이 끝날때 꼭 ; ← 이런 땀표시를 해야하나요? - 꼭 사용해야 합니다. 사용하지 않으면 다음 속성이 실행되지 않습니다. - 여러개에 선택자를 집을 수 있나요? - 선택자, 선택자, 선택자 {속성: 속성값}; 처럼 사용할 수 있습니다. - html에서 100개에 태그를 한번에 만들 수 있나요? - html에서 * 를 사용하면 됩니다 # inline과 inlne-block 차이점은 한가지다 - 넓이가 최소한으로 줄어들지만 inline은 넓이와 높이 속성이 먹히지 않고, inline-block은 넓이와 높이 속성이 먹힌다. - 어떤 상황마다 써야하나요? - 기본 속성값이 inlne-block 태그는 많이 없습니다. - 대부분 inline과 block이 기본 속성인데요, - inline 속성을 그대로 가지고 높이와 공간을 수정하고 싶을때 inline-block이라는 속성값으로 커스텀하여 사용합니다. # 10강 : 자주 사용하는 태그 종류와 쓰임새 - 자료 : [보기](https://slog.gg/p/9618) - 개념 : 구조만 보신 후 외우시지 않으셔도 됩니다. 웹 표준을 왜 사용하는지 정도만 이해하시면 됩니다.[보기](https://codepen.io/kodaeho/pen/RwyBXKV) # 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 > → 줄바꿈할때 사용 # 11강: CLASS - [CLASS](https://codepen.io/kimhyeji324/pen/BarOqQZ) - 나중에 자세히 # 12강 : 젠코딩 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/XWEyGvX) - * → 여러개 - $ → 1~n - . → class - {} → 텍스트 - [] → 속성 - () → 그룹 - + → 인접동생 - > → 자식 # 13강 : 하이퍼링크 a와 br - 개념 : [열기](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 속성 → target="_title" : 링크에 마우스를 올렸을때 부가설명 말풍선이 뜸 - a젠코딩 → a[href="링크"]{텍스트}*숫자 - 예시 : [보기](https://codepen.io/kodaeho/pen/RwyBXKV) # 13강 : 주석 - 개념 : [열기](https://codepen.io/kodaeho/pen/MWGBNrd) # Q&A - 주석 활용방법은? - HTML → 레이아웃 구분 - CSS→ 코드 실험, 잠시 지워두고 싶을때 활용도 높음 # 14강 : F12 - 예시 : 예시에서 텍스트 커스텀이 어떻게 되어있는지 확인해주세요.[예시](https://cdpn.io/pen/debug/mjPYqy) # Q&A - 다른 사이트에 코드를 볼 수 있습니다. # 15강 : 텍스트 커스텀 - 개념 : [열기](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 → ★ # 16강 : 선택자 - 개념 : [자식 선택자](https://codepen.io/kimhyeji324/pen/ZExmZBW) - 개념 : [후손 선택자](https://codepen.io/kimhyeji324/pen/RwMqOGJ) - 개념 : [전체 선택자](https://codepen.io/kimhyeji324/pen/XWEyQNN) - 개념 : [동위 선택자](https://codepen.io/kimhyeji324/pen/xxWQeLL) - 구조 선택자 : 다음 수업시간에 하겠습니다. - 동위 선택자는 + , ~ 표현이 존재합니다~ : 나와 동급인 녀석들+ : 나와 동급인 녀석들중 나와 바로 밑에 붙어있는 녀석 - 출처: [Sw.Dev:티스토리](https://yoonemong.tistory.com/164) # Q&A - 원래 알고 있던 개념 - 최하단에 있는 속성힘이 가장 강하다. - 새로 알게된 개념 - 최하단에 있는 속성보다 선택자를 사용한 속성이 힘이 더 강하다. # 17강 : border - 개념 : [선 만들기](https://codepen.io/kodaeho/pen/MWGBNrd) - 활용방법 - 디테일 작업 전 레이아웃을 먼저 잡을때 활용, 커스텀용도 # 과제( 토요일 수업 전까지 풀어보세요) - [과제](https://cdpn.io/pen/debug/ZEoMRyQ?authentication_hash=yokZEBnYbnVA) - div, section, a 만을 사용해야합니다. - f12를 통해 크기를 확인해도 좋지만 배끼면 안되요~ - 링크는 새탭을 통해 나오게 해주세용 # 18강 : margin, paddig - 개념 : [열기](https://codepen.io/kimhyeji324/pen/PoRxgQg?editors=1100) # Q&A - padding → 선택자 기준 안쪽공간 생성 - margin : 선택자 기준 바깥공간 생성 - margin: 전체px - 예시 : margin: 10px - margin: 상px 하px 좌px 우px - 예시 : margin: 10px 5px 10px 5px - margin: 상하px 좌우px - 예시 : margin: 5px 10px # 19강 : 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형태일때 정렬하는 방법이 따로 있다. *수업 진행 예정 # 20강 : 모든 보이는 엘리먼트의 조상은 body이고, 그의 부모는 html 이다. - 즉 처음 생성한 엘리먼트에 부모는 body이기 때문에 모든 속성은 body에게 상속받는다. - 추가개념 : margin: auto *추가개념은 개념공개 후 수업시간에 다시한번 언급하겠습니다. - 24강 : margin: 0 auto : display:block요소 중앙정렬 **추가개념 : [열기](https://codepen.io/kimhyeji324/pen/eYMXygw?editors=1100) - 10.11(화): 추가 설명 하도록 하겠습니다. - 개념 : [열기](https://codepen.io/kimhyeji324/pen/oNqVYQa) - 예시 : [열기](https://codepen.io/kimhyeji324/pen/jOzJMjg?editors=1100) # 21강 : 중앙정렬 총 정리 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/QWmodNv) - 개념 : [열기](https://codepen.io/kimhyeji324/pen/mdxoROJ) - 개념 : [열기](https://codepen.io/kimhyeji324/pen/JjLzbvv?editors=0100) # 22강 : ul, li - 개념 : [열기](https://codepen.io/kimhyeji324/pen/GRxeJxa?editors=1100) # 23강 : 속성 text-deocration - 개념 : [열기](https://codepen.io/kimhyeji324/pen/zYWbYQV) # 24강 : 속성값 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) # 25강 : 노멀라이즈 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/jOzJOvz) - 예시 : [열기](https://codepen.io/kimhyeji324/pen/GRxeRzW?editors=1100) # 26강 : body 노멀라이즈 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/jOzJEbe) - 예시 : [열기](https://codepen.io/kimhyeji324/pen/MWVxYyR?editors=1100) # 27강 : ul, li 노멀라이즈 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/QWmobVE) - 예시 : [열기](https://codepen.io/kimhyeji324/pen/mdxoJKY?editors=1100) # 28강 : a 노멀라이즈 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/yLKwyNZ) - 예시 : [열기](https://codepen.io/kimhyeji324/pen/GRxeRzW?editors=1100) - 예시 : [열기](https://codepen.io/kimhyeji324/pen/bGvZaPz) # 29강 : border-radius - 개념 : [열기](https://codepen.io/jangka44/pen/bjwyMd?editors=1100) # 30강 : hover - 문제 : [마우스를 올렸을때 핑크 배경색이 블루배경색으로 바뀌도록 해주세요.](https://codepen.io/kimhyeji324/pen/poLBrVq) - 문제 : [마우스를 올렸을때 배경색이 아닌 아이템들이 바뀌도록 코드를 수정해주세요.](https://codepen.io/kimhyeji324/pen/GRxLvGM?editors=1100) - 문제 : [배경색에 마우스를 올렸을때 아이템 색깔이 바뀌도록 코드를 수정해주세요.](https://codepen.io/kimhyeji324/pen/ExEJvRa?editors=1100) - 문제 : [배경색에 마우스를 올렸을때 첫번째 아이템만 색깔이 바뀌도록 코드를 수정해주세요.](https://codepen.io/kimhyeji324/pen/vYRMJam?editors=1100) # 텍스트 문제 - 문제 : [block, inline-block 중앙정렬](https://codepen.io/kimhyeji324/pen/bGvXNvg?editors=1100) - 문제 : [텍스트 중앙정렬](https://codepen.io/kimhyeji324/pen/bGvXNMq) # 힌트없이 네비바 만들어보기 - 문제 : [열기](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) # 31강 : main태그 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/zYWbjyr?editors=1010) # 32강 : 최상위 엘리먼트 즉, 처음 생성한 엘리먼트에 그리드 잡으면 안되는 이유 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/oNqOeJY?editors=1100) # 33강 : 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) # 34강 : 그리드가 아닌 padding으로 커스텀 - 코드 : [열기](https://codepen.io/kimhyeji324/pen/BarEwbX?editors=1100) - 예시 : [확인](https://cdpn.io/pen/debug/wvzpQMg) # 35강 : 단계별로 제작(문제) - 1단계 : 엘리먼트를 한번에 담아줄 최상위 엘리먼트 생성한 후 border속성으로 형태를 확인해주세요. - 2단계 : body 노멀라이즈 해주세요. - 3단계 : 그림판 또는 디자인툴을 사용하여 시각적으로 레이아웃을 확인해주세요 - 4단계 : 네이게이션바 그리드 제작을 위한 엘리먼트를 생성 해주세요. - 5단계 : 그리드 잡을 엘리먼트에게 넓이520, 높이70을 준 후 background-color로 형태를 확인해주세요. - 6단계 : 그리드 잡은 엘리먼트를 중앙으로 정렬 해주세요, 배경컬러는 제거하지 마세요. - 7단계 : 리스트를 제작하는 최상위 엘리먼트와 하위 엘리먼트들을 만들어주세요. 하위 엘리먼트 갯수는 총4개입니다. - 8단계 : 리스트태그 노멀라이즈 해주세요. - 9단계 : 리스트 하위 엘리먼트안에 이동하기 위한 링크태그 추가 후 코드를 정리해주세요 - 10단계 : 링크태그를 눌렀을때 이동하기 위한 텍스트를 추가해주세요. 단, 적절한 엘리먼트를 추가 후 텍스트를 추가 해주세요. - 11단계 : 링크태그 노멀라이즈 해주세요. - 12단계 : 링크태그와 텍스트를 모두 가지고 있는 엘리먼트에 배경컬러를 넣고, 나머지 엘리먼트에 배경컬러와 border속성 모두 제거해주세요. - 13단계 : 링크태그와 텍스트를 모두 가지고 있는 엘리먼트를 가로로 정렬해준 후 넓이가: 130이 되게 해주세요. - 14단계 : 모든 상위 엘리먼트가 텍스트 높이에 맞춰지도록 css에서 높이를 지워주세요. - 15단계 : 리스트 태그를 inline-block으로 바꾸면서 생긴 여백을 삭제시켜주세요. - 16단계 : 여백을 삭제하면서 사라진 텍스트가 다시 나올 수 있도록 해주세요. - 17단계 : 텍스트를 가로중앙 정렬해주세요. - 18단계 : 텍스트 상하간격을 키우면서 자연스럽게 텍스트가 세로정렬이 되도록 해주세요. 모든 엘리먼트에 border를 제거 해주세요. - 19단계 : li에 마우스를 올리면 배경컬러와 텍스트가 바뀌도록 해주세요. - 20단계 : li에 마우스를 올리면 텍스트만 선택되는 것이 아닌 높이넓이 전체 선택이 되도록 바뀌도록 코드를 수정 해주세요. - 21단계 : 모서리가 둥글어지도록 커스텀 해주세요. # 35강 : 단계별로 제작 - 1단계 : 엘리먼트를 한번에 담아줄 최상위 엘리먼트 생성한 후 border속성으로 형태를 확인해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/eYMoZPv?editors=1000) - 2단계 : body 노멀라이즈 해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/vYRMGvQ) - 3단계 : 그림판 또는 디자인툴을 사용하여 시각적으로 레이아웃을 확인해주세요 - 4단계 : 네이게이션바 그리드 제작을 위한 엘리먼트를 생성 해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/WNzWwPv) - 5단계 : 그리드 잡을 엘리먼트에게 넓이520, 높이70을 준 후 background-color로 형태를 확인해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/qBowZgY) - 6단계 : 그리드 잡은 엘리먼트를 중앙으로 정렬 해주세요, 배경컬러는 제거하지 마세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/abYxNME) - 7단계 : 리스트를 제작하는 최상위 엘리먼트와 하위 엘리먼트들을 만들어주세요. 하위 엘리먼트 갯수는 총4개입니다. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/abYxNME) - 8단계 : 리스트태그 노멀라이즈 해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/MWVRydp?editors=1100) - 9단계 : 리스트 하위 엘리먼트안에 이동하기 위한 링크태그 추가 후 코드를 정리해주세요 - 정답 : [열기](https://codepen.io/kimhyeji324/pen/BarEzay) - 10단계 : 링크태그를 눌렀을때 이동하기 위한 텍스트를 추가해주세요. 단, 적절한 엘리먼트를 추가 후 텍스트를 추가 해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/ZExZOYy) - 11단계 : 링크태그 노멀라이즈 해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/ZExZOYy) - 12단계 : 링크태그와 텍스트를 모두 가지고 있는 엘리먼트에 배경컬러를 넣고, 나머지 엘리먼트에 배경컬러와 border속성 모두 제거해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/zYWXBBW?editors=1100) - 13단계 : 링크태그와 텍스트를 모두 가지고 있는 엘리먼트를 가로로 정렬해준 후 넓이가: 130이 되게 해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/jOzRrmB) - 14단계 : 모든 상위 엘리먼트가 텍스트 높이에 맞춰지도록 css에서 높이를 지워주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/wvmZWrW?editors=1100) - 15단계 : 리스트 태그를 inline-block으로 바꾸면서 생긴 여백을 삭제시켜주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/zYWXBPL?editors=1100) - 16단계 : 여백을 삭제하면서 사라진 텍스트가 다시 나올 수 있도록 해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/LYdvZdv) - 17단계 : 텍스트를 가로중앙 정렬해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/GRxLqXo) - 18단계 : 텍스트 상하간격을 키우면서 자연스럽게 텍스트가 세로정렬이 되도록 해주세요. 모든 엘리먼트에 border를 제거 해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/RwMOReP) - 19단계 : li에 마우스를 올리면 배경컬러와 텍스트가 바뀌도록 해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/QWmPEzq) - 20단계 : li에 마우스를 올리면 텍스트만 선택되는 것이 아닌 높이넓이 전체 선택이 되도록 바뀌도록 코드를 수정 해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/mdxgEvV?editors=1100) - 21단계 : 모서리가 둥글어지도록 커스텀 해주세요. - 정답 : [열기](https://codepen.io/kimhyeji324/pen/poLBbMV?editors=1100) - 전시간에 만들었던 방법 | nav가 아닌 ul에 padding을 사용했을때 | 즉, nav에도 ul에 padding을 사용해도 상관없지만 코드가 길어질 뿐입니다. - 코드 : [열기](https://codepen.io/kimhyeji324/pen/wvmOeZr?editors=0100) # 36강 : 20단계부터는 응용단계 입니다. - li에 마우스를 올리면 텍스트만 선택되는 것이 아닌 높이넓이 전체 선택이 되도록 바뀌도록 코드를 수정 해주세요. - 정답 : [확인](https://codepen.io/kimhyeji324/pen/rNdgrmw?editors=1100) # 37강 : 21단계 - 모서리가 둥글어지도록 커스텀 해주세요. - 정답 : [확인](https://codepen.io/kimhyeji324/pen/VwXOBmG?editors=1100) # 38강 : nav와 ul 패딩 차이 - 개념 : [넓이가 고정되어있는 최상위 엘리먼트에 padding을 줬을때](https://codepen.io/kimhyeji324/pen/bGvyKdK) - 결과 : 부모 최종 넓이가 넓어지면서 자식 공간을 침범하지 않는다. - 개념 : [넓이가 고정되어있는 최상위 엘리먼트 자식에게 padding을 줬을때](https://codepen.io/kimhyeji324/pen/ZExNRbd) - 결과 : 부모 최종 넓이를 넘어서면서 자식들 레이아웃이 무너진다. - 결론 : 디자인 할때 패딩공간까지 계산해서 해야한다. 디테일한 커스텀 시작전 레이아웃은 잡고 시작 하는것이 좋다. # 39강 : a안에 span - 문제 : [네이버 이동을 누르면 사이트로 이동할 수 있도록 html을 수정해주세요.](https://codepen.io/kimhyeji324/pen/WNzByOP) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/dymEKzR) # 40강 : 부모엘리먼트는 자식엘리먼트에게 가려진다. - 문제 : [부모엘리먼트 배경이 나오도록 해주세요.](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) # 41강 : 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) # 42강 : 1080px 그리드 잡기 2단계 - 문제 : 아래 이미지처럼 코드를 짜주세요.[열기](https://codepen.io/kimhyeji324/pen/LYdoBVQ) ![원본이미지](https://i.postimg.cc/qMtYqchz/2.jpg) - 정답 : 확인[열기](https://codepen.io/kimhyeji324/pen/abYrjzy) # 43강 : 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) # 44강 : 디테일 커스텀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) # 45강 : 디테일 커스텀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) # 46강 : 디테일 커스텀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) # 47강 : 디테일 커스텀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) # 48강 : img태그 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/MWVMLrd?editors=1000) - 예제 : [열기](https://codepen.io/kimhyeji324/pen/Bargvoo) # 49강 : 배너이미지에 고정픽셀 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/rNdEoxJ) # 50강 : 작은 이미지에 고정픽셀 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/rNdEoMd?editors=1100) # 51강 : 작은 이미지에 높이 고정 픽셀 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/NWYZoyL) # 마켓컬리 이미지 레이아웃 잡기 # 52강 : 1920px 그리드 - 문제 : 아래 이미지처럼 코드를 짜주세요.[열기](https://codepen.io/kimhyeji324/pen/yLKdGgz?editors=1100) ![원본이미지](https://i.postimg.cc/Y0B4g4zZ/8.jpg) # 53강 : 1920px 그리드에 배너 이미지 적용 - 문제 : 배너 이미지를 적용 해주세요.[열기](https://codepen.io/kimhyeji324/pen/rNdEoyv?editors=1100) - 정답 : [열기](https://codepen.io/khjsbs324/pen/xxjwLxx?editors=1100) # 54강 : 상품리스트 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) # 55강 : 배너와 상품리스트 여백 - 문제 : 아래 이미처럼 코드를 짜주세요.[열기](https://codepen.io/kimhyeji324/pen/wvmLRpg?editors=1100) ![원본이미지](https://i.postimg.cc/sgf9N8Cx/10.jpg) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/PoRrXeG?editors=1100) # 56강 : 상품리스트 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) # 57강 : 상품리스트 이미지 적용 - 문제 : 상품 이미지를 적용 해주세요.[열기](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) # 58강 : 텍스트태그 종류 - 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) # 텍스트 줄이 다를때 - 개념 : text-box 있을때 vertical-align - 개념 : text-box 없을때 vertical-align - 자주 햇갈리는 코드 - 문제 : [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/MWVNzgN?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) # 63강 : 이미지 정렬 object-fit 속성 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/VwXoGEo?editors=1100) # 64강 : object-fit: contain 속성 값 - 예제 : [열기](https://codepen.io/kimhyeji324/pen/dymxgOY?editors=1100) # 65강 : object-position 속성 값 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/yLKmREZ?editors=1010) # 66강 : 텍스트 태그 활용 - 문제 : [열기](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) # 67강 : white-space 속성 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/PoeYYKm?editors=1100) # 68강 : overflow 속성 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/abGooMO?editors=1100) # 69강 : class - 개념 : [열기](https://codepen.io/kimhyeji324/pen/GRdKRrd?editors=1000) # 70강 : ul, li [짝꿍입니다. 홀로 쓸 수 없어요!] - 개념 : [열기](https://codepen.io/jangka44/pen/EpWOam?editors=1000) # 71강 : vertical-align - 개념 : [열기](https://codepen.io/kimhyeji324/pen/qBogqBx) - 예제 : [열기](https://codepen.io/kimhyeji324/pen/xxWMzpj?editors=1100) # 72강 : 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) # 73강 : 노멀라이즈 주의사항 - 개념 : [열기](https://codepen.io/khjsbs324/pen/rNvNNJV) # 74강 : 부모 엘리먼트와 자식 엘리먼트 - 문제 : [열기](https://codepen.io/kimhyeji324/pen/jOxNLxy?editors=1000) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/XWqraxE?editors=1100) # 75강 : 그리드 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/RwybZvb?editors=1000) - 문제 : 그리드를 잡을 수 있는 엘리먼트를 작성해주세요. [열기](https://codepen.io/kimhyeji324/pen/vYjBJbo?editors=1100) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/ZEozJPr?editors=1000) # 76강 : a태그 hover - 문제 : a태그 커스텀 없이 커지기 [열기](https://codepen.io/khjsbs324/pen/xxjKvvy) - 정답 : [열기](https://codepen.io/khjsbs324/pen/oNdNvNO) - 문제 : hover가 제대로 작동하도록 코드를 수정해주세요. [열기](https://codepen.io/khjsbs324/pen/PoeYMWv?editors=1100) # 77강 : ul태그 inline-block - 개념 : 활용방법 [열기](https://codepen.io/kimhyeji324/pen/qBYWmVB?editors=1100) # 78강 : 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) # 79강 : font-famail - 한글 폰트 : 눈누 [열기](https://noonnu.cc/) - 사이트 버벅거림, 로딩안됨 오류가 가끔씩 있습니다. # 80강 : icon - 링크 가져오기 : [cdnjs](https://cdnjs.com/) - 관련사이트 : [폰트어썸](https://fontawesome.com/) - 개념 : [링크 불러오기, 아이콘 적용](https://codepen.io/khjsbs324/pen/LYmYRQr) - 개념 : [아이콘 커스텀](https://codepen.io/khjsbs324/pen/LYmYRQr) # 81강 : font-weight 값 종류 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/KKRwyKo?editors=1010) # 82강 : 웹폰트에 font-weight 속성 적용 - 한글 폰트 : [눈누](https://noonnu.cc/) - 사이트 버벅거림, 로딩안됨 오류가 가끔씩 있습니다. - 개념 : [열기](https://codepen.io/kimhyeji324/pen/MWGYENX) # 83강 : 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?editors=1100) 정답 : [열기](https://codepen.io/khjsbs324/pen/ExLaoXZ) # 84강 : margin병합 - 개념과 예제 : [열기](https://codepen.io/khjsbs324/pen/qBYEpqj?editors=1100) - 문제 : header와 section사이에 마진병합 현상을 해결해주세요. [열기](https://codepen.io/kimhyeji324/pen/yLjyEXX?editors=1100)