본문 바로가기

분류 전체보기57

[CSS] CSS position 정리 (static, absolute, relative, fixed, sticky) CSS position ▷ static - position의 defalut value - html에서 지정한 순서대로 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다 - top, left, right, bottom 값을 설정해도 변화가 없음 ▷ absolute - 내 아이템과 가장 가까이 있는 부모의 box를 기준으로 움직임 - 이때 부모의 position은 static이 아니어야 함 - 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됨(static이어도) img { transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; } .vt { position.. 2021. 7. 30.
[TIL] 2021-07-30 1. 어떤 요소의 위치를 변경할 때, padding값을 주는 것 말고 transform을 사용하면 반응형으로 만들 수 있음 .cursor { transform: translate(-50%, -50%) } - translate 속성을 이용해 element의 반절만큼 이동하게 함 2. inline, inline-block, block의 차이 ▷ inline: 사용자가 지정하는 box의 값을 무시하고 content 자체의 크기로 CSS가 설정됨 ▷ inline-block: inline처럼 한 줄에 나타나지만 지정된 box의 크기도 설정됨 (inline과 block의 속성을 모두 가지고 있음) ▷ block: 한 줄에 하나 3. CSS position https://betterme.tistory.com/11 4.. 2021. 7. 30.
[JS] list of javascript events https://developer.mozilla.org/ko/docs/Web/Events 2021. 7. 30.
[CSS] CSS units 정리 | em, rem | 반응형에서 px사용을 지양하는 이유 unit의 종류 - unit의 종류는 크게 두 가지 종류로 나눌 수 있다 Absolute Relative px %, viewport, em, rem - 상대적인 유닛은 다시 두 종류로 나눌 수 있는데, Parent Browser % viewport(vh,vw) em rem 부모의 값에 영향을 받는 유닛과 브라우저의 영향을 받는 유닛으로 나뉜다 반응형에서 px를 사용하기를 지양해야 하는 이유 - container의 사이즈가 변경되어도 contents가 그대로 고정된 값으로 유지된다 - 사용자가 브라우저에서 폰트 사이즈 설정을 바꿔도 반응하지 않는다 em과 rem - 1em은 픽셀 값으로 변환하면 16px(브라우저에서 지정한 기본 값) - em은 부모의 값에 영향을 받는 반면, rem은 상속의 개념이 존재하.. 2021. 7. 22.
[CSS] space-between, space-around, space-evenly space-between: element 사이에 균일한 여백(between) space-around: element의 수대로 container를 분할한다음 좌우여백을 동일하게 줌 space-evenly: element 를 제외한 여백을 동일하게 나눔 더 자세한 설명: https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com 2021. 7. 20.
[CSS] box-shadow Box-shadow - 그림자 효과 - 3개의 value /* x축 | y축 | 색상 */ box-shadow: 60px -16px teal; - 4개의 value /* x축 | y축 | blur-radius | 색상 */ box-shadow: 10px 5px 5px black; (blur-radius 값이 클수록 크기는 커지면서 테두리는 흐려지고 색은 옅어짐) - x축과 y축의 값이 모두 0일 때 /* x축 | y축 | blur-radius | 색상 */ box-shadow: 0px 0px 15px #orange; 2021. 7. 18.
[CSS] transition, transformation, animation Transition : 전환, 다른 상태로의 이행 - state가 아닌 root에 사용(hover을 예로 들자면, hover가 정의되지 않은 곳에 써야 함) - 변화된 모든 값을 선택할 때는 'all' 을 사용 img{ background-color: black; color: blue; transition: background-color 10s ease-in-out, color 4s ease-in-out; } img:hover { background-color: white; color: white; } Tranformation : 변형 - 변형하고 싶은 선택자의 css안에 작성 - transition 과 함께 사용 가능 img { transition: transform 5s ease-in-out; } i.. 2021. 7. 14.

티스토리툴바