개발새발 로그

perspective는 3차원 변환함수에서만 적용된다. 아래는 perspective함수를 사용한 것이다. transform: perspective(300px) rotateY(45deg); - perspective를 적용하지 않으면 아래와 같이 작동함 - perspective는 부모 요소에 적용하는 것이 보편적이다. 원근의 기준을 바꿀 수도 있다. 아래와 같이 x축과 y축을 구성한다. 기본값은 50% 50%이다. perspective-origin : 0 0; - 위 처럼 적용하면 부모요소의 왼쪽 상단에서 item이 변화하는 모습을 볼 수 있다. 주의점 perspective()는 자식요소에만 적용됨 즉 자식의 자식요소에는 적용이 안된다. (후손에 적용이안됨) 이를 해결하기 위해 자식요소에 아래 속성을 추가해..

단위 fr(fraction) 그리드 트랙 사이즈로 사용 되는 fr 단위는 유연한 단위로 그리드 컨테이너의 여유 공간을 비율로 나눠 설정합니다. 퍼센트(%) 단위와 유사해 보일 수 있으나, 퍼센트 값과 다르게 길이가 아닙니다. 그래서 calc() 함수에서 다른 값과 함께 처리할 수 없습니다. min-content grid-template-rows:100px grid-template-columns : repeat(4,min-content); - 한글과 영어의 차이가 있다. - 그래서 아래와 같은 속성을 한글이 적혀있는 item에 적용하면 영어와 같이 띄워쓰기를 기준으로 동작을 하게 된다. .item { ... word-break : keep-all } word-break의 속성 normal 기본 줄 바꿈 규..

이전에 repeat함수를 사용했었다. 만약 반복이 일정하지 않으면 어떻게 할까? 예제 grid-template-columns : 100px 200px 100px 200px; 만약 위와 같이 일정한 패턴이 반복될 때도 아래와 같이 사용이 가능하다. grid-template-columns : repeat(2,100px 200px); minmax() grid-template를 이용해 명시적으로 너비를 지정하면 빈 공간이 생길 수 있다. grid-template-cloumns : 100px 200px 그러면 아래와 같이 minmax()함수를 이용해서 빈 공간을 채울 수 있다. minmax()의 첫번째 인수는 최솟값이고, 두번째 인수는 최대 값이다. grid-template-columns : minmax(100p..

Grid Items 개발자도구에서 위 사진에 있는 grid를 클릭하면 아래와 같이 나오게 된다. -만약 정상적으로 보이지 않는다면 아래 설정을 확인해보자 grid-row-start - 행에서 몇 번 라인에서 grid가 시작할 것인지 지정할 수 있다. grid-row-end - grid-row-start에서 몇 번 라인까지 frid가 끝날 것인지 지정할 수 있다. grid-row-start: 2; grid-row-end: 4; grid-row-start와 grid-row-end의 단축 속성 grid-row : 2 / 4 justify-self와 align-self .itme:nth-child(1){ justify-self : center; aling-self : end; } 그리드 요소 겹치기 - 아래 처..

flex는 1차원 레이아웃 구조를 만들 수 있고, Grid는 2차원 레이아웃 구조를 만들 수 있다. Grid container에서 사용하는 CSS 그리드 사용법 display : grid 인라인 그리드 dsiplay : inline-grid 행과 열 지정하는 방법 grid-template-rows : 100px 100px; grid-template-columns : 200px 200px 200px; 전체 컨테이너의 비율로 행과 열을 지정하는 방법 grid-template-columns: 1fr 1fr 1fr; 위 방식을 간편하게 사용하는 방법 grid-template-columns: repeat(3,1fr); 1fr을 사용하면서 만약 grid요소에 내용이 없다면 grid요소는 자동으로 최소 높이가 지정이..

1차원 레이아웃 구조를 작업할 때 사용(수평정렬, 수직정렬을 할 때 사용한다) 2차원 레이아웃 구조는 Grid와 같은 경우가 있다. display : flex block요소의 특성과 유사 block요소는 수직정렬이 되고, 가로가 최대한 넓어진다. display: inline-flex inline요소의 특성과 유사 inline요소는 수평정렬되고, 가로가 최대한 줄어든다. 사이의 공간은 띄어쓰기 부분이다. flex 컨테이너 자체는 inline요소가 되어있는 것이다. html 요소마다 띄어쓰기를 지우게 되면 아래처럼 붙어서 나오게 된다. flex요소의 주축과 교차축 주축(main-axis) - 주가 되는 축 - flex direction이 row면 x축이 주축이 된다. 교차 축(cross-axis) - 주가 ..

absolute position : absolute 를 사용할 때는 위치의 기준이 될 수 있는 상위 요소에 relative,absolute,fixed, sticky 등을 부여해야 힌다. 만약 position이 지정된 부모가 없다면 계속해서 상위 요소를 탐색하여 찾는다, 없다면 마지막으로 최상위 요소인 body를 기준으로 위치하게 된다. fixed transform 속성이 부여된 부모를 기준을 배치될 수 있는 주의점이 있다. 아래 이미지의 설명을 보자. perspective 3D 위치의 요소 에 원근감을 주기 위해 z=0 평면과 사용자 사이의 거리를 결정합니다. 부모요소에 적용하고 자식요소에서 3차원효과를 주는 속성을 사용하면 된다(transform) 부모 요소에 perspective를 주고, 자식요소에 ..

float 요소의 수평정렬을 위해 많이 사용했지만 flex가 생김으로인해 사용이 많이 줄어들었다. border : 4px solid; border 속성에 색상을 지정안하면 텍스트 색상을 따라간다. float의 주의점 1. float의 마지막요소에 float을 더이상 사용하지않겠다는 해제 속성을 넣어야한다. 만약 넣지 않으면 원하는 방향으로 출력되지않는다. clear: left; 하지만 위 방법은 필요없는 마지막요소가 있어야하기 때문에 적절하지 않다. overflow : hidden; 가상요소 ::after 3. float한 요소는 float한 요소끼리만 있어야 한다. 일치 선택자 div.container{ color : pink; } 선택자와 선택자가 붙어있는 형태를 일치 선택자라 한다. 위 코드는 di..