본문 바로가기

전체 글291

CSS ::before 위치 조정 요소 앞에 가상으로 요소를 만들어 주는 ::before를 사용하는 경우에 위치를 어떻게 조정할 수 있을까? absolute를 사용하여 원하는 위치에 배치할 수 있다. 다만, 아래와 같은 점을 염두하고 사용하는 것이 좋다. before의 display: absolute 사용시 -top/bottom 속성 값이 없는 경우: static 자리에 위치(before가 위치할 자리) -top/bottom 속성 값이 있는 경우: absolute를 사용한 일반 요소처럼 relative인 부모 기준으로 정렬됨 이해하기 위해서 ::before를 사용한 후 위의 속성들을 변경해보면서 위치를 파악해보면 된다. 2020. 5. 27.
CSS 정가운데 간단히 정렬하는법 박스 하나를 영역의 정 가운데에 정렬하려면 어떻게 해야할까? 답은 여러가지가 있겠지만 쉬운 방법은 다음과 같다. position:absolutetop:50%; left:50%;transform: translate(-50%,-50%); 이 방법을 사용할 경우 같은 flow에 있던 요소들이 absolute된 요소를 인식하지 못하므로 주의가 필요하다. 또한, 부모요소에 relative를 걸어주어야 한다. 2020. 5. 27.
CSS media-query 화면 크기에 따라 동적으로 디자인을 변경하는 방법을 반응형 페이지라고 한다. viewport의 개념을 이해해야 하는데 viewport 핵심은 보고있는 페이지의 크기이다. pc는 사용자가 보고 있는 웹브라우저 크기를 조절할 수 있으며 mobile은 웹브라우저의 크기를 변경하기가 어렵다. 자세한 설명은 다음 글을 참조(https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts) 화면에 나타나는 크기에 따라서 css를 달리 쓰고 싶을 때에 @media를 사용한다. 이 때, html 파일에 다음과 같은 종류의 코드를 head에 적어야 된다.() @media screen and (min-width: 1280px) and (max-width: 1920px.. 2020. 5. 27.
CSS transform-origin transform을 사용할 때 시작되는 지점을 지정할 수 있다. rotate의 경우 기본으로 left top 기준으로 시작하는데 tranform-origin: center를 하면 중앙을 기준으로 rotate 시킬 수 있다. 참고 사이트 https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin 2020. 5. 27.

티스토리툴바