$$config title: 23년 10월 13일 HTML, CSS 기초(평일저녁) keywords: - IT - HTML, CSS 기초 $$ # 디스코드 주소 - [https://discord.gg/E3mqDTJf](https://discord.gg/E3mqDTJf) # 강사 이메일 - qoro33@naver.com # 수업페이지 - [https://www.slog.gg/p/13084](https://www.slog.gg/p/13084) - [수업페이지 주소 줄인 버전, https://to2.kr/eP3](https://to2.kr/eP3) # 가입해야 할 사이트 - [Google](https://www.google.com/) - [GitHub](https://github.com) - [CodePen](https://codepen.io/) - github.com 계정으로 가입 - [Figma](https://www.figma.com) - google 계정으로 가입 - [Figma 기초 강의](https://www.youtube.com/watch?v=yJEAZa34bEI&list=PLfrKiHMMe1chZTU89gcXsslf7vld8nodK) # 온라인 연습 툴 - [CODEPEN](https://codepen.io/pen) # 수업관련 링크 - [타이핑 정글(키보드 연습)](https://www.typingclub.com/sportal/program-3.game) - [MDN - CSS cursor](https://developer.mozilla.org/ko/docs/Web/CSS/cursor) - [w3schools - CSS cursor Property](https://www.w3schools.com/cssref/pr_class_cursor.asp) # 키보드 사용방법 - Home : 줄에서 맨 앞으로 이동 - End : 줄에서 맨 뒤으로 이동 - Ctrl + Home : 맨 위으로 이동 - Ctrl + End : 맨 아래으로 이동 - Ctrl + C : 선택영역 복사 - Ctrl + X : 선택영역 잘가내기 - Ctrl + V : 붙여넣기 - Ctrl + A : 전체선택 - Ctrl + Z : 이전 히스토리로 한 단계 이동 - Ctrl + Y : 이후 히스토리로 한 단계 이동 - Shift + 키보드 이동 : 글 선택 - Cabs Lock/Insert : 절대 사용하지 않는다. - Shift + 영문 소문자 입력 : 대문자 입력 # Visual Studio Code 설치 - [Visual Studio Code](https://code.visualstudio.com/) # 1강 - [영상 - 23 10 13, ken 13084, HTML, CSS 강좌, 1강, 개요](https://youtu.be/wmzNWlpWrJI) # 2강 - [영상 - 23 10 13, ken 13084, HTML, CSS 강좌, 2강, 웹디자이너와 웹퍼블리셔의 차이](https://youtu.be/j7Cd0uiLys0) # 3강 - [코드펜 세팅, https://codepen.io/settings/editor](https://codepen.io/) - [영상 - 23 10 13, ken 13084, HTML, CSS 강좌, 3강, 코드팬 세팅](https://youtu.be/cJcv3vc0ZHY) # 4강 - [영상 - 23 10 13, ken 13084, HTML, CSS 강좌, 4강, 코드팬 에디터 사용방법](https://youtu.be/j6WDnPgq5rM) # 5강 - [영상 - 23 10 13, ken 13084, HTML, CSS 강좌, 5강, 웹페이지와 HTML, CSS, JS의 역할](https://youtu.be/tdGTA9BftuQ) # 6강 - [영상 - 23 10 13, ken 13084, HTML, CSS 강좌, 6강, 기본적인 타이핑 방법](https://youtu.be/08fyPn5ywnM) # 7강 - [영상 - 23 10 13, ken 13084, HTML, CSS 강좌, 7강, 크롬관련 단축키](https://youtu.be/NFVuoz6NbNc) - 구글, 네이버, 다음을 열고 탭 3개를 자유롭게 이동해보기(단, 마우스를 쓰지 않고) - 윈도우 + 방향키(페이지 위치 변경) - Ctrl + T (새탭 생성) - Ctrl + W (탭 삭제) - Ctrl + Page Up(탭 왼쪽으로 이동) - Ctrl + Page Down(탭 오른쪽으로 이동) - Home(페이지 최상단으로 이동) - End(페이지 최하단으로 이동) # 8강 - [CODEPEN - 시작, subject 태그와 content 태그를 적용해주세요.](https://codepen.io/sangwon7242/pen/eYewzQv) - [CODEPEN - 결과](https://codepen.io/sangwon7242/pen/JjOQKwp) - [영상 - 23 10 13, ken 13084, HTML, CSS 강좌, 8강, HTML 태그의 의미](https://youtu.be/rdEpt5MD-rw) # 9강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/ZEvGXQW?editors=1100) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/MWrwEbe?authentication_hash=mWMoNYXXXnzk) - [영상 - 23 10 13, ken 13084, HTML, CSS 강좌, 9강, 엘리먼트에 스타일 적용](https://youtu.be/gzelZcoTRTk) - [영상 - 23 10 13, ken 13084, HTML, CSS 강좌, 9강, 엘리먼트에 스타일 적용, 문제풀이](https://youtu.be/1LCyzsakWkE) # 10강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/NWXqadK?editors=1100) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/ExojwWX?authentication_hash=bYAdyOooYyNk) - [CODEPEN - 결과](https://codepen.io/sangwon7242/pen/ExojwWX?editors=1100) - [영상 - 23 10 13, ken 13084, HTML, CSS 강좌, 10강, 배경색이 red인 사각형 만들기](https://youtu.be/er5DtJzMokU) # 11강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/BaJNwWe?editors=1100) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/KKZpXmd?authentication_hash=xJAjOVPPbWJk) - [영상 - 23 10 13, ken 13084, HTML, CSS 강좌, 11강, 크기와 배경색이 서로 다른 사각형 3개를 만들기](https://youtu.be/NZgXGOpHDwg) # 12강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/bGaVdLX?editors=1100) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/yLpYNKO?authentication_hash=mVkbGBdVzgwM) - [CODEPEN - 결과](https://codepen.io/sangwon7242/pen/yLpYNKO?editors=1100) - [영상 - 23 10 13, ken 13084, HTML, CSS 강좌, 12강, CSS 기본값 개념](https://youtu.be/TqD54sm-ODI) # 13강 - [개념 - css display 속성 정리](https://codepen.io/jangka44/live/ZjbpPR) - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/OJzVOdm?editors=1100) - [CODEPEN - 결과](https://codepen.io/sangwon7242/pen/zYpGPeX?editors=1100) - [영상 - 23 10 16, ken 13084, HTML, CSS 강좌, 13강, block 과 inline-block 의 차이점을 설명해주세요. 설명](https://youtu.be/7u889eFI59c) # 14강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/WNdrxXx?editors=1100) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/eYyJzee?authentication_hash=DqADdGjgmXjA) - [CODEPEN - 결과](https://codepen.io/sangwon7242/pen/eYyJzee?editors=1100) - [영상 - 23 10 16, ken 13084, HTML, CSS 강좌, 14강, section(green)색 막대와 article(blue)색 막대를 한 줄에 보이도록](https://youtu.be/ERavP4FmZN4) # 15강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/GRyoqyK?editors=1100) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/gOoPMvO?authentication_hash=VGrWNovxLVWM) - [CODEPEN - 결과](https://codepen.io/sangwon7242/pen/gOoPMvO?editors=1100) - [영상 - 23 10 16, ken 13084, HTML, CSS 강좌, 15강, 글자 꾸미기](https://youtu.be/GPDrvNz4IdI) - 구글 검색창 -> color picker 검색 - [색 공유 사이트](https://material.io/resources/color/#!/?view.left=0&view.right=0) # 16강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/rNpxLZd?editors=1000) - [CODEPEN - 결과](https://codepen.io/sangwon7242/pen/JjMGKae?editors=1000) - [영상 - 23 10 16, ken 13084, HTML, CSS 강좌, 16강, 엘리먼트, 부모, 자식, 형제 관계](https://youtu.be/wIIShfsCFZQ) # 17강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/ExoPydp?editors=1010) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/OJzMXaM?authentication_hash=NjMYzpXWBVvr) - [CODEPEN - 결과](https://codepen.io/sangwon7242/pen/OJzMXaM?editors=1000) - [영상 - 23 10 16, ken 13084, HTML, CSS 강좌, 17강, 테이블 태그 개념](https://youtu.be/slQ_z1vXfRY) - table 개념 - table 태그 -> 웹사이트 표를 만들 때 사용 - table border="1" -> table 테두리 스타일 - th = table head(부수적인 정보를 표현할 때) - tr = table row - td = table date(메인데이터) # 18강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/XWVXKyY?editors=1000) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/YzYwWRm?authentication_hash=yYAyLVNJZoDr) - [CODEPEN - 결과](https://codepen.io/sangwon7242/pen/YzYwWRm?editors=1000) - [영상 - 23 10 16, ken 13084, HTML, CSS 강좌, 18강, 테이블 태그 보강, 테이블 꾸미기](https://youtu.be/XBN7ieQrziE) - table 개념2 - 규칙상 tr 엘리먼트는 table 바로 다음에 올 수 없다. - 머리 부분은 thaed 로 감싸고 - 몸통 부분은 tbody 로 감싼다. # 19강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/oNpbLJO?editors=1000) - [CODEPEN - 결과](https://codepen.io/sangwon7242/pen/vYpLKbB) - [영상 - 23 10 16, ken 13084, HTML, CSS 강좌, 19강, display 속성과 관련된 문제, 복습](https://youtu.be/fFGd3IkPgqA) # 20강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/rNpxLPv) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/vYpLKwY?authentication_hash=wQAPobqzVRgr) - [CODEPEN - 결과](https://codepen.io/sangwon7242/pen/vYpLKwY?editors=1000) - [영상 - 23 10 16, ken 13084, HTML, CSS 강좌, 20강, br태그, a태그 개념](https://youtu.be/x5CF0_Dgpn4) - br 태그 개념 - br 태그는 '셀프 클로징' 태그로 - 다른 태그와 달리 닫는 태그가 존재하지 않는다. - 단독적으로 사용하는 태그이다. - 역할 : 한줄로 출력되는 문구를 한줄 띄어서 출력하고 싶을 때 사용된다. # 21강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/qBpbNGv) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/NWXxrZp?authentication_hash=dGrXWNbKOBgM) - [영상 - 23 10 16, ken 13084, HTML, CSS 강좌, 21강, 각 사이트명에 링크 걸기](https://youtu.be/Wzo1F4vhhyA) # 22강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/dyJGqwM?editors=1010) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/GRyoXPm?authentication_hash=LQAExNjNaYGr) - [영상 - 23 10 16, ken 13084, HTML, CSS 강좌, 22강, 젠코딩 개념 설명](https://youtu.be/Y01XsIYtgCU) - [영상 - 23 10 16, ken 13084, HTML, CSS 강좌, 22강, 젠코딩으로 네이버, 구글, 다음으로 가는 링크 생성, 설명](https://youtu.be/YomZYqMtltk) # 23강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/xxpZaMx) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/VwyeGgj?authentication_hash=VJMxxRGRbwDM) - [CODEPEN - 결과](https://codepen.io/sangwon7242/pen/VwyeGgj) - [영상 - 23 10 18, ken 13084, HTML, CSS 강좌, 23강, 후손선택자, 자식선택자, 인접동생선택자](https://youtu.be/04FBn2x9TAM) # 24강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/rNpLMRq?editors=1010) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/GRyqjLq?authentication_hash=NjMYzpXnGJLr) - [영상 - 23 10 18, ken 13084, HTML, CSS 강좌, 24강, 각각의 크기와 색상이 다른 링크 버튼 3개 만들어주세요](https://youtu.be/Nc9OuShN484) # 25강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/GRyqjVj) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/BaJzLXR?authentication_hash=VJkxxRGXRbpk) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/BaJzLXR) - [영상 - 23 10 18, ken 13084, HTML, CSS 강좌, 25강, text-align는 대상 엘리먼트가 아니라 그것의 텍스트를 정렬한다](https://youtu.be/J4NjjmTRo0g) # 26강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/jOYrMgZ) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/XWVKjvO?authentication_hash=WPkLYbVzbVmM) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/XWVKjvO) - [영상 - 23 10 18, ken 13084, HTML, CSS 강좌, 26강, text-align 은 대상 엘리먼트의 글자와 자식 inline 요소만 정렬한다](https://youtu.be/K5Zc3n93bbM) # 27강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/YzYWpzw) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/GRyqNRN?authentication_hash=bYAdyOoVOXqk) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/GRyqNRN) - [영상 - 23 10 18, ken 13084, HTML, CSS 강좌, 27강, inline 요소에 text-align 속성을 주면 의미 없는 이유](https://youtu.be/RqClwi07JyE) # 28강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/bGaeBGo) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/KKZMNKR?authentication_hash=PBMNWbqXnJvr) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/KKZMNKR) - [영상 - 23 10 18, ken 13084, HTML, CSS 강좌, 28강, 각각의 크기와 색상과 정렬상태가 다른 링크 버튼 3개 만들어주세요](https://youtu.be/UJBFzNkBmqE) # 29강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/rNpLWNo) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/XWVKNWO?authentication_hash=yPkJjbdnbbvk) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/XWVKNWO) - [영상 - 23 10 18, ken 13084, HTML, CSS 강좌, 29강, hover](https://youtu.be/vz4bh-a2OBg) # 30강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/YzYWpPw) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/vYpKyEG?authentication_hash=VJrxxRGXRgWr) - [영상 - 23 10 18, ken 13084, HTML, CSS 강좌, 30강, 100칸 짜리 바둑판을 만들고 하나의 칸에 마우스를 올리면 해당 칸의 배경색이 바뀌도록 해주세요](https://youtu.be/6VS3QE6qbv8) # 31강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/BaJzQyZ) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/wvpWoBq?editors=1000) - [영상 - 23 10 18, ken 13084, HTML, CSS 강좌, 31강, 자식선택자, 인접동생선택자](https://youtu.be/aOjXE5CkmZc) # 32강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/rNpLWaP) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/XWVKNJG?authentication_hash=xJkjOVPGVweM) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/XWVKNJG) - [영상 - 23 10 18, ken 13084, HTML, CSS 강좌, 32강, ` `](https://youtu.be/3IHmQdTKRXs) # 33강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/qBpNqdB) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/LYeZbVE?authentication_hash=vPAKKNpXNvNA) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/LYeZbVE) - [영상 - 23 10 18, ken 13084, HTML, CSS 강좌, 33강, text-deocration](https://youtu.be/y08M5dyAKSU) # 34강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/gOoMLpm) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/PoEzbqm?authentication_hash=gareYBNGBGRr) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/PoEzbqm) - [영상 - 23 10 18, ken 13084, HTML, CSS 강좌, 34강, div 태그만 사용하여 사과의 색상을 red로 변경해주세요](https://youtu.be/-tu0Sg-znqM) # 35강 - [BMX 사이트, to2.kr/bTn](https://cdpn.io/pen/debug/KKgyRYz) - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/Vwyjmve) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/mdpEOeO?authentication_hash=vWkRwoPJvmpM) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/mdpEOeO) - 조건, 힌트 - 사용가능 - [영상 - 23 10 18, ken 13084, HTML, CSS 강좌, 35강, bmx 사이트 상단바를 구현해주세요, ` ` 사용](https://youtu.be/JQ8-IqZwi2c) # 36강은 컴퓨터 구조적 문제로 녹화 영상이 없습니다. # 36강(영상없음) - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/RwxGBgx) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/mdprjwX?authentication_hash=WPkLYbVnagjM) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/mdprjwX) - 조건, 힌트 - 사용불가 - width 사용가능 - | 를 엘리먼트로 감싸야 합니다. # 37강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/eYydjEm) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/abEmjyZ?authentication_hash=NjrYzpXvezvA) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/abEmjyZ) - 조건, 힌트 - 사용불가 - width 사용가능 - 메뉴 텍스트를 엘리먼트로 감싸야 합니다. - 각 아이템의 너비가 균일해야 합니다. - [영상 - 23 10 23, ken 13084, HTML, CSS 강좌, 37강, bmx 사이트 상단바를 구현해주세요, 아이템 너비 균일](https://youtu.be/AGvYf-kU_kc) # 38강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/xxpEJpR) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/dyJpjJz?authentication_hash=DqrDdGjvXQZr) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/dyJpjJz) - 조건, 힌트 - 사용불가 - width 사용가능 - 메뉴 텍스트를 엘리먼트로 감싸야 합니다. - 각 아이템의 너비가 균일해야 합니다. - a 태그로 링크텍스트를 만들어야 합니다. - [영상 - 23 10 23, ken 13084, HTML, CSS 강좌, 38강, bmx 사이트 상단바를 구현해주세요, a 태그 적용, 1부](https://youtu.be/p6DuHtz3F4I) - [영상 - 23 10 23, ken 13084, HTML, CSS 강좌, 38강, bmx 사이트 상단바를 구현해주세요, a 태그 적용, 2부](https://youtu.be/3lCfL80EfAA) # 39강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/BaJLPdO) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/ExogGqe?authentication_hash=LDkmdOJKYwPA) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/ExogGqe) - 조건, 힌트 - 사용불가 - width 사용가능 - 메뉴텍스트를 엘리먼트로 감싸야 합니다. - 각 아이템의 너비가 균일해야 합니다. - a 태그로 링크텍스트를 만들어야 합니다. - 메뉴를 감싼 a 엘리먼트의 너비가 최대화 되어야 합니다. - [영상 - 23 10 23, ken 13084, HTML, CSS 강좌, 39강, bmx 사이트 상단바를 구현해주세요, a 엘리먼트의 너비 최대화](https://youtu.be/RcWvq-GhcFY) # 40강(영상없음) - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/gOowqYa) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/PoEGVYZ?authentication_hash=yPMJjbdZqJqM) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/PoEGVYZ) - 조건, 힌트 - 메뉴의 구조 : nav>({|}+section>a[href="#"]{아이템 $})*7+{|} # 41강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/qBpagWg) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/oNpzmvO?authentication_hash=vPMKKNpoOQyM) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/oNpzmvO) - [영상 - 23 10 23, ken 13084, HTML, CSS 강좌, 41강, 이미지 태그](https://youtu.be/QtQYvpzY_HE) # 42강 - [https://picsum.photos/](https://picsum.photos/) - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/NWXRoPp) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/popEGvd?authentication_hash=yYAyLVNKmjvr) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/popEGvd) - [영상 - 23 10 23, ken 13084, HTML, CSS 강좌, 42강, picsum.photos 로 쉽게 테스트용 이미지 사용하기](https://youtu.be/dH1_evzTxZY) # 43강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/BaJLMNL?editors=1100) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/OJzRdVX?authentication_hash=GnMnbqYJQgEM) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/OJzRdVX?editors=1100) - [영상 - 23 10 23, ken 13084, HTML, CSS 강좌, 43강, img 엘리먼트의 object-fit 스타일 속성](https://youtu.be/XirJkT4aQr8) ``` image의 특징 1. 이미지는 dispaly: inline-block 2. 이미지는 내부적으로 가지고 있는 고유의 비율이 있다. 3. 너비 or 높이 만 주게 되면 고유의 비율을 지킨채로 커진다. 4. 고유의 비율을 무시한채 강제로 너비와 높이를 주게 되면 이미지의 비율의 깨진다. 5. 이미지의 짤림이 발생 했을 때 할 수 있는 선택 - object-fit: cover; - 비율을 유지한채로 주어진 공간을 다 채운다 - 대신에 위, 아래 or 좌, 우 짤림이 발생한다. - object-fit: contain; - 비율을 유지한채로 늘어나고, 짤림이 발생하지 않는다. - 대신에 위, 아래 or 좌, 우 빈 공간이 발생한다. ``` # 44강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/XWVjOmP) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/MWrjLaV?authentication_hash=NjkYzpXjPaBM) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/MWrjLaV) - [영상 - 23 10 25, ken 13084, HTML, CSS 강좌, 44강, 이미지를 3x2 형태로 배열, ` `와 br 사용](https://youtu.be/-xej51qYtLM) # 45강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/OJzRdMR) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/bGawzEq?authentication_hash=GnrnbqYjaoGr) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/bGawzEq) - [영상 - 23 10 25, ken 13084, HTML, CSS 강좌, 45강, 이미지를 3x2 형태로 배열, br 사용 금지](https://youtu.be/tW4wrkMETVk) # 46강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/rNpMPxr) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/zYpKerm?authentication_hash=VGAWNovKbywr) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/zYpKerm) - [영상 - 23 10 25, ken 13084, HTML, CSS 강좌, 46강, 이미지를 3x2 형태로 배열, ` `, br 사용 금지](https://youtu.be/9toq-QgVl9E) # 47강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/xxpqvjR) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/qBpreYr?authentication_hash=WPkLYbVKjWdM) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/qBpreYr) - [영상 - 23 10 25, ken 13084, HTML, CSS 강좌, 47강, padding 과 margin](https://youtu.be/Zngwv6AbzAk) ``` padding : 박스 기준 안쪽 여백 padding, padding-top, padding-bottom, padding-left, padding-right margin : 박스 기준 바깥쪽 여백 margin, margin-top, margin-bottom, margin-left, margin-right ``` # 48강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/gOomVzK) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/OJzpKZo?authentication_hash=PNrvYyOqJZQM) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/OJzpKZo) - [영상 - 23 10 25, ken 13084, HTML, CSS 강좌, 48강, 이미지를 3x2 형태로 배열, padding을 사용](https://youtu.be/XbwHoq3DjCE) # 49강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/KKZWORj) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/MWrpNXW?authentication_hash=mWkoNYXnDDyA) - [영상 - 23 10 25, ken 13084, HTML, CSS 강좌, 49강, 이미지를 3x2 형태로 배열, margin을 사용](https://youtu.be/Uau1TEO40dU) # 50강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/xxpqvzg) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/JjMWgZW?authentication_hash=WPALYbVKjOnk) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/JjMWgZW) - [영상 - 23 10 25, ken 13084, HTML, CSS 강좌, 50강, nth-child, nth-last-child, first-child, last-child 개념](https://youtu.be/ldC2h4kxP5k) # 51강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/RwxpXJM) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/mdpWNKL?authentication_hash=PBMNWbqZvyqr) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/mdpWNKL) - [영상 - 23 10 25, ken 13084, HTML, CSS 강좌, 51강, 무지개를 만들어주세요](https://youtu.be/I2GhOVok2EA) # 52강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/rNPVYaM) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/XWVMvBd?authentication_hash=XBrGRNJbvxaM) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/XWVMvBd) - [영상 - 23 10 25, ken 13084, HTML, CSS 강좌, 52강, 무지개를 만들어주세요, hover 시 색상 좌우반전](https://youtu.be/lArXMi_zL5I) # 53강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/abEJeRp?editors=1100) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/MWrpNPY?authentication_hash=ZoMBaQNgdEok) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/MWrpNPY) - [영상 - 23 10 25, ken 13084, HTML, CSS 강좌, 53강, block 요소의 가로정렬](https://youtu.be/KD5V9sGDDxo) # 54강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/BaJWXOG) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/WNdpVgW?authentication_hash=xJMjOVPjLJVr) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/WNdpVgW) - [영상 - 23 10 27, ken 13084, HTML, CSS 강좌, 54강, 모든 보이는 엘리먼트의 조상은 body이고, 그의 부모는 html 이다]() # 55강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/vYpxoVR) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/RwxpXey?authentication_hash=LQkExNjBvqRA) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/RwxpXey) - [영상 - 23 10 27, ken 13084, HTML, CSS 강좌, 55강, BMX 메인 레이아웃, 이미지 4개를 배열해주세요, 조건없음](https://youtu.be/_4luxRPdoSg) # 56강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/wvpJVYN) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/bGaqXmZ?authentication_hash=mVMbGBdPoGDr) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/bGaqXmZ) - [영상 - 23 10 27, ken 13084, HTML, CSS 강좌, 56강, BMX 메인 레이아웃, 이미지 4개를 배열해주세요, 엘리먼트 6개](https://youtu.be/HXBKUswm6_E) # 57강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/mdpWNQK) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/GRyWVwB?authentication_hash=mVMbGBdPoVwr) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/GRyWVwB?editors=1010) - [영상 - 23 10 27, ken 13084, HTML, CSS 강좌, 57강, BMX 메인 레이아웃, 이미지 4개를 배열해주세요, 엘리먼트 5개](https://youtu.be/2RdZ5sbw6Pc) # 58강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/RwxVjPb) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/RwxVjPb) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/BaJRmNK) - [영상 - 23 10 27, ken 13084, HTML, CSS 강좌, 58강, BMX 메인 레이아웃, 이미지 4개를 배열해주세요, 엘리먼트 4개](https://youtu.be/iFX6tmbYvsc) # 59강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/zYpwPdM) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/abEWVyX) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/abEWVyX) - [CODEPEN - 정답2](https://codepen.io/sangwon7242/pen/BaMoeNR?editors=0100) - [영상 - 23 10 27, ken 13084, HTML, CSS 강좌, 59강, id와 class, 설명](https://youtu.be/mZH23FYIVVA) ``` 1. class, id 는 특정 엘리먼트에 이름을 식별하는 수단이다. 2. class는 얼마든지 html 상에서 중복이 가능하다. 3. class는 html에 복수 개의 class 이름을 부여할 수 있다. 4. id는 html 상에 오직 하나밖에 존재하지 않는다. 5. id는 html 상에 중복이 될 수 없다.(사람으로 따지면 주민등록번호라고 생각하면 된다.) 6. html태그에 class와 id를 동시에 부여할 수 있다. ``` # 60강 - [선택자 연습 튜토리얼 - CSS DINER, 01~10](https://flukeout.github.io/) - [영상 - 23 10 27, ken 13084, HTML, CSS 강좌, 60강, 선택자 연습 튜토리얼, CSS DINER 소개, 단계 10까지, 문제 설명](https://youtu.be/KxRpgozgbQY) - [영상 - 23 10 27, ken 13084, HTML, CSS 강좌, 60강, 선택자 연습 튜토리얼, CSS DINER 소개, 단계 10까지, 문제 풀이](https://youtu.be/0lQu7PUfMxU) # 61강 - [선택자 연습 튜토리얼 - CSS DINER, 11~19](https://flukeout.github.io/) - [영상 - 23 10 27, ken 13084, HTML, CSS 강좌, 61강, CSS DINER, 단계 11 ~ 20](https://youtu.be/1WvvcIDrE3E) # 62강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/KKZqedj) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/ZEvyRQY) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/ZEvyRQY) - [영상 - 23 10 30, ken 13084, HTML, CSS 강좌, 62강, border-radius](https://youtu.be/o-hRkQmZykA) # 63강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/QWagxyP) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/jOYwKWo) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/jOYwKWo) - [영상 - 23 10 30, ken 13084, HTML, CSS 강좌, 63강, 슬라이더의 페이지 버튼박스를 구현](https://youtu.be/Sa8RlbXCsHw) # 64강 - [MDN - CSS cursor](https://developer.mozilla.org/ko/docs/Web/CSS/cursor) - [w3schools - CSS cursor Property](https://www.w3schools.com/cssref/pr_class_cursor.asp) - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/JjMJZXW) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/dyJRKMV) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/dyJRKMV) - [영상 - 23 10 30, ken 13084, HTML, CSS 강좌, 64강, cursor 개념, mdn 소개](https://youtu.be/7YS_VcQocC0) # 65강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/BaJZVKG) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/wvpeXGR) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/wvpeXGR) - [영상 - 23 10 30, ken 13084, HTML, CSS 강좌, 65강, css 기본값과, 상속여부](https://youtu.be/fHbRb79ULgE) # 66강 - [영상 - 23 10 30, ken 13084, HTML, CSS 강좌, 66강, css 기본값과 inherit 되는 css 속성 찾기](https://youtu.be/2Ok-Is7dm30) ``` font-size : 기본값(medium), 상속(o) font-weight : 기본값(normal), 상속(o) letter-spacing : 기본값(normal), 상속(o) color : 기본값(canvastext), 상속(o) background-color : 기본값(transparent), 상속(x) width : 기본값(auto), 상속(x) height : 기본값(auto), 상속(x) margin : 기본값(0), 상속(x) padding : 기본값(0), 상속(x) display : 태그가 뭐냐에 따라서 block, inline, inline-block 일 수 있다. 상속(x) border : 기본값(mdn 참고), 상속(x) border-color : 기본값(currentcolor), 상속(x) border-radius: 기본값(0), 상속(x) cusor : 기본값(auto), 상속(o) text-align : 기본값(start), 상속(o) text-decoration: 기본값(solid), 상속(o) ``` # 67강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/MWroXeY) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/ZEvyROG) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/ZEvyROG) - [영상 - 23 10 30, ken 13084, HTML, CSS 강좌, 67강, a 엘리먼트 노말라이즈](https://youtu.be/ru1b5BMMDAw) # 68강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/xxprzEg) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/qBpjKam) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/qBpjKam) - [영상 - 23 10 30, ken 13084, HTML, CSS 강좌, 68강, 중앙 모서리 둥근 메뉴를 구현해주세요.](https://youtu.be/sbIDJixukLw) # 69강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/oNpwyYG) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/VwyWdmy) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/VwyWdmy) - [영상 - 23 11 01, ken 13084, HTML, CSS 강좌, 69강, body 노말라이즈](https://youtu.be/xqQAb99CK2Y) # 70강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/OJzgEba) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/BaJZVQv) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/BaJZVQv) - [영상 - 23 11 01, ken 13084, HTML, CSS 강좌, 70강, class 선택자 복습, 속성 선택자 설명](https://youtu.be/1OJ-nTCzZuo) ``` 태그[class^="클래스이름"] = start with / '클래스이름~' 으로 시작되는 태그[class*="클래스이름"] = contain / '클래스이름' 이 포함되는 태그[class$="클래스이름"] = end with / '~클래스이름' 으로 끝나는 ``` # 71강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/rNpwKje) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/XWVgYpK) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/XWVgYpK) - [영상 - 23 11 01, ken 13084, HTML, CSS 강좌, 71강, 모든 태그를 div로 변경해주세요. 클래스 사용가능](https://youtu.be/f8WXYPu2KvI) # 72강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/YzYrJbY) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/LYeLrxj) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/LYeLrxj) - [영상 - 23 11 01, ken 13084, HTML, CSS 강좌, 72강, 최상위 엘리먼트의 클래스 속성을 제외한 나머지는 전부 지워주세요](https://youtu.be/3l5ZiCCL8PQ) # 73강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/bGaopZZ) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/QWaqNoX) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/QWaqNoX) - [영상 - 23 11 01, ken 13084, HTML, CSS 강좌, 73강, ul, li](https://youtu.be/mD98eJf6SfA) # 74강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/JjMrXVJ) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/qBpPZwX) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/qBpPZwX) - [영상 - 23 11 01, ken 13084, HTML, CSS 강좌, 74강, ol, li](https://youtu.be/9qbUNGA7Elc) # 75강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/KKZXzLK) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/yLpzOWN) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/yLpzOWN) - [영상 - 23 11 01, ken 13084, HTML, CSS 강좌, 75강, h1](https://youtu.be/ZoTOBdD37CM) # 76강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/YzYrqba) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/GRyMZaX) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/GRyMZaX) - [영상 - 23 11 01, ken 13084, HTML, CSS 강좌, 76강, 방탄소년단의 노래소개와 멤버구성을 ul, ol, li , h1, h2 태그로만 표현](https://youtu.be/OybqI_GL1-8) # 77강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/WNdZwBq) - [CODEPEN - 정답예시](https://codepen.io/sangwon7242/pen/KKZXzjK) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/BaryXwd) - [영상 - 23 11 01, ken 13084, HTML, CSS 강좌, 77강, ul, li 노말라이즈](https://youtu.be/KRLJRLGMUdk) # 78강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/rNpGeEL) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/XWVedLj) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/XWVedLj) - [영상 - 23 11 01, ken 13084, HTML, CSS 강좌, 78강, h1 노말라이즈](https://youtu.be/Onwzg5of9Ts) # 79강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/BaJwKgM) - [영상 - 23 11 01, ken 13084, HTML, CSS 강좌, 79강, 상황에 맞는 태그를 알면 그걸 사용하고, 모르면 div](https://youtu.be/JO-ZOq89v74) # 80강 - [CODEPEN - 튜토리얼, 단계 1](https://codepen.io/sangwon7242/pen/QWaqEwL) - [CODEPEN - 튜토리얼, 단계 2](https://codepen.io/sangwon7242/pen/KKZXMww) - [CODEPEN - 튜토리얼, 단계 3](https://codepen.io/sangwon7242/pen/yLpzJyY) - [CODEPEN - 튜토리얼, 단계 4](https://codepen.io/sangwon7242/pen/MWrEeYK) - [CODEPEN - 튜토리얼, 단계 5](https://codepen.io/sangwon7242/pen/Exowyam) - [CODEPEN - 튜토리얼, 단계 6](https://codepen.io/sangwon7242/pen/xxpXObL) - [CODEPEN - 튜토리얼, 단계 7](https://codepen.io/sangwon7242/pen/qBpPNEV) - [CODEPEN - 튜토리얼, 단계 8](https://codepen.io/sangwon7242/pen/oNpGLgE) - [CODEPEN - 튜토리얼, 단계 9](https://codepen.io/sangwon7242/pen/VwyMjYx) - [CODEPEN - 튜토리얼, 단계 10](https://codepen.io/sangwon7242/pen/KKZXMpp) - [CODEPEN - 튜토리얼, 단계 11](https://codepen.io/sangwon7242/pen/popWbJj) - [CODEPEN - 튜토리얼, 단계 12](https://codepen.io/sangwon7242/pen/yLpzJNe) - [CODEPEN - 튜토리얼, 단계 13](https://codepen.io/sangwon7242/pen/MWrEewy) - [CODEPEN - 튜토리얼, 단계 14](https://codepen.io/sangwon7242/pen/VwyMjLx) - [CODEPEN - 튜토리얼, 단계 15](https://codepen.io/sangwon7242/pen/YzYrWXv) - [CODEPEN - 튜토리얼, 단계 16](https://codepen.io/sangwon7242/pen/vYpeKOa) - [CODEPEN - 튜토리얼, 단계 17](https://codepen.io/sangwon7242/pen/RwxLRPY) - [CODEPEN - 튜토리얼, 단계 18](https://codepen.io/sangwon7242/pen/ZEvXObO) - [CODEPEN - 튜토리얼, 단계 19](https://codepen.io/sangwon7242/pen/eYyGzpd) - [CODEPEN - 튜토리얼, 단계 20](https://codepen.io/sangwon7242/pen/XWVeKmp) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/jOYGxBL) - [영상 - 23 11 01, ken 13084, HTML, CSS 강좌, 80강, 중앙 둥근모서리 메뉴 구현 튜토리얼 설명](https://youtu.be/8Bk7505olC8) - [영상 - 23 11 01, ken 13084, HTML, CSS 강좌, 80강, 중앙 둥근모서리 메뉴 구현 튜토리얼](https://youtu.be/tl6XyrUAfxU) # 81강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/jOYGxGG) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/bGaoMoq) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/bGaoMoq) - [영상 - 23 11 06, ken 13084, HTML, CSS 강좌, 81강, 3가지 메뉴를 구현해주세요](https://youtu.be/UwAMon3GKDA) # 82강 - [선택자 연습 튜토리얼 - CSS DINER, 20~26](https://flukeout.github.io/) - [영상 - 23 11 06, ken 13084, HTML, CSS 강좌, 82강, CSS DINER, 단계 20 ~ 26](https://youtu.be/HK878UDxA00) # 83강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/ExooKEq) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/xxppVjx) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/xxppVjx) - [영상 - 23 11 06, ken 13084, HTML, CSS 강좌, 83강, a에 마우스를 올리면 인접동생인 div가 나타남](https://youtu.be/ETR_dD06YzU) # 84강 - [영상 - 23 11 06, ken 13084, HTML, CSS 강좌, 84강, display 정리](https://youtu.be/JmojOfXC-e0) ``` display 정리 none : 아예 보이지 않는 수준 inline : 글자화, 너비, 높이 최소 축소, 무조건 가로배열 inline : 너비, 높이, padding, margin이 안먹는다. / a, span, 글자(일반글자) inline-block : img block : 블록화, 너비최대확대, 높이 최소축소, 무조건세로배열 / div, section, article, nav, h1 ~ 6, ul, li flex : block과 비슷함, 나중에 배울 예정!! ``` # 85강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/YzYYqLG) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/vYppGjy) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/vYppGjy) - [영상 - 23 11 06, ken 13084, HTML, CSS 강좌, 85강, inline-block 으로 그리드 만들기, 1부](https://youtu.be/HJaZMlIh19k) - [영상 - 23 11 06, ken 13084, HTML, CSS 강좌, 85강, inline-block 으로 그리드 만들기, 2부](https://youtu.be/s9el9IhS4KI) # 86강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/bGaapML) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/WNddwJJ) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/WNddwJJ) - [영상 - 23 11 06, ken 13084, HTML, CSS 강좌, 86강, inline-grid 클래스](https://youtu.be/Dx6C0fBiGlw) # 87강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/KKZZzRx) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/yLppOjQ) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/yLppOjQ) - [영상 - 23 11 06, ken 13084, HTML, CSS 강좌, 87강, inline-grid 클래스 활용](https://youtu.be/dCo8QylQQnQ) # 88강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/ExooKRY) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/xxppVzb) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/xxppVzb) - [영상 - 23 11 06, ken 13084, HTML, CSS 강좌, 88강, 화면의 높이대비 비율로 엘리먼트 높이 조절, 중첩퍼센트](https://youtu.be/wB0AVRyy0lg) # 89강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/VwyyadK) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/YzYYqvp) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/YzYYqvp) - [영상 - 23 11 08, ken 13084, HTML, CSS 강좌, 89강, 화면의 높이대비 비율로 엘리먼트 높이 조절, 중첩퍼센트, 전체 화면 높이의 반](https://youtu.be/T_9WboF4Xis) # 90강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/OJzzNEO) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/BaJJKVJ) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/BaJJKVJ) - [영상 - 23 11 08, ken 13084, HTML, CSS 강좌, 90강, 화면의 높이대비 비율로 엘리먼트 높이 조절, vh, 전체 화면 높이의 반](https://youtu.be/951RTvqhoSw) # 91강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/bGaapKv) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/NWXXNzM) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/NWXXNzM) - [영상 - 23 11 08, ken 13084, HTML, CSS 강좌, 91강, 그리드로 계단식 비율 예제](https://youtu.be/PixV7_8qdno) # 92강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/YzYeaWN) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/RwxQMRV) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/RwxQMRV) - [영상 - 23 11 08, ken 13084, HTML, CSS 강좌, 92강, box-sizing: border-box](https://youtu.be/ec_fQujehyY) # 93강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/bGaLveM) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/WNdMzxK) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/WNdMzxK) - [영상 - 23 11 08, ken 13084, HTML, CSS 강좌, 93강, inline-grid 에 box-sizing 추가](https://youtu.be/Rw4qv_XZfp4) # 94강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/KKZQogr) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/OJaaLoZ) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/OJaaLoZ?editors=1100) - [영상 - 23 11 08, ken 13084, HTML, CSS 강좌, 94강, 컨테이너로 레이아웃을 중앙에 모으고 너비 고정시키기](https://youtu.be/mPzZ4FFU928) # 95강 - [사이트 to2.kr/dPo](https://to2.kr/dPo) - [CODEPEN - 작업 1, 노말라이즈](https://codepen.io/sangwon7242/pen/RwxQMyj) - [CODEPEN - 작업 2, 컨테이너 구현](https://codepen.io/sangwon7242/pen/mdpXxLp) - [CODEPEN - 작업 3, 로고바 구현](https://codepen.io/sangwon7242/pen/GRyQxdQ) - [CODEPEN - 작업 4, 메뉴바 구현, 마크업](https://codepen.io/sangwon7242/pen/gOoveze) - [CODEPEN - 작업 5, 메뉴바 구현, 기본 CSS 작업](https://codepen.io/sangwon7242/pen/KKZQoRY) - [CODEPEN - 작업 6, 메뉴바 구현, 아이템 좌우 보더, 바에 상단여백](https://codepen.io/sangwon7242/pen/popaLVm) - [CODEPEN - 작업 7, 탑 이미지 바 구현](https://codepen.io/sangwon7242/pen/yLpvKjd) - [CODEPEN - 작업 8, 탑 2 이미지 바 구현](https://codepen.io/sangwon7242/pen/MWrQVGN) - [CODEPEN - 작업 9, 마무리 작업](https://codepen.io/sangwon7242/pen/abXJyQz) - [영상 - 23 11 08, ken 13084, HTML, CSS 강좌, 95강, bmx 사이트 상단부분 구현, to2.kr/dPo, 작업 1 ~ 3](https://youtu.be/jqdKZzd-_QQ) - [영상 - 23 11 08, ken 13084, HTML, CSS 강좌, 95강, bmx 사이트 상단부분 구현, to2.kr/dPo, 작업 4 ~ 5](https://youtu.be/1_u3N1Ymxtc) - [영상 - 23 11 08, ken 13084, HTML, CSS 강좌, 95강, bmx 사이트 상단부분 구현, to2.kr/dPo, 작업 6](https://youtu.be/ibOnQQil_Ek) - [영상 - 23 11 08, ken 13084, HTML, CSS 강좌, 95강, bmx 사이트 상단부분 구현, to2.kr/dPo, 작업 7 ~ 9](https://youtu.be/v1Lg2EzffBo) # 96강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/LYeQdaL) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/dyJdmrV) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/dyJdmrV) - [영상 - 23 11 10, ken 13084, HTML, CSS 강좌, 96강, 음수 margin 개요](https://youtu.be/Ai3mcrF1kUQ) # 97강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/zYpaerN) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/ExoRrPW) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/ExoRrPW) - [영상 - 23 11 10, ken 13084, HTML, CSS 강좌, 97강, 음수 margin으로 상자에서 벗어나기](https://youtu.be/BOI5plRWxpk) # 98강 - [CODEPEN - 작업 1, 아이템의 너비를 고정px로](https://codepen.io/sangwon7242/pen/qBgmoQM?editors=1100) - [CODEPEN - 작업 2, 아이템의 너비를 퍼센트 빼기 픽셀로](https://codepen.io/sangwon7242/pen/RwxJvrB) - [CODEPEN - 작업 3, 아이템의 너비 수식을 풀어서 한줄나열 개수를 쉽게확인](https://codepen.io/sangwon7242/pen/PoVmRrq?editors=0100) - [영상 - 23 11 10, ken 13084, HTML, CSS 강좌, 98강, 그리드 여백, 전통적인 방법, 작업 1, 아이템의 너비를 고정px로](https://youtu.be/IdHt_4cvQ14) - [영상 - 23 11 10, ken 13084, HTML, CSS 강좌, 98강, 그리드 여백, 전통적인 방법, 작업 2, 아이템의 너비를 퍼센트 빼기 픽셀로](https://youtu.be/HCn00VFHM-c) - [영상 - 23 11 10, ken 13084, HTML, CSS 강좌, 98강, 그리드 여백, 전통적인 방법, 작업 3, 아이템의 너비 수식을 풀어서 한줄나열 개수를 쉽게확인](https://youtu.be/3xYJACMpGd4) # 99강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/BaJVMjb) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/wvpXNMZ) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/wvpXNMZ) - [영상 - 23 11 10, ken 13084, HTML, CSS 강좌, 99강, 그리드, 여백 음수마진 방법](https://youtu.be/fM2h8X8MtF4) # 100강 - [css postion 정리표](https://cdpn.io/pen/debug/aaXopM) - [영상 - 23 11 10, ken 13084, HTML, CSS 강좌, 100강, position 속성 정리, 1부](https://youtu.be/R4kmf4_Ij90) - [영상 - 23 11 10, ken 13084, HTML, CSS 강좌, 100강, position 속성 정리, 2부](https://youtu.be/62zK-Mc9klE) - [영상 - 23 11 10, ken 13084, HTML, CSS 강좌, 100강, position 속성 정리, 3부](https://youtu.be/dgkolsaT1zU) # 101강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/LYBZzdY?editors=1100) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/KKZeJMw) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/KKZeJMw?editors=1100) - [영상 - 23 11 10, ken 13084, HTML, CSS 강좌, 101강, absolute 요소 위치 옮기기](https://youtu.be/tUAokuzXH8U) # 102강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/LYerKpM) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/oNpyrjm) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/BaJVgjj) - [영상 - 23 11 10, ken 13084, HTML, CSS 강좌, 102강, absolute, width, height, top, left 로 화면을 2 * 2 등분](https://youtu.be/RHVotLcYCe8) # 103강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/OJzEeMy) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/BaJVgjj) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/rNpKExJ) - [영상 - 23 11 10, ken 13084, HTML, CSS 강좌, 103강, absolute, width, height, top, left 로 화면을 1 * 3 등분](https://youtu.be/T3JMDuYVUpY) # 104강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/eYyKwJy) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/rNpKExJ) - [영상 - 23 11 10, ken 13084, HTML, CSS 강좌, 104강, absolute, width, height, top, left 로 화면을 3 * 3 등분](https://youtu.be/0fwXFmlped8) # 105강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/gOojZLm) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/PoEBXbm) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/PoEBXbm) - [영상 - 23 11 10, ken 13084, HTML, CSS 강좌, 105강, top, left, right, bottom의 개념과 기본값](https://youtu.be/QV9SjNYFnHo) # 106강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/abEjPZg) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/xxpJmOv) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/xxpJmOv) - [영상 - 23 11 10, ken 13084, HTML, CSS 강좌, 106강, top, left, right, bottom으로 너비, 높이 조절](https://youtu.be/IvFnl1vg6EE) # 107강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/KKZBbNe) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/yLpqGVx) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/yLpqGVx) - [영상 - 23 11 10, ken 13084, HTML, CSS 강좌, 107강, absolute, top, left, right, bottom 으로 화면을 2 * 2 등분](https://youtu.be/U8VGFxe4oJ0) # 108강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/MWrBZbz) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/PoEBXWj) - [CODEPEN - 작업 1, 4등분](https://codepen.io/sangwon7242/pen/rNproWR) - [CODEPEN - 작업 2, 4등분한 유령들을 부모 엘리먼트에 가두기, relative](https://codepen.io/sangwon7242/pen/XWVBoNQ) - [CODEPEN - 작업 3, 부모 엘리먼트(section)을 수평중앙정렬](https://codepen.io/sangwon7242/pen/ExopGNB) - [CODEPEN - 작업 4, 부모 엘리먼트(section)을 중앙정렬, absolute](https://codepen.io/sangwon7242/pen/popZqRO) - [CODEPEN - 작업 5, 부모 엘리먼트(section)을 중앙정렬, 세부조정, calc](https://codepen.io/sangwon7242/pen/yLpqGgR) - [CODEPEN - 작업 6, 부모 엘리먼트(section)을 중앙정렬, 세부조정, transform](https://codepen.io/sangwon7242/pen/PoEBXWj) - [영상 - 23 11 10, ken 13084, HTML, CSS 강좌, 108강, 수직수평중앙유령, 작업 1, 4등분](https://youtu.be/68Hb18R06mc) - [영상 - 23 11 10, ken 13084, HTML, CSS 강좌, 108강, 수직수평중앙유령, 작업 2, relative로 가두기](https://youtu.be/FqfO-y4_Q3o) - [영상 - 23 11 10, ken 13084, HTML, CSS 강좌, 108강, 수직수평중앙유령, 작업 3, 수평중앙정렬](https://youtu.be/kv6epSteWB0) - [영상 - 23 11 10, ken 13084, HTML, CSS 강좌, 108강, 수직수평중앙유령, 작업 4, absolute](https://youtu.be/6GhL8I4c9XQ) - [영상 - 23 11 10, ken 13084, HTML, CSS 강좌, 108강, 수직수평중앙유령, 작업 5, calc로 위치 미세조정](https://youtu.be/lrsNMaDxpUM) - [영상 - 23 11 10, ken 13084, HTML, CSS 강좌, 108강, 수직수평중앙유령, 작업 6, transform으로 위치 미세조정](https://youtu.be/V6GJ8sCqgvk) # 109강 - [CODEPEN - 튜토리얼, 단계 1](https://codepen.io/sangwon7242/pen/dyJjwvG) - [CODEPEN - 튜토리얼, 단계 2](https://codepen.io/sangwon7242/pen/VwyBqpa) - [CODEPEN - 튜토리얼, 단계 3](https://codepen.io/sangwon7242/pen/YzYjdZW) - [CODEPEN - 튜토리얼, 단계 4](https://codepen.io/sangwon7242/pen/RwxBEpo) - [CODEPEN - 튜토리얼, 단계 5](https://codepen.io/sangwon7242/pen/mdpjaWR) - [CODEPEN - 튜토리얼, 단계 6](https://codepen.io/sangwon7242/pen/jOYpXBK) - [CODEPEN - 튜토리얼, 단계 7](https://codepen.io/sangwon7242/pen/KKZBbWB) - [CODEPEN - 튜토리얼, 단계 8](https://codepen.io/sangwon7242/pen/MWrBZpz) - [CODEPEN - 튜토리얼, 단계 9](https://codepen.io/sangwon7242/pen/ZEvjVeV) - [CODEPEN - 튜토리얼, 단계 10](https://codepen.io/sangwon7242/pen/eYyjbvx) - [영상 - 23 11 11, ken 13084, HTML, CSS 강좌, 109강, 멀티메뉴제작을 위한 선택자 튜토리얼, 1부, 튜토리얼 진행하는 방법](https://youtu.be/QrHQY28-Q3M) - [영상 - 23 11 11, ken 13084, HTML, CSS 강좌, 109강, 멀티메뉴제작을 위한 선택자 튜토리얼, 2부, 정답](https://youtu.be/yuAgPZ4eY80) # 110강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/LYQmgoZ) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/NWyMOVB) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/NWyMOVB) - [영상 - 23 11 11, ken 13084, HTML, CSS 강좌, 110강, 중국집 메뉴로 알아보는 다층구조메뉴](https://youtu.be/BMGea3ixxu4) # 111강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/XWVPEqZ) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/xxpaWjJ) - [영상 - 23 11 11, ken 13084, HTML, CSS 강좌, 111강, 선택자 검색대상의 개수](https://youtu.be/FNGzyyG3pf4) # 112강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/yLpRaWQ) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/oNpazrb) - [CODEPEN - 작업 1, 1차 메뉴 마크업](https://codepen.io/sangwon7242/pen/MWrPjdZ) - [CODEPEN - 작업 2, 노말라이즈](https://codepen.io/sangwon7242/pen/ZEvqpNw) - [CODEPEN - 작업 3, 1차 메뉴 완성](https://codepen.io/sangwon7242/pen/eYyPdaX) - [CODEPEN - 작업 4, 2차 메뉴 마크업](https://codepen.io/sangwon7242/pen/XWVxjww) - [CODEPEN - 작업 5, 2차 메뉴를 평소에 숨기기](https://codepen.io/sangwon7242/pen/zYpmKQV) - [CODEPEN - 작업 6, 2차 메뉴를 유령화](https://codepen.io/sangwon7242/pen/abERmgo) - [CODEPEN - 작업 7, 1차 메뉴 아이템을 유령의 집화](https://codepen.io/sangwon7242/pen/xxpyEox) - [CODEPEN - 작업 8, 2차 메뉴 아이템 텍스트도 꾸미기](https://codepen.io/sangwon7242/pen/JjMmRQo) - [CODEPEN - 작업 9, 2차 메뉴에 배경색](https://codepen.io/sangwon7242/pen/LYegRKp) - [CODEPEN - 작업 10, 모든 메뉴에 배경색을 한방에](https://codepen.io/sangwon7242/pen/oNpazrb) - [영상 - 23 11 11, ken 13084, HTML, CSS 강좌, 112강, 중앙 둥근 메뉴, 2차메뉴까지 구현 튜토리얼](https://youtu.be/R2VmaTXUgjY) # 113강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/bGamrrW) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/NWXOvvg) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/NWXOvvg) - [영상 - 23 11 13, ken 13084, HTML, CSS 강좌, 113강, white-space:nowrap, 줄바꿈 금지](https://youtu.be/yAF9yinyyPU) # 114강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/abERmeb) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/xxpyEvb) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/xxpyEvb) - [영상 - 23 11 13, ken 13084, HTML, CSS 강좌, 114강, 넘치는 부분을 처리하는 overflow 속성](https://youtu.be/fk6bhWujEbo) # 115강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/MWrPjMZ) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/yLpRadQ) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/yLpRadQ) - [영상 - 23 11 13, ken 13084, HTML, CSS 강좌, 115강, text-overflow:ellipsis, 넘쳐서 숨겨지는 텍스트 ... 처리](https://youtu.be/-_AWm_XTqvs) # 116강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/zYRaZyj) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/xxpyENx) - [CODEPEN - 작업 1, 3차메뉴 마크업](https://codepen.io/sangwon7242/pen/KKZGgYx) - [CODEPEN - 작업 2, 3차메뉴 숨기기](https://codepen.io/sangwon7242/pen/popxEBx) - [CODEPEN - 작업 3, 1차메뉴아이템 뿐 아니라, 모든메뉴아이템에 호버시 자식메뉴 나오도록](https://codepen.io/sangwon7242/pen/yLpRarQ) - [CODEPEN - 작업 4, 1차메뉴아이템 뿐 아니라, 모든메뉴아이템을 relative 처리하여, 모든 서브메뉴가 부모아이템이 갇히도록](https://codepen.io/sangwon7242/pen/MWrPjRZ) - [CODEPEN - 작업 5, 3차메뉴는 2차메뉴아이템의 우측부분에서 나오도록](https://codepen.io/sangwon7242/pen/eYyPdoX) - [CODEPEN - 작업 6, 마지막 1차메뉴아이템에 속한 3차메뉴는 좌측에서 나오도록](https://codepen.io/sangwon7242/pen/xxpyENx) - [영상 - 23 11 13, ken 13084, HTML, CSS 강좌, 116강, 중앙 둥근 메뉴, 3차메뉴까지 구현 튜토리얼](https://youtu.be/ZhUvC1Hiu_4) # 117강 - 과제 꼭 해보세요!! - [선택자 연습 튜토리얼 - CSS DINER, 27~32](https://flukeout.github.io/) ``` 속성 선택자 [class] --> class라는 속성을 가진 녀석을 선택하겠다. div[class] --> class라는 속성을 가진 녀석을 선택하겠다. 그 녀석의 엘리먼트가 div인 녀석을 선택하겠다. [class="Vitaly"] --> class라는 속성을 가진 녀석 중에 Vitaly라는 속성 값을 가진 녀석을 선택 [class^="Sa"] --> starts with(시작) : class라는 속성을 가진 녀석 중에 "Sa" 로 시작하는 녀석을 선택 [class$="Sa"] --> end with(끝) : class라는 속성을 가진 녀석 중에 "Sa" 로 끝나는 녀석을 선택 [class*="Sa"] --> contain(포함) : class라는 속성을 가진 녀석 중에 "Sa"를 포함하고 있는 녀석을 선택 ``` # 118강 - [flex 개구리](https://flexboxfroggy.com/#ko) - 제한시간 : 10분 - [flex 디펜스](http://www.flexboxdefense.com/) - 제한시간 : 15분 - [flex playground](https://cdpn.io/pen/debug/adLPwv) - 목표 : flex-grow, flex-shrink, flex-basis 를 직관적으로 이해한다. - [이번에야 말로 css flex를 익혀보자](https://studiomeal.com/archives/197) - 목표 : flex의 전반적인 내용을 이해한다. - [영상 - 23 11 13, ken 13084, HTML, CSS 강좌, 118강, flex 관련 공부자료 소개](https://youtu.be/tllJT9CVD1I) # 119강 - [flex playground](https://cdpn.io/pen/debug/adLPwv) - [CODEPEN - flex 연습](https://codepen.io/sangwon7242/pen/GRdLEJr) - [영상 - 23 11 13, ken 13084, HTML, CSS 강좌, 119강, playground, 설명 1부](https://youtu.be/ojumnUZvtUg) - [영상 - 23 11 15, ken 13084, HTML, CSS 강좌, 119강, playground, 설명 2부](https://youtu.be/F6uLY1Qsb8A) ``` flex 개념 1. 부모가 flex container가 되면 그의 자식들은 flex items이 된다. 2. flex item이 된 자식들은 배열 방향이 가로배열이다. 3. flex item이 된 자식들은 flex container(부모)의 높이를 그대로 받아온다. 4. flex item이 된 자식들은 너비가 최소화 된다. 5. flex item들은 기본적으로 압축(white-space: nowrap;)되어 있는 상태이다. 6. flex item이 된 자식들은 align-items가 stretch이다. flex-direction: column 일 때 변하는 디자인 상황 1. flex item은 높이가 아닌 flex container(부모)의 너비를 그대로 받아온다. 2. flex item이 된 자식들은 높이가 최소화 된다. flex-direction: row냐 column이냐에 따라 변경 되는 align-items의 디자인 1. flex-direction: row 일 때는 수직정렬이다. 2. flex-direction: column 일 때는 수평정렬이다. flex-direction: row냐 column이냐에 따라 변경 되는 justify-content의 디자인 1. flex-direction: row 일 때는 수평정렬이다. 2. flex-direction: column 일 때는 수직정렬이다. ------ flex-direction: row냐 column이냐에 따라 변경 되는 align-self의 디자인 - flex-direction: row 일 때는 수직정렬이다. - flex-direction: column일 때는 수평정렬이다. flex-grow : 성장성, 기본값 0 -> 공간이 남아 있는 경우에만 작동 fle-shirink : 수축성, 기본값 1 -> 공간이 부족한 경우에만 작동 flex-direction: row냐 column이냐에 따라 flex-basis는 너비 또는 높이로 작용한다. - flex-direction: row일 때는 너비로 작용한다. - flex-direction: column일 때는 높이로 작용한다. ``` # 120강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/OJzrNev) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/Vwyqaob) - [CODEPEN - 작업 0](https://codepen.io/sangwon7242/pen/WNdLwqa) - 목표 : 헤더와 푸터를 flex item으로 만들고 세로 방향으로 배열해주세요. - 힌트 - display: flex; - flex-direction: column; - [CODEPEN - 작업 1](https://codepen.io/sangwon7242/pen/MWrZyMd) - 목표 : 푸터안의 텍스트를 가운데 정렬해주세요. - 힌트 - display: flex; - justify-content: center; - [CODEPEN - 작업 2](https://codepen.io/sangwon7242/pen/MWrZyMM) - 목표 : 중단부분을 마크업 해주세요. - [CODEPEN - 작업 3](https://codepen.io/sangwon7242/pen/ZEvVWdg) - 목표 : 중단부분의 세 부분을 세로가 아닌 가로로 배열해주세요. - [CODEPEN - 작업 4](https://codepen.io/sangwon7242/pen/rNpoeXN) - 목표 : 양쪽 사이드바가 남는 공간을 1:1 비율로 나눠가지도록 해주세요. - [CODEPEN - 작업 5](https://codepen.io/sangwon7242/pen/XWVodvJ) - 목표 : 왼쪽 사이드바의 너비는 150px, 오른쪽 사이드바의 너비는 120px, 나머지 여백은 중앙박스가 차지하게 해주세요. - 힌트 - flex-grow: 1 or 0; - [CODEPEN - 작업 6](https://codepen.io/sangwon7242/pen/JjMwXgK) - 목표 : 컨테이너의 높이가 100vh 이상이 되도록 해주세요. - 힌트 - min-height: 100vh; - [CODEPEN - 작업 7](https://codepen.io/sangwon7242/pen/qBpLZea) - 목표 : 중단부분의 높이가 헤더와 푸터가 사용한 나머지를 차지하게 해주세요. - 힌트 - flex-grow: 1 or 0; - [CODEPEN - 작업 8](https://codepen.io/sangwon7242/pen/LYeMNwb) - 목표 : 중앙박스에 텍스트를 길게 넣고, 화면의 너비를 줄여서, 양쪽 사이드 박스의 너비가 언제 달라지는지 확인해주세요. - 힌트 - 화면의 너비를 천천히 줄여보세요. - [CODEPEN - 작업 9](https://codepen.io/sangwon7242/pen/oNpJxKB) - 목표 : 화면의 너비가 줄어들어도 양쪽 사이드바의 너비가 바뀌지 않게 해주세요. - 힌트 - flex-shrink: 1 or 0; - [CODEPEN - 작업 10](https://codepen.io/sangwon7242/pen/Vwyqaob) - 완료 - [영상 - 23 11 15, ken 13084, HTML, CSS 강좌, 120강, flex를 이용해서 성배 레이아웃을 만들어주세요.](https://youtu.be/sVdmhQyEStw) # 121강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/vYaJzdE?editors=1100) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/KKrzpQY) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/GRzMwWO?editors=0100) - [영상 - 23 11 15, ken 13084, HTML, CSS 강좌, 121강, flex를 이용한 중앙 둥근 메뉴, 2차메뉴까지 구현](https://youtu.be/uhtnMq7dbS0) # 122강 - [google fonts](https://fonts.google.com/) - [google fonts - roboto 폰트](https://fonts.google.com/specimen/Roboto?query=roboto) - 원하는 폰트에 버튼(```select this style```)을 눌러서 장바구니에 담아주세요. - embed 타입을 ```@import``` 로 한 후 복사 - 적용법 ```css @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); html > body { font-family: 'Roboto', sans-serif; } ``` - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/RwxERPj) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/mdpaEJp) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/mdpaEJp) - [영상 - 23 11 20, ken 13084, HTML, CSS 강좌, 122강, 영문 웹폰트](https://youtu.be/LpogR7kCmFo) # 123강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/NWXerqE) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/WNdLxvL) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/WNdLxvL) - [영상 - 23 11 20, ken 13084, HTML, CSS 강좌, 123강, 적당한 웹폰트가 없다면 브라우저가 직접 흉내냅니다.](https://youtu.be/SUyNMC9azww) # 124강 - [눈누](https://noonnu.cc/index) - [눈누 - 지마켓 산스](https://noonnu.cc/font_page/366) - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/JjMwKYR) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/qBpLNOq) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/qBpLNOq?editors=1100) - [영상 - 23 11 20, ken 13084, HTML, CSS 강좌, 124강, 한글웹폰트는 무거우니 1개만 눈누에서 고르세요.](https://youtu.be/I-_hKYE1bjc) # 125강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/popqXvG) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/yLpGdyw) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/yLpGdyw) - [영상 - 23 11 20, ken 13084, HTML, CSS 강좌, 125강, 2개 이상의 웹폰트 사용법](https://youtu.be/ikhd7pxPGSs) # 126강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/YzYdoPZ) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/RwxEzNg) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/RwxEzNg) - [영상 - 23 11 20, ken 13084, HTML, CSS 강좌, 126강, 하나의 문장안에서 영문자와 숫자만 다른 폰트로 적용하기](https://youtu.be/3SO-Zl6fmCQ) # 127강 - [CODEPEN - 정답](https://codepen.io/pen?editors=1100) - [영상 - 23 11 20, ken 13084, HTML, CSS 강좌, 127강, 엘리먼트를 스타일링 하는 2가지 방법](https://youtu.be/zA6Zp_RSk2c) # 128강 - [CDNJS - https://cdnjs.com/](https://cdnjs.com/) - 제이쿼리, 테일윈드 등 유명한 라이브러리들을 검색해서 찾을 수 있음 - [CDNJS, tailwind - https://cdnjs.com/libraries/tailwindcss](https://cdnjs.com/libraries/tailwindcss) - 테일윈드 CDN : https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css - `````` - `````` - [테일윈드 - https://tailwindcss.com/](https://tailwindcss.com/) - [테일윈드 치트시트 - https://nerdcave.com/tailwind-cheat-sheet](https://nerdcave.com/tailwind-cheat-sheet) - [CODEPEN - 1차 메뉴를 tailwind 방식으로 적용](https://codepen.io/sangwon7242/pen/mdxWbpz) - [영상 - 23 11 20, ken 13084, HTML, CSS 강좌, 128강, 테일윈드 소개](https://youtu.be/IHREmxFSa3s) # 129강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/ZEvVdzN) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/KKrLVmJ) - [CODEPEN - 작업 1, 폰트적용, 노말라이즈](https://codepen.io/sangwon7242/pen/eYybwOw) - [CODEPEN - 작업 2, 탑바 레이아웃](https://codepen.io/sangwon7242/pen/rNpoEBX) - [CODEPEN - 작업 3, 로고](https://codepen.io/sangwon7242/pen/XWVoLWr) - [CODEPEN - 작업 4, 메뉴1](https://codepen.io/sangwon7242/pen/gOdXayP?editors=0110) - [CODEPEN - 작업 5, 서류 제출하기 버튼](https://codepen.io/sangwon7242/pen/ExoGBxa) - [CODEPEN - 작업 6, 이미지 섹션 구현](https://codepen.io/sangwon7242/pen/xxpmoxw) - [CODEPEN - 작업 7, 이미지 섹션에 배경색 넣기](https://codepen.io/sangwon7242/pen/JjMwQjG) - [CODEPEN - 작업 8, con-min-width 적용](https://codepen.io/sangwon7242/pen/oNpJrNz) - [CODEPEN - 작업 9, 글로벌 아이콘 적용](https://codepen.io/sangwon7242/pen/OJdQrMz?editors=1100) - [영상 - 23 11 20, ken 13084, HTML, CSS 강좌, 129강, 카카오뱅크 상단바 구현, 1부, 작업 1 ~ 3](https://youtu.be/zSwUms1IHrM) - [영상 - 23 11 20, ken 13084, HTML, CSS 강좌, 129강, 카카오뱅크 상단바 구현, 2부, 작업 4 ~ 5](https://youtu.be/JONWDuVSMxc) - [영상 - 23 11 20, ken 13084, HTML, CSS 강좌, 129강, 카카오뱅크 상단바 구현, 3부, 작업 6 ~ 8](https://youtu.be/VnQafItqbck) - [영상 - 23 11 20, ken 13084, HTML, CSS 강좌, 129강, 카카오뱅크 상단바 구현, 4부, 작업 9](https://youtu.be/3QQeV17e9MU) # 130강 - [미디어쿼리 참고자료](https://log.designichthus.com/11) - [미디어쿼리 초보자 안내서(공식문서)](https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries) - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/PoEXrPQ) - [CODEPEN - 정답예시. 1](https://cdpn.io/pen/debug/OJzreyv) - [CODEPEN - 정답예시. 2](https://cdpn.io/pen/debug/PoxvdaR) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/OJzreyv) - [CODEPEN - 미디어쿼리를 이용한 메뉴](https://codepen.io/sangwon7242/pen/PoxvdaR?editors=0110) - [영상 - 23 11 22, ken 13084, HTML, CSS 강좌, 130강, 미디어 쿼리](https://youtu.be/-vZPRpZo3zU) ![미디어쿼리분기점](https://velog.velcdn.com/images/jin_jin_dev/post/4bf59347-2a88-4d33-a40f-cb7f06589ba5/image.png) ```css /* 노트북 & 테블릿 가로 (해상도 1024px ~ 1279px)*/ @media all and (min-width:1024px) and (max-width:1279px) { //스타일 입력 } /* 테블릿 가로 (해상도 768px ~ 1023px)*/ @media all and (min-width:768px) and (max-width:1023px) { //스타일 입력 } /* 모바일 가로 & 테블릿 세로 (해상도 480px ~ 767px)*/ @media all and (min-width:480px) and (max-width:767px) { //스타일 입력 } /* 모바일 세로 (해상도 ~ 479px)*/ @media all and (max-width:479px) { //스타일 입력 } ``` ### 최근 추가된 미디어 쿼리 문법 ```css /* 노트북 & 테블릿 가로 (해상도 1024px ~ 1279px)*/ /* @media all and (min-width:1024px) and (max-width:1279px) */ @media (1024px <= width <= 1279px) { .section-1 > .con { width: 1000px; background-color: gold; } } /* 모바일 세로 (해상도 ~ 479px)*/ /* @media (max-width:479px) */ @media (width <= 479px) { .section-1 > .con { width: 400px; background-color: purple; } } /* <=, <, >, >= 비교연산자를 이용한 미디어쿼리 작성이 가능 */ ``` # 131강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/ZEvNaPV) - [CODEPEN - 정답예시](https://codepen.io/sangwon7242/pen/yLpWPwR) - [CODEPEN - 정답](https://cdpn.io/pen/debug/yLpWPwR) - [영상 - 23 11 22, ken 13084, HTML, CSS 강좌, 131강, CSS 변수](https://youtu.be/q4UENzjPNoY) # 132강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/xxpNPeK) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/oNmdgaz) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/oNmdgaz?editors=1100) - [영상 - 23 11 22, ken 13084, HTML, CSS 강좌, 132강, flex gap과 css 변수를 이용한, 반응형 그리드](https://youtu.be/PXk004F6CdM) # 133강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/mdpYqgR) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/gOoJXyW) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/gOoJXyW?editors=1100) - [영상 - 23 11 22, ken 13084, HTML, CSS 강좌, 133강, flex-grid 를 적용해서, CSS를 단순화 해주세요.](https://youtu.be/vh2bF2MP-UQ) # 134강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/RwxmjzK) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/mdpYqZW) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/mdpYqZW) - [영상 - 23 11 22, ken 13084, HTML, CSS 강좌, 134강, before, after](https://youtu.be/lPbfS_5ZzQ8) # 135강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/KKJRdKM?editors=0100) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/MWLGwMJ) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/MWLGwMJ?editors=1100) - [영상 - 23 11 22, ken 13084, HTML, CSS 강좌, 135강, opacity, transition](https://youtu.be/ll2Zj30BPFU) # 136강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/Exozbzq) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/LYqrpPQ) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/LYqrpPQ?editors=1100) - [영상 - 23 11 24, ken 13084, HTML, CSS 강좌, 136강, transform, scale, z-index](https://youtu.be/LKUGogjmkPg) # 137강 - [폰트어썸, FREE 아이콘 리스트](https://fontawesome.com/search?o=r&m=free) - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/bGayYPL) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/NWXVwZY) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/NWXVwZY) - [영상 - 23 11 24, ken 13084, HTML, CSS 강좌, 137강, 폰트어썸](https://youtu.be/5Yk610PQZMc) # 138강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/VwdYwQG) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/poQRevX) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/poQRevX?editors=1100) - [영상 - 23 11 24, ken 13084, HTML, CSS 강좌, 138강, before, after에 폰트어썸 넣기](https://youtu.be/KawZh9_yrbo) # 139강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/gOoNNBP) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/NWXZZOp) - [CODEPEN - 작업 1, box-shadow](https://codepen.io/sangwon7242/pen/PoErryN) - [CODEPEN - 작업 2, 그림자가 흐릿해짐](https://codepen.io/sangwon7242/pen/BaJggqL) - [CODEPEN - 작업 3, 그림자는 2개 이상도 적용가능](https://codepen.io/sangwon7242/pen/wvpLLYo) - [CODEPEN - 작업 4, 그림자 transition](https://codepen.io/sangwon7242/pen/bGaPPmg) - [CODEPEN - 작업 5, 평소에도 그림자 약간](https://codepen.io/sangwon7242/pen/NWXZZOp) - [영상 - 23 11 24, ken 13084, HTML, CSS 강좌, 139강, box-shadow](https://youtu.be/3std0pSBBEo) # 140강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/NWEdpLK?editors=0100) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/yLQgMEe) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/yLQgMEe?editors=0100) - [영상 - 23 11 24, ken 13084, HTML, CSS 강좌, 140강, text-shadow](https://youtu.be/NeihUYnoe1c) # 141강 - [영상 - 23 11 24, ken 13084, HTML, CSS 강좌, 141강, 크롬 개발자 도구 사용법](https://youtu.be/XNQQn9nBbcU) # 142강 - [BEM 공식 사이트](https://getbem.com/naming/) - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/wvpLLQo) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/NWXZZEp) - [영상 - 23 11 24, ken 13084, HTML, CSS 강좌, 142강, BEM CSS 명명법](https://youtu.be/DlzYwsbm3do) # 143강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/oNprrQr) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/dyJBBQx) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/dyJBBQx) - [영상 - 23 11 24, ken 13084, HTML, CSS 강좌, 143강, 고정비율 엘리먼트](https://youtu.be/AhO5mcU-7lw) # 144강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/XWOYdjJ?editors=1100) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/Vwgdajb) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/Vwgdajb?editors=1100) - [CODEPEN - 예시](https://codepen.io/sangwon7242/pen/BaMVKLV?editors=1100) - [영상 - 23 11 24, ken 13084, HTML, CSS 강좌, 144강, background-image 사용 방법](https://youtu.be/lCFBSTBIY3Y) # 145강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/bGzjwew?editors=1100) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/ZEwjpWv) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/ZEwjpWv?editors=1100) - [영상 - 23 11 27, ken 13084, HTML, CSS 강좌, 145강, 스프라이트 이미지](https://youtu.be/6BLYiIYCwVY) - 네이버 스프라이트 이미지 : https://ifh.cc/g/zvSMBg.png # 146강 - [https://to2.kr/dLW](https://to2.kr/dLW) - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/wvpLLNg) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/bGaPPzq) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/bGaPPzq) - [CODPEN - 정답, 나이키 신발 버전](https://codepen.io/sangwon7242/pen/qBgyqNO?editors=1100) - [영상 - 23 11 27, ken 13084, HTML, CSS 강좌, 146강, 상품이미지 호버 텍스트 효과, 작업 1, 상품리스트 시작](https://youtu.be/LhBXvyoE5yQ) # 147강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/eYywwxK) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/bGQqRLo) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/bGQqRLo?editors=1100) - [CODPEN - 정답, 나이키 신발 버전](https://codepen.io/sangwon7242/pen/xxMJRrw?editors=0100) - [영상 - 23 11 27, ken 13084, HTML, CSS 강좌, 147강, 상품이미지 호버 텍스트 효과, 작업 2, 상품리스트 완성](https://youtu.be/OvdkeY77pZ0) # 148강 - [https://to2.kr/dLW](https://to2.kr/dLW) - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/qBgyRKo) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/OJdwWXd) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/OJdwWXd?editors=1100) - [영상 - 23 11 27, ken 13084, HTML, CSS 강좌, 148강, 디자인 레몬 상단바 구현, 작업 1, 일단 구현](https://youtu.be/rFXbP1kfeoE) # 149강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/OJdwWXd?editors=1100) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/XWOPgwR) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/XWOPgwR?editors=0100) - [영상 - 23 11 29, ken 13084, HTML, CSS 강좌, 149강, 디자인 레몬 상단바 구현, 작업 2, 세부조정](https://youtu.be/Q9JE3S5xdP4) # 150강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/XWOPgwR?editors=0100) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/NWoLvpN) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/NWoLvpN?editors=1100) - [영상 - 23 11 29, ken 13084, HTML, CSS 강좌, 150강, 상단바, 상품리스트 합침](https://youtu.be/3EwDJrStFFY) # 151강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/ExOXWbY?editors=1100) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/YzBOrPX) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/YzBOrPX?editors=1100) - [영상 - 23 11 29, ken 13084, HTML, CSS 강좌, 151강, 서브메뉴의 너비가 화면을 채워야 할 때](https://youtu.be/8AJdYOOhQhQ) # 152강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/OJQYRdy?editors=1010) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/OJQLpqj) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/OJQLpqj) - [영상 - 23 11 29, ken 13084, HTML, CSS 강좌, 152강, 밑줄 애니메이션 2가지](https://youtu.be/GIAqlCOmEGU) # 제주맥주 시작 # 153강 - [제주맥주](https://jejubeer.co.kr/) - [CODEPEN](https://codepen.io/sangwon7242/pen/WNPgXbL?editors=1100) - [영상 - 23 11 29, ken 13084, HTML, CSS 강좌, 153강, 제주맥주, 반응형 메뉴, pc 탑바, mobile 탑바 교체 방법 설명](https://youtu.be/95pSKmRX_AU) # 154강 - [CODEPEN](https://codepen.io/sangwon7242/pen/ExrebjP?editors=1100) - [영상 - 23 11 29, ken 13084, HTML, CSS 강좌, 154강, 제주맥주, 반응형 메뉴, pc 탑바 구현, 레이아웃 잡기](https://youtu.be/Wuy9cKoYW4I) # 155강 - [CODEPEN](https://codepen.io/sangwon7242/pen/wvNEPzQ?editors=1100) - [영상 - 23 11 29, ken 13084, HTML, CSS 강좌, 155강, 제주맥주, 반응형 메뉴, pc 탑바 로고 구현](https://youtu.be/S7dw7lGZIck) # 156강 - [CODEPEN](https://codepen.io/sangwon7242/pen/yLZxPPy?editors=1100) - [영상 - 23 11 29, ken 13084, HTML, CSS 강좌, 156강, 제주맥주, 반응형 메뉴, pc 탑바 우측 로그인 아이템 구현](https://youtu.be/xC2Fw1YCTjI) # 157강, 제주맥주, 반응형 메뉴, pc 탑바 우측 버튼 구현 - [CODEPEN](https://codepen.io/sangwon7242/pen/MWLzZba?editors=1100) - 제주맥주 로고 : https://ifh.cc/g/AkGQhL.jpg # 158강, 제주맥주, 반응형 메뉴, pc 탑바, 무료배송 버튼 연습 및 애니메이션 기능 구현 - [CODEPEN](https://codepen.io/sangwon7242/pen/BaMGveB) # 159강, 제주맥주, 반응형 메뉴, pc 탑바, 무료배송 버튼 구현 - [CODEPEN](https://codepen.io/sangwon7242/pen/WNPYPrx?editors=1100) # 160강, 제주맥주, 반응형 메뉴, pc 탑바, 메뉴 구현 - [CODEPEN](https://codepen.io/sangwon7242/pen/MWLzLjv?editors=1100) # 161강, 제주맥주에 스와이퍼 반영하긴 전 연습 - [CODEPEN](https://codepen.io/sangwon7242/pen/XWOyGKQ?editors=1010) ```html ``` # 162강, 제주맥주, 섹션에 스와이퍼 적용 - [CODEPEN](https://codepen.io/sangwon7242/pen/eYxQXdx?editors=1100)