$$config title: 웹 수업 keywords: - 웹1 - ... $$ # 09.13 - 깔끔하게 지우는 방법 - 에디터의 7번째 줄 클릭 - Ctrl + Shift + End - Delete --- # 사이트 - [수업주소](https://slog.gg/p/10268) - [코드팬](https://codepen.io/) - [깃허브](https://github.com/) - saco960@gmail.com --- # 기타 사이트 - [무료이미지호스팅](https://www.zpat.info/) - [연습용 이미지 다운로드 사이트](https://picsum.photos/) - [CDNJS 주소](https://cdnjs.com/) - [호환성검사 사이트](https://caniuse.com/) - [codepen Top-100](https://codepen.io/2021/popular/pens/) - [주소단축 사이트](https://to2.kr/) 피그마 ### 색상 주소 - [컬러헥스](https://www.color-hex.com/) 색상정보 확인 - [컬러헥사](about:blank) 색상정보 확인 --- - [그라비언트](https://www.grabient.com/) 그라디언트 조합 --- - [2-color](https://2colors.colorion.co/) 2가지 색상 조합 - [컬러헌트](https://colorhunt.co/) 여러 색상조합 ### 선택자 연습 - [css dinner](https://flukeout.github.io/) ### 자바스크립트 연습 - [code.org_3 연습](https://studio.code.org/s/course3) - [code.org_4 연습](https://studio.code.org/s/course4) ### 영타연습 - [영타연습](https://www.speedcoder.net/) --- # 웹1 ## 프레지 - [오리엔테이션](https://prezi.com/view/BGQ9YK2qCbIvjOY4IWDM/) ## HTML, CSS, JS 개요 -[샌드아트](https://www.youtube.com/watch?v=3VKj--sIAWs&feature=youtu.be) ## 위캔사용법 - [ 제목 ]+( 주소 ) : 사이트 링크 하는 법 - `-` +띄어쓰기 : 단락 생성 - `
` : 빈 단락 생성 - `-` 3개 이상 입력시 : 가로줄 생성 - `

