목록🥁 CSS (12)

개발을 해라

CSS - transform, 중첩사용 정리(인프런 강의)

transform - 요소에 이동, 회전, 확대, 축소, 비틀기 등의 변경효과를 줄 수 있다. translate(x,y) - 요소의 좌표를 움직일 수 있다. - X축으로 x만큼, Y축으로 y만큼 이동 가능 예) transform: translate(20px, 25%) translateX(n) / translateY(n) - 요소의 X축 / Y축 좌표를 n만큼 움직일 수 있다. 예) translateX(20px) translateY(20px) scale(x,y) - X축으로 x배만큼, Y축으로 y배 만큼, 요소를 축소 혹은 확대한다. 예) transform: scale(0.75, 1.1) scaleX(n) / scaleY(n) - 요소를 X축 / Y축 방향으로 n만큼 확대 혹은 축소 skew(x,y) - ..
🥁 CSS 2023. 2. 6. 17:08
CSS - transition 정리(인프런 강의)

transition - 위화감 최소화하면서 UI의 퀄리티를 높여준다. transition-property - 어떤 속성(property)에 transtition을 적용할 건지 지정한다. 예) transition-property: color, transform transition-duration - transition에 걸리는 시간을 지정한다 예) transition-duration: 0.2s transition-timing-function - transition의 속도 패턴을 지정한다. 예) transition-duration: ease-in-out / linear / ease / ease-in / ease-out transition-delay - transition 요청을 받은 후, 실제로 실행되기까지..
🥁 CSS 2023. 2. 6. 16:59
CSS - 폰트 & 단위 (절대단위, 상대단위 정리)

단위 1. 절대단위 - px = pixel = 화소 - 화면을 구성하는 가장 기본이 되는 단위 - 수 많은 작은 네모들로 구성되어 있다! 네모 한 칸을 1px이라고 부른다. - pt = 1/72 inch - 인쇄를 위한 단위 - 웹에서는 잘 사용하지 않는다! 2. 상대단위 - % - 부모 요소의 해당 속성 값에 비례하여 지정한 비율의 값을 적용한다. - em - 스타일 지정 요소의 font-size 속성 값에 비례하여 값을 결정한다. - 예) font-size: 16px인 경우 1em -> 16 곱 1 = 16px 0.8em -> 16 곱 0.8 = 12.8px 3em -> 16 곱 3 = 48px - rem - 최상위 html 요소의 font-size 속성 값에 비례하여 값을 결정한다. - 예) fon..
🥁 CSS 2023. 1. 28. 19:26
CSS - 웹폰트 적용 및 폰트 속성 정리

웹폰트 적용 방법은 2가지 1. 폰트파일을 직접 다운 받아 적용한다. @font-face를 이용한다. 확장자명은 woff/woff2/ttf/eot 등이 있으며 CSS파일에서 @font-face를 이용해 폰트 파일을 불러온다. 2. 외부 서비스에서 제공받은 링크 이용한다. @import 혹은 이용한다. 구글폰트에 접속해 원하는 폰트를 찾으면 된다. @import를 통해서 url불러 온 다음에 적용시킬 태그에 font-family를 입력해준다. @import와 font-family의 경우 구글 폰트에서 복사하면 된다. 폰트 속성 font-size : 폰트 텍스트 크기를 지정한다. font-weight : 텍스트의 두께 지정 text-decoration : underline -> 텍스트에 장식용 선 추가 (l..
🥁 CSS 2023. 1. 22. 01:29
CSS - 상속되는 속성과 안되는 속성 정리

CSS 상속 기본적으로 CSS는 부모 요소의 속성값을 자식 요소에게 상속한다. 하지만, 모든 속성이 상속 되지는 않는다! 왜일까? 상속되는 속성이 있고 아닌 속성이 있기 때문이다. 상속되는 속성 -color -font-family -font-size 등등 상속되지 않는 속성 -padding -margin -border 등등 VSCode 상속 실습 여러 상속 속성이 겹쳤을 때, 무엇이 우선으로 적용될까? 바로, Cascading이란 룰이 그 우선순위를 결정한다.
🥁 CSS 2023. 1. 20. 19:19
CSS flex 요소 정리 - justify-content, align-items

flex : css 레이아웃의 꽃, css 레이아웃 배치에 중점을 두고 고안됨. - 기존 float방식보다 훨씬 더 수월하고 간단하게 레이아웃을 잡을 수 있다. 1. 요소의 속성을 flex로 변경 display : flex - display는 해당요소가 갖고 있는 기본 설정값에 해당되는 특징 자체를 변화 시킬 수 있다. 2. flex-direction 기본 값 : flex-direction : row(행) flex-direction : column(열) 은 row에 수직되는 방향으로 정렬됨. 3. justify-content 중심 축과 같은 방향 정렬 기본 값 : justify-content : flex-start space-between : 균일한 여백을 두고 배치 | space-around : 좌우에..
🥁 CSS 2023. 1. 17. 14:34
이전 Prev 1 2 Next 다음