본문 바로가기

CSS6

[TIL] 2021-07-31 1. flexbox가 아닌 text-align 속성을 이용해서 요소를 정렬할 수 있다. 현대 브라우저에서 어떤 요소를 중앙에 배치하려면 display: flex; justify-content (en-US): center;를 사용하면 됩니다. 하지만 플렉스 박스 레이아웃을 지원하지 않는 Internet Explorer 8-9 등 오래된 브라우저를 지원해야 하면 margin: 0 auto;를 대신 사용하세요. (출처: MDN) body { text-align: center } 2. margin: auto; 브라우저가 적절한 여백 크기를 선택. 예를 들어 요소를 중앙 정렬하고 싶을 때 사용할 수 있다. (엘리코딩 실습5에서 사용) +) margin 값으로 %(percentage)도 사용가능. 3. flex와 .. 2021. 8. 1.
[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.
[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.