` : 가로줄 생성 - tap + `-` : 하위 단락 생성 - # , ## , ### : 제목 명령어 (글씨크기 순서) - 코드 사용시 `(~ : 그레이브악센트) 코드내용, 위캔명령어` 로 묶어서 텍스트화 가능 - (~)*3 사용 시 관련된 문서가 전체 텍스트화 된다. - (~)*3 사용 후 css 입력 후 엔터 치고 css 내용 입력하면 실제 css 문서효과처럼 보이게 할 수 있다. - 이미지 보이게 하는 법 : ! 쓰고 사이트 링크 하는법 사용하면 된다.(제목은 안써도 보임. 대신 수정시에 알아보기 힘들겠죠?) - ![이미지](https://i.imgur.com/EeWpXTZ.jpg) - `color` : 컬러 사용법 - <```css```> : 박스생성 ```css div:hover { background-color:blue; } ``` --- ## 코드팬 사용법 - 추천 세팅법 - Editor Options > Autocomplete 체크 - Syntax Highlighting > High Contrast Light - Fonts > Hack, 16 - Autocomplete : 활성화 - Emmet : 활성화 - 단축키 - cttl + shift + 7 : 저장 안하고 새로고침 ## 유용한 단축키 - 윈도우 + Shift + S : 캡쳐 - 윈도우 + D : 작업중인 전체창 내리고 윈도우 화면으로 이동 - Crtl + T : 새탭 열기 - Crtl + W : 탭 닫기 - Crtl + Page Up/Down : 탭 이동 - Crtl + A : 문서 전체 내용 선택 - Home : 크롬 문서 최상단 / CODEPEN,WIKEN 문장 : 처음으로 커서 이동 - Down : 크롬 문서 최하단 / CODEPEN,WIKEN 문장 : 끝으로 커서 이동 - Crtl + Home(+shift) : CODEPEN,WIKEN 문서 최상단 이동(드래그효과) - Crtl + Down(+shift) : CODEPEN,WIKEN 문서 최하단 이동(드래그효과) - Crtl : 처음과 끝 - Shift : 드래그 --- - Crtl + 윈도우 + D : 새 윈도우창 생성 - Crtl + 윈도우 + 방향키(좌,우) : 윈도우창 이동 - 윈도우 + Tab : 현재 작업중인 프로그램들 다 보기(윈도우창들 제어가능) ## 위캔 단축키(윈도우/MAC) - 뷰페이지로 이동 : Ctrl + E - 미리보기 모드 토글 : Ctrl-P / Ctrl-P - 앞에서 찾기 : Ctrl-F / Cmd-F - 뒤에서 찾기 : Shift-Ctrl-G / Shift-Cmd-G - 찾기상태에서 다음단어로 이동 : Ctrl-G / Cmd-G - 찾기상태에서 이전단어로 이동 : Shift-Ctrl-G / Shift-Cmd-G - 단어찾은 후 특정단어로 교체 : Shift-Ctrl-F / Cmd-Option-F - 단어찾은 후 특정단어로 교체(일괄) : Shift-Ctrl-R / Shift-Cmd-Option-F - 특정줄로 이동 : Alt-G # 가장 기본적인 태그 종류 - div, section, nav ## 배경색 + 너비와 높이 + font-size + font-weight + 내용물 색상변경 + 가로 정렬 + 세로 정렬 - [배경이 빨간색인 사각형 만들기](https://codepen.io/jangka44/pen/vYJaaQo?editors=1100) - [크기와 색이 다른 사각형 3개 만들기](https://codepen.io/jangka44/pen/wvqxxZz?editors=1100) - [텍스트 넣고 사이즈 변경](https://codepen.io/kimleehong/pen/NWydZRJ?editors=1100) - [텍스트 두께 변경](https://codepen.io/kimleehong/pen/JjpEQbN?editors=1100) - [내용물 색상 변경](https://codepen.io/kimleehong/pen/bGLgPqZ) - [텍스트 가로 정렬](https://codepen.io/kimleehong/pen/RwQKzgJ?editors=1100) - [텍스트 세로 정렬](https://codepen.io/kimleehong/pen/mdXRZwj?editors=1100) - [텍스트 자간 설정](https://codepen.io/kimleehong/pen/zYRMrLv?editors=1100) - [텍스트 줄바꿈](https://codepen.io/kimleehong/pen/JjpeGZR) - [윗첨자, 아래첨자](https://codepen.io/kimleehong/pen/JjpeWgW?editors=1100) - [h1~h6 : heading](https://codepen.io/kimleehong/pen/jOZXPWo?editors=1000) ## display 속성 - `block` : 너비최대가 기본 속성, 그렇기 때문에 한 줄에 하나만 배치 가능, 너비 높이 미지정시에 내용물의 높이만큼 가로무한으로 나온다, 높이만 지정해도 배경이 나오며 너비 높이를 지정할 시에는 내용물이 넘쳐도 너비나 높이는 변하지 않는다. ex) div, section, nav, article 등 - `inline-block` : 가로 성분이 무한이 아니라서 한줄에 여러개 나올 수 있다, 내용물 높이와 너비에 자동으로 맞춰지고 내용물이 없을 시 너비, 높이 둘 다 지정해야 나온다. - `inline` : 인라인 블럭과 같지만 너비, 높이 지정 불가! 인라인 성분으로 다른 속성을 감싸는것은 안된다. ex) span, a, img - `none` : 화면에 나오지 않음
- html > body {white-space: nowrap;} : 줄바꿈 안되게 하는 명령키 ## 한줄에 여러개 나오게 하기 - [green과 블루만 한줄에 나오기 문제](https://codepen.io/jangka44/pen/qyOqrE?editors=1100) - [green과 블루만 한줄에 나오기 예시](https://cdpn.io/pen/debug/dyeOxar) - [green과 블루만 한줄에 나오기 정답](https://codepen.io/jangka44/pen/WKQRGW?editors=1100) - [줄바꿈 되지 않게 해주세요 - 예시](https://cdpn.io/pen/debug/ZErmWaB) - [문제 - 정답](https://codepen.io/jangka44/pen/XWXdPXX) ## div 태그를 사용하여 사과의 색상을 red로 변경해주세요 - [문제](https://codepen.io/kimleehong/pen/ExQGvwq?editors=1000) - [문제 - 정답 예시](https://cdpn.io/pen/debug/XWXdPXX) ## a태그 / br태그 / hr태그 - [codepen](https://codepen.io/jangka44/pen/zLqQam) - a태그는 링크를 걸어주는 태그 - 태그의 target 속성은 연결된 링크를 어떻게 여는지에 대해 정해주는 속성이다. - 기본값은 _self : 현재 위치에서 열어준다. - _blank : 새창에서 열어준다. --- - br태그는 줄바꿈 태그 - 다른 태그와는 다르게 종료 태그가 없다. --- - hr태그는 가로선 태그 - 다른 태그와는 다르게 종료 태그가 없고 display : block 이다
- text-decoration:none; : 언더바를 지움 ## a 와 br 예제 + 노말라이즈까지 - [문제](https://codepen.io/kimleehong/pen/zYRydRg) - [예시](https://cdpn.io/pen/debug/LYQMwYo) - [정답](https://codepen.io/kimleehong/pen/LYQMwYo) ## 엘리먼트(배우)의 부모, 자식, 형제관계 - [개념 - 엘리먼트(배우)의 부모, 자식, 형제관계](https://codepen.io/jangka44/pen/bQqbpZ) - 나를 감싸는 엘리먼트 : `부모 엘리먼트` - 내가 감싸는 엘리먼트 : `자식 엘리먼트` - 같은 부모를 둔 엘리먼트 : `형제 엘리먼트` ## 테이블 개념 - [개념 - 테이블](https://codepen.io/kimleehong/pen/ExQOyoG) - `table` : 테이블(표) 태그 - `tr` : 테이블의 열 : 열 방향으로 나오기 위해서 block 처럼 한줄에 한개 - `th` : 각 행과 열의 첫번째 칸, 자동으로 font-weight:bold와 중앙 정렬이 된다 : inline-block 처럼 한줄에 여러개 쓸 수 있다. - `td` : 테이블 데이터 : 행방향으로 나오기 위해서 inline-block 처럼 한줄에 여러개 나옴
- border-collapse:collapse; : 경계를 붕괴시켜라 ## 젠코딩 - [문제, 정답 - 젠코딩으로 네이버, 구글, 다음으로 가는 링크를 만들어주세요.](https://codepen.io/jangka44/pen/pBWYyR) - `>` : 자식 엘리먼트 만들 때 사용 - div>section - `^` : 상위 엘리먼트 만들 때 사용 - section^div - `+` : 형제 엘리먼트 만들 때 사용 - div+section - `*n` : 같은 태그의 n개의 형제 엘리먼트를 만들 때 사용 - div*3 - 태그명[속성명="속성값"]{내용} - 예시 : `a[href="https://www.naver.com"][target="_blank"]{네이버로 이동} 네이버로 이동` ## 후손, 자식 선택자 - [개념 - 후손, 자식 선택자](https://codepen.io/kimleehong/pen/WNMPJRO?editors=1100) - 후손, 자식 선택자 예제 - [문제 - 각각의 크기와 색상이 다른 링크 버튼 3개 만들어주세요.](https://codepen.io/jangka44/pen/JaoBNQ) - [문제 - 정답예시](https://cdpn.io/pen/debug/yxyqQQ) - 크기와 색상과 정렬상태가 다른 링크 버튼 만들기 - [문제 - 각각의 크기와 색상과 정렬상태가 다른 링크 버튼 3개 만들어주세요.](https://codepen.io/jangka44/pen/XPJByw) - [문제 - 정답예시](https://cdpn.io/pen/debug/rZarQb) - [문제 - 정답](https://codepen.io/jangka44/pen/rZarQb) ## 마우스를 올렸을 때(hover)와 변경 되는 시간(transition) - [개념 - hover](https://codepen.io/jangka44/pen/KBzOKj) - `:hover` : 마우스를 올려두었을 때의 상태를 선택(띄어쓰기X) - 예시) ```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; } ``` ```css div { transition-property: width; transition-duration: 2s; transition-timing-function: linear; transition-delay: 1s; } ``` ```css div { transition: width 2s linear 1s; } ``` ## hover 문제 - [문제 - 100칸 짜리 바둑판을 만들고 하나의 칸에 마우스를 올리면 해당 칸의 배경색이 바뀌도록 해주세요.](https://codepen.io/jangka44/pen/VGYGvp) - [문제 - 예시](https://cdpn.io/pen/debug/QVwVWZ) - [문제 - 예시 v2](https://cdpn.io/pen/debug/vYOKqNg) - [문제 - 정답](https://codepen.io/jangka44/pen/QVwVWZ) - [문제 - 정답 v2](https://codepen.io/jangka44/pen/vYOKqNg) ## 공백문자 - [개념](https://codepen.io/jangka44/pen/yqOmxJ) - ` ` - ` ` : 공백 문자 ## bmx 상단 메뉴 구현하기 1 (공백문자 사용) - [문제 - bmx 사이트의 상단 메뉴까지 구현해주세요.](https://cdpn.io/pen/debug/KKgyRYz) - 조건, 힌트 - ` ` 사용 - [문제 - 정답예시 v1](https://cdpn.io/pen/debug/MWGmEVv) - [문제 - 정답 v1](https://codepen.io/kimleehong/pen/MWGmEVv?editors=0100) ## bmx 상단 메뉴 구현하기 2 (아이템 사이 너비 동일) - [문제 - 정답예시 v2](https://cdpn.io/pen/debug/ejZqvz) - ` ` 사용금지 - `width` 사용 - | 를 태그로 감싸서 너비값을 주기 - [문제 - 정답 v2](https://codepen.io/jangka44/pen/ejZqvz) ## bmx 상단 메뉴 구현하기 3 (아이템 너비 동일) - [문제 - 정답예시 v3](https://cdpn.io/pen/debug/zLBYrQ) - 조건, 힌트 - ` ` 사용금지 - `width` 사용 - 메뉴 아이템의 너비가 동일 - [문제 - 정답 v3](https://codepen.io/jangka44/pen/zLBYrQ) ## bmx 상단 메뉴 구현하기 4 (a 태그 사용) - [문제 - 정답예시 v4](https://cdpn.io/pen/debug/PxjWxY) - 조건, 힌트 - 메뉴의 구조 : `section>a*7` - `a` 에 `width` 를 적용하려면, `display` 속성을 `inline-block` 이나 `block` 으로 지정 - [문제 - 정답 v4](https://codepen.io/jangka44/pen/PxjWxY) ## 클래스와 id - [예제](https://codepen.io/kimleehong/pen/xxYMzLO?editors=1100) - [예시](https://cdpn.io/pen/debug/XWdBoMO) - [정답](https://codepen.io/kimleehong/pen/gOvqKRv?editors=1000) ## 테두리 속성 - [개념](https://codepen.io/kimleehong/pen/ExQGoar?editors=1100) ## border-radius - [예제](https://codepen.io/jangka44/pen/ZEJwpML?editors=1100) - [예시](https://cdpn.io/pen/debug/LYjqRmd) - [정답](https://codepen.io/jangka44/pen/LYjqRmd) ## 이미지와 속성1 - [개념 - 이미지](https://codepen.io/kimleehong/pen/wvyRroQ?editors=1100) - [개념 - object-fit, object-position, box-sising:border-box](https://codepen.io/kimleehong/pen/bGLOorZ?editors=1100) - `img`는 너비나 높이 하나만 줘도 나머지 값이 원본 비율에 맞게 조정된다. - `img`의 `display` 속성의 기본값은 `inline`이다. - `width`와 `height` 중 하나만 주어도 다른 하나의 값이 조정된다. - `img` 태그의 속성 - `src` : 이미지의 url - `box-sizing:border-box` : 테두리가 바깥이 아닌 안쪽으로 생성된다. - `object-fit` : 오브젝트 채우기 - `object-fit:fill;`: 기본값, 요소에 크기에 맞게 꽉채워 보여줌, 필요한 경우 오브젝트가 늘어나거나 찌그러집니다. - `object-fit:cover;` : 요소의 가로나 세로크기에 가능한 맞춰져 크기가 조정되고, 비율은 고정된 상태입니다. 개체 크기에 맞게 잘립니다. 가득 채울때까지 확대됩니다. - `object-fit:contain;` : 요소의 가로나 세로크기에 가능한 딱 맞춰져 크기가 조정되고, 비율은 고정된 상태입니다. 딱 맞추기 때문에 남는 공간이 발생할 수 있습니다. - `object-fit:none;` : 원본이 가운데에 나온다. - `object-position` : 오브젝트 위치 조정 - `object-position: 가로위치 세로위치;` - 속성값 : px, %, left/right/center/top/bottom ## 이미지와 속성2 - [백그라운드 이미지](https://codepen.io/kimleehong/pen/OJQrxqY) - 이미지 태그를 썼을때 `object-posion` 을 쓰는 것과 같이 `background-position`을 사용하면 된다. - `backgroun-repeat:no-repeat;` 로 사용한다. ## :nth-child() - [예제](https://codepen.io/jangka44/pen/bGrOaRb) - [예시](https://cdpn.io/pen/debug/abyPEWL) - [정답](https://codepen.io/jangka44/pen/abyPEWL) --- - [무지개 예제1](https://codepen.io/jangka44/pen/BadvJMN?editors=1100) - [예시](https://cdpn.io/pen/debug/WNELdLx) - [정답](https://codepen.io/jangka44/pen/WNELdLx) --- - [무지개 예제2 / 호버시 색상반전](https://codepen.io/jangka44/pen/WNELdLx) - [예시](https://cdpn.io/pen/debug/wvqRpOK) - [정답](https://codepen.io/jangka44/pen/wvqRpOK) ## padding과 margin body 의 노말라이즈 - [예제](https://codepen.io/jangka44/pen/bGrOYWj) - [예시](https://cdpn.io/pen/debug/XWqaqWo) - [정답](https://codepen.io/kimleehong/pen/zYRyVma?editors=1100) ## block 요소의 가로 정렬 - [예제](https://codepen.io/kimleehong/pen/qBxGXJJ) - [예시](https://cdpn.io/pen/debug/ZEJVrEv) - [정답](https://codepen.io/jangka44/pen/ZEJVrEv) ## 이미지 예제2 - [이미지 배치 예제/ 패딩사용](https://codepen.io/jangka44/pen/wvqQRwL) - [이미지 배치 예시](https://cdpn.io/pen/debug/zYRQLBY) - [이미지 배치 정답](https://codepen.io/kimleehong/pen/zYRQLBY?editors=1100) ## 이미지 예제3 - [이미지 배치 예제/ 마진사용](https://codepen.io/jangka44/pen/wvqQRwL) - [이미지 배치 예시](https://cdpn.io/pen/debug/qBxGyNZ) - [이미지 배치 정답](https://codepen.io/kimleehong/pen/qBxGyNZ?editors=1100) ## 슬라이드 버튼 이미지 구현 - [예제](https://codepen.io/jangka44/pen/eYExdwE) - [예시](https://cdpn.io/pen/debug/dyzapBQ) - [정답](https://codepen.io/jangka44/pen/dyzapBQ) ## bmx 이미지 배치 예제 엘리먼트 사용 제한 없음 - [예제](https://codepen.io/jangka44/pen/vYJvRZZ) - [예시](https://cdpn.io/pen/debug/XWEMQEw) - [정답](https://codepen.io/kimleehong/pen/XWEMQEw?editors=1100) ## bmx 이미지 배치 예제 엘리먼트 사용 제한 6개 - [예제](https://codepen.io/jangka44/pen/vYJvRZZ) - [정답](https://codepen.io/jangka44/pen/jOLXzqe) ## bmx 이미지 배치 예제 엘리먼트 사용 제한 5개 - [예제](https://codepen.io/jangka44/pen/vYJvRZZ) - [정답](https://codepen.io/jangka44/pen/MWvZVeR) ## bmx 이미지 배치 예제 엘리먼트 사용 제한 4개 - [예제](https://codepen.io/jangka44/pen/vYJvRZZ) - [정답](https://codepen.io/kimleehong/pen/xxWqNZO?editors=1100) ## 이미지와 속성3 - [예제 / 이미지는 인라인이고 인라인 속성은 태그간 오차가 있다. 없애는 법은?](https://codepen.io/jangka44/pen/BadeZyN?editors=1100) - [예시](https://cdpn.io/pen/debug/JjyqJjB) - [정답](https://codepen.io/jangka44/pen/JjyqJjB) --- - [예제2 / 이미지로 알아보기](https://codepen.io/kimleehong/pen/eYVbyEx?editors=1100) - [예시](https://cdpn.io/pen/debug/BaYvJxJ) - [정답](https://codepen.io/kimleehong/pen/BaYvJxJ?editors=1100) ## 이미지 예제 - [예시](https://cdpn.io/pen/debug/gOvNKqw) - [이미지 배치 예제](https://codepen.io/jangka44/pen/abpRZOX) - [이미지 배치 정답](https://codepen.io/kimleehong/pen/gOvNKqw?editors=1100) ## inline-grid 클래스를 만들어서 활용해보기 - [예제](https://codepen.io/jangka44/pen/JjyqJoB) - [예시](https://cdpn.io/pen/debug/VwzOWYg) - [정답](https://codepen.io/kimleehong/pen/yLvGdxo) ## ul,li (목록 태그) - [예제1](https://codepen.io/jangka44/pen/wvqOBEb) - [예시1](https://cdpn.io/pen/debug/ZEJPYwB) - [예시2](https://cdpn.io/pen/debug/oNqWoyQ) - [정답](https://codepen.io/kimleehong/pen/oNqWoyQ?editors=1100) ## ol,li (순서 태그) - [예제](https://codepen.io/jangka44/pen/LYjaEqd?editors=1010) - [예시](https://cdpn.io/pen/debug/dyzrPaK) - [정답](https://codepen.io/jangka44/pen/ajJQzw) ## ul,li (목록 태그)의 노말라이즈 - [예제](https://codepen.io/jangka44/pen/NWvJGKg) - [예시](https://cdpn.io/pen/debug/ajJQzw) - [정답](https://codepen.io/jangka44/pen/ajJQzw) ## 이제까지 배운거 합친 노말라이즈 - [노말라이즈](https://codepen.io/kimleehong/pen/zYWwPyj?editors=0100) ## 계산식을 활용한 inline-grid - [기본](https://codepen.io/kimleehong/pen/NWyZBKw?editors=1100) - [변수활용](https://codepen.io/kimleehong/pen/oNqwNmQ?editors=0100) ## 음수마진법을 활용한 inline-grid - [음수마진](https://codepen.io/kimleehong/pen/QWQzeda?editors=1100) ## BMX 종합 - [작업 1, 노말라이즈](https://codepen.io/jangka44/pen/ExvByxb) - [작업 2, 컨테이너 구현](https://codepen.io/jangka44/pen/vYJqKYv) - [작업 3, 로고바 구현](https://codepen.io/jangka44/pen/dyzBXYg) - [작업 4, 메뉴바 구현, 마크업](https://codepen.io/jangka44/pen/WNEqxow) - [작업 5, 메뉴바 구현, 기본 CSS 작업](https://codepen.io/jangka44/pen/NWvZrjN) - [작업 6, 메뉴바 구현, 아이템 좌우 보더, 바에 상단여백](https://codepen.io/jangka44/pen/eYEwzXK) - [작업 7, 탑 이미지 바 구현](https://codepen.io/jangka44/pen/mdMZrJP) - [작업 8, 탑 2 이미지 바 구현](https://codepen.io/kimleehong/pen/MWQZNNR) - [작업 9, 마무리 작업](https://codepen.io/kimleehong/pen/mdXaNgw) ## %를 이용한 높이 조절 - [개념](https://codepen.io/jangka44/pen/oNBVVZE) - [개념](https://codepen.io/jangka44/pen/XWpGGRp) ## vh를 이용한 높이 조절 - [개념](https://codepen.io/jangka44/pen/ExZMMmm) ## 그리드를 이용한 계단식 비율 - [문제 - 그리드로 계단식 비율](https://codepen.io/jangka44/pen/NWdJVYL) - [문제 - 정답예시](https://cdpn.io/pen/debug/ExZMJZp) - [문제 - 정답](https://codepen.io/jangka44/pen/ExZMJZp) ## 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) - [추가풀이](https://codepen.io/kimleehong/pen/VwXMpBR?editors=1100) ## 풀다운메뉴 구현 : 복습 - [문제 - 정답 예시](https://cdpn.io/pen/debug/WNJKwqo) - [문제 - 정답](https://codepen.io/kimleehong/pen/WNJKwqo?editors=0100) ## position - [개념](https://cdpn.io/pen/debug/aaXopM) : position 속성 정리 - [문제](https://codepen.io/jangka44/pen/YzxbQNo) - [예시](https://cdpn.io/pen/debug/PoKvjWq) - [정답](https://codepen.io/jangka44/pen/eYYwqLO) - `position` : 위치를 지정하는 방식을 정하는 css 속성 - `absolute` : 절대적인 위치 - `width`값을 주지 않으면 최소한으로 줄어든다. - `top`, `right`, `bottom`, `left` 값으로 위치 조절이 가능하다. - `relative` : 상대적인 위치 - `top`, `right`, `bottom`, `left` 값으로 위치 조절이 가능하다. - 현재 위치를 기준으로 이동된다. - `static` : `position`의 기본 값 ```css - div { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}:이동 transform:rotate(45deg); /* deg:각도 */ :회전 ``` ## position 예제 - [문제 - absolute, width, height, top, left 로 화면을 2 * 2 등분](https://codepen.io/jangka44/pen/YzNMLYo) - [문제 - 정답 예시](https://cdpn.io/pen/debug/MWJRGVr) - [문제 - 정답](https://codepen.io/jangka44/pen/MWJRGVr) ## position 예제 2 - [문제 - absolute, width, height, top, left 로 화면을 1 * 3 등분](https://codepen.io/jangka44/pen/wvgZjXz) - [문제 - 정답 예시](https://cdpn.io/pen/debug/qBRwYYg) - [문제 - 정답](https://codepen.io/jangka44/pen/qBRwYYg) ## position 예제 3 - [문제 - position 으로 3 * 3 배열](https://codepen.io/jangka44/pen/zYNXjLJ) - [문제 - 정답 예시](https://cdpn.io/pen/debug/KKaYRBv) - [문제 - 정답](https://codepen.io/jangka44/pen/KKaYRBv) ## 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을 이용하여 너비, 높이 조절 - [개념 - top, left, right, bottom으로 너비, 높이 조절](https://codepen.io/jangka44/pen/KKaYeKQ) - 유령화를 시킨 엘리먼트에 `width`와 `height`값을 주지 않아도 `top`, `right`, `bottom`, `left`을 모두 주면 늘어나 나타난다. ## position, top, left, right, bottom 예제 - [문제 - position 으로 2 * 2 배열, width, height 금지](https://codepen.io/jangka44/pen/XWpQYjG) - [문제 - 정답 예시](https://cdpn.io/pen/debug/oNBOyzX) - [문제 - 정답](https://codepen.io/jangka44/pen/oNBOyzX) ## position, top, left, right, bottom 예제 2 - [문제 - 화면 중앙 박스에 자식 4명을 2 * 2 등분, position](https://codepen.io/jangka44/pen/wvgZXqp) - [문제 - 정답 예시](https://cdpn.io/pen/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%); } ``` ## position, top, left, right, bottom 예제 3 - [문제 - 화면 중앙 박스에 자식 4명을 2 * 2 등분, absolute, relative 사용, width, height 금지](https://codepen.io/jangka44/pen/MWJdpvm) - [문제 - 정답, 작업 1, top, left, right, bottom, 픽셀](https://codepen.io/kimleehong/pen/bGMjJJO?editors=1100) - [문제 - 정답, 작업 2, top, left, right, bottom, 퍼센트](https://codepen.io/jangka44/pen/yLgWXxN) - [문제 - 정답, 작업 3, padding으로 너비 높이 늘리기](https://codepen.io/jangka44/pen/ZELNyjQ) ## 선택자 검색대상의 개수 - [문제 - 선택자 검색대상의 개수](https://codepen.io/jangka44/pen/ZxLXMb) - [문제 - 정답](https://codepen.io/jangka44/pen/pLeWWY) ## 멀티 메뉴 튜토리얼 - [멀티 메뉴를 위한, 선택자 튜토리얼 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) - [추가설명](https://codepen.io/kimleehong/pen/JjLOryz?editors=1100) ## overflow - [개념 : 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 : - hidden: 넘쳐서 잘린 부분을 ... 으로 나타내 준다. - ellipsis; : 영어는 단어 단위로 줄바꿈이 되어서 알파벳 단위로 줄바꿈이 되도록 바꾸는 역할 - 전제 조건 : 1. white-space:nowrap; 2. overflow-x:hidden; 을 같이 써줘야 한다. ```css div { text-overflow:ellipsis; white-space:nowrap; overflow-x:hidden; } ``` - [참고 - 두 줄 이상 ... 표시하기](https://codepen.io/vexxxx/pen/YzrgvOp) ## 2차 풀다운 메뉴 만들기 예제 - [문제 - 2차 풀다운 메뉴 만들기](https://codepen.io/jangka44/pen/eYgaGrx) - [문제 - 정답예시](https://cdpn.io/pen/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) - [문제 - 정답, 작업 6, 2차 메뉴를 유령화](https://codepen.io/jangka44/pen/jOyoLNP) - [문제 - 정답, 작업 7, 1차 메뉴 아이템을 유령의 집화](https://codepen.io/jangka44/pen/vYgwJYV) - [문제 - 정답, 작업 8, 2차 메뉴 아이템 텍스트도 꾸미기](https://codepen.io/jangka44/pen/yLgWzRQ) - [문제 - 정답, 작업 9, 2차 메뉴에 배경색](https://codepen.io/jangka44/pen/qBRGPLO) - [문제 - 정답, 작업 10, 모든 메뉴에 배경색을 한방에](https://codepen.io/jangka44/pen/ZELNJbL) - [포지션 최소화 + height:0; , overflow:hidden;](https://codepen.io/kimleehong/pen/MWVQavq?editors=1100) - [전체 풀다운](https://codepen.io/kimleehong/pen/OJvQyEx?editors=1100) - [메가메뉴](https://codepen.io/kimleehong/pen/qBoxOPB?editors=1100) ```css div:hover { display: block; height:40px; line-height:40px; } ``` > 같이 써야 가운데 정렬(그냥 그렇게 외우기) 블락 가운데 정렬은 마진 사용하기!!!!(margin : 0 auto;) - z-index:-1; - 포지션은 전부 z-index 속성을 갖고 이걸 레이어라고 생각하면 편함 - 만약 1를 주면 가장위로 올라가 1준 것 끼리경쟁 ## 3차 풀다운 메뉴 만들기 예제 - [문제 - 3차 풀다운 메뉴 만들기](https://codepen.io/jangka44/pen/VwPJwbb) - [문제 - 정답예시](https://codepen.io/jangka44/pen/BapgaqG?editors=0100) - [문제 - 정답, 작업 1, 2차 메뉴 만들기](https://codepen.io/jangka44/pen/VwPJwbb) - [문제 - 정답, 작업 2, 3차 메뉴 마크업](https://codepen.io/jangka44/pen/YzNozar) - `nav.menu-box-1>ul>li*3>a[href="#"]{1차 메뉴 아이템 $}+ul>li*3>a[href="#"]{2차 메뉴 아이템 $}+ul>li*3>a[href="#"]{3차 메뉴 아이템 $}` - n차 메뉴를 만들 때 어차피 메뉴 박스 뒤의 유형은 같기 때문에 +로 연결해서 붙여줍니다. - [문제 - 정답, 작업 3, 2차 메뉴 아이템에 호버하면 자식인 3차 메뉴 노출](https://codepen.io/jangka44/pen/mdRZydG) - ```css .menu-box-1 > ul > li > ul > li:hover > ul { display:block; } ``` 이렇게 콕 찝어서 적용해도 되지만, 안 하는 이유? 4차, 5차 메뉴를 만들 상황이 생기면 또 여러번 콕 찝어줘야 하니까! - ```css .menu-box-1 ul > li:hover > ul { display:block; } ``` 그!래!서! 기존의 스타일에서 자식 선택자를 후손 선택자로 끊어줘서 만든다. - [문제 - 정답, 작업 4, 2차 메뉴 아이템도 relative](https://codepen.io/jangka44/pen/mdRZdLx) - `absolute`도 유령의 집 역할을 한다. 2차 메뉴가 `absolute`이기 때문에 2차 메뉴 아이템에게 `relative`를 주기 전, 3차 메뉴의 위치가 2차 메뉴에 갇혀 2차 메뉴 기준 top:100% 위치에 나오는 것이다. - 기존의 1차 메뉴 아이템만 가지고 있던 `relative`를 빼와서 똑같이 다시 만들어준다. ```css .menu-box-1 ul > li { position:relative; } ``` 이제 3차 메뉴는 부모인 리스트 아이템에 갇혀 각 메뉴 아이템의 바로 밑에 나오게 되는 것! - 하지만 문제는 2차 메뉴에 겹쳐서 나옴. 수정은 다음 단계. - [문제 - 정답, 작업 5, 3차 메뉴 위치를 아래가 아닌 오른쪽으로](https://codepen.io/jangka44/pen/eYgwYLp) - 3차 메뉴의 위치를 바꿔야 한다. - 3차 메뉴는은 `.menu-box-1 > ul ul`에 포함되어 있어 기존의 `.menu-box-1 > ul ul` 스타일이 적용이 돼 있다. - `.menu-box-1 > ul ul ul`로 3차 메뉴만 콕 찝어 위치만 바꿔주도록 한다. ```css .menu-box-1 > ul ul ul { top:0; left:100%; } ``` 대신 이 친구의 너비가 강제로 갇혀있던 집에서 억지로 밀려나가 쭈그러 듭니다. - [문제 - 정답, 작업 6, 3차 메뉴의 너비 정상화, white-space](https://codepen.io/jangka44/pen/BapgaqG) - `white-space:nowrap`을 이용해서 쭈그러든 친구를 펴 줍니다. - 3차 메뉴에 `width:100%`를 줘도 되지 않나요? - 되긴 됩니다! 하지만, 3차 메뉴 아이템의 텍스트의 길이가 늘어나면 줄바꿈이 되어버립니다. 줄바꿈이 싫다면 `white-space:nowrap`을 주시면 됩니다. ## 3차 풀다운 메뉴 만들기 예제 2 - [문제 - 3차 풀다운 메뉴 만들기, 3차메뉴를 안쪽방향으로 펼침](https://codepen.io/jangka44/pen/rNjXGeY) - [정답 예시](https://cdpn.io/pen/debug/mdRNByY) - [문제 - 정답, 작업 1, 3차 메뉴 만들기](https://codepen.io/jangka44/pen/xxgvLvW) - [문제 - 정답, 작업 2, 3차 메뉴, 안쪽방향으로 펼침](https://codepen.io/jangka44/pen/mdRNByY) - [수업시간에 푼거](https://codepen.io/kimleehong/pen/bGvVoXz?editors=1100) ## box-shadow - [개념 - box-shadow](https://codepen.io/vexxxx/pen/MWOYxrJ) - [예제](https://codepen.io/jangka44/pen/ZEXOaxa) - [예시](https://cdpn.io/pen/debug/yLzJPLa) - [작업 1_box-shadow](https://codepen.io/jangka44/pen/PoJzJvg) - [작업 2_그림자 흐릿하게](https://codepen.io/jangka44/pen/poWbWMy?editors=1100) - [작업 3_그림자 여러개](https://codepen.io/jangka44/pen/YzrWrmO?editors=1100) - [작업 4_그림자 transition](https://codepen.io/jangka44/pen/qBPNVWo?editors=1100) - [작업 5_평소에 그림자지게](https://codepen.io/kimleehong/pen/jOzbpvW?editors=1100) ## text-shadow - [예제](https://codepen.io/kimleehong/pen/MWVQzLZ?editors=0100) - [예시](https://cdpn.io/pen/debug/dyeaYoW) - [정답](https://codepen.io/jangka44/pen/qBPNVQg) ## 무료 아이콘 라이브러리, 폰트 어썸 - [개념 - 폰트어썸](https://codepen.io/jangka44/pen/yLMBYgq) - [폰트어썸 - FREE 아이콘 리스트](https://fontawesome.com/icons?d=gallery&p=2&m=free) - 폰트어썸 라이브러리 불러오기]() - [CDNJS 접속](https://cdnjs.com/) - 검색어 `font` - `font-awesome` 클릭 - `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css` 복사 - HTML 상단에 추가 ```css ``` - [예시](https://cdpn.io/pen/debug/PoRRpVB) - [실습해보기](https://codepen.io/kimleehong/pen/PoRRpVB?editors=1100) ## 가상 선택자 ::before, ::after - [예제](https://codepen.io/jangka44/pen/YzrqRvK) - [예시](https://cdpn.io/pen/debug/poWyQRP) - [정답](https://codepen.io/jangka44/pen/poWyQRP) - [::before, ::after 간의 순서](https://codepen.io/kimleehong/pen/xxWWdoJ?editors=1100) ## 미디어 쿼리 - [개념 - 미디어쿼리](https://codepen.io/kimleehong/pen/eYMBpBP?editors=1100) ## float, float-grid - [공부자료](https://webclub.tistory.com/606) - [float](https://codepen.io/kimleehong/pen/abYmQRz?editors=1100) - [float-grid](https://codepen.io/kimleehong/pen/VwXKVxj?editors=1100) - `float-grid` 라이브러리 ```css .float-grid > * { float:left; box-sizing:border-box; } .float-grid::after { content:""; display:block; clear:both; } ``` - [이미지와 함께 배치-예시](https://cdpn.io/pen/debug/MWVVvdY) - [이미지와 함께 배치](https://codepen.io/kimleehong/pen/MWVVvdY?editors=1100) - [레이아웃짜기-예제](https://codepen.io/kimleehong/pen/poLLMqm?editors=1100) - [예시](https://cdpn.io/pen/debug/rNdqPyZ) - [레이아웃 짜기-정답](https://codepen.io/kimleehong/pen/QWmmqwe) ## con-min-width - [min-width 쓰는 이유](https://codepen.io/kimleehong/pen/YzavqrY?editors=1100) - [실제 사용 예](https://www.demar3.co.kr/) Visual Studio Code 설치 파일-기본설정-설정: 폰트사이즈 16, tab 사이즈 2 확장팩설치 목록 [Live Server Auto Rename Tag indent-rainbow Material Icon Theme Korean Language Pack for Visual Studio Code] 바꾸기. ko:한국어 html 오른쪽 마우스 > open with live server 클릭: 작업 파일보기