본문 바로가기

개발40

변환(2) 지난 시간에 배웠던 transform 속성의 값으로 사용되는 변환 함수 중 관찰 대상의 원근 거리를 지정하는 perspective 함수를 알아보았다. 이번 시간에 배울 perspective 속성은 함수가 아니라 속성이다. perspective 함수가 관잘 대상의 원근 거리를 지정하는 함수였다면, perspective 속성은 하위 요소를 관찰하는 원근 거리를 지정하는 속성이다. 원근 거리를 적용하는 대상이 다르다. perspective 속성은 관찰 대상의 부모에 원근 거리를 적용하며, perspective 함수는 원근 거리를 관찰 대상에 직접적으로 부여한다. 기준점이 관찰 대상을 기준으로 적용되느냐, 관찰 대상의 부모 요소를 기준으로 적용되느냐의 차이이다. 주관적인 판단이긴 하지만 perspective 함.. 2023. 1. 9.

변환(1) transform transform의 속성은 값으로 여러가지 변환 함수를 띄워쓰기로 구분하여 다양하게 활요할 수 있다. transform의 속성 값으로 사용할 수 있는 변환 함수의 종류로는 원근법, 이동, 크기, 회전, 기울임을 통제하는 변환 함수들이 있다. transform에 사용할 수 있는 변환 함수는 크게 2차원 변환함수, 3차원 변환함수 이렇게 2가지 종류로 나뉜다. translate는 이동을 담당하는 변환 함수로 인자로 x축, y축으로 얼만큼 이동시킬 것인지 명시해주어야 하며 단위는 px(픽셀)이다. scale 함수는 요소의 크기를 늘려주는 변환 함수로 인자로 몇 배를 늘릴 것인지 명시해주며 단위는 없다. 보통 한 쪽 방향으로만 크기를 키우는 경우는 잘 없기 떄문에 scaleX, scaleY 함.. 2023. 1. 9.

전환 hover이나 active등의 가상 요소 선택자를 사용하여 요소가 선택되었을 때만 스타일을 적용할 수 있게 된다. 그러면 특정 요소가 선택되었을 때 기존의 스타일에서 새로운 스타일로 전환하게 되는데, 이때 자연스럽게 전환되도록 보이게 하기 위해서 transition이라는 속성을 사용할 수 있다. transition 요소의 전 상태와 후 상태를 자연스럽게 만들어주는 전환 효과를 지정하는 단축 속성이다. 단축 속성이라는 것은 그것에 해당하는 개별적인 속성이 있다는 뜻이다. 그 중에서 지속시간을 명시하는 transition-duration 값은 반드시 명시해주어야 하는 필수 포함 속성이다. 1. transition-property 전환 효과를 적용할 속성의 이름을 지정하는 속성으로 기본 값은 all 이다. 그.. 2023. 1. 9.

플렉스(정렬) items 여기서 살펴볼 속성들은 플렉스 컨테이너가 아닌 아이템에 적용되는 속성들이다. order Flex item들의 정렬되는 순서를 지정해줄 수 있다. 기본적으로 0이라는 값이 들어있으며 이는 순서가 없음을 의미한다. 기본값이 적용된 item보다 더 앞에 배치하기 위해서는 order값을 음수로 지정해주면 된다. HTML 구조를 변경하지 않고도 order 속성만을 이용해서 아이템들의 순서를 바꿀 수 있다는 장점이 있다. 숫자가 작을 수록 앞에 배치되는 것을 확인할 수 있다. flex-grow 요소가 증가하는 비율 기본적으로 값이 0으로 설정되기 때문에 flex-grow 속성값을 별도로 지정해주지 않으면 요소는 늘어나지 않는다. item들의 flex-grow 속성 값을 1로 지정해주면 세 요소에 모두 값이 1로 적.. 2023. 1. 9.

