$$config title: 웹 퍼블리싱 수업 준비 keywords: - IT - ... $$ # 22년도 10월 4일 자료 # 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값은 부모엘리먼트에 넓이를 물려받는다는 것을 의미합니다. # 22년도 10월 6일 자료 # 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) - 구조 선택자 : 다음 수업시간에 하겠습니다. # Q&A - 원래 알고 있던 개념 - 최하단에 있는 속성힘이 가장 강하다. - 새로 알게된 개념 - 최하단에 있는 속성보다 선택자를 사용한 속성이 힘이 더 강하다. # 17강 : border - 개념 : [선 만들기](https://codepen.io/kodaeho/pen/MWGBNrd) - 활용방법 - 디테일 작업 전 레이아웃을 먼저 잡을때 활용, 커스텀용도 # 22년도 10월 8일 자료 # 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/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) # 31강 : 그리드 : 웹사이트는 그리드를 기반으로 디자인된다. 그리드 용어 Gutter : 여백 Margin : 양 옆 공간 Column : 거터와 마진을 제외한 공간 Columns : Column 수 PC 대표 사이즈 : 1920px 가로 사이즈 : 1440px ~ 1920px Column : 12 Gutter : 40 Margin : 20 # 그리드 - 원본이미지 - 1080px 그리드 정보 - Columns : 12 - Gutter : 20px - Margin : 10px (**좌우 총 : 20px) - Column : 70px # 레이아웃 사이즈 - 2개 : 520px - 3개 : 340px - 4개 : 250px - 5개 : 196px - 6개 : 160px # 레이아웃 계산법 계산기를 활용하여 코딩에 적용할 수 있습니다. : 영상보기 그리드 계산법 : Grid - Margin - Gutter / Columns ex) 1080기준 2개 계산 : 1080px - 20px - 20px / 2 # 팀 프로젝트(다음시간에는 개별적으로 만들어볼께요 시간 1시간) # 힌트없이 네비바 만들어보기 - 문제 : [열기](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) # 22년도 10월 4일 자료 # 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) # 개별적으로 네비바 만들어보기(제한시간 20분) # 과제: 목요일까지 마켓컬리 메뉴바를 만들어보세요!(할 수 있는만큼 만들어주시면 됩니다) - [마켓컬리](https://www.kurly.com/main) # 22년도 10월 15일 수업 # 네비바 만들기 - 문제 : [열기](https://codepen.io/kimhyeji324/pen/mdxaJeZ?editors=1100) - 예시 : [확인](https://cdpn.io/pen/debug/wvzpQMg) # 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) - 정답 : [열기](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) # 마켓컬리 텍스트 레이아웃 잡기 # 59강 : 상품 리스트 텍스트 추가 - 문제 : 이 상품 어때요? 텍스트를 추가 해주세요.[열기](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) # 60강 : 상품 리스트 하단 상품명 추가 - 문제 : 첫번째 상품 이미지 하단 텍스트를 적절한 곳에 추가 해주세요.[열기](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코드도 수정 되었습니다. # 61강 : 두번째 상품 리스트 추가 - 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) # 22년도 10월 29일 수업 # 네비바 - 배경이미지 - 상품리스트 웹표준으로 제작 [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) # 네비바 - 배경이미지 - 상품리스트 웹표준으로 제작 [Ver.간결한 코드] - 1단계 : [열기](https://codepen.io/khjsbs324/pen/VwxYoEx?editors=1100) - 2단계 : [열기](https://codepen.io/khjsbs324/pen/MWGwgvv?editors=1100) - 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 - 개념 : 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) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/LYdwXVW) # 62강 : 네비바 복습 - 문제 : [열기](https://codepen.io/kimhyeji324/pen/XWqrrRG) # 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) - 정답 : [열기](https://codepen.io/khjsbs324/pen/XWqrvGE?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/) - 사이트 버벅거림, 로딩안됨 오류가 가끔씩 있습니다. - 영문 폰트 : 구글폰트 [열기](https://fonts.google.com/earlyaccess) - 개념 : 눈누 한글폰트 적용 [열기](https://codepen.io/khjsbs324/pen/gOzOMmo?editors=1100) - 개념 : 구글 한글폰트 적용 [열기](https://codepen.io/khjsbs324/pen/vYjYXgV?editors=1100) - 개념 : 구글 영문 폰트 적용 [열기](https://codepen.io/khjsbs324/pen/vYjYXgV?editors=1100) - 개념 : 한글폰트가 안될때 영문폰트도 안되면 기본폰트 [열기](https://codepen.io/khjsbs324/pen/OJZJRge) - 개념 : 포인트 폰트 적용 [열기](https://codepen.io/khjsbs324/pen/bGMGwoG?editors=1100) # 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) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/oNdgyWJ?editors=1100)

게시글 상세