일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 판화
- CSS
- 플렉스
- 제이쿼리
- 드롭다운메뉴
- 자바스크립트
- Photoshop
- 메소드
- BNX사이트
- sideproject
- IT
- 문자열 자르기
- jQuery
- float
- Poster
- CLIPING MASK
- 클리핑마스크
- HTML
- steak
- position
- web
- JavaScript
- PHP
- 사이드바
- Transform
- MARGIN
- 웹
- 레이아웃
- 반응형
- flex
- Today
- Total
목록position (3)
코딩 슬라임 공방
position 응용하기 See the Pen vYNyVLL by Lee Hoyeon (@nixpluvia) on CodePen. box-sizing:border-box로 border가 사이즈를 늘리는 걸 방지. transform: translateX(n) translateY(n) ; transform의 %는 자신의 크기 기준으로 움직인다. translateX의 음수 값은 좌측으로 움직인다. translateY의 음수 값은 top방향으로 움직인다. 그래서 화면 중앙에 놓이게 할 때에는 2가지 방법을 사용하는데 1. top,left,bottom,right값이 모두 같은 값을 가지고 있다.(width,height사용x) 2. top: 50%; left: 50%; 를 사용하고 transform: transla..
문제-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는 고정엘..