플렉스(정렬) Container(2) flex-wrap 요소들의 줄바꿈 여부를 설정하는 속성 기본적으로는 nowrap으로 설정되어 있어 줄 바꿈이 허용되지 않는다는 뜻이다. 줄 바꿈을 허용하지 않으면 item이 container를 튀어나가려고 하면 item을 찌그러트려서 어떻게든 한 줄에 담으려고 하게 된다. flex-wrap 속성의 값을 wrap으로 해서 줄 바꿈을 허용하면 item이 container를 나가려고 하면 자동으로 줄바꿈을 하게 된다. justify-content 주 축의 정렬 방법을 결정. 우리는 대부분 flex 정렬을 수평 정렬을 하기 위해 사용하기 때문에 대부분 수평 정렬의 방법을 결정하기 위해 사용된다고 생각하면 된다. 이때 item들의 순서는 변경되지 않는다. => 주의할 점은 오른쪽 정렬을 한다고 해서 right를 .. 2023. 1. 8.

플렉스(정렬) Container(1) 플렉스 정렬이란? : 수직이든 수평이든 1차원의 하나의 축을 가지고 정렬을 하는 개념. 하지만 대부분 수평 정렬을 하는데에 사용된다. 블록 요소는 기본적으로 수직 방향으로 쌓이기 때문에 아무런 설정이 없으면 수직 방향으로 블록이 쌓이는 것을 볼 수 있다. 하지만 display 속성의 값으로 flex를 주게 되면 블록이 수직 방향이 아닌 수평 방향으로 정렬된다. 부모 요소의 display 속성 값을 flex로 선언하면, 블록들은 수직이 아닌 수평 방향으로 쌓이게 된다. 이때 flex 값이 부여된 부모 요소는 container가 되고 그 요소의 자식 요소들은 item이 된다. Container와 Item에 대한 개념이 왜 필요하느냐? container에 부여할 수 있는 속성이 따로 있고, 마찬가지로 item.. 2023. 1. 8.

배치(3) CSS에서 배치와 관련해서 position 속성을 사용한 요소는 display라는 속성이 자동으로 변경될 수 있다. position 속성의 값으로 absolute, fixed 를 가지는 요소는 display 속성이 자동으로 block 으로 변경된다. position 지정 속성이 absolute로 바뀌는 것과 번외로 span 요소의 display 속성 값이 자동적으로 block으로 변경되어, 원래는 인라인 요소이지만 가로 세로 너비를 지정할 수 있게 된다. 이러한 경우에는 따로 display: block; 이라는 값을 지정해주지 않아도 됨. 2023. 1. 8.

배치(2) 만약 요소를 뷰포트를 기준으로 배치하고 싶다면, 이전 글에서 작성한 대로 position을 absolute로 작성한 후 모든 부모 요소들의 position을 static으로 작성해야만 할까?? 아니다. fixed 속성 값을 사용하면 부모 요소가 어떤 position 값을 가지고 있든 뷰포트를 기준으로 요소를 배치하게 된다. 그리고 뷰포트를 기준으로 요소를 배치하기 때문에 스크롤을 내리더라도 계속 같은 위치에 배치되어 있는 것을 볼 수 있다. 그렇기 때문에 스크롤을 내려도 항상 사용자에게 보여져야하는 요소들은 position: fixed를 이용해서 배치하면 되겠다. 만약 여러 요소들이 겹쳐지게 되면 어떤 요소가 위로 올라오게 될까? 1. 먼저 position 속성이 부여된 요소가 제일 위로 올라오게 된다... 2023. 1. 8.

배치(1) 우리는 position이라는 속성을 통해 요소를 원하는 위치에 배치할 수 있다. 이때 top, bottom, left, right 라는 속성을 통해서 떨어진 정도를 지정할 수 있는데 이때 어디를 기준으로 해서 요소를 배치할까?? 1. relative 요소 자신을 기준으로 요소를 배치한다. relative라는 속성 값을 부여한 다음 위치를 배치하게 되면, 원래 자신의 위치를 기준으로 배치된다. 이때 배치 전 원래 요소가 존재했던 자리는 비어있는 상태로 유지가 된다. 그래서 2번이 있었다는 사실을 모른 채로 요소의 배치를 보게 되면 1번과 3번이 붕 떠서 떨어져있기 때문에 왜 그 사이에 공간이 발생했는지 알 수 없다. 그렇기 때문에 실제에서 relative 속성을 사용해서 요소를 배치하는 경우는 잘 없다. .. 2023. 1. 8.

이전 1 2 3 4 5 다음

티스토리툴바