본문 바로가기
반응형

HTML+CSS35

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.
z-index를 한 눈에 보여주는 - DevTools z-index z-index를 한 눈에 보여주는, DevTools z-index 웹 사이트를 만들다보면, 혹은 유지보수를 하다보면, 수 많은 작업자의 손을 거쳤던 웹사이트의 경우 z-index 속성이 어지럽게 얽혀 있는 경우가 많습니다. 왜냐하면, z-index를 999나 9999처럼 편의에 의해 높게 사용하는 경우가 발생하기 때문입니다. z-index를 대충 사용해서 결과물을 만드는 것은, 당장에는 당면과제를 쉽게 해결을 할 수 있는 방법이 될 수는 있을지 몰라도, 장기적으로 보면 내 뒤에 오는 미래의 작업자에게는 상당히 불편한 상황을 초래할 수 있는 일이기도 합니다. 웹문서에 적용된 z-index를 한눈에 볼 수 있는 방법이 없을까? 하는 지점이 생기게 마련인데요, 바로 이럴 때 DevTools z-index라는 .. 2023. 2. 6.
반응형

티스토리툴바