HTML,CSS (6) 썸네일형 리스트형 css 속성 css 속성에는 초기 값 브라우저는 기본 폰트 사이즈를 각각 16px 정도로 지정한다. 백분율 및 상대 값은 항상 픽셀(px)로 변환된다. 백분율은 부모의 폰트 사이즈를 기준으로 사용한다. em로 글꼴을 지정할 때는 부모의 글꼴 크기를 기준으로 측정된다. em으로 길이을 지정할때는 현재의 글꼴 크기로 변경된다. rem은 문서의 루트 글꼴 크기도 변경된다. vh, vw는 단순히 백분율 측정값이다. css의 상속 상속은 속성 값을 전파하는 방법이다. 상속은 부모에서 자식에게 일부 특정 속성에 대세 값을 전달한다. 상속은 폰트 패밀리, 폰트 사이즈, 색상 등등 이 관련되어 있다. margin, padding등은 상속이 되지 않는다. Rem단위 rem단위를 쓰는 이유, 모든 측정값을 변경하려면 간단한 설정 하나.. CSS - transform-origin transform-origin transform-origin은 transform의 변형 기준점을 지정하는 속성이다. transform의 변환 원점 기준점은 기본적으로 가운데 (50%,50%) 이다. 그러나 transform-origin을 이용하면 x,y축의 원점을 변경할 수 있다. 기본 속성 : transform-origin: x, y 설명 x : left | center | right | % | px 사용가능 y : left | center | right | % | px 사용가능 transform-origin을 이용하려면 transform과 함께 사용해야 한다. See the Pen Untitled by dahye (@dahyekim0311) on CodePen. CSS - transform 속성 정리 transform 속성은 이미 만들어진 태그, 혹은 이미지를 늘리거나 회전시킬때 사용 translate(이동) translate는 x축 과 , y축으로 지정한 값만큼 이동시킨다. See the Pen Untitled by dahye (@dahyekim0311) on CodePen. translate z 축? See the Pen Untitled by dahye (@dahyekim0311) on CodePen. perspective(원근법) 속성 perspective는 3D 장면의 깊이가 렌더링 되는 방법을 정의한다. viewer에서 대상까지의 거리라고 생각하자. 값이 클수록 거리가 멀어진다. 요소에 perspective속성을 정의 할때, 원근법 view를 가져오는 것은 자식 요소이다. scale (늘리고.. CSS- left: 50%; transform: translateX(-50%); 왜 left: 50%; transform: translateX(-50%); 으로 요소의 중심을 맞추는가? - css left 속성은 부모요소의 사이즈를 기본으로 한다. transform 속성은 타겟된 요소의 사이즈에 기초를 둔다. 간단한 예시로 이해해보자. See the Pen Untitled by dahye (@dahyekim0311) on CodePen. 위와 같이 .child의 요소가 부모요소 기준점으로 50%씩 이동하면 다음과 같이 기준점 기준으로 중앙정렬이 되었음. 아래 그림과 같이 가운데 위치만큼 이동을 해줘야한다. 다음과 같이 자식 요소에 transform:translate(-50%, -50%); 구문을 추가하면 정확하게 가운데 정렬이 된것을 확인 할 수 있다. See the Pen Unti.. CSS-Animation - @keyframes 같은 자리에서 무한으로 (infinite) 도는 animation기능이다. 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정 함으로써 css애니메이션 과정의 중간 절차를 제어할 수 있게 한다. 더 세밀하게 중간 동작들을 제어가 가능하다. keyframes 와 같은 메서드를 사용해서 어디에서 어디로(from - to) 어떤 모양에서 어떤 모양으로 이동할 지 정해준다. @keyframes 문법 @keyframes name { 0% { ... } n% { ... } 100% { ... } } name : 애니메이션의 이름을 정합니다. 0% : 시작할 때의 모양을 정합니다. 0% 대신 from을 사용해도 됩니다. n% : n%일 때의 모양을 정합니다. 100% : 끝날 때의 모양을 정.. project 1 - Foods 학습 정리 vh 와 vw 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻 반응형 웹디자인 기술은 %에 의존, 하지만 css의 %값이 모든 문제를 해결하지는 않음. css의 너비 값은 가장 가까운 부모 요소에 상대적인 영향을 받음. 너비값과 높이값을 부모요소의 너비값의 뷰포트에 맞게 사용할 수있는 것이 vh vw단위이다. vh의 높이값은 100/1의 단위이다. 예를 들어 브라우저의 높이 값이 900px 일때 1vh는 9px 이다. justify-content(메인축 방향 정렬) space-evenly 아이템들의 사이와 양 끝에 균일한 간격을 만들어 줍니다. 주의! IE와 엣지(Edge)에서는 지원되지 않습니다. 출처: https://studiomeal.com/archives/197 이번에야말로 CSS.. 이전 1 다음
