$$config title: (국)임베디드풀스택개발자과정 - HTML, CSS, JS(JQUERY) https://to2.kr/ebv keywords: - IT - HTML - CSS - JS $$ ![SBS](https://i.postimg.cc/CKdxgBx4/logo-1.png)
# 수업 - [주소 : https://to2.kr/ebv](https://slog.gg/p/11404) # 관련 링크 - [Codepen](https://codepen.io/) - [긴 주소를 줄여주는 사이트, to2.kr](https://to2.kr/) - [Programmers, JavaScript](https://school.programmers.co.kr/learn/courses/3/3-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%85%EB%AC%B8) - [학생 마니아로](https://sbsartdj.cafe24.com/) # 공부 링크 - [CSS 선택자 연습, CSS DINNER](https://flukeout.github.io/) - [FLEX 속성 연습, FLEX 개구리](https://flexboxfroggy.com/#ko) - [FLEX 속성 연습, FLEX 디펜스](http://www.flexboxdefense.com/) - [W3SCHOOLS, CSS 속성](https://www.w3schools.com/cssref/default.asp) - [한국의 여러 웹/앱 모아보기, GDWEB](https://www.gdweb.co.kr/main/) # 몸풀기 ? ## 코드펜 - [Codepen](https://codepen.io/) - 단축키 - `Ctrl + Shift + 7` : 화면 새로고침 - 원하는 부분 선택 후, `Shift + Tab` : 코드 정렬 ## 젠코딩(Emmet) - `>` : 부모 자식 엘리먼트 만들 때 사용 - `div>section` - `+` : 형제 엘리먼트 만들 때 사용 - `div+section` - `*n` : 같은 태그의 n개의 형제 엘리먼트를 만들 때 사용 - `div*3` - `태그명[속성명="속성값"]{내용}` - 예시 : `a[href="https://www.naver.com"][target="_blank"]{네이버로 이동}` ```html 네이버로 이동 ``` - 1차 메뉴 만들기 - `ul>li*3>a[href="#"]{메뉴}` - 2차 메뉴 만들기 - `ul>li*3>a[href="#"]{메뉴}+ul>li*3>a[href="#"]{메뉴}` ## 테스트 문제 - [문제 - HTML, CSS를 이용하여 1차/2차 메뉴 제작](https://codepen.io/vexxxx/pen/MWXLjqR) - [정답](https://codepen.io/vexxxx/full/MWXLjqR) # ? 챕터 1 : 글자 ## 개념 - [개념 - 글자](https://codepen.io/jangka44/pen/mjPYqy) - `font-weight` : 글자의 두께 조절 - `lighter`, `normal`, `bold`, `bolder` - 100 단위로 100 ~ 900 - `font-weight`의 기본 값은 `normal`이다. - `font-size` : 글자의 크기 조절 - `px`, `rem` - `%`와 `em`도 사용하지만 많이 사용하지 않는다. - `letter-spacing` : 자간 조절 - 음수값이면 좁아지고, 정수값이면 넓어진다. - `letter-spacing`의 기본 값은 0이다. - `color` : 글자의 색상 조절 - `black`, `#000000`, `#000`, `rgba(0, 0, 0, 1)` ## 문제 - [문제 - 다음 글자를 똑같은 스타일로 만들어주세요.](https://codepen.io/jangka44/pen/bGgMBPm) - [문제 - 정답예시](https://codepen.io/jangka44/debug/mjPYqy) - [문제 - 정답](https://codepen.io/jangka44/pen/mjPYqy) ### 오늘의 Tip - CSS 하나의 선택자 안에 같은 이름의 속성이 적용되어 있을 경우 나중에 온 것이 우선 적용된다. - Codepen에서 다른 사람의 게시물을 내 계정에 저장하는 방법 : `Ctrl + S`를 눌러준다. 그 후, 제목 아래 닉네임이 내 닉네임인지 체크하기! # ? 챕터 2 : 웹 폰트 ## 개념 - [개념 - 웹폰트](https://codepen.io/jangka44/pen/NWpKNxq) - [눈누](https://noonnu.cc/) - 무료 상업용 한글 폰트, 웹 폰트 사용 가능, 다운로드 가능 - [개념 - 영문 웹폰트, 구글폰트](https://codepen.io/jangka44/pen/poeoaeg) - [구글폰트](https://fonts.google.com/) - 무료 상업용 영문 폰트, 웹 폰트 사용 가능, 다운로드 가능 - 장바구니 형식, 많이 담으면 용량이 커서 좋지 않다. - 많이 사용하는 두께는 400, 700 - `link` 방식으로 가져온 건 `html`에 넣어야 하고, `@import` 방식(`style` 태그 제외)으로 가져온 건 `css`에 넣어야 한다. - [개념 - 영문 웹폰트와 한글 웹폰트 동시에 사용](https://codepen.io/jangka44/pen/ZEeErKp) # ? 챕터 3 : hover와 transition ## 개념 - [개념 - hover](https://codepen.io/jangka44/pen/KBzOKj) - `:hover` : 마우스를 올려두었을 때의 상태를 선택 - 예시) ```css div:hover { background-color:blue; } ``` - [개념 - transition](https://codepen.io/jangka44/pen/KKWPdyB) - `transition` : 변경이 되기 까지의 시간을 설정 - :hover이 아닌 효과를 받는 태그의 css에 작성을 해야 원래의 상태로 돌아올 때도 적용이된다. - 예시) ```css div { background-color:red; width:100px; height:100px; transition: width 1s, height 2s, background-color 3s; } ``` - 시간만 작성할 경우 모든 변화에 걸리는 시간이 통일된다. - 값을 두 개 줄 경우, 뒤 쪽의 값은 딜레이 값이 된다. ## 문제 - [문제 - hover 예제](https://codepen.io/jangka44/full/zYaeXQY) - [문제 - 정답](https://codepen.io/jangka44/pen/OJEdYPv) # ? 챕터 4 : display ## 개념 - [실험](https://codepen.io/jangka44/pen/GRrxyKK?editors=0100) - [개념 - display 속성 정리](https://codepen.io/jangka44/live/ZjbpPR) - `display:block` - 너비 : 너비가 지정되어 있지 않으면, 최대한 유연하게 늘어난다. - 높이 : 높이가 지정되어 있지 않으면, 최소한으로 유연하게 줄어든다. - 배열방향 : 한줄에 무조건 1개 - `display:inline-block` - 너비 : 너비가 지정되어 있지 않으면, 최소한으로 유연하게 줄어든다. - 높이 : 높이가 지정되어 있지 않으면, 최소한으로 유연하게 줄어든다. - 배열방향 : 한줄에 최대한 여러개 ## 문제 - [문제 - section(green 색 막대)과 article(blue 색 막대)을 한 줄에 보이게 해주세요.](https://codepen.io/jangka44/pen/qyOqrE) - [문제 - 정답 예시](https://codepen.io/jangka44/debug/WKQRGW) - [문제 - 정답](https://codepen.io/jangka44/pen/WKQRGW) # ? 챕터 5 : 엘리먼트(배우)의 부모, 자식, 형제관계 ## 개념 - [개념 - 엘리먼트(배우)의 부모, 자식, 형제관계](https://codepen.io/jangka44/pen/bQqbpZ) - 나를 감싸는 엘리먼트 : `부모 엘리먼트` - 내가 감싸는 엘리먼트 : `자식 엘리먼트` - 같은 부모를 둔 엘리먼트 : `형제 엘리먼트` - 내 안에 있는 모든 엘리먼트 : `후손 엘리먼트` # ? 챕터 6 : a와 br ## 개념 - [개념 - a와 br](https://codepen.io/jangka44/pen/zLqQam) - a - `a` 태그는 링크를 걸어주는 태그이다. - `a` 태그의 `target` 속성은 연결된 링크를 어디에서 여는지 정해주는 속성이다. - `target`의 기본값은 `_self`이다. 현재 페이지에서 열어준다. - `target` 값 중에 `_blank`는 새 창이나 새 탭에서 열어준다. - br - `br`은 줄바꿈 태그이다. - `br` 태그는 다른 태그와 다르게 종료 태그가 없다. - ` ` - 공백문자 ## 문제 - [문제 - 각의 사이트 명에 링크를 걸어주세요.(새창으로 떠야 합니다.)](https://codepen.io/jangka44/pen/ZEEMPpy) - [문제 - 정답예시](https://codepen.io/jangka44/debug/mddGorY) - [정답](https://codepen.io/jangka44/pen/mddGorY) # ? 챕터 7 : 후손, 자식 선택자 ## 개념 - [개념 - 후손, 자식 선택자](https://codepen.io/jangka44/pen/KBzjzB) ## 문제 - [문제 - 각각의 크기와 색상이 다른 링크 버튼 3개 만들어주세요.](https://codepen.io/jangka44/pen/JaoBNQ) - [문제 - 정답예시](https://codepen.io/jangka44/debug/yxyqQQ) - [문제 - 정답](https://codepen.io/jangka44/pen/yxyqQQ) # ? 챕터 8 : text-align ## 개념 - [개념 - text-align](https://codepen.io/jangka44/pen/JBXgNy) - [개념 - text-align v2](https://codepen.io/jangka44/pen/JaLwpr) - `text-align` 속성은 자기 자신을 정렬하는 게 아니라 자식인 텍스트!를 정렬하는 것이다. - `block` 요소를 `text-align` 속성을 이용해 정렬하고 싶다면, `inline-block`으로 변경하여 텍스트화 시켜준다. ## 문제 - [문제 - 각각의 크기와 색상과 정렬상태가 다른 링크 버튼 3개 만들어주세요.](https://codepen.io/jangka44/pen/XPJByw) - [문제 - 정답예시](https://codepen.io/jangka44/debug/rZarQb) - [문제 - 정답](https://codepen.io/jangka44/pen/rZarQb) # ? 챕터 1 ~ 8 응용 문제 : 상단 메뉴 구현하기 ## 문제 - [문제 - 정답예시](https://codepen.io/jangka44/debug/qMdKbP) - 조건, 힌트 - 젠코딩 : 메뉴의 구조(간단 버전, 내용 채워넣어야 함) : `section>nav*7>a` - 젠코딩 : 메뉴의 구조(디테일 버전, 내용 채워넣어진 버전) : `section>({|}+nav>a[href="#"]{메뉴아이템 $})*7+{|}` - 메뉴 아이템(nav) 안에 있는 a에 `display:block` ## 정답 - [문제 - 정답](https://codepen.io/jangka44/pen/gOKJLWW) - 핵심은 `display:inline-block`과 `display:block`을 응용할 수 있는 것! # ? 챕터 8 : img ## 개념 - [개념 - 이미지](https://codepen.io/jangka44/pen/dyNgMda) - [개념 - object-fit, object-position](https://codepen.io/jangka44/pen/MWJPyqE) - `img`의 `display` 속성의 기본값은 `inline`이다. 하지만, `inline-block`처럼 행동한다. - `width`와 `height` 중 하나만 주어도 다른 하나의 값이 비율에 맞춰 조정된다. - `img` 태그의 속성 - `src` : 이미지의 url 혹은 경로 - `alt` : 대체문구 - `object-fit` : 오브젝트 채우기 - `object-fit:cover` : 비율을 유지하면서 정의된 너비&높이에 가득 채운다. - `object-position` : 오브젝트 위치 조정 - `object-position: x축위치 y축위치;` - 속성값 : px, %, left/right/center/top/bottom - [무료 이미지 사이트, unsplash](https://unsplash.com/) # ? 챕터 9 : margin, padding ## 개념 - [개념 - margin, padding](https://codepen.io/jangka44/pen/qBRJaKX) - [개념 - margin, padding v2](https://codepen.io/jangka44/pen/LYxgRrz) - [개념 - display:inline 에는 width, height, padding, margin이 제대로 작동하지 않는다.](https://codepen.io/jangka44/pen/VwPEKdQ) - `margin` : 바깥 여백 (border 기준 바깥) - `margin-top`, `margin-bottom`, `margin-left`, `margin-right` 으로 분류해서 사용 가능 - `margin:상하좌우값;`, `margin: 상하값 좌우값;`, `margin:상 우 하 좌;`(시계방향) - `padding` : 안쪽 여백 (border 기준 안쪽) - `padding-top`, `padding-bottom`, `padding-left`, `padding-right` 으로 분류해서 사용 가능 - `padding:상하좌우값;`, `padding: 상하값 좌우값;`, `padding:상 우 하 좌;`(시계방향) - `display:inline` 에는 `margin`과 `padding`이 제대로 작동하지 않는다. - 안쪽 풍선을 부풀렸을 때, 바깥 풍선도 함께 커져야 한다. ## 문제 - [문제 - 이미지 6개를 3x2 가운데 정렬로 배열해주세요, margin, padding](https://codepen.io/jangka44/pen/RwKeGJJ) - [문제 - 정답예시](https://codepen.io/jangka44/debug/gOgBwKB) - [문제 - 정답, margin 버전](https://codepen.io/jangka44/pen/gOgBwKB) - [문제 - 정답 v2, padding 버전](https://codepen.io/jangka44/pen/MWJPjBa) - `img` 태그에 직접 `padding`을 주기 보다는 `div`로 감싼 후 `div`에 `padding`을 주는 것이 좋다. # ? 챕터 10 : css 선택자, nth-child ## 개념 - [실험 - 가상 클래스 선택자 실험실](https://codepen.io/vexxxx/pen/zYEPxOe) - [개념 - nth-child](https://codepen.io/jangka44/pen/xJEeag) - [개념 - nth-child v2](https://codepen.io/jangka44/pen/wEXOJo) - `:first-child` : 누군가의 첫 번째 자식 - `:nth-child()` : 누군가의 n 번째 자식 - 예) `div:nth-child(3)` : div이면서 누군가의 3 번째 자식 (선택자를 붙여쓸 경우 중!복!조!건!) - `:last-child` : 누군가의 마지막 자식 - `:nth-last-child()` : ~이면서 누군가의 뒤에서 n 번째 자식 - `:nth-of-type()` : ~중에서 누군가의 n 번째 자식 - `:first-of-type` : ~중에서 누군가의 첫 번째 자식 - `:last-of-type` : ~중에서 누군가의 마지막 자식 ## 문제 - [문제 - 무지개를 만들어주세요.](https://codepen.io/jangka44/pen/eYgPwoX) - [문제 - 정답예시](https://codepen.io/jangka44/debug/zYNmVXV) - [문제 - 정답](https://codepen.io/jangka44/pen/aboeyRQ) # ? 챕터 11 : block 요소 정렬 ## 개념 - [개념 : block 요소 좌측, 가운데, 우측 정렬하는 방법](https://codepen.io/jangka44/pen/zJNKwN) - [개념 : block 요소 좌측, 가운데, 우측 정렬하는 방법 v2](https://codepen.io/jangka44/pen/EeGyKK) - block 요소와 inline 요소의 정렬 비교 - `inline-block`, `inline` - 수동적으로 정렬이 됨 - 부모의 `text-align` 속성에 의해서 정렬이 됨 - `block` - 능동적으로 정렬이 됨(스스로) - `margin`을 이용해서 정렬이 됨 - 우측 정렬 : `margin-left:auto;` - 중앙 정렬 : `margin-left:auto; margin-right:auto;` - `margin-left`의 기본값은 0이기 때문에 기본적으로 좌측 정렬이 되어 있다. # ? 챕터 12 : class와 id ## 개념 - [개념 - class와 id](https://codepen.io/jangka44/pen/XWdBoMO) - `id` : 문서 안의 단 하나의 요소에 스타일 정의 - 중복 사용 불가능 - 하나의 id를 가질 수 있다. - 예) `#id { ... }` - `class` : 문서 안의 여러 요소에 스타일 정의 - 중복 사용 가능 - 여러 개의 class를 가질 수 있다. - 예) `.class { ... }` - 우선순위 : `id` > `class` > 태그명 - id와 class값은 숫자로 시작되면 안 된다. `-`(하이픈), `_`(언더바) 사용 가능. # ?미니 게임 : 선택자 연습, CSS DINNER ## CSS DINNER - [CSS DINNER](https://flukeout.github.io/) - 26 번까지는 반드시 마스터하기 - 움직이는 요소 선택하기 - 힌트 - `*` : 모두 선택 - `A + B` : (같은 부모) A의 바로 뒤에 오는 동생인 B, 인접 형제 선택자 - `A ~ B` : (같은 부모) A 뒤로 오는 모든 B, 일반 형제 선택자 - `:only-child` : 형제가 없는 외동 - `even` : 짝수, `odd` : 홀수 - 예) :nth-child(even) : 짝수 번째 자식들 - `:empty` : 자식이 없는 요소 - `:not(A)` : A가 아닌 모든 요소 - 선택자를 붙여 쓰면 중복 조건이다. - 예) orange.small -> small 클래스를 가진 orange 엘리먼트 - `:only-of-type`: 같은 유형의 유일한 외동 - 27번 `[속성명]` - 28번 `태그명[속성명]` - 29번 `[속성명="속성값"]` - 30번 `[속성명^="속성값일부~"]` - 31번 `[속성명$="~속성값일부"]` - 32번 `[속성명*="~속성값일부~"]` # ? 챕터 1 ~ 12 응용 문제 : 1차 풀다운 메뉴 구현하기 ## 문제 - [문제 - 1차 풀다운메뉴 만들기 - 작업 1](https://codepen.io/jangka44/pen/wmamMY) - [문제 - 1차 풀다운메뉴 만들기 - 작업 2](https://codepen.io/jangka44/pen/oqXqBe) - [문제 - 1차 풀다운메뉴 만들기 - 작업 3](https://codepen.io/jangka44/pen/JLdLVM) - [문제 - 1차 풀다운메뉴 만들기 - 작업 4](https://codepen.io/jangka44/pen/VXvQOK) - [문제 - 1차 풀다운메뉴 만들기 - 작업 5](https://codepen.io/jangka44/pen/NYGyZM) - [문제 - 1차 풀다운메뉴 만들기 - 작업 6](https://codepen.io/jangka44/pen/yKYKBZ) - [문제 - 1차 풀다운메뉴 만들기 - 작업 7](https://codepen.io/jangka44/pen/Zxbxbd) - [문제 - 1차 풀다운메뉴 만들기 - 작업 8](https://codepen.io/jangka44/pen/NYGYrL) - [문제 - 1차 풀다운메뉴 만들기 - 작업 9](https://codepen.io/jangka44/pen/QmjmvY) - [문제 - 1차 풀다운메뉴 만들기 - 작업 10](https://codepen.io/jangka44/pen/jzbzpj) - [문제 - 1차 풀다운메뉴 만들기 - 작업 11](https://codepen.io/jangka44/pen/JLGLpX) - [문제 - 1차 풀다운메뉴 만들기 - 작업 12](https://codepen.io/jangka44/pen/KoVoRE) - [문제 - 1차 풀다운메뉴 만들기 - 작업 13](https://codepen.io/jangka44/pen/eMJMPY) - [문제 - 1차 풀다운메뉴 만들기 - 작업 14](https://codepen.io/jangka44/pen/zWrWVB) - [문제 - 1차 풀다운메뉴 만들기 - 작업 15](https://codepen.io/jangka44/pen/JLGvXJ) - [문제 - 1차 풀다운메뉴 만들기 - 작업 16](https://codepen.io/jangka44/pen/eMJreg) - [문제 - 1차 풀다운메뉴 만들기 - 작업 17](https://codepen.io/jangka44/pen/mxVLXa) - [문제 - 1차 풀다운메뉴 만들기 - 작업 18](https://codepen.io/jangka44/pen/KoVRRz) - [문제 - 1차 풀다운메뉴 만들기 - 작업 19](https://codepen.io/jangka44/pen/KoVRez) - [문제 - 1차 풀다운메뉴 만들기 - 작업 20](https://codepen.io/jangka44/pen/wmMjxw) - 핵심 개념! `block`과 `inline-block`의 어떤 특징을 이용하려고 사용하였는 지 파악하기. - 요소 안의 내용에 따라 자연스럽게 늘어나고, 줄어들기 위해서는 메뉴의 넓이를 지정하는 데 `width`를 절대 사용하지 않고, `inline-block`의 원리를 이용해야 한다. 그래야 수정이 쉬우며 깔끔하다. 내가 편해지는 길! - 1차 메뉴 간편하게 젠코딩 하기 - `nav>ul>li>a[href="#"]{메뉴 아이템 $}` - `nav` : 메뉴의 박스, 껍데기! - `ul` : 메뉴 덩어리 - `li` : 메뉴 아이템(항목) - `a` : 메뉴 아이템 텍스트 - 예) 항목이 3개인 1차 메뉴 - `nav>ul>li*3>a[href="#"]{메뉴 아이템 $}` - `li`에 원하는 항목의 개수만큼 곱해주면 끝! - 내가 무언가를 정렬할 때 꼭 체크해야 하는 것 1. `display` 속성 체크 1-1. `block`일 경우 = `margin` 정렬 1-2. `inline-block`, `inline`일 경우 = `text-align` 정렬 2. 정렬 2-1. `margin`은 자기 자신에게 주어 정렬한다. 2-2. `text-align` 속성은 자기 자신이 아닌 부모에게 주어 정렬한다. ## 추가 문제 - [문제 - 3가지 메뉴를 구현해주세요.](https://codepen.io/jangka44/pen/wmMjxw) - [문제 - 정답 예시](https://codepen.io/jangka44/debug/JaREmy) - [문제 - 정답](https://codepen.io/jangka44/pen/JaREmy) - css는 옷, 옷을 디자인하여 html에 입혀 준다. - 예) color-red라는 옷(class)을 만들어 시작태그에 입혀준다. ## 응용 - [참고 사이트, 양평아트DB](https://ypartdb.or.kr/) - [초!간단 1차 메뉴 따라잡기](https://codepen.io/vexxxx/pen/YzvmMrv) - [+ 디테일 잡기(폰트, 색상, 간격)](https://codepen.io/vexxxx/pen/wvXVZyL) # ? 챕터 13 : display:none ## 개념 - display - 없어지는 계열 - `none` - 나타나는 계열 - 세로 배열 - `block` : div의 기본값 - 가로 배열 - `inline` - `inline-block` ## 문제 - [문제 - a에 마우스를 올리면 인접동생인 div가 나타나게 해주세요.(즉 a의 인접동생인 div는 평소에 안나와야 합니다.)](https://codepen.io/jangka44/pen/PoorMYm) - [문제 - 정답예시](https://codepen.io/jangka44/debug/LYYKwYE) - [문제 - 정답](https://codepen.io/jangka44/pen/LYYKwYE) # ? 챕터 14 : position ## 개념 - [개념 : position 속성 정리](https://codepen.io/jangka44/debug/aaXopM) - [개념 : position 예제](https://codepen.io/jangka44/pen/eYYwqLO) - `position` : 위치를 지정하는 방식을 정하는 css 속성 - `absolute` : 절대적인 위치 - `width`값을 주지 않으면 최소한으로 줄어든다. - `top`, `right`, `bottom`, `left` 값으로 위치 조절이 가능하다. - `relative` : 상대적인 위치 - `top`, `right`, `bottom`, `left` 값으로 위치 조절이 가능하다. - 현재 위치를 기준으로 이동된다. - `static` : `position`의 기본 값 - 수치값을 %로 줄 경우, 유령은 유령의 집, 유령의 집이 없을 경우 전체화면을 기준으로한 백분율이 적용된다. - `top`, `right`, `bottom`, `left`는 `position`이 지정되지 않았을 경우 적용되지 않는다. ## 문제 - [문제 - absolute, width, height, top, left 로 화면을 2 * 2 등분](https://codepen.io/jangka44/pen/YzNMLYo) - [문제 - 정답 예시](https://codepen.io/jangka44/debug/MWJRGVr) - [문제 - 정답](https://codepen.io/jangka44/pen/MWJRGVr) - [문제 - absolute, width, height, top, left 로 화면을 1 * 3 등분](https://codepen.io/jangka44/pen/wvgZjXz) - [문제 - 정답 예시](https://codepen.io/jangka44/debug/qBRwYYg) - [문제 - 정답](https://codepen.io/jangka44/pen/qBRwYYg) - [문제 - position 으로 3 * 3 배열](https://codepen.io/jangka44/pen/zYNXjLJ) - [문제 - 정답 예시](https://codepen.io/jangka44/debug/KKaYRBv) - [문제 - 정답](https://codepen.io/jangka44/pen/KKaYRBv) # ? 챕터 15 : top, left, right, bottom ## 개념 - [개념 - top, left, right, bottom의 개념과 기본값](https://codepen.io/jangka44/pen/RwKOyzW) - `top`, `right`, `bottom`, `left`의 기본값은 auto이다. - 유령화를 시킨 후에 `top`, `right`, `bottom`, `left`값을 주지 않으면 유령화 시키기 전의 위치에 그대로 있다. - [개념 - top, left, right, bottom으로 너비, 높이 조절](https://codepen.io/jangka44/pen/KKaYeKQ) - 유령화를 시킨 엘리먼트에 `width`와 `height`값을 주지 않아도 `top`, `right`, `bottom`, `left`을 모두 주면 늘어나 나타난다. ## 문제 - [문제 - position 으로 2 * 2 배열, width, height 금지](https://codepen.io/jangka44/pen/XWpQYjG) - [문제 - 정답 예시](https://codepen.io/jangka44/debug/oNBOyzX) - [문제 - 정답](https://codepen.io/jangka44/pen/oNBOyzX) - [문제 - 화면 중앙 박스에 자식 4명을 2 * 2 등분, position](https://codepen.io/jangka44/pen/wvgZXqp) - [문제 - 정답 예시](https://codepen.io/jangka44/debug/abpxKjz) - [문제 - 정답, 작업 1, 4등분](https://codepen.io/jangka44/pen/WNRWyma) - [문제 - 정답, 작업 2, 4등분한 유령들을 부모 엘리먼트에 가두기, relative](https://codepen.io/jangka44/pen/WNRWyPa) - [문제 - 정답, 작업 3, 부모 엘리먼트(section)을 수평중앙정렬](https://codepen.io/jangka44/pen/ZELZRJw) - [문제 - 정답, 작업 4, 부모 엘리먼트(section)을 중앙정렬, absolute](https://codepen.io/jangka44/pen/ExZJRoY) - [문제 - 정답, 작업 5, 부모 엘리먼트(section)을 중앙정렬, 세부조정, calc](https://codepen.io/jangka44/pen/rNjbKdE) - [문제 - 정답, 작업 6, 부모 엘리먼트(section)을 중앙정렬, 세부조정, transform](https://codepen.io/jangka44/pen/abpxKjz) - `absolute`인 엘리먼트를 정확하게 중앙정렬 시키는 방법 ```css div { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); } ``` # ? 2차 메뉴 맛보기, 멀티 메뉴 튜토리얼 - [멀티 메뉴를 위한, 선택자 튜토리얼 1](https://codepen.io/jangka44/pen/aYNGjw) - [멀티 메뉴를 위한, 선택자 튜토리얼 2](https://codepen.io/jangka44/pen/dmMKyq) - [멀티 메뉴를 위한, 선택자 튜토리얼 3](https://codepen.io/jangka44/pen/mxPKeg) - [멀티 메뉴를 위한, 선택자 튜토리얼 4](https://codepen.io/jangka44/pen/Kozezg) - [멀티 메뉴를 위한, 선택자 튜토리얼 5](https://codepen.io/jangka44/pen/WzwyGw) - [멀티 메뉴를 위한, 선택자 튜토리얼 6](https://codepen.io/jangka44/pen/jzrzwY) - [멀티 메뉴를 위한, 선택자 튜토리얼 7](https://codepen.io/jangka44/pen/EEyEbJ) - [멀티 메뉴를 위한, 선택자 튜토리얼 8](https://codepen.io/jangka44/pen/qoNowO) - [멀티 메뉴를 위한, 선택자 튜토리얼 9](https://codepen.io/jangka44/pen/OvXvYO) - [멀티 메뉴를 위한, 선택자 튜토리얼 10](https://codepen.io/jangka44/pen/pLbVoq) - 후손 선택자 읽기가 어렵다면 반대로 읽자! - 예) `menu-1 > ul li ul` : `ul`은 `ul`인데, 조상으로 `li`가 있고, 그 조상으로 `.menu-1 > ul`(1차 메뉴)를 조상으로 가지고 있는 `ul` - 항상 같은 패턴인 n차 메뉴 - `ul` : 메뉴, `li` : 메뉴 아이템, `a` : 메뉴 아이템 텍스트 - 메뉴의 패턴 : `ul > li > a` - 2차 메뉴 : `ul > li > a + ul > li > a` - 3차 메뉴 : `ul > li > a + ul > li > a + ul > li > a` - 서브 메뉴 선택 : `nav > ul ul` - 모든 메뉴 선택 : `nav ul` - 모든 메뉴의 아이템 선택 : `nav ul > li` - 주의 : `nav ul li` 라고 적을 경우, 모든 메뉴 안에 있는 모든 아이템이 선택된다. # ? 챕터 16 : white-space, overflow ## 개념 - [개념 : white-space:nowrap, 줄바꿈 금지](https://codepen.io/jangka44/pen/NLdRyK) - [개념 : overflow-x:auto, 스크롤바 자동생성](https://codepen.io/jangka44/pen/vzgXjV) - [개념 : overflow-x:scroll, 스크롤바 무조건 생성](https://codepen.io/jangka44/pen/ZMLpRB) - [개념 : overflow-x:hidden, 넘치는 내용 숨김](https://codepen.io/jangka44/pen/vzgXrV) - [개념 : text-overflow:ellipsis, 넘쳐서 숨겨지는 텍스트 ... 처리](https://codepen.io/jangka44/pen/ZMLpjL) - `white-space` - `white-space:nowrap;` : 줄바꿈하지 못하게 만든다. - `overflow` - `overflow` : 모든 넘친 부분 - `overflow-x` : x축으로 넘친 부분 - `overflow-y` : y축으로 넘친 부분 - `visible` : 기본값, 넘쳐도 보이게 한다. - `hidden` : 넘치면 숨기게 한다. - `scroll` : 넘쳐도, 안 넘쳐도 스크롤이 생긴다. - `auto` : 넘칠 때만 스크롤이 생긴다. - `text-overflow` - `text-overflow:ellipsis;` : 넘쳐서 잘린 부분을 ... 으로 나타내 준다. - 전제 조건 : 1. `white-space:nowrap;` 2. `overflow-x:hidden;` 을 같이 써줘야 한다. ```css div { text-overflow:ellipsis; white-space:nowrap; overflow-x:hidden; } ``` - [예제 - overflow 활용, nexon 홈페이지 따라잡기](https://codepen.io/vexxxx/pen/gOjOQjg) # ? 챕터 1 ~ 16 응용 문제 : 2차 풀다운 메뉴 구현하기 ## 마크업 젠코딩 - `nav.menu-1>ul>li*3>a[href="#"]{1차 메뉴 아이템$}+ul>li*3>a[href="#"]{2차 메뉴 아이템$}` ## 문제 - [문제 - 2차 풀다운 메뉴 만들기](https://codepen.io/jangka44/pen/eYgaGrx) - [문제 - 정답예시](https://codepen.io/jangka44/debug/ZELNJbL) - [문제 - 정답, 작업 1, 1차 메뉴 마크업](https://codepen.io/jangka44/pen/vYgwZvr) - [문제 - 정답, 작업 2, 노말라이즈](https://codepen.io/jangka44/pen/PoWvjXX) - [문제 - 정답, 작업 3, 1차 메뉴 완성](https://codepen.io/jangka44/pen/VwPOWgX) - [문제 - 정답, 작업 4, 2차 메뉴 마크업](https://codepen.io/jangka44/pen/RwKmgmY) - [문제 - 정답, 작업 5, 2차 메뉴를 평소에 숨기기](https://codepen.io/jangka44/pen/QWdRgew) - [문제 - 정답, 작업 7, 2차 메뉴를 유령화](https://codepen.io/jangka44/pen/jOyoLNP) - [문제 - 정답, 작업 8, 1차 메뉴 아이템을 유령의 집화](https://codepen.io/jangka44/pen/vYgwJYV) - [문제 - 정답, 작업 9, 2차 메뉴 아이템 텍스트도 꾸미기](https://codepen.io/jangka44/pen/yLgWzRQ) - [문제 - 정답, 작업 10, 2차 메뉴에 배경색](https://codepen.io/jangka44/pen/qBRGPLO) - [문제 - 정답, 작업 11, 모든 메뉴에 배경색을 한방에](https://codepen.io/jangka44/pen/ZELNJbL) ## 연습 팁 - 처음부터 후손 선택자를 사용하지 않도록 합니다. - 자식 선택자를 사용하는 것이 가능할 때엔, 후손보다 자식 선택자로 선택하는 것이 좋습니다. 나중에 중복 선택이 되어 생긴 혼란을 방지할 수 있습니다. - 자식 선택자로 콕 찝어 선택한 후, 중복 스타일을 적용할 때 끊어줍니다. - 작성 순서(반드시 따르지 않아도 됩니다.) 1. 2차 메뉴 마크업 2. 노멀라이즈 3. 서브메뉴(2차 메뉴) 숨기기 4. 1차 메뉴 완성 5. 2차 메뉴 마우스 올렸을 때 보이기 6. 2차 메뉴 유령화 후 가두기 7. 선택자 끊어 주어서(자식 -> 후손) 동일 스타일 적용 ## 응용 - 2차 메뉴 따라잡기 - [참고 사이트, CU](https://cu.bgfretail.com/) - [CU 2차 메뉴 따라잡기](https://codepen.io/vexxxx/pen/GRBgmZY) - 참고 사이트는 실수로 닫아버려서... 어딘지 모르겠네요 ? 혹시 GDWEB에서 발견하신다면 알려주세요 ! - [2차 메뉴 따라잡기](https://codepen.io/vexxxx/pen/wvxBdmw) - 비슷한 유형의 2차 메뉴를 사용 중인 사이트 - [BGF 리테일](https://www.bgfretail.com/) - [카페24 마켓플러스](https://mp.cafe24.com/kr/) - [스파이스웨어](https://www.spiceware.io/) - 개발자 도구 열어보기 단축키 : `F12` - hover 했을 때의 스타일 확인 : 마우스를 호버해 놓은 상태에서 `Ctrl + Shift + C` 누른 후, 마우스가 원하는 위치에서 떨어지지 않을 정도로만 살짝 움직여서 확인 ## 검사 완료 된 학생 - 양종민 님, 변은섭 님, 허민호 님, 이동헌 님, 송영조 님, 홍승윤 님, 정재원 님, 이진우 님, 김진후 님, 최주현 님, 한민기 님, 최중원 님 # ? 챕터 17 : 무료 아이콘 라이브러리, 폰트 어썸 ## 개념 - [개념 - 폰트어썸](https://codepen.io/vexxxx/pen/KKBpvZx) - [폰트어썸 - FREE 아이콘 리스트](https://fontawesome.com/search?m=free) - [폰트어썸 - 애니메이션](https://fontawesome.com/docs/web/style/animate) - 폰트어썸 라이브러리 불러오기 - [CDNJS](https://cdnjs.com) 접속 - 검색어 `font` - `font-awesome` 클릭 - `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css` 복사 - HTML 상단에 추가 ```html ``` - 아이콘 코드 복사하여 HTML에 붙여 넣기 - 예) ```html ``` - 아이콘이 나오지 않는 경우 1. 오타 2. 라이브러리의 버전이 구버전 3. 무료가 아닌 유료 아이콘을 불러왔을 경우 - 애니메이션이 적용되지 않는 경우 - 윈도우 속성 자체에서 애니메이션 효과가 꺼져있을 가능성 높음. - 윈도우 10 기준 : 설정 - 디스플레이 - Windows 단순화 및 개인화 - Windows에서 애니메이션 표시 켬 # ? 챕터 18 : flex ## 개념 - [개념 - flex](https://codepen.io/vexxxx/pen/ExbEoBV) - `display:flex`가 적용되어 있는 엘리먼트를 `flex 컨테이너`라고 한다. - `display:flex`가 적용되어 있는 엘리먼트를 부모로 가진 엘리먼트들을 `flex 아이템`이라고 한다. - `flex` 관련 속성 (중요한 속성은 ?로 표시) - `flex 컨테이너`에게 주는 속성 - ? `display:flex` : 자식들을 가로로 정렬한다. - ? `flex-direction` : flex 아이템 배치 방향 정렬 - 속성값: `row`(기본값), `column`, `row-reverse`, `column`, `column-reverse` - ? `flex-wrap` : flex 아이템 줄바꿈 여부, 기본 값은 nowrap이기 때문에 자기 모습을 줄여서라도 한 줄에 가득 찬다. - 속성값 : `nowrap`(기본값), `wrap`, `wrap-reverse` - `flex-flow` : `flex-direction`과 `flex-wrap`의 축약형 - 예) `flex-flow : row wrap-reverse` - ? `justify-content` : 아이템 가로 정렬 - 속성값 : `flex-start`(기본값), `flex-end`, `center`, `space-between`, `space-around`, `space-evenly` - ? `align-items` : 아이템 세로 정렬 - 속성값 : `stretch`(기본값), `flex-start`, `flex-end`, `center`, `baseline` - `align-content` : 아이템 세로 정렬 (두 줄 이상) - 속성값 : `stretch`(기본값), `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `space-evenly` - `flex 아이템`에게 주는 속성 - `flex-basis` : flex 아이템의 기본 크기 - 속성값 : auto(기본값), 너비값 - ? `flex-grow` : 아이템의 여백 비율(`flex-basis`(컨텐츠가 있는 부분)를 제외한 여백) - 속성값 : 0(기본값), 1 ~ - `flex-shrink` : `flex-basis`의 값보다 작아질 수 있는 지 여부 - 속성값 : 1(기본값, 작아질 수 있음), 0 ~ - `flex` : `flex-grow`, `flex-shrink`, `flex-basis`의 축약형 - 속성값 : `flex-grow`, `flex-shrink`, `flex-basis` - 응용 : [로고가 항상 가운데인 헤더](https://codepen.io/vexxxx/pen/jOYxdWb) - `align-self` : `align-items` 개인 버전 - 속성값 : `auto`(기본값), `stretch`, `flex-start`, `flex-end`, `center`, `baseline` - `order` : 시각적으로 순서 변경 - 속성값 : 1 ~ # ?미니 게임 : FLEX 연습, FLEX 개구리, 디펜스 ## FLEX 개구리 - [flex 개구리](https://flexboxfroggy.com/#ko) - 24번 힌트 - `flex-direction`, `flex-wrap`, `justify-content`, `align-content` 사용 - 24번 정답 ```css #pond { display:flex; flex-direction:column-reverse; flex-wrap:wrap-reverse; justify-content:center; align-content:space-between; } ``` ## FLEX 디펜스 - [flex 디펜스](http://www.flexboxdefense.com/) # ? 챕터 19 : iframe ## 개념 - [개념 - iframe 개념](https://codepen.io/vexxxx/pen/LYBpObm) - iframe = inline frame의 약자이다. - 웹 페이지 내에서 또 다른 웹 페이지를 삽입하는 엘리먼트 - `` - [개념 - a 태그를 이용하여 iframe 웹 페이지 불러오기](https://codepen.io/vexxxx/pen/vYaNRoo) - `a` 태그의 `target` 속성과 iframe의 `name` 속성을 동일하게 주면, `a` 태그를 이용하여 웹페이지를 `iframe`에 불러올 수 있다. - [개념 - iframe 유튜브 불러오기](https://codepen.io/vexxxx/pen/OJwyZLM) # ? 챕터 20 : console ## 개념 - [개념 - console 개념](https://codepen.io/jangka44/pen/jOBGrvO?editors=0012) - console 창은 프로그램의 내부 정보를 보여주는 창이다. - 개발자를 제외한 사용자는 볼 일이 거의 없다. - console 창에 기록하는 법 - `console.log("내용");` - console 창 기록 지우는 방법 - `console.clear();` - 코드펜은 수정이 되면 자동으로 렌더링 되기 때문에 js 꼭대기에 `console.clear();`를 써줘야 한다. - 자바스크립트는 위에서부터 한 줄 한 줄 실행이 된다. ## 문제 - [문제 - 콘솔에 1부터 50까지 출력해주세요.](https://codepen.io/jangka44/pen/dyXLZeZ?editors=0012) - [문제 - 정답](https://codepen.io/jangka44/pen/eYzoerJ?editors=0012) - for문 사용 가능 # ? 챕터 21 : 숫자와 문장 ## 개념 - [개념 - 숫자와 문장](https://codepen.io/jangka44/pen/bGqoeZX?editors=0012) # ? 챕터 22 : 변수 ## 개념 - [개념 - 변수](https://codepen.io/jangka44/pen/abJLmoV?editors=0012) - [개념 - 변수의 해석](https://codepen.io/jangka44/pen/oNZGzoJ?editors=0012) - 변수 : 값 저장소, 공간 - 변수에는 값이 1개가 들어간다. - 변수명은 숫자로 시작해서는 안 된다. - 똑같은 이름의 변수를 중복 선언하면 안 된다. - 예) `let x;` `let x = 0;` (X) 절대 안 됨!!! ? - 변수는 `=` 기호 좌측에 있을 때만 공간으로 취급한다. # ? 챕터 23 : 제이쿼리 ## 개념 - 제이쿼리 불러오기 ```html ``` - 제이쿼리로 CSS 선택자 불러오기 - `$('div')` - 제이쿼리로 CSS 스타일 지정하는 방법 - `$('선택자').css('속성명', '속성값');` - 예) ```javascript $('div').css('width', '100px'); ## 문제 - [문제, 정답 - css가 아닌 제이쿼리로 디자인을 해주세요](https://codepen.io/jangka44/pen/wvJrYWJ) # ? 챕터 24 : 함수 ## 개념 - [개념 - 함수](https://codepen.io/jangka44/pen/yLMPryy?editors=0012) - 함수 문법 : `function + 함수 이름 + 소 + 중` - 함수 이름은 중복되어서는 안 된다. - 함수를 만들고 나서, 실행을 해 줘야 작동한다. - 실행하는 방법 : 함수이름(); - 함수는 소스코드 조각들을 모아 놓은 것이다. 정리하는 폴더 # ? 챕터 25 : onclick ## 개념 - [개념 - onclick 속성](https://codepen.io/jangka44/pen/KKWyYzK?editors=1111) - 클릭했을 때 자바스크립트가 실행되는 HTML 시작 태그 속성 - 예) `` - onclick 속성은 시작태그에 쓴다. click과 헷갈리지 않도록 주의해야 한다. ## 문제 - [문제 - 클릭할때 마다 배경색 변경, no 변수로 구분](https://codepen.io/jangka44/pen/NWpXXWo) - [문제 - 정답예시](https://codepen.io/jangka44/debug/YzZYYPE) - [문제 - 정답](https://codepen.io/jangka44/pen/YzZYYPE) - 연습 순서 - 1단계 : js에 `console.clear();`를 작성하여 console에 로그가 쌓이는 것을 방지 - 2단계 : 제이쿼리 불러오기 - 3단계 : js에 `changeBodyBackground()` 함수를 만들어 버튼에 연결 후, 함수가 console 실행됨 메세지를 출력하도록 하여 연결이 잘 되었는지 확인 - 4단계 : 연결이 되는 것을 확인했다면, `changeBodyBackground()`가 `body`의 배경색을 red로 변경시키도록 하는 기능 추가 - 5단계 : `no`라는 이름의 변수를 함수의 바깥에 생성한 후 초기값을 0으로 준 후, `changeBodyBackground()` 함수 안에 `no` 값을 출력 시키는 기능 추가 - 6단계 : `changeBodyBackground()` 함수가 실행이 될 때마다 `no` 값이 증가되도록 함, 버튼을 눌러 보아 `no`값이 잘 증가되는 지 확인 - 7단계 : `changeBodyBackground()` 함수가 조건문 `if`를 사용하여 증가되는 `no`의 값을 이용해 배경색이 변경되도록 함 (2로 나눈 나머지의 값이 0인지 1인지(홀수/짝수 구별)) - [문제 - 클릭할때 마다 배경색 변경, isRed 변수로 구분](https://codepen.io/jangka44/pen/ZEevvYY) - [문제 - 정답예시](https://codepen.io/jangka44/debug/RwpxxNQ) - [문제 - 정답](https://codepen.io/jangka44/pen/RwpxxNQ) - 연습 순서 - 1단계 : js에 `console.clear();`를 작성하여 console에 로그가 쌓이는 것을 방지 - 2단계 : 제이쿼리 불러오기 - 3단계 : js에 `changeBodyBackground()` 함수를 만들어 버튼에 연결 후, 함수가 console 실행됨 메세지를 출력하도록 하여 연결이 잘 되었는지 확인 - 4단계 : 연결이 되는 것을 확인했다면, `changeBodyBackground()`가 `body`의 배경색을 red로 변경시키도록 하는 기능 추가 - 5단계 : `isRed`라는 이름의 변수를 함수의 바깥에 생성한 후 초기값을 false으로 준 후, `changeBodyBackground()` 함수 안에 `isRed` 값을 출력 시키는 기능 추가 - 6단계 : `changeBodyBackground()` 함수가 실행이 될 때마다 `isRed` 값이 반전되도록 함, 버튼을 눌러 보아 `isRed`값이 잘 반전되는 지 확인 - 7단계 : `changeBodyBackground()` 함수가 조건문 `if`를 사용하여 반전되는 `isRed`의 값을 이용해 배경색이 변경되도록 함 (true/false) # ? 챕터 26 : click ## 개념 - 클릭했을 때 이벤트가 발생하는 제이쿼리 마우스 이벤트 메소드 - 예) `$("선택자").click(함수명);` - 예) `$("선택자").click(function(){ 함수 내용 });` - 선택자에 해당하는 요소를 클릭했을 때 함수 실행 - 작성법 리듬 타기 : `function 소괄호 열고, 닫고, 중괄호, 엔터, 방향키 아래, 세미콜론` ## 문제 - [문제 - 팝업1 구현, 팝업열기](https://codepen.io/jangka44/pen/QWpaQwE) - [문제 - 정답예시](https://codepen.io/jangka44/debug/XWMVZJz) - [문제 - 정답](https://codepen.io/jangka44/pen/XWMVZJz) - [문제 - 팝업1 구현, 팝업닫기](https://codepen.io/jangka44/pen/XWMVZJz) - [문제 - 정답예시](https://codepen.io/jangka44/debug/QWpaQEK) - [문제 - 정답](https://codepen.io/jangka44/pen/QWpaQEK) # ? 챕터 27 : mouseenter, mouseleave ## 개념 - 마우스를 올렸을 때, 뗐을 때 이벤트가 발생하는 제이쿼리 마우스 이벤트 메소드 - `mouseenter` : 마우스를 올렸을 때 이벤트 발생 - `mouseleave` : 마우스를 뗐을 때 이벤트 발생 - 유사 개념으로 `mouseover`와 `mouseout`이 있는데, 웬만해서는 사용하지 않도록 한다. (이벤트가 자식까지 전달되기 때문에) ## 문제 - [문제 - 팝업1 구현, mouseenter로 팝업열기, mouseleave로 팝업닫기](https://codepen.io/jangka44/pen/QWpaQEK) - [문제 - 정답예시](https://codepen.io/jangka44/debug/OJpQeJN) - [문제 - 정답](https://codepen.io/jangka44/pen/OJpQeJN) # ? 챕터 28 : addClass, removeClass ## 개념 - 클래스를 추가, 제거하는 제이쿼리 함수 - .css()를 사용하여 스타일을 주는 것보다 간편하다. 난이도도 훨씬 쉽고, 유지보수에 좋다. - 문법 - `$("선택자").addClass("클래스명");` - `$("선택자").removeClass("클래스명");` - 클래스명에는 선택자가 아닌 말그대로 클래스의 이름만 넣는다. 예를 들어, 클래스 선택자를 넣지 않는다. (.class (X)) 선택하는 것이 아니기 때문! - 사용 방법 - 원본 스타일을 작성해 놓은 후, active 클래스가 추가된 스타일도 작성한다. - `addClass`와 `removeClass`를 이용해 클래스를 넣었다 뺐다 하며 스타일을 변경시킨다. ```javascript function Popup1__show() { $('.popup-1').addClass('active'); } function Popup1__hide() { $('.popup-1').removeClass('active'); } $('.btn-popup-1').click(Popup1__show); $('.popup-1__btn-close').click(Popup1__hide); ``` ## 문제 - [문제 - addClass로 배경색 변경](https://codepen.io/jangka44/pen/JjWpQEq) - [문제 - 정답예시](https://codepen.io/jangka44/debug/WNpMqGE) - [문제 - 정답](https://codepen.io/jangka44/pen/WNpMqGE) - [문제 - removeClass로 배경색이 원래대로 회복](https://codepen.io/jangka44/pen/wvJyLJd) - [문제 - 정답예시](https://codepen.io/jangka44/debug/WNpMqGE) - [문제 - 정답](https://codepen.io/jangka44/pen/WNpMqGE) - [문제 - 팝업1 구현, addClass, removeClass](https://codepen.io/jangka44/pen/QWpaQEK) - [문제 - 정답예시](https://codepen.io/jangka44/debug/NWpYzPV) - [문제 - 정답](https://codepen.io/jangka44/pen/NWpYzPV) # ? 챕터 29 : hasClass ## 개념 - 클래스가 존재하는지 확인하는 제이쿼리 함수, 참 또는 거짓을 반환한다. - 문법 - `$("선택자").hasClass("클래스명");` : 선택자가 클래스명을 가지고 있니? - 조건문의 조건에 많이 쓰인다. ## 문제 - [문제 - 버튼 하나로 배경색이 계속 바뀜, hasClass](https://codepen.io/jangka44/pen/WNpMqGE) - [문제 - 정답예시](https://codepen.io/jangka44/debug/OJpQevm) - [문제 - 정답](https://codepen.io/jangka44/pen/OJpQevm) # ? 챕터 20 ~ 29 응용 문제 : 팝업 만들기 ## 1단계, 레이아웃 - [문제 - 팝업2 구현, 레이아웃](https://codepen.io/jangka44/pen/abJYKpy) - [문제 - 정답예시](https://codepen.io/jangka44/debug/GRWxGoY) - [문제 - 정답](https://codepen.io/jangka44/pen/GRWxGoY) ## 2단계, 닫기 버튼 - [문제 - 팝업2 구현, 닫기버튼 레이아웃](https://codepen.io/jangka44/pen/GRWxGoY) - [문제 - 정답예시](https://codepen.io/jangka44/pen/QWpmxKW) - [문제 - 정답](https://codepen.io/jangka44/pen/QWpmxKW) - `::before` – 선택자의 첫 번째 자식 바로 앞에서 생성되는 자식 요소 - `::after` – 선택자의 막내 자식 바로 뒤에서 생성되는 자식 요소 - HTML에 추가하지 않고, 앞 뒤로 꾸밈이 필요할 때 사용한다. - before와 after를 사용하기 위해서는 반!드!시! `content` 속성이 있어야 한다. - 예) ```css 선택자::before { content:""; /* 비워두거나, 필요할 경우 내용을 넣는다. */ } ``` ## 3단계, 레이아웃 완성 - [문제 - 팝업2 구현, 레이아웃 완성](https://codepen.io/jangka44/pen/QWpmxKW) - [문제 - 정답예시](https://codepen.io/jangka44/debug/qBroKVo) - [문제 - 정답](https://codepen.io/jangka44/pen/qBroKVo) ## 4단계, 팝업 열기, 닫기 - [문제 - 팝업2 구현, 열기, 닫기 기능 구현](https://codepen.io/jangka44/pen/qBroKVo) - [문제 - 정답예시](https://codepen.io/jangka44/debug/ZEexRoe) - [문제 - 정답](https://codepen.io/jangka44/pen/ZEexRoe) - `transform` 값 여러 개 주는 법 : 예) `transform: translatex(50px) scale(1.3)` -> 한 칸 띄어서 작성! ### [참고] 햄버거 버튼 - [예제 - 햄버거 버튼](https://codepen.io/vexxxx/pen/qBxNMyN) # ? 챕터 30 : 함수 매개변수 ## 개념 - [개념 - 함수 매개변수](https://codepen.io/jangka44/pen/LYWdrKX?editors=0012) - 함수 안에 전달되는 "변수"를 매개변수라고 한다. - 함수를 호출할 때 전달되는 "값"을 전달인자라고 한다. - 매개변수 앞에는 `let`을 붙이지 않는다. - 전달인자와 매개변수의 개수는 같아야 한다. - 전달인자가 더 많을 경우, 남는 전달인자는 함수에 전달되지 않는다. - 매개변수가 더 많을 경우, 남는 매개변수는 아무 값도 들어가지 않아 undefined가 된다. ## 문제 ### 팝업 2개 - [문제 - 팝업2 구현, 팝업 2개](https://codepen.io/jangka44/pen/ZEexRoe) - [문제 - 정답예시](https://codepen.io/jangka44/debug/zYZWLwm) - [문제 - 정답](https://codepen.io/jangka44/pen/zYZWLwm) ### 팝업 2개 함수 한 개로 구현하기 - [문제 - 팝업2 구현, 팝업 2개, 함수 1개로](https://codepen.io/jangka44/pen/ZEexRoe) - [문제 - 정답예시](https://codepen.io/jangka44/debug/BaWrPYp) - [문제 - 정답, 작업 1](https://codepen.io/jangka44/pen/KKWoBZZ) - [문제 - 정답, 작업 2](https://codepen.io/jangka44/pen/BaWrPYp) ### 팝업 2개 함수 구현 연습 - [문제 - 팝업2 구현, 팝업 2개, 함수 1개로, 단계적 구현](https://to2.kr/cDF) - [문제 - 정답](https://codepen.io/jangka44/pen/BaWrPYp) - 3단계부터 시작 - 3단계 : `console.clear();` 작성 - 4단계 : `Popup__init` 함수 만들고 실행 (폴더만 생성하여 실행하기) - 5단계 : `Popup__init` 함수 안에 `.btn-popup-1` 클릭 시 이벤트 (기능 X, 리듬 타기) - 힌트 : `click` - 6단계 : `.btn-popup-1` 클릭시 팝업1 뜸 (기능 추가) - 힌트 : `popup`에 `active` 클래스 추가, `addClass` - 7단계 : `.popup-1 .popup__btn-close` 의 닫기 버튼 클릭시 팝업1만! 닫기 - 힌트 : `popup`에 `active` 클래스 제거, `removeClass` - 8단계 : `no` 변수를 적용하여 팝업 1 열기 - 힌트 : `Popup__init` 함수 안에 변수 선언 `let no = 1;` 후, 숫자를 no값으로 변경 문장 더하기 no값 - 9단계 : `no` 변수를 적용하여 팝업 1 닫기 - 힌트 : `Popup__init` 함수 안에 변수 선언 `let no = 1;` 후, 숫자를 no값으로 변경 문장 더하기 no값 - 10단계 : no를 매개변수 화 (함수에 입구 만들어 주기) - 힌트 : `let no = 1;` 제거 후 매개변수화, 후손 선택자 주의하기 함수를 실행할 때 전달인자 넣어주기 - 11단계 : popup-3을 만들어 구현 # ? 참고 : 테일윈드 라이브러리 ## 개념 - [테일윈드 라이브러리](https://tailwindcss.com/) - css를 따로 작성하지 않아도 html 코드 내에서 클래스 추가만으로 간편하고 빠르게 커스텀이 가능한 라이브러리입니다. - 테일윈드는 사용할 지, 말 지는 여러분들 선택입니다. - 테일윈드 시작하기 - 라이브러리 불러오기 ```html ``` - [테일윈드 치트 시트](https://nerdcave.com/tailwind-cheat-sheet) 참고하여 class를 넣어주면 끝! - 장단점 - 장점 - 빠르고 편리하다. - css 코드가 짧아진다. - 디테일한 부분까지 커스텀이 간편해진다. - 단점 - 코드가 길어져 가독성이 좋지 않을 수 있다. - class 명을 찾아 사용해야 한다. - 익숙해지면 외워집니다. ## 예제 - [문제 - div와 동일한 스타일을 테일윈드만을 사용하여 만들어주세요.](https://codepen.io/vexxxx/pen/NWyQRMQ) - [문제 - 정답](https://codepen.io/vexxxx/pen/YzEzbNr) ## Daisy UI - [DAISY UI](https://daisyui.com/) - 테일윈드를 기반으로 만들어진 컴포넌트 라이브러리 - daisy ui 시작하기 - 라이브러리 불러오기 ```html ``` # ? 챕터 31 : 아코디언 예제, this ## 개념 - `$(this)` - 함수를 실행하는 요소가 여러 명일 때, 누가 실행했는 지 알려준다. - `$(this)`를 사용할 때에는, `let $this = $(this);` 처럼 변수에 담아서 사용하는 것이 좋다. ## 문제 ### this 미사용 ver. - [문제 - 아코디언2 구현, 클릭 당하면 배경색이 변함](https://codepen.io/jangka44/pen/BaWvWme) - [문제 - 정답예시](https://codepen.io/jangka44/debug/gOmZmzE) - [문제 - 정답](https://codepen.io/jangka44/pen/gOmZmzE) ### this 사용 ver. - [문제 - 아코디언2 구현, 클릭 당하면 배경색이 변함, this](https://codepen.io/vexxxx/pen/wvPYMWL) - [문제 - 정답예시](https://codepen.io/jangka44/debug/PopXpLM) - [문제 - 정답](https://codepen.io/jangka44/pen/PopXpLM) - [문제 - 아코디언2 구현, 클릭 당하면 배경색이 변함, toggle](https://codepen.io/jangka44/pen/mdWvdxm) - [문제 - 정답예시](https://codepen.io/jangka44/debug/rNyPNKE) - [문제 - 정답](https://codepen.io/jangka44/pen/rNyPNKE) ```javascript // 박스 1의 모든 자식을 클릭했을 때 함수 실행 $(".box-1 > *").click(function(){ // 명탐정 만들기 let $this = $(this); // 만약에 내가 선택한 그놈이 active 클래스를 가지고 있다면, if ( $this.hasClass("active") ) { // 내가 선택한 그놈한테서 active 클래스를 빼라 $this.removeClass("active"); } // 그렇지 않다면 else { // 내가 선택한 그놈한테 active 클래스를 추가해라 $this.addClass("active"); } }); ``` - [문제, 정답 - toggleClass](https://codepen.io/vexxxx/pen/MWVjQgb) - 참고 : `.toggleClass("active")` - 있으면 빼고, 없으면 넣어라 # ? 챕터 32 : 아코디언 예제, 제이쿼리 탐색 메소드 ## 개념 - 형제 요소의 탐색 - `.siblings()` : ~의 형제, 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소(작성하지 않을 경우 모든 형제)를 선택한다. - `.next()` : ~의 인접 동생, 선택한 요소의 바로 다음에 위치한 형제 요소를 선택한다. - `.prev()` : ~의 인접 형, 선택한 요소의 바로 이전에 위치한 형제 요소를 선택한다. - 하위 요소의 탐색 - `.children()` : ~의 자식들, 선택한 요소 중에서 지정한 선택자에 해당하는 요소(작성하지 않을 경우 모든 자식)를 선택한다. - `.find()` : ~의 후손, 선택한 요소의 자손 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택한다. 괄호 안에 선택자를 작성해야 한다. - `find("*")` : 선택한 요소의 모든 자손 선택 - 상위 요소의 탐색 - `.parent()` : ~의 부모, 선택한 요소의 부모 요소를 선택한다. - 유사 개념 : `.parents()`는 선택한 요소의 상위 요소를 모두 선택한다. ## 문제 - [문제 - 아코디언2 구현, 클릭 당하면 양 옆의 배경색이 변함, next, prev](https://codepen.io/jangka44/pen/mdWvdxm) - [문제 - 정답예시](https://codepen.io/jangka44/debug/OJpdJoz) - [문제 - 정답](https://codepen.io/jangka44/pen/OJpdJoz) - [문제 - 아코디언2 구현, 클릭당한 녀석을 제외한 모든 녀석 선택](https://codepen.io/vexxxx/pen/jOaeWGW) - [문제 - 정답예시](https://codepen.io/jangka44/debug/zYZeYgG) - [문제 - 정답](https://codepen.io/jangka44/pen/zYZeYgG) - [문제 - 아코디언2 구현, 클릭당한 녀석을 제외한 모든 녀석 선택, parent, children](https://codepen.io/jangka44/pen/zYZeYgG) - [문제 - 정답예시](https://codepen.io/jangka44/debug/ZEewYYz) - [문제 - 정답](https://codepen.io/jangka44/pen/ZEewYYz) - [문제 - 아코디언2 구현, 클릭당한 녀석을 제외한 모든 녀석 선택, find](https://codepen.io/jangka44/pen/ZEewYYz) - [문제 - 정답예시](https://codepen.io/jangka44/debug/OJpdPMw) - [문제 - 정답](https://codepen.io/jangka44/pen/OJpdPMw) - [문제 - 아코디언2 구현, 클릭당한 녀석을 제외한 모든 녀석 선택, siblings](https://codepen.io/jangka44/pen/ZEewYYz) - [문제 - 정답예시](https://codepen.io/jangka44/debug/vYxbEXp) - [문제 - 정답](https://codepen.io/jangka44/pen/vYxbEXp) # ? 챕터 33 : 아코디언 구현, 제이쿼리 이펙트 메소드 ## 개념 - `slideUp()` : 선택한 요소의 높이를 높여가며 사라지게 한다. - `slideDown()` : 선택한 요소의 높이를 낮춰가며 나타나게 한다. - `slideToggle()` : 선택한 요소에 `slideUp()` 메소드와 `slideDown()` 메소드를 번갈아가며 적용한다. - `fadeIn()` : 선택한 요소의 투명도를 높여가며 나타나게 한다. - `fadeOut()` : 선택한 요소의 투명도를 낮춰가며 사라지게 한다. - `fadeToggle()` : 선택한 요소에 `fadeIn()` 메소드와 `fadeOut()` 메소드를 번갈아가며 적용한다. - 괄호 안에는 시간이 들어간다. 예) 1000 = 1초, 300 = 0.3초 - 이펙트 효과를 제어하는 메소드 - `stop()` : 선택한 요소가 실행 중인 이펙트를 즉시 중단시킨다. - 예) 이펙트가 적용된 요소를 연속으로 클릭했을 때, 계속해서 실행되는 것을 끊기게 한다. - `$this.find("> .faq-box__answer").stop().slideUp(300);` ## 문제 - [문제 - 아코디언2 구현, 기본 디자인](https://codepen.io/jangka44/pen/jOBodGo) - [문제 - 정답예시](https://codepen.io/jangka44/debug/YzZbagm) - [문제 - 정답](https://codepen.io/jangka44/pen/YzZbagm) - [문제 - 아코디언2 구현, 애니메이션 없는 버전](https://codepen.io/jangka44/pen/YzZbagm) - [문제 - 정답예시](https://codepen.io/jangka44/debug/WNpBJbO) - [문제 - 정답](https://codepen.io/jangka44/pen/WNpBJbO) - [문제 - 아코디언2 구현, slideDown](https://codepen.io/jangka44/pen/WNpBJbO) - [문제 - 정답예시](https://codepen.io/jangka44/debug/vYxwjLO) - [문제 - 정답](https://codepen.io/jangka44/pen/vYxwjLO) - [문제 - 아코디언2 구현, slideUp](https://codepen.io/jangka44/pen/vYxwjLO) - [문제 - 정답예시](https://codepen.io/jangka44/debug/WNpqxbe) - [문제 - 정답](https://codepen.io/jangka44/pen/WNpqxbe) - [문제 - 아코디언2 구현, 기존 애니메이션 큐 제거](https://codepen.io/jangka44/pen/WNpqxbe) - [문제 - 정답예시](https://codepen.io/jangka44/debug/WNpqGvp) - [문제 - 정답](https://codepen.io/jangka44/pen/WNpqGvp) - [230104 FAQ](https://codepen.io/vexxxx/pen/OJwRbGg) ## 참고 - [예제 - slideToggle](https://codepen.io/vexxxx/pen/XWVJNYE) - [예제 - fadeIn, fadeOut, fadeToggle](https://codepen.io/vexxxx/pen/mdXzdKR) - [ColorHunt](https://colorhunt.co/) : 색상 조합 사이트 # ? 챕터 34 : 스와이퍼 라이브러리 (슬라이드) ## 개념 - [스와이퍼 라이브러리](https://swiperjs.com/) : 슬라이드 라이브러리 - [더 많은 스와이퍼 옵션](https://swiperjs.com/swiper-api#parameters) - [스와이퍼 예제 - 많이 사용하는 스와이퍼 옵션](https://codepen.io/vexxxx/pen/OJOJvYR) ## 문제 ### SWIPER #1 스와이퍼 불러오기 - [문제 - 정답예시](https://codepen.io/vexxxx/full/JjLydJd) - [문제 - 정답](https://codepen.io/vexxxx/pen/JjLydJd) ```html ``` ### SWIPER #2 기본 슬라이드 만들기 - [문제 - 기본 슬라이드 만들기](https://codepen.io/vexxxx/pen/JjLydJd) - [문제 - 정답예시](https://codepen.io/vexxxx/full/abYyOEz) - [문제 - 정답](https://codepen.io/vexxxx/pen/abYyOEz) ### SWIPER #3 기본 슬라이드 2개 만들기 - [문제 - 기본 슬라이드 2개 만들기](https://codepen.io/vexxxx/pen/abYyOEz) - [문제 - 정답예시](https://codepen.io/vexxxx/full/GRxvJyv) - [문제 - 정답](https://codepen.io/vexxxx/pen/GRxvJyv) ### SWIPER #4 화면에 꽉찬 슬라이드 2개 만들기 - [문제 - 화면에 꽉찬 슬라이드 2개 만들기](https://codepen.io/vexxxx/pen/GRxvJyv) - [문제 - 정답예시](https://codepen.io/vexxxx/full/JjLydvG) - [문제 - 정답](https://codepen.io/vexxxx/pen/JjLydvG) ### SWIPER #5 슬라이드 2, 3칸으로 분할하기 - [문제 - 슬라이드 2, 3칸으로 분할하기](https://codepen.io/vexxxx/pen/JjLydvG) - [문제 - 정답예시](https://codepen.io/vexxxx/full/qBoXdLa) - [문제 - 정답](https://codepen.io/vexxxx/pen/qBoXdLa) - swiper 속성 - `loop` : 슬라이드 반복 여부 - `slidesPerView` : 한 화면에 나오는 슬라이드 개수 - `spaceBetween` : 슬라이드 사이의 간격 ### SWIPER #6 navigation 위치 변경하기 - [문제 - navigation 위치 변경하기](https://codepen.io/vexxxx/pen/abYyOEz) - [문제 - 정답예시](https://codepen.io/vexxxx/full/abYyOMN) - [문제 - 정답](https://codepen.io/vexxxx/pen/abYyOMN) ### SWIPER #7 navigation 위치 슬라이드 바깥으로 변경하기 - [문제 - navigation 위치 슬라이드 바깥으로 변경하기](https://codepen.io/vexxxx/pen/abYyOMN) - [문제 - 정답예시](https://codepen.io/vexxxx/full/WNzEvWL) - [문제 - 정답](https://codepen.io/vexxxx/pen/WNzEvWL) - [참고 - navigation 위치 슬라이드 바깥 양 옆에 배치](https://codepen.io/vexxxx/pen/PoRJmyK) - `.swiper`에는 `overflow:hidden`이 적용되어 있다. ### SWIPER #8 스와이퍼 색상 변경하기 - [문제 - 스와이퍼 색상 변경하기](https://codepen.io/vexxxx/pen/abYyOEz) - [문제 - 정답예시](https://codepen.io/vexxxx/full/qBoXOop) - [문제 - 정답](https://codepen.io/vexxxx/pen/qBoXOop) - `!important` : 해당 속성을 우선 적용시킨다 ### SWIPER #9 화살표 커스텀 - [문제 - 화살표 커스텀](https://codepen.io/vexxxx/pen/abYyOEz) - [문제 - 정답예시](https://codepen.io/vexxxx/full/ZExJbwL) - [문제 - 정답](https://codepen.io/vexxxx/pen/ZExJbwL) - 기존 버튼 (`::after`)을 제거하고, after의 위치에 이미지 혹은 아이콘을 넣어 사이즈를 조절한다. ### SWIPER #10 활성화된 슬라이드 애니메이션 - [문제 - 활성화된 슬라이드 애니메이션](https://codepen.io/vexxxx/pen/qBoXOop) - [문제 - 정답예시](https://codepen.io/vexxxx/full/gOexaBE) - [문제 - 정답](https://codepen.io/vexxxx/pen/gOexaBE) - 활성화된 슬라이드에는 `swiper-slide-active`라는 클래스가 붙게된다. ### SWIPER #11 페이지를 감지하여 움직이는 텍스트 - [문제 - 페이지를 감지하여 움직이는 텍스트](https://codepen.io/vexxxx/pen/abYyOEz) - [문제 - 정답예시](https://codepen.io/vexxxx/full/qBoPdmW) - [문제 - 정답](https://codepen.io/vexxxx/pen/qBoPdmW) - 이 효과를 사용하고 있는 웹 사이트 - [두산연강재단](https://www.yonkang.org/kr) ### SWIPER #12 반응형 슬라이드 만들기 - [문제 - 반응형 슬라이드 만들기](https://codepen.io/vexxxx/pen/abYyOEz) - [문제 - 정답예시](https://codepen.io/vexxxx/full/BarwKxw) - [문제 - 정답](https://codepen.io/vexxxx/pen/BarwKxw) ### 코오롱몰 스와이퍼 따라잡기 - [완성 - 코오롱몰 반응형 스와이퍼](https://codepen.io/vexxxx/pen/mdxBZgK) - 팁 - 넓이/높이를 반드시 고정되어야 하는 상황이 아니고선, 고정된 px값으로 잡지 않는다. - block/inline-block의 원리를 이용하는 것이 좋다. - 넓이/높이를 주지 않을 경우, 자식/자손 컨텐츠가 늘어남에 따라 감싸고 있는 부모의 요소가 유연하게 늘어나 레이아웃이 망가지지 않는다. # ? 챕터 35 : 부트스트랩 (프론트엔드 프레임워크) ## 개념 - [부트스트랩](https://getbootstrap.kr/) : 프론트엔드 프레임워크 - [부트스트랩 불러오기](https://codepen.io/vexxxx/pen/zYLNZyo) ```html ``` ## 문제 - [부트스트랩 강의 #2 레이아웃 그리드](https://codepen.io/vexxxx/pen/QWBdgyM) - [부트스트랩 강의 #3 컨텐츠 요소](https://codepen.io/vexxxx/pen/OJwWjyv) - [부트스트랩 강의 #4 폼 요소](https://codepen.io/vexxxx/pen/QWBdMMo) - [부트스트랩 강의 #5 폼 + 레이아웃](https://codepen.io/vexxxx/full/vYagWGE) - [정답](https://codepen.io/vexxxx/pen/vYagWGE)