일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 알고리즘문제풀이
- leetcode
- 리액트쿼리
- Next
- HTML
- 프론트엔드
- CSS
- NPM
- 객체 프로퍼티
- JS
- Next.js13
- 자바스크립트 문제
- 제로베이스
- 자바스크립트 알고리즘
- 자바스크립트 문제풀이
- stack문제
- Baekjoon
- 자바스크립트 알고리즘 문제
- 자바스크립트 연결리스트
- next13
- JavaScript
- til
- 타입스크립트
- 자바스크립트
- lodash
- 프로그래머스
- leetcode문제풀이
- 자바스크립트코딩테스트
- 자바스크립트 문제 풀이
- 리액트
- Today
- Total
목록Code note/CSS (16)
코드노트
transform - 요소의 회전, 크기조절, 기울이기, 이동 효과를 부여할 수 있다. * scale : 크기에 대비해서 크기 조절 * rotate : 방향을 회전 시킴 / deg, turn * translate : 기준점에서 이동 * skew : 각도를 기울이는 효과 * transform-origin : 기준점을 변경할 수 있다. /* 키워드 값 */ transform: none; /* 함수 값 */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5tu..
레이아웃 Layout display - inline, block, inline-block inline요소 : ex ) span.. - 영역의 크기가 내부 콘텐츠 크기로 정해진다. - margin, padding 의 top/bottom은 제외하고 지정할 수 있다. ( 위, 아래 는 지정 불가) - 여러 요소가 가로 배치가 된다. block요소 : ex ) div.. - 영역의 크기를 width, height 를 지정할 수 있다. - width를 지정하지 않으면 가로 전체를 차지한다. - 여러 요소가 세로 배치가 된다. inline - block요소 : ex ) input... - 영역의 크기를 width, height 를 지정할 수 있다. - 여러 요소가 가로 배치가 된다. display : block; ..
박스모델(Box Model) 크기 - width, heigth width : 요소의 너비 설정 heigth : 요소의 높이 설정 - 초기값 : auto - 상속되지 않음 - 인라인요소에서는 지정되지 않음, display속성으로 block을 지정해주어야함 max - width, min - width, max - heigth, min - heigth -최대, 최소 크기를 지정 margin - 네 방향 바깥 여백 영역을 설정 /* 네 면 모두 적용 */ margin: 1em; margin: -3px; /* 세로방향 | 가로방향 */ margin: 5% auto; /* 위 | 가로방향 | 아래 */ margin: 1em auto 2em; /* 위 | 오른쪽 | 아래 | 왼쪽 */ margin: 2px 1em 0..
CSS에 사용되는 모든 속성에는 해당 속성에 허용되는 값이 있다. 절대 길이 단위 - 일반적으로 항상 동일한 크기로 나타낸다. cm 센티미터 1cm = 96px/2.54 mm 밀리미터 1mm = 1/10th of 1cm Q 4분의 1 밀리미터 1Q = 1/40th of 1cm in 인치 1in = 2.54cm = 96px pc Picas 1pc = 1/6th of 1in pt 포인트 1pt = 1/72th of 1in px 픽셀 1px = 1/96th of 1in 상대 길이 단위 - 다른 요소와 관련이 있다. 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정된다. em 요소의 글꼴 크기. ex 요소 글꼴의 x-height. ch 요소 글꼴의 glyph "0" 의 사전 길이 (너비) 입니다. re..
font-size 폰트의 크기를 지정합니다. 폰트 크기를 바꾸면 em 과 ex 단위로 계산된 다른 항목들의 크기를 바꿉니다. /* 값 */ font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; /* 값 */ font-size: larger; font-size: smaller; /* 값 */ font-size: 12px; font-size: 0.8em; /* 값 */ font-size: 80%; /* 전역 값 */ font-size: inherit; font-size: initial; font-size: unset; ..
주요 선택자 - Selector Type, Class, Id See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen. - Type Slector / 전체 선택자 - ID Selector / 중복없이 하나만 사용 - Class Selector / 여러가지에 사용가능. 공백으로 다른 class도 추가 가능. 두 개 이상 class 추가 시 뒤에 있는 class가 적용 속성 선택자 - [attr], [attr=value] See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen. 1. [arrt] / 속성을 지정하여 선택 2.[attr=value] / 속성과 value값을 지정하여 선택 3. [attr^=value] /..