일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 제이쿼리
- 자바스크립트
- sideproject
- web
- HTML
- steak
- 드롭다운메뉴
- 판화
- position
- Photoshop
- BNX사이트
- jQuery
- flex
- 플렉스
- PHP
- Poster
- float
- 메소드
- CSS
- Transform
- 클리핑마스크
- 사이드바
- 웹
- 레이아웃
- IT
- JavaScript
- 문자열 자르기
- 반응형
- CLIPING MASK
- MARGIN
- Today
- Total
목록IT (74)
코딩 슬라임 공방
문제-3가지 메뉴를 구현하고 색상만 다르게 한다. (간단하게) See the Pen LYpRaeQ by Lee Hoyeon (@nixpluvia) on CodePen. 해결방법-첫번째 메뉴를 복사해서 3개를 만들고 menu-box라는 클래스명에 2번째 클래스명을 부여해준다. 그리고 색상을 바꾸려는 메뉴의 2번째 클래스명을 지칭해서 바꿔준다. ex) nav class="menu-box m1" 첫번째 이름 menu-box 두번째 이름 m1 position: absolute See the Pen ExVgMNZ by Lee Hoyeon (@nixpluvia) on CodePen. top,bottom,left,right를 모두 0으로 하면 전체화면에 꽉차게 된다. 이를 이용해서 화면을 분할 할 수 있다.
드롭다운 메뉴 만들기 See the Pen KKdMbpv by Lee Hoyeon (@nixpluvia) on CodePen. ***창의 크기가 줄어들면 메뉴가 뭉게지는데 이건 메뉴 컨테이너를 block으로 바꾸고 margin: 0 auto;로 해줘야한다. 하지만 수업에서는 사용하지 않았으니 생략한다.*** position 포지션의 값으로는 static,relative,fixed,absolute가 있다 static은 기본 포지션 값으로 특별한 방식으로 위치가 지정되어 있지는 않다 relative는 별도의 속성을 지정하지 않는 이상 static과 동일하게 작동한다 상대 위치가 지정된 엘리먼트에 top이나 right, bottom, left를 지정하면 기본 위치와 다르게 위치가 조정된다. fixed는 고정엘..