# 강사정보 - 박상원 강사 - 이메일 : qoro33@naver.com # 웹 퍼블리셔 과정 기초반 오픈톡방 -

- 참여코드 : 0219 # 가입해야 할 사이트 - [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 + 영문 소문자 입력 : 대문자 입력 # 1강. 수업개요 - [영상 - 25 03 13, slog 14321, HTML, CSS 강좌, 1강, 개요](https://youtu.be/yJgiquPP-Yo) # 2강, 웹 디자이너와 웹 퍼블리셔의 차이 - [영상 - 25 03 13, slog 14321, HTML, CSS 강좌, 2강, 웹 디자이너와 웹 퍼블리셔의 차이](https://youtu.be/LFZ-r-keLOc) # 3강, 코드펜 세팅 설명 - [영상 - 25 03 13, slog 14321, HTML, CSS 강좌, 3강, 코드펜 세팅 설명](https://youtu.be/Oci2AY7aHfI) # 4강, 코드펜 에디터 사용방법 - [영상 - 25 03 13, slog 14321, HTML, CSS 강좌, 4강, 코드펜 에디터 사용방법](https://youtu.be/ji01_DbB93s) # 5강, 기본적인 타이핑 방법 설명 - [영상 - 25 03 13, slog 14321, HTML, CSS 강좌, 5강, 기본적인 타이핑 방법 설명](https://youtu.be/avqpfcZt3Ls) # 6강, HTML, CSS , JS 역할 - [영상 - 25 03 13, slog 14321, HTML, CSS 강좌, 6강, HTML, CSS , JS 역할](https://youtu.be/49SpgOuX4-E) ``` 웹 구성요소 : HTML, CSS, JavaScript HTML : 문서의 내용 CSS : 문서의 꾸밈(디자인) JavaScript : 인터랙티브(웹의 동적효과 부여) ``` # 7강, subject 태그와 content 태그를 적용해주세요. - [CODEPEN - 시작, subject 태그와 content 태그를 적용](https://codepen.io/sangwon7242/pen/ZEgexrL) - [영상 - 25 03 13, slog 14321, HTML, CSS 강좌, 7강, subject 태그와 content 태그를 적용해주세요.](https://youtu.be/xUgxzueAcqs) # 8강, 엘리먼트에 스타일 적용 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/ZEvGXQW?editors=1100) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/MWrwEbe?authentication_hash=mWMoNYXXXnzk) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/ZYEaBzE?editors=1100) - [영상 - 25 03 13, slog 14321, HTML, CSS 강좌, 8강, 엘리먼트에 스타일 적용하는 방법 설명](https://youtu.be/nqRKd2pdLCs) # 9강, 배경색이 red인 사각형 만들기 - [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) - [영상 - 25 03 13, slog 14321, HTML, CSS 강좌, 9강, 배경색이 red인 사각형 만들기](https://youtu.be/ZzYpWjC82AI) ### 알아낸 사실!! ``` div, section, nav, article div 높이를 주지 않으면 높이가 없는 태그이구나! div는 너비를 주지 않아도 너비가 나오는 태그이구나! ``` # 10강, 크기와 배경색이 서로 다른 사각형 3개를 만들기 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/BaJNwWe?editors=1100) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/KKZpXmd?authentication_hash=xJAjOVPPbWJk) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/QWPEJXm?editors=1100) - [영상 - 25 03 17, slog 14321, HTML, CSS 강좌, 10강, 크기와 배경색이 서로 다른 사각형 3개를 만들기](https://youtu.be/Xkgt_Qn41xE) # 11강, CSS 기본값 개념 - [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) - [영상 - 25 03 17, slog 14321, HTML, CSS 강좌, 11강, CSS 기본값 개념](https://youtu.be/Mef1dWfybf0) ``` 1. html은 font-size가 기본적으로 16px이다. 2. 모든 엘리먼트에는 고유의 css는 기본값을 갖는다. 3. div, section, nav, article - display: block이다. - width: 너비를 주지 않아도 너비가 존재한다. - height: 높이를 주지 않으면 높이가 존재하지 않는다. 4. 모든 css는 기본값이 존재한다. ``` # 12강, block 과 inline-block 의 차이점을 설명해주세요. - [개념 - css display 속성 정리](https://codepen.io/jangka44/live/ZjbpPR) - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/OJzVOdm?editors=1100) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/jORrXme?editors=1100) - [영상 - 25 03 17, slog 14321, HTML, CSS 강좌, 12강, block 과 inline-block 의 차이점을 설명해주세요.](https://youtu.be/PSZnaB8oYUw) # 13강, section(green)색 막대와 article(blue)색 막대를 한 줄에 보이도록 - [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/dyLprbq?editors=0100) - [영상 - 25 03 17, slog 14321, HTML, CSS 강좌, 13강, section(green)색 막대와 article(blue)색 막대를 한 줄에 보이도록](https://youtu.be/kEi0y0w19g4) # 14강, 글자 꾸미기 - [구글 color-picker](https://g.co/kgs/huHsvyu) - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/GRyoqyK?editors=1100) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/gbOvOvJ) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/gbOvOvJ?editors=1100) - [영상 - 25 03 17, slog 14321, HTML, CSS 강좌, 14강, 글자 꾸미기](https://youtu.be/gzaFgNcGQ0g) # 15강, 테이블 태그 개념 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/GRbMewJ?editors=1100) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/mdNmVqy) - [CODEPEN - 결과](https://codepen.io/sangwon7242/pen/mdNmVqy?editors=1000) - [영상 - 25 03 17, slog 14321, HTML, CSS 강좌, 15강, 테이블 태그 개념](https://youtu.be/4BHyAhYf_Kc) - table 개념 - table 태그 -> 웹사이트 표를 만들 때 사용 - table border="1" -> table 테두리 스타일 - th = table head(부수적인 정보를 표현할 때) - tr = table row - td = table date(메인데이터) # 16강, 테이블 태그 보강, 테이블 꾸미기 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/mdNmVqy?editors=1000) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/vEYdYzP) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/vEYdYzP?editors=1100) - [영상 - 25 03 17, slog 14321, HTML, CSS 강좌, 16강, 테이블 태그 보강, 테이블 꾸미기](https://youtu.be/bMpdSOx0COk) # 17강, display 속성과 관련된 문제, 복습 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/oNpbLJO?editors=1000) - [CODEPEN - 결과](https://codepen.io/sangwon7242/pen/vYpLKbB) ## 영상 없음. 결과만 봐주세요. # 18강, br태그, a태그 개념 - [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) - [영상 - 25 03 18, slog 14321, HTML, CSS 강좌, 18강, br태그, a태그 개념](https://youtu.be/kmVZ655eBuM) - br 태그 개념 - br 태그는 '셀프 클로징' 태그로 - 다른 태그와 달리 닫는 태그가 존재하지 않는다. - 단독적으로 사용하는 태그이다. - 역할 : 한줄로 출력되는 문구를 한줄 띄어서 출력하고 싶을 때 사용된다. # 19강, 문제 : 각 사이트명에 링크 걸기 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/qBpbNGv) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/NWXxrZp?authentication_hash=dGrXWNbKOBgM) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/ExJgMOd?editors=1000) - [영상 - 25 03 18, slog 14321, HTML, CSS 강좌, 19강, 각 사이트명에 링크 걸기](https://youtu.be/tEd6oc3KgIc) # 20강, Emmet(젠코딩) 개념 설명 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/dyJGqwM?editors=1010) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/xbxYYjV?editors=1010) - [영상 - 25 03 18, slog 14321, HTML, CSS 강좌, 20강, Emmet(젠코딩) 개념 설명](https://youtu.be/zgyYOwZXEO8) # 21강, 문제 : Emmet을 이용하여 링크를 생성 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/RNwQQyL) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/GRyoXPm?authentication_hash=LQAExNjNaYGr) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/GRyoXPm) - [영상 - 25 03 18, slog 14321, HTML, CSS 강좌, 21강, Emmet을 이용하여 링크를 생성](https://youtu.be/ezuuj54dhBY) # 22강, 후손선택자, 자식선택자, 인접동생선택자 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/xxpZaMx) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/VwyeGgj?authentication_hash=VJMxxRGRbwDM) - [CODEPEN - 결과](https://codepen.io/sangwon7242/pen/VwyeGgj) - [영상 - 25 03 18, slog 14321, HTML, CSS 강좌, 22강, 후손선택자, 자식선택자, 인접동생선택자](https://youtu.be/Wobk-xozT1E) ``` > : 자식선택자 띄어쓰기 : 후손선택자 + : 인접동생선택자 ``` # 23강, 각각의 크기와 색상이 다른 링크 버튼 3개 만들어주세요 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/rNpLMRq?editors=1010) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/GRyqjLq?authentication_hash=NjMYzpXnGJLr) - [CODEPEN - 결과](https://codepen.io/sangwon7242/pen/mdgrgjw?editors=1100) - [영상 - 25 03 18, slog 14321, HTML, CSS 강좌, 23강, 문제 : 각각의 크기와 색상이 다른 링크 버튼 3개 만들어주세요](https://youtu.be/9tMYP8uPNvw) # 24강, text-align는 대상 엘리먼트가 아니라 그것의 텍스트를 정렬한다 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/GRyqjVj) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/BaJzLXR?authentication_hash=VJkxxRGXRbpk) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/BaJzLXR) - [영상 - 25 03 18, slog 14321, HTML, CSS 강좌, 24강, text-align는 대상 엘리먼트가 아니라 그것의 텍스트를 정렬한다](https://youtu.be/boXj-XCECOI) # 25강, text-align 은 대상 엘리먼트의 글자와 자식 inline 요소만 정렬한다 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/jOYrMgZ) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/XWVKjvO?authentication_hash=WPkLYbVzbVmM) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/XWVKjvO) - [영상 - 25 03 18, slog 14321, HTML, CSS 강좌, 25강, text-align 은 대상 엘리먼트의 글자와 자식 inline 요소만 정렬한다](https://youtu.be/yTUCWh4T1QQ) # 26강, inline 요소에 text-align 속성을 주면 의미 없는 이유 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/YzYWpzw) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/GRyqNRN?authentication_hash=bYAdyOoVOXqk) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/GRyqNRN) - [영상 - 25 03 18, slog 14321, HTML, CSS 강좌, 26강, inline 요소에 text-align 속성을 주면 의미 없는 이유](https://youtu.be/5TQ1FAWuAng) # 27강, 문제 : 각각의 크기와 색상과 정렬상태가 다른 링크 버튼 3개 만들어주세요 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/bGaeBGo) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/KKZMNKR?authentication_hash=PBMNWbqXnJvr) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/KKZMNKR) - [영상 - 25 03 19, slog 14321, HTML, CSS 강좌, 27강, 문제 : 각각의 크기와 색상과 정렬상태가 다른 링크 버튼 3개 만들어주세요](https://youtu.be/Hi_1FZn6dXc) # 28강, 개념 : hover - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/rNpLWNo) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/XWVKNWO?authentication_hash=yPkJjbdnbbvk) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/XWVKNWO) - [영상 - 25 03 19, slog 14321, HTML, CSS 강좌, 28강, 개념 : hover](https://youtu.be/fwBSwXc9688) # 29강, 문제 : 100칸 짜리 바둑판을 만들고 하나의 칸에 마우스를 올리면 해당 칸의 배경색이 바뀌도록 해주세요 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/YzYWpPw) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/vYpKyEG?authentication_hash=VJrxxRGXRgWr) - [CODPEN - 정답](https://codepen.io/sangwon7242/pen/eYxoYbj?editors=0100) - [영상 - 25 03 19, slog 14321, HTML, CSS 강좌, 29강, 100칸 짜리 바둑판을 만들고 하나의 칸에 마우스를 올리면 해당 칸의 배경색이 바뀌도록 해주세요](https://youtu.be/8OJGJcGkyII) # 30강, `nbsp;`(공백문자) - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/rNpLWaP) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/XWVKNJG?authentication_hash=xJkjOVPGVweM) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/XWVKNJG) - [영상 - 25 03 19, slog 14321, HTML, CSS 강좌, 30강, `nbsp;`(공백문자)](https://youtu.be/XhZRoJ73x3A) # 31강, text-deocration - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/qBpNqdB) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/LYeZbVE?authentication_hash=vPAKKNpXNvNA) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/LYeZbVE) - [영상 - 25 03 19, slog 14321, HTML, CSS 강좌, 31강, text-deocration](https://youtu.be/YyQl3z1wOxw) # 32강, 문제 : div 태그만 사용하여 사과의 색상을 red로 변경해주세요 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/gOoMLpm) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/PoEzbqm?authentication_hash=gareYBNGBGRr) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/PoEzbqm) - [영상 - 25 03 19, slog 14321, HTML, CSS 강좌, 32강, 문제 : div 태그만 사용하여 사과의 색상을 red로 변경해주세요](https://youtu.be/kYDU970sZq4) # 33강, 문제 : bmx 사이트 상단바를 구현해주세요, ` ` 사용 - [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/PoVgRNM?editors=0100) - 조건, 힌트 - ` ` 사용가능 - [영상 - 25 03 19, slog 14321, HTML, CSS 강좌, 33강, 문제 : bmx 사이트 상단바를 구현해주세요, ` ` 사용](https://youtu.be/sHJT2Hmn9hY) # 34강, 문제 : bmx 사이트 상단바를 구현해주세요, ` ` 금지 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/RwxGBgx) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/mdprjwX?authentication_hash=WPkLYbVnagjM) - 조건, 힌트 - ` ` 사용불가 - width 사용가능 - | 를 엘리먼트로 감싸야 합니다. - [영상 - 25 03 19, slog 14321, HTML, CSS 강좌, 34강, 문제 : bmx 사이트 상단바를 구현해주세요, ` ` 금지](https://youtu.be/VBbn3szT03g) # 35강, 문제 : bmx 사이트 상단바를 구현해주세요, 아이템 너비 균일 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/eYydjEm) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/abEmjyZ?authentication_hash=NjrYzpXvezvA) - 조건, 힌트 - ` ` 사용불가 - width 사용가능 - 메뉴 텍스트를 엘리먼트로 감싸야 합니다. - 각 아이템의 너비가 균일해야 합니다. - [영상 - 25 03 19, slog 14321, HTML, CSS 강좌, 35강, 문제 : bmx 사이트 상단바를 구현해주세요, 아이템 너비 균일](https://youtu.be/7Ms4lIATM00) # 36강, 문제 : bmx 사이트 상단바를 구현해주세요, a 태그 적용 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/xxpEJpR) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/dyJpjJz?authentication_hash=DqrDdGjvXQZr) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/GRbQOwP?editors=0100) - 조건, 힌트 - ` ` 사용불가 - width 사용가능 - 메뉴 텍스트를 엘리먼트로 감싸야 합니다. - 각 아이템의 너비가 균일해야 합니다. - a 태그로 링크텍스트를 만들어야 합니다. - [영상 - 25 03 19, slog 14321, HTML, CSS 강좌, 36강, 문제 : bmx 사이트 상단바를 구현해주세요, a 태그 적용](https://youtu.be/mY6g-GP9jR8) # 37강, 문제 : bmx 사이트 상단바를 구현해주세요, a 엘리먼트의 너비 최대화 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/BaJLPdO) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/ExogGqe?authentication_hash=LDkmdOJKYwPA) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/yLdvpNg?editors=0100) - 조건, 힌트 - ` ` 사용불가 - width 사용가능 - 메뉴텍스트를 엘리먼트로 감싸야 합니다. - 각 아이템의 너비가 균일해야 합니다. - a 태그로 링크텍스트를 만들어야 합니다. - 메뉴를 감싼 a 엘리먼트의 너비가 최대화 되어야 합니다. - [영상 - 25 03 19, slog 14321, HTML, CSS 강좌, 37강, 문제 : bmx 사이트 상단바를 구현해주세요, a 엘리먼트의 너비 최대화](https://youtu.be/2OVFhci3U8A) # 38강, 문제 : 메뉴 구조를 emmet 으로 생성 - [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+{|} - [영상 - 25 03 20, slog 14321, HTML, CSS 강좌, 39강, 문제 : 메뉴 구조를 emmet 으로 생성](https://youtu.be/x7pqeE1wgZw) # 39강, 개념 : 이미지 태그 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/qBpagWg) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/oNpzmvO?authentication_hash=vPMKKNpoOQyM) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/oNpzmvO) - [영상 - 25 03 20, slog 14321, HTML, CSS 강좌, 39강, 개념 : 이미지 태그](https://youtu.be/IRu9gjYOaEs) # 40강, picsum.photos 로 쉽게 테스트용 이미지 사용하기 - [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) - [영상 - 25 03 20, slog 14321, HTML, CSS 강좌, 40강, picsum.photos 로 쉽게 테스트용 이미지 사용하기](https://youtu.be/C1FULmC5Svo) # 41강, img 엘리먼트의 object-fit 스타일 속성 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/RNwMepG) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/dPymgvY) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/dPymgvY) - [영상 - 25 03 20, slog 14321, HTML, CSS 강좌, 41강, img 엘리먼트의 object-fit 스타일 속성](https://youtu.be/_-v1MBy_nRs) ### 이미지 특징 ``` 1. 이미지는 고유의 비율이 존재한다. 2. 이미지 비율을 무시한채로 너비나 높이를 주게 되면 이미지가 깨진다. 3. 이미지 비율을 유지하는 방법에는 object-fit 속성이 있다. - object-fit : cover; - 이미지의 비율을 유지하지만 좌우, 위아래 짤림이 발생할 수 있다. - object-fit : contain; - 이미지의 비율은 유지하지만 좌우, 위 아래 여백이 발생할 수 있다. ``` # 42강, aspect-ratio 개념 - [CODEPEN - aspect-ratio](https://codepen.io/sangwon7242/pen/RNwMepG?editors=1100) - [영상 - 25 03 20, slog 14321, HTML, CSS 강좌, 42강, aspect-ratio를 이용하면 비율을 유지할 수 있다.](https://youtu.be/5Ao_zWVuqdo) # 43강, 문제 : 이미지를 3x2 형태로 배열, ` `와 br 사용 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/XWVjOmP) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/MWrjLaV?authentication_hash=NjkYzpXjPaBM) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/YzMZwdX?editors=1000) - [영상 - 25 03 20, slog 14321, HTML, CSS 강좌, 43강, 문제 : 이미지를 3x2 형태로 배열, br 사용 금지](https://youtu.be/nTuK0B3z3Ss) # 44강, 문제 : 이미지를 3x2 형태로 배열, br 사용 금지 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/OJzRdMR) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/bGawzEq?authentication_hash=GnrnbqYjaoGr) - [영상 - 25 03 20, slog 14321, HTML, CSS 강좌, 44강, 문제 : 이미지를 3x2 형태로 배열, br 사용 금지](https://youtu.be/Ll5vy5Lqazc) # 45강, 문제 : 이미지를 3x2 형태로 배열, ` `, br 사용 금지 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/rNpMPxr) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/zYpKerm?authentication_hash=VGAWNovKbywr) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/qBGOaBg?editors=1100) - [영상 - 25 03 20, slog 14321, HTML, CSS 강좌, 45강, 문제 : 이미지를 3x2 형태로 배열, ` `, br 사용 금지](https://youtu.be/ysGd7hybDXk) # 46강, 개념 : padding 과 margin - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/xxpqvjR) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/qBpreYr?authentication_hash=WPkLYbVKjWdM) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/qBpreYr) - [영상 - 25 03 20, slog 14321, HTML, CSS 강좌, 46강, 개념 : padding 과 margin](https://youtu.be/woC3n0w_sRQ) ### padding, margin 개념 ``` padding : 박스 기준 안쪽 여백 padding, padding-left, padding-right, padding-top, padding-bottom padding: top right bottom left; padding: Y축 X축; --> Y : 위아래, X : 좌우 padding: top X축 bottom; padding-block : 100px; --> padding: 100px 0; - padding-top: 100px; padding-bottom: 100px; - padding: 100px 0 100px 0; padding-inline : 100px; --> padding: 0 100px; - padding-left: 100px; padding-right: 100px; - padding: 0 100px 0 100px; ----- margin : 박스를 기준으로 바깥쪽 여백 margin, margin-top, margin-left, margint-right, margin-bottom margin: top right bottom left; margin: Y축 X축; --> Y : 위아래, X : 좌우 margin: top X축 bottom; margin-block : 100px; --> margin: 100px 0; - margin-top: 100px; margin-bottom: 100px; - margin: 100px 0 100px 0; margin-inline : 100px; --> margin: 0 100px; - margin-left: 100px; margin-right: 100px; - margin: 0 100px 0 100px; ``` # 47강, 문제 : 이미지를 3x2 형태로 배열, padding을 사용 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/gOomVzK) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/OJzpKZo?authentication_hash=PNrvYyOqJZQM) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/qBwrZRd) - [영상 - 25 03 20, slog 14321, HTML, CSS 강좌, 47강, 문제 : 이미지를 3x2 형태로 배열, padding을 사용](https://youtu.be/LOU9xtJ8DGM) # 48강, 문제 : 이미지를 3x2 형태로 배열, margin을 사용 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/KKZWORj) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/MWrpNXW?authentication_hash=mWkoNYXnDDyA) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/GRLENdj?editors=1100) - [영상 - 25 03 20, slog 14321, HTML, CSS 강좌, 48강, 문제 : 이미지를 3x2 형태로 배열, margin을 사용](https://youtu.be/EGk-Fp0SwUo) # 49강, 개념 : nth-child, nth-last-child, first-child, last-child - [CODEPEN - nth-child, nth-last-child, first-child, last-child ](https://codepen.io/sangwon7242/pen/dPyKZwR?editors=0100) - [CODEPEN 설명2](https://codepen.io/sangwon7242/pen/YPzvEBE?editors=1100) - [영상 - 25 03 20, slog 14321, HTML, CSS 강좌, 49강, 개념 : nth-child, first-child](https://youtu.be/uRdBe1KmTnc) - [영상 - 25 03 24, slog 14321, HTML, CSS 강좌, 49강, 개념 : nth-child, nth-last-child, first-child, last-child](https://youtu.be/00ILqgldPUE) ``` :nth-child(1), :frirst-child - 특정 엘리먼트를 부모로 삼는 자식들 중에 첫번 째 자식을 의미한다. :nth-last-child(1), :last-child - 특정 엘리먼트를 부모로 삼는 자식들 중에 마지막 자식을 의미한다. n -> 1씩 증가된다. :nth-child(n) : n값은 1씩 증가된다. :nth-child(2n) : 짝수번째 자식을 선택 :nth-child(even) : 짝수번째 자식을 선택 :nth-child(odd) : 홀수번째 자식을 선택 ``` # 50강, 문제 : 무지개를 만들어주세요. - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/RwxpXJM) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/mdpWNKL?authentication_hash=PBMNWbqZvyqr) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/YzMQpmG?editors=1100) - [영상 - 25 03 24, slog 14321, HTML, CSS 강좌, 50강, 문제 : 무지개를 만들어주세요.](https://youtu.be/JLFUDXqhn7c) # 51강, 문제 : 무지개를 만들어주세요, hover 시 색상 좌우반전 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/rNPVYaM) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/XWVMvBd?authentication_hash=XBrGRNJbvxaM) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/ExJXZPx?editors=0100) - [영상 - 25 03 24, slog 14321, HTML, CSS 강좌, 51강, 문제 : 무지개를 만들어주세요, hover 시 색상 좌우반전](https://youtu.be/WFF6tWvWCB8) # 52강, 개념 : nth-of-type, nth-of-last-type, first-of-type, last-of-type - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/bGXovzx?editors=0100c) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/bGXovzx) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/bGXovzx?editors=0100) - [영상 - 25 03 24, slog 14321, HTML, CSS 강좌, 52강, 개념 : nth-of-type, nth-of-last-type, first-of-type, last-of-type](https://youtu.be/Kgg30PO_mCA) ``` :nth-child() - 모든 자식 요소를 대상으로 함 - 모든 자식을 기반으로 순서를 계산 - 태그 생략이 가능 :nth-of-type - 특정 타입을 대상으로 함 - 타입별로 순서를 계산 - 태그 생략 불가능 :nth-of-type(1) -> :first-of-type :nth-last-of-type(1) -> :last-of-type ``` # 53강, 개념 : block 요소의 가로정렬 - [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) - [영상 - 25 03 24, slog 14321, HTML, CSS 강좌, 53강, 개념 : block 요소의 가로정렬](https://youtu.be/7DZXcK-D1es) ``` /* block요소의 가운데 정렬 */ // v1 margin-left: auto; margin-right: auto; // v2 margin: 0 auto; // v3 margin-inline: auto; ``` # 54강, 모든 보이는 엘리먼트의 조상은 body이고, 그의 부모는 html 이다 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/BaJWXOG) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/WNdpVgW?authentication_hash=xJMjOVPjLJVr) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/WNdpVgW) - [영상 - 25 03 24, slog 14321, HTML, CSS 강좌, 54강, 모든 보이는 엘리먼트의 조상은 body이고, 그의 부모는 html 이다](https://youtu.be/bAJjDaIY7Dk) # 55강, 개념 : class, id - [CODEPEN - 개념설명](https://codepen.io/sangwon7242/pen/xxvXjLd?editors=1100) - [영상 - 25 03 24, slog 14321, HTML, CSS 강좌, 55강, 개념 : class, id](https://youtu.be/I0DAGiW9qAU) ### class, id 특징 ``` 1. 모든 엘리먼트는 class와 id 속성을 가진다. 2. class와 id는 특정 엘리먼틀르 식별하기 위한 수단이다. 3. class를 여러개 붙이는 게 가능하다. 4. html 상에 id는 중복될 수 없다. 5. id는 클래스 이름이 동일해도 상관없다. css 스타일 우선순위 id > class > 일반 css 스타일 ``` # 56강, css 스타일의 우선순위 - [CODEPEN - 개념설명](https://codepen.io/sangwon7242/pen/ZYERvJp) - [영상 - 25 03 24, slog 14321, HTML, CSS 강좌, 56강, css 스타일의 우선순위](https://youtu.be/4r8AvU5tPAo) ### 스타일 우선 순위 ``` !important > inline-style > id > class > 일반 css ``` # 57강, 문제 : 선택자 연습 튜토리얼, CSS DINER, 01~10 - [선택자 연습 튜토리얼 - CSS DINER, 01~10](https://flukeout.github.io/) - [영상 - 25 03 24, slog 14321, HTML, CSS 강좌, 57강, 문제 : 선택자 연습 튜토리얼, CSS DINER, 01~10](https://youtu.be/NX2LUIBdGI4) # 58강, 문제 : 선택자 연습 튜토리얼, CSS DINER, 11~19 - [선택자 연습 튜토리얼 - CSS DINER, 11~19](https://flukeout.github.io/) - [영상 - 25 03 25, slog 14321, HTML, CSS 강좌, 58강, 문제 : 선택자 연습 튜토리얼, CSS DINER, 11~19](https://youtu.be/mNdU7BjDQ14) # 59강, 개념 : border-radius - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/KKZqedj) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/ZEvyRQY) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/ZEvyRQY) - [영상 - 25 03 25, slog 14321, HTML, CSS 강좌, 59강, 개념 : border-radius](https://youtu.be/1TpV8OLMXns) # 60강, 문제 : 슬라이더의 페이지 버튼박스를 구현 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/QWagxyP) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/jOYwKWo) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/VwNzWbj?editors=0100) - [영상 - 25 03 25, slog 14321, HTML, CSS 강좌, 60강, 문제 : 슬라이더의 페이지 버튼박스를 구현](https://youtu.be/sorX1yvjQSc) # 61강, cursor 개념, mdn 소개 - [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) - [영상 - 25 03 25, slog 14321, HTML, CSS 강좌, 61강, cursor 개념, mdn 소개](https://youtu.be/2b5Vt-Tii_A) # 62강, 개념 : css 기본값과, 상속여부 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/BaJZVKG) - [영상 - 25 03 25, slog 14321, HTML, CSS 강좌, 62강, 모든 css는 기본값이 존재하고, 몇몇 css에는 상속되는 특징이 있다.](https://youtu.be/Qeb5U2iaDHs) # 63강, 정답 : css 기본값과 inherit 되는 css 속성 찾기 - [영상 - 25 03 25, slog 14321, HTML, CSS 강좌, 63강, css 기본값과 inherit 되는 css 속성 찾기](https://youtu.be/mb3XZVoY6LA) ``` 모든 css는 기본값이 존재한다. 몇몇 css에는 상속되는 특징이 있다. color: 기본값(canvastext), 상속여부(yes) font-size : 기본값(medium), 상속여부(yes) background-color: 기본값(transparent), 상속여부(no) border-radius : 기본값(0), 상속여부(no) cursor: 기본값(auto), 상속여부(yes) width: 기본값(auto), 상속여부(no) height: 기본값(auto), 상속여부(no) padding: 기본값(0), 상속여부(no) margin: 기본값(0), 상속여부(no) display: 엘리먼트의 따라 다르다., 상속여부(no) font-weight: 기본값(normal), 상속여부(yes) border: 상속여부(no) - border-width: 기본값(midium) - border-style: none - border-color: currentcolor text-decoration : 상속여부(no) - text-decoration-color: currentcolor - text-decoration-style: solid - text-decoration-line: none letter-spacing: 기본값(normal), 상속여부(yes) object-fit: 기본값(fill), 상속여부(no) ``` # 64강, a 엘리먼트 노말라이즈 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/MWroXeY) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/ZEvyROG) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/ZEvyROG) - [영상 - 25 03 25, slog 14321, HTML, CSS 강좌, 64강, a 엘리먼트 노말라이즈](https://youtu.be/yNQ_C3HsRzU) # 65강, body의 노말라이즈 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/oNpwyYG) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/VwyWdmy) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/VwyWdmy) - [영상 - 25 03 25, slog 14321, HTML, CSS 강좌, 65강, body의 노말라이즈](https://youtu.be/lwJ_tSzp7aU) # 66강, 개념 : ul, li - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/bGaopZZ) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/QWaqNoX) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/QWaqNoX) - [영상 - 25 03 25, slog 14321, HTML, CSS 강좌, 66강, 개념 : ul, li](https://youtu.be/M-cFkbQbKWI) ``` 메뉴 만들 수 있는 전용 엘리먼트 ul(unordered list) : 순서 없는 목차 li(list item) : 리스트 아이템 - ul의 자식으로는 li만 올 수 있다. - li의 부모로는 ul만 올 수 있다. - ul, li는 display가 block이다. ``` # 67강, 개념 : ol, li - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/JjMrXVJ) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/qBpPZwX) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/qBpPZwX) - [영상 - 25 03 26, slog 14321, HTML, CSS 강좌, 67강, 개념 : ol, li](https://youtu.be/oRyIGeqZ7Ww) ``` ol : ordered list -> 순서가 있는 목차 ol, ul, li는 display 속성이 block 이다. ol, ul의 자식으로는 li밖에 올 수 없다. li 부모로는 ol, ul 밖에 올 수 없다. ``` # 68강, h1 ~ h6, 제목태그 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/KKZXzLK) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/yLpzOWN) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/yLpzOWN) - [영상 - 25 03 26, slog 14321, HTML, CSS 강좌, 68강, h1 ~ h6, 제목태그](https://youtu.be/nnL0Z_JbnRA) ``` h1 : 제일 큰 제목인 경우에 사용 h2 ~ h6 : h1의 하위 제목인 경우 사용 - 단, 하위 제목이 동격인 경우에 h2면 h2로 통일, h3면 h3로 통일 시켜줘야 한다. - 동격임에도 불구하고 하나의 제목만 글씨 크기를 작게 하기 위해 h3를 주는 건 잘 못 된 방법이다. ``` # 69강, 문제 : 뉴진스의 노래소개와 멤버구성을 ul, ol, li , h1, h2 태그로만 표현 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/YzYrqba) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/XWQegWP) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/XWQegWP?editors=1000) - [영상 - 25 03 26, slog 14321, HTML, CSS 강좌, 69강, 문제 : 뉴진스의 노래소개와 멤버구성을 ul, ol, li , h1, h2 태그로만 표현](https://youtu.be/Vc3CgVdIpWc) # 70강, ul, li 노말라이즈 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/WNdZwBq) - [CODEPEN - 정답예시](https://codepen.io/sangwon7242/pen/KKZXzjK) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/BaryXwd) - [영상 - 25 03 26, slog 14321, HTML, CSS 강좌, 70강, ul, li 노말라이즈](https://youtu.be/dph-FpqG21M) # 71강, h1 노말라이즈 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/rNpGeEL) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/XWVedLj) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/XWVedLj) - [영상 - 25 03 26, slog 14321, HTML, CSS 강좌, 71강, h1 ~ h6 노말라이즈](https://youtu.be/nJwdjfnOTOM) # 72강, 상황에 맞는 태그를 알면 그걸 사용하고, 모르면 div 사용 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/BaJwKgM) - [영상 - 25 03 26, slog 14321, HTML, CSS 강좌, 72강, 상황에 맞는 태그를 알면 그걸 사용하고, 모르면 div 사용](https://youtu.be/DPpLN-08NX8) # 73강, 문제 : 중앙 둥근모서리 메뉴 구현 튜토리얼 - [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) - [영상 - 25 03 26, slog 14321, HTML, CSS 강좌, 73강, 문제 : 중앙 둥근모서리 메뉴 구현 튜토리얼](https://youtu.be/LZroMpRkGx0) # 74강, 문제 : 3가지 메뉴를 구현해주세요 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/jOYGxGG) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/bGaoMoq) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/bGJYRMr?editors=1100) - [영상 - 25 03 27, slog 14321, HTML, CSS 강좌, 74강, 문제 : 3가지 메뉴를 구현해주세요](https://youtu.be/-By4e_xwEAg) # 연습문제 : 선택자 연습 튜토리얼 - CSS DINER, 20~26 - [선택자 연습 튜토리얼 - CSS DINER, 20~26](https://flukeout.github.io/) - [영상 - HTML, CSS 강좌, 연습문제 : 선택자 연습 튜토리얼 - CSS DINER, 20~26](https://youtu.be/yaF60l8FyHY) # 75강, 속성 선택자 개념 학습 - [CODEPEN](https://codepen.io/sangwon7242/pen/raNZMgW?editors=1100) - [영상 - 25 03 27, slog 14321, HTML, CSS 강좌, 75강, 속성 선택자 개념 학습](https://youtu.be/B6PtimlcTI4) ``` 자식 선택자 후손 선택자 인접 동생 선택자 가상 클래스 선택자 :nth-child(1) -> :first-child :nth-last-child(1) -> :last-child 속성 선택자 속성의 종류 class, id, href, target, src(source), alt(alternative) [class] : class 라는 속성을 가진 엘리먼트 선택 [class^="box-1"] : start with -> "box-1" 로 시작하는 클래스를 선택 [class*="box-1"] : contain -> "box-1"이라는 클래스 이름을 포함하는 엘리먼트 선택 [class$="box-1"] : end with -> "box-1" 로 끝나는 클래스를 선택 ``` # 76강, 문제 : a에 마우스를 올리면 인접동생인 div가 나타남 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/ZEgrBLQ) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/xxppVjx) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/KKLMqjK?editors=0110) - [영상 - 25 03 27, slog 14321, HTML, CSS 강좌, 76강, display 개념 복습, a에 마우스를 올리면 인접동생인 div가 나타남](https://youtu.be/-HDXdk1Gkrs) ``` display block : 너비 최대, 높이 최소, 세로 배열 - div, article, nav, section, ul, ol, li, h1 ~ h6 inline, inline-block : 너비 최소, 높이 최소, 가로 배열 - inline : a, span, 일반 글자 - width, height, padding, margin 적용이 안됨 - inline-block : img none : 요소를 숨김 flex grid ``` # 77강, 개념 : inline-grid 클래스 - [CODEPEN](https://codepen.io/sangwon7242/pen/bNGxBdb) - [영상 - 25 03 27, slog 14321, HTML, CSS 강좌, 77강, inline-block 에 애매한 여백을 제거하는 방법과 inline-grid 라이브러리 클래스 사용법](https://youtu.be/IW64DSj37pY) ``` inline-block : 글자화 글자요소에는 띄어쓰기나 엔터로 인해서 여백이 발생한다. 즉, inline-block은 본질이 글자이기 때문에 inline-block요소를 사용할 때 애매한 여백이 발생할 수 밖에 없다. 그 문제를 해결하기 위한 방법은 부모 요소한테 font-size를 0을 주고, 자식 요소한테 vertical-aling : top, font-size: 1rem을 주면 된다. 핵심은 inline-block은 띄어쓰기나 엔터로 인해 애매한 여백이 존재한다. ``` # 78강, 화면의 높이대비 비율로 엘리먼트 높이 조절, 중첩퍼센트 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/ExooKRY) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/xxppVzb) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/xxppVzb) - [영상 - 25 03 27, slog 14321, HTML, CSS 강좌, 78강, 화면의 높이대비 비율로 엘리먼트 높이 조절, 중첩퍼센트](https://youtu.be/Z-9_MyvaXV4) # 79강, 화면의 높이대비 비율로 엘리먼트 높이 조절, vh, 전체 화면 높이의 반 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/NPWLbbq?editors=1100) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/VwyyadK) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/VwyyadK?editors=1100) - [영상 - 25 03 27, slog 14321, HTML, CSS 강좌, 79강, 화면의 높이대비 비율로 엘리먼트 높이 조절, vh, 전체 화면 높이의 반](https://youtu.be/LRbNVZ1FqPQ) # 80강, 개념 : box-sizing: border-box - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/YzYeaWN) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/RwxQMRV) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/wvVmBKd?editors=1100) - [영상 - 25 03 27, slog 14321, HTML, CSS 강좌, 80강, 개념 : box-sizing: border-box](https://youtu.be/KG6gD2oukBI) # 81강, 컨테이너로 레이아웃을 중앙에 모으고 너비 고정시키기 - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/emYLBEE) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/emYLBEE?editors=1100) - [영상 - 25 03 27, slog 14321, HTML, CSS 강좌, 81강, 개념 : box-sizing: border-box](https://youtu.be/tg0rMUlNH2Y) # 82강, bmx 사이트 구현 - [CODEPEN - bmx 사이트 상단부분 구현](https://codepen.io/sangwon7242/pen/yyLxVpb) - [CODEPEN - bmx 사이트 섹션부분 구현, section-main-banner, section-images-wrap 구현](https://codepen.io/sangwon7242/pen/raNqXEV?editors=1100) - [영상 - 25 03 27, slog 14321, HTML, CSS 강좌, 82강, bmx 사이트 구현 상단 부분 구현](https://youtu.be/fwf7E2PAIsQ) - [영상 - 25 03 31, slog 14321, HTML, CSS 강좌, 82강, bmx 사이트 섹션 부분 구현](https://youtu.be/GVVqQb_DN8I) # 83강, 개념 : position - [CODEPEN - absolute는 유령화이다.](https://codepen.io/sangwon7242/pen/ZYEmzJO?editors=1100) - [CODEPEN - absolute, relative 둘다 좌표값으로 이동이 가능, 다만 공간을 유지하냐 차이가 존재](https://codepen.io/sangwon7242/pen/YPzRKxv) - [CODEPEN - 유령화가 된 엘리먼트는 relative가 부여된 엘리먼트 중 가장 인접한 대상을 유령의 집으로 삼는다.](https://codepen.io/sangwon7242/pen/gbOQYxZ) - [CODEPEN - fixed는 화면의 고정되고 뷰포트를 기준으로 % 너비, 높이, 좌표값을 갖는다.](https://codepen.io/sangwon7242/pen/yyLQBvO) - [영상 - 25 03 31, slog 14321, HTML, CSS 강좌, 83강, position:absolute는 유령화이고, 별도의 레이어로 취급된다.](https://youtu.be/M2mxx7D2WYk) - [영상 - 25 03 31, slog 14321, HTML, CSS 강좌, 83강, absolute, relative 둘다 좌표값으로 이동이 가능, 다만 공간을 유지하냐 차이가 존재](https://youtu.be/pykkUMLLzhk) - [영상 - 25 03 31, slog 14321, HTML, CSS 강좌, 83강, 유령화가 된 엘리먼트는 relative가 부여된 엘리먼트 중 가장 인접한 대상을 유령의 집으로 삼는다.](https://youtu.be/qsAnLwuKQQQ) - [영상 - 25 03 31, slog 14321, HTML, CSS 강좌, 83강, position:fixed는 화면의 고정되고 뷰포트를 기준으로 % 너비, 높이, 좌표값을 갖는다.](https://youtu.be/s3-7AdnVo6Y) ### `position: absolute, relative 특징과 차이점 | 구분 | position: relative | position: absolute | |------|-------------------|-------------------| | 기준점 | 요소 자신의 원래 위치 기준 | 가장 가까운 position이 static이 아닌 부모 요소 기준 (없다면 body 기준) | | 문서 흐름 | 문서의 일반 흐름 유지 | 문서의 일반 흐름에서 제외됨 | | 공간 점유 | 원래 위치의 공간 유지 | 원래 위치의 공간을 차지하지 않음 | | 다른 요소 영향 | 다른 요소의 레이아웃에 영향을 주지 않음 | 다른 요소들이 absolute 요소의 원래 공간을 채움 | | 위치 설정 | top, right, bottom, left 속성으로 원래 위치에서 이동 | top, right, bottom, left 속성으로 부모(기준점)으로부터 이동 | | 사용 사례 | - 약간의 위치 조정이 필요할 때
- 다른 요소들의 배치에 영향을 주지 않고 싶을 때 | - 팝업, 모달
- 툴팁
- 드롭다운 메뉴
- 버튼 위의 뱃지 | ### `position: absolute, fixed` 개념 정리 | 번호 | 설명 | | ---- | --------------------------------------------------------------------------------------------------------- | | 1 | `position: absolute, fixed` 된 엘리먼트는 별도의 레이어가 된다. | | 2 | `position: absolute, fixed` 된 엘리먼트는 유령화 된다. | | 3 | 유령화된 엘리먼트는 좌표값(`top`, `left`, `right`, `bottom`)을 통해 원하는 위치로 이동시킬 수 있다. | | 4 | `position: absolute, fixed` 된 엘리먼트의 너비는 무조건 최소화된다. | | 5 | 유령화된 엘리먼트는 다른 엘리먼트와 겹칠 수 있다. | | 6 | `position: absolute, fixed` 된 각각의 엘리먼트는 HTML에서 나중에 나온 엘리먼트가 가장 위에 배치된다. | | 7 | `position: absolute, fixed` 된 엘리먼트는 부모 요소를 벗어난다. | | 7-1 | 부모 요소를 벗어난 경우, `%`로 설정한 높이와 너비는 화면 높이와 너비를 기준으로 한다. ### `fixed, abosolute` 차이 | 속성 | position: absolute | position: fixed | |--------------------|----------------------------------------------------|-------------------------------------------------| | **기준 요소** | 가장 가까운 `relative`, `absolute`, `fixed` 부모 요소 | 뷰포트(사용자 화면) | | **스크롤 시 위치** | 스크롤 시 함께 이동 | 뷰포트에 고정, 스크롤에도 위치 유지 | | **공간 차지 여부** | 원래 위치에서 분리되어 공간 차지하지 않음 | 원래 위치에서 분리되어 공간 차지하지 않음 | | **주요 용도** | 부모 요소 기준으로 요소 위치 설정 | 고정된 헤더, 푸터, 사이드바 등 화면 고정 요소 | # 84강, absolute, width, height, top, left 로 화면을 2 * 2 등분 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/LYerKpM) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/oNpyrjm) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/YzoJNzd?editors=1100) - [영상 - 25 03 31, slog 14321, HTML, CSS 강좌, 84강, absolute, width, height, top, left 로 화면을 2 * 2 등분](https://youtu.be/AxfPJheqSII) # 85강, absolute, width, height, top, left 로 화면을 1 * 3 등분 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/OJzEeMy) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/BaJVgjj) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/xxBGZXR?editors=0100) - [영상 - 25 03 31, slog 14321, HTML, CSS 강좌, 85강, absolute, width, height, top, left 로 화면을 1 * 3 등분](https://youtu.be/SouDcfyMgUE) # 86강, absolute, width, height, top, left 로 화면을 3 * 3 등분 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/eYyKwJy) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/rNpKExJ) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/xxBGZXR?editors=0100) - [영상 - 25 03 31, slog 14321, HTML, CSS 강좌, 86강, absolute, width, height, top, left 로 화면을 3 * 3 등분](https://youtu.be/Io9jROipjPI) # 87강, top, left, right, bottom의 개념과 기본값 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/gOojZLm) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/PoEBXbm) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/PoEBXbm) - [영상 - 25 04 01, slog 14321, HTML, CSS 강좌, 87강, top, left, right, bottom의 개념과 기본값](https://youtu.be/05V2PZbCxy0) ### `position` 좌표값 기본값 개념 정리 | 번호 | 설명 | | ---- | --------------------------------------------------------------------------------------------------------- | | 1 | `position: absolute` 된 엘리먼트는 별도의 좌표값을 부여하지 않는 이상 원래 위치에서 나온다. | | 2 | 좌표값(`top`, `left`, `right`, `bottom`)의 기본값은 `auto`이다. | | 2-1 | 엘리먼트의 `width` 값이 존재하는 상태에서 `left`는 정상 작동되지만, `right`는 작동하지 않는다. | | 3 | `right`를 정상 작동시키려면 `left`를 `auto`로 둬야 한다. | | 4 | 엘리먼트의 `height` 값이 존재하는 상태에서 `top`은 정상 작동되지만, `bottom`은 작동하지 않는다. | | 4-1 | `bottom`을 정상 작동시키려면 `top`을 `auto`로 둬야 한다. # 88강, top, left, right, bottom으로 너비, 높이 조절 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/abEjPZg) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/xxpJmOv) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/xxpJmOv) - [영상 - 25 04 01, slog 14321, HTML, CSS 강좌, 88강, top, left, right, bottom으로 너비, 높이 조절](https://youtu.be/mSUk3zryq-U) # 89강, absolute, top, left, right, bottom 으로 화면을 2 * 2 등분 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/KKZBbNe) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/yLpqGVx) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/yLpqGVx) - [영상 - 25 04 01, slog 14321, HTML, CSS 강좌, 89강, absolute, top, left, right, bottom 으로 화면을 2 * 2 등분](https://youtu.be/NwteaVNJ4b8) # 90강, position: absoulte를 이용한 수직수평중앙정렬 - [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) - [영상 - 25 04 01, slog 14321, HTML, CSS 강좌, 90강, position: absoulte를 이용한 수직수평중앙정렬](https://youtu.be/gDV_h-CO4pA) # 91강, 멀티메뉴제작을 위한 선택자 튜토리얼 - [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) - [영상 - 25 04 01, slog 14321, HTML, CSS 강좌, 91강, 멀티메뉴제작을 위한 선택자 튜토리얼](https://youtu.be/X_hQ_jrQXMY) # 92강, 문제 : 중앙 둥근 메뉴, 2차메뉴까지 구현 튜토리얼 - [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) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/yyLGvpB?editors=0100) - [영상 - 25 04 02, slog 14321, HTML, CSS 강좌, 92강, 문제 : 중앙 둥근 메뉴, 2차메뉴까지 구현 튜토리얼](https://youtu.be/mHPsIZ5uwDk) # 93강, white-space:nowrap, 줄바꿈 금지 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/bGamrrW) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/NWXOvvg) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/NWXOvvg) - [영상 - 25 04 02, slog 14321, HTML, CSS 강좌, 93강, white-space:nowrap, 줄바꿈 금지](https://youtu.be/kH1YZ-yrbCM) # 94강, 넘치는 부분을 처리하는 overflow 속성 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/abERmeb) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/xxpyEvb) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/xxpyEvb) - [영상 - 25 04 02, slog 14321, HTML, CSS 강좌, 94강, 넘치는 부분을 처리하는 overflow 속성](https://youtu.be/Z2R3saA72Oc) # 95강, text-overflow:ellipsis, 넘쳐서 숨겨지는 텍스트 ... 처리 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/MWrPjMZ) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/yLpRadQ) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/yLpRadQ) - [영상 - 25 04 02, slog 14321, HTML, CSS 강좌, 95강, text-overflow:ellipsis, 넘쳐서 숨겨지는 텍스트 ... 처리](https://youtu.be/tX-3uKMK5mw) # 96강, 중앙 둥근 메뉴, 3차메뉴까지 구현 튜토리얼 - [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) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/KwKbQLw?editors=1100) - [영상 - 25 04 02, slog 14321, HTML, CSS 강좌, 96강, 중앙 둥근 메뉴, 3차메뉴까지 구현 튜토리얼](https://youtu.be/2eVn6JSRgrs) # 97강, 선택자 연습 튜토리얼 - CSS DINER, 27~32 - [선택자 연습 튜토리얼 - CSS DINER, 27~32](https://flukeout.github.io/) ### 영상없음x # 98강, flex 관련 공부자료 소개 - [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의 전반적인 내용을 이해한다. - [영상 - 25 04 02, slog 14321, HTML, CSS 강좌, 98강, flex 관련 공부자료 소개](https://youtu.be/yNUZNRZGEpw) # 99강, 개념 : flex playground 설명 - [flex playground](https://cdpn.io/pen/debug/adLPwv) - [flex 개념 정리](https://cdpn.io/pen/debug/YPzBNjd) - [CODEPEN - flex 연습](https://codepen.io/sangwon7242/pen/GRdLEJr) - [영상 - 25 04 03, slog 14321, HTML, CSS 강좌, 99강, 개념 : flex playground 설명 1부, flex개념과 flex container한테 주는 속성 정리](https://youtu.be/fP3yDWZ-HMI) - [영상 - 25 04 03, slog 14321, HTML, CSS 강좌, 99강, 개념 : flex playground 설명 2부, flex-item한테 주는 속성 정리](https://youtu.be/0tpoLwZx51I) # Flex 개념 1부 - Container한테 주는 속성 정리 | 속성 | 설명 | 기본값 | 비고 | |------|------|--------|------| | `display` | 엘리먼트에 `display: flex;` 를 부여하면 해당 엘리먼트는 Flex Container가 됨 | `block` (일반적으로) | Flex Container로 만들어주는 속성 | | `flex-wrap` | Flex item 들의 줄 바꿈 여부 설정
- `nowrap`: 공간 내에서 최대한 압축되어 한 줄에 표현
- `wrap`: 공간이 부족하면 다음 줄로 내려감 | `nowrap` | `wrap` 설정 시 아이템이 줄 바꿈되어 내려감 | | `align-items` | 한 줄을 수직 또는 수평으로 정렬하는 속성
- 기본값은 `stretch`로, 아이템들이 주어진 공간 내에서 최대한 늘어남 | `stretch` | 수직 정렬 (row 기준) 또는 수평 정렬 (column 기준) | | `justify-content` | 한 줄을 수평 또는 수직으로 정렬하는 속성
- 기본값은 `flex-start` (생략 가능) | `flex-start` | 수평 정렬 (row 기준) 또는 수직 정렬 (column 기준) | | `flex-direction` | Flex item들의 배열 방향을 설정
- `row`: 가로 배열 (기본)
- `column`: 세로 배열 | `row` | 배열 방향에 따라 align-items와 justify-content의 수직/수평 역할이 달라짐 | ## flex-direction에 따른 속성 변화 ### `flex-direction: row` (기본값) | 속성 | 특징 | |------|------| | 자식 요소 크기 | 자식 요소 너비 최소, 부모 높이 상속 | | align-items | 한 줄을 수직 정렬 | | justify-content | 한 줄을 수평 정렬 | ### `flex-direction: column` | 속성 | 특징 | |------|------| | 자식 요소 크기 | 자식 요소 높이 최소, 부모 너비 상속 | | align-items | 한 줄을 수평 정렬 | | justify-content | 한 줄을 수직 정렬 | ## 아이템 중앙 정렬 팁 ```css .container { display: flex; align-items: center; justify-content: center; } ``` # Flex 개념 2부 - Flex Item한테 주는 속성 정리 | 속성 | 설명 | 기본값 | 비고 | |------|------|--------|------| | `align-self` | 개별 flex item 하나를 수직 또는 수평 정렬하는 속성 | `auto` | 개별 아이템 정렬 | | `flex-grow` | 주어진 공간을 채우기 위해 아이템이 성장할 수 있는 정도 설정
- 여유 공간이 있을 때만 작동 | `0` | 주어진 공간 내 성장 | | `flex-shrink` | 공간이 부족할 때 아이템이 압축되는 정도 설정
- 0이면 압축되지 않고 원래 크기 유지 | `1` | 공간 부족 시 작동 | | `flex-basis` | 아이템의 기본 크기(너비 또는 높이) 설정 | `auto` | 너비 or 높이처럼 작동 | | `flex` | flex-grow, flex-shrink, flex-basis를 한번에 설정 가능
`flex: flex-grow [flex-shrink flex-basis];` | `0 1 auto` | 축약형 속성 | | `order` | flex item의 순서를 변경할 때 사용 | `0` (첫 번째) | 아이템 순서 변경 | ## flex-direction에 따른 아이템 속성 변화 ### `flex-direction: row` (기본값) | 속성 | 특징 | |------|------| | align-self | 하나의 아이템을 수직 정렬 | | flex-grow | 너비처럼 작동 | | flex-shrink | 0을 주면 너비 유지 (압축되지 않음) | | flex-basis | 너비로 작동 | ### `flex-direction: column` | 속성 | 특징 | |------|------| | align-self | 하나의 아이템을 수평 정렬 | | flex-grow | 높이처럼 작동 | | flex-shrink | 0을 주면 높이 유지 (압축되지 않음) | | flex-basis | 높이로 작동 | ## flex 축약형 사용 예시 ```css .item { flex: 1 0 200px; /* flex-grow: 1, flex-shrink: 0, flex-basis: 200px */ } ``` # 100강, flex를 이용해서 레이아웃을 만들어주세요. - [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) - 완료 - [영상 - 25 04 03, slog 14321, HTML, CSS 강좌, 100강, flex를 이용해서 성배 레이아웃을 만들어주세요.](https://youtu.be/OTSRIetlbY0) # 과제 # 101강, flex를 이용한 중앙 둥근 메뉴, 2차메뉴까지 구현 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/vYaJzdE?editors=1100) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/QWeVLPx)

2025년 HTML, CSS 기초반 2기