본문 바로가기
반응형

HTML+CSS36

Interactive의 시작, transition 속성 1/2 - duration, delay Interactive의 시작, transition 속성 1/2 - duration, delay html을 이용해서는 주로 문서의 레이아웃을 구성한다고 이전 포스팅에서 정리를 해보았습니다. 레이아웃은 주로 static한 형태로서의 웹문서의 구성과 배치를 의미하게 되는데요, 보다 생동감 있은 interactive한 움직임을 표현하려면 반드시 transition 속성이 필요하게 됩니다. transition 속성을 부여하면 html 문서에서는 마치 마법 같은 일이 벌어지기 때문에 많은 사람들이 좋아합니다. 저 또한 역시 그렇습니다. transition을 자유자재로 다룬다는 것은 아주 흥미로운 일이 되기 때문입니다. 이번 포스팅에서는 다채로운 transition의 기본적인 내용들을 함께 살펴보면서, transit.. 2023. 3. 23.
Position 속성 정리(static, relative, absolute, fixed, sticky 비교) Position 속성 정리(static, relative, absolute, fixed, sticky 비교) HTML과 CSS를 학습하다 보면, 결국 document의 레이아웃을 잡는 문제로 귀결되는 경우가 많습니다. 레이아웃을 구성하는 단계에서 가장 기본적으로 맞딱뜨리게 되는게 position 속성이 될텐데요, 이번 포스팅에서는 원하는 엘리먼트를 레이아웃에 적절하게 배치하기 위한 position의 기본 적인 속성에 대해서 정리해보기로 합니다. 예제 코드 position 속성 Static Live Server를 실행해보면, 아래와 같은 형태에서 position에 대한 속성들을 살펴보기로 합니다. position : static css에 아래의 코드를 추가해봅시다. #static #middle { posi.. 2023. 3. 21.
em과 rem의 차이점 em과 rem의 차이점 CSS에서는 다양한 단위를 사용하여 요소들의 크기와 위치를 정의합니다. 그 중에서도 em과 rem은 상대적인 단위로, 요소의 크기를 상위 요소에 대한 비율로 정의합니다. 이번 글에서는 em과 rem의 차이점에 대해 살펴보고, 어떤 경우에 어떤 단위를 사용하는 것이 적합한지 알아보겠습니다. em em은 현재 요소의 글꼴 크기에 대한 상대적인 크기를 정의하는 단위입니다. 이는 부모 요소의 글꼴 크기를 기준으로, 현재 요소의 크기를 설정하며, 부모 요소가 바뀌면 자식 요소의 크기도 변경됩니다. .parent { font-size: 16px; } .child { font-size: 1.5em; /* 부모 요소의 글꼴 크기의 1.5배 */ } 위의 코드에서, .parent 요소의 글꼴 크기.. 2023. 2. 28.
float를 이용한 탭 메뉴 버튼 만들기 - Part 1 float를 이용한 탭 메뉴 버튼 만들기 - Part 1 HTML/CSS를 이용해서 Tab Menu 버튼을 만들어 봅시다. 바로 이런 거요. 쇼핑몰 상품설명 상세페이지에서 흔히 볼수 있는 형태입니다. 저의 입장에서라면 사실 flex를 이용하는 게, 익숙치 않은 float를 사용하는 것보다 훨씬 더 직관적이고 쉬울듯 하지 않을까라는 생각이 들기도 하지만, 다른 사람이 만들어 놓은 결과물을 수정해야 하는 경우도 있으니, 이 참에 먼저 float를 이용하여 만든 탭 메뉴에 익숙해질 수 있도록 포스팅을 통해 정리를 합니다. html 뼈대 구성 뼈대가 되는 html은 다음과 같이 ul, li를 이용해서 메뉴 형식으로 구성했습니다. 하단 각각의 div는 각 탭을 눌렀을 경우에 보여주거나 숨길 설명 내용입니다. 물론.. 2023. 2. 12.
반응형

티스토리툴바