CSS의 float: center라는 것은 없지만, 마치 HTML 요소들을 가로 가운데 정렬을 하는 효과를 줄 수 있는 것처럼 효과를 줄 수 있습니다. 이는 여러 방법으로 구현할 수 있지만, 이 포스트에서는 가장 기본적인 방법이 테두리선 가이드 전략에 대해서 알아봅니다.
CSS로 글자를 세로 가운데 정렬시킬 수 있는 방법에 대해서 이야기합니다. 가로 가운데 정렬은 쉬운 반면, 세로 가운데 정렬은 조금의 작업이 더 필요합니다. 각각의 구현방법의 장단점을 알아봅시다.
CSS width와 height 기본 속성값 중 auto에 대해서 알아봅니다. auto로 설정되었을 때 HTML 요소를 이동시킬 때 에러가 발생할 수 있는 경우에 대해서 알아봅니다. 특히 top과 transform: translate의 동작에 차이점 있는데, 이 점에 대해서도 다뤄집니다.
정해진 HTML요소들의 순서를 CSS만을 이용하여 바꿀 수 있습니다. 이 포스트에서는 이렇게 해야하는 경우들에는 무엇이 있는지, 그리고 어떻게 구현할 수 있는지 다뤄집니다.
float은 div와 같은 block 요소들을 한 줄에 나란히 배치할 때 사용한다. 정렬 방식은 왼쪽 또는 오른쪽으로 할 수 있다. 특히 float을 사용할 때 주의할 점은, 영역분리를 하여 그 다음에 따라 오는 요소들과 분리하는 것이 필요하다.
>> CSS 목록 << 시작하기 앞서 어떻게 작동하는지 보기위해서, 아래에 있는 레드박스에 마우스를 올려보자. (스마트폰에선 터치) Transition No Transition 1. 레드박스 예제 transition은 CSS의 적용을 한번에 적용하는게 아니라 시간을 두고 천천히 적용시키는 것이다. 이를 적절히 잘 이용하면 홈페이지를 더 고급(?)진 느낌으로 만들 수 있다. 고급예제는 뒤로 하고 먼저 기본적인 프로퍼티를 보면, 다음과 같다. transition-duration (몇 …
