본문 바로가기

CSS

 (18)
[CSS] width: 100vw; 와 width: 100%; 의 차이 css에서 최상위 요소가 화면을 가득 채우도록 할 때 100%나 100vw를 많이 사용한다(높이는 vh와 %를 많이 사용하고)둘은 별 차이가 없을 것 같지만, 한 가지 큰 차이가 존재한다. vw는 viewport를 기준으로 백분율 계산을 한 단위이다.이 때, 스크롤 바는 고려되지 않는다. 반면, %는 부모 기준으로 가용가능한 공간을 기준으로 백분율로 값을 계산한다.이 때, 스크롤 바는 고려된다. 이게 무슨 말인가.예시를 들어 보자.아래는 style 태그를 같이 넣은 html 코드다. css는 기본적인 reset css만 있다.  이 때, 요구 사항으로 body에 배경 색상 tomato, width와 height는 항상 화면을 가득 채우도록 요청받는다.그럼 아래처럼 구현 가능하다.body { b..
[css, 공용 ui, js] max-height, max-width로 접었다 피는 폴딩 ui 반응형 만들기(% 단위를 사용하지 못할 때) 목적폴딩 ui는 css의 transtion과 max-height, max-width 속성을 이용해서 아주 간단하게 만들 수 있다.문제는 화면의 크기가 가변적인 상황에서 반응형 ui로 만들때인데,ui가 펴지는 상황에서 max-height와 max-width에 퍼센티지(%)를 사용할 수 없는 경우가 있다.이럴 때에는 펴지는 상황의 예상크기를  js로 계산하여 직접 스타일을 주어야 하는데, 그럴 때 사용하는 ui다. 원리이 폴딩 ui는 최초에 접힌 상태로, max-width와 max-height가 0으로 설정되어 있다.우선, 최초에 document가 로드된 시점에 max-width, max-height 제한을 풀어서 ui의 원래 크기로 되돌린다.그리고 이 크기를 변수로 저장한 후 다시 접힌 상태로 스타일을 되..
[ui] 아코디언 ui 만들기 용도다수의 메뉴 박스처럼 데이터 리스트를 접어서 정리할 때 유용한 ui가 아코디언이다.해당 ui는 react와 reset css, css의 class 기반 스타일링으로 이뤄졌다.아래에 소스코드를 첨부했으니 필요하다면 사용하면 된다. app.tsximport Accordion from "./components/accordion/Accordion";// 아코디언 ui용 임시 데이터const menu = [ { id: "00", label: "에피타이저", }, { id: "01", label: "메인 음식", }, { id: "02", label: "디저트", }, { id: "03", label: "음료", }, { id: "04", l..
[css] ul, ol 태그 공부 (+: custom- ul 만들기) 용도ul과 ol은 문단의 시작점(li 태그)에 1,2,3....n, 혹은 ● 같은 리스트 스타일(marker)을 적용할 수 있는 태그이다. 원리ul과 ol의 marker은 list-style이라는 shorthand 설정으로 한번에 설정가능하고, 이는 list-style-type, list-style-image, list-style-position으로 구성된다. 이 중에서 list-style-type, list-style-image은 marker의 형태를 결정하고 list-style-position은 들여쓰기 모드를 결정한다.  display:list-item li에 marker를 표출하기 위한 display 설정   list-style-type  marker의 형태를 string 형태로 적용한다.미리 준..
[css] height:100%를 줬는데 박스가 부모 박스보다 커지면 다음 문제를 체크하자 문제 상황과 해결방안목적 | 레이아웃에서 부모 박스의 높이에 딱 맞는 자식 박스를 만들고 싶음.행위 | 자식 박스에게  height:100%를 줌.예상 | 자식이 부모의 padding을 제외한 높이에 딱 맞게 크기가 설정.실제 | 부모 바깥으로 오버플로우됨.  일반적으로는 height 100%를 하면 당연히 부모의 안쪽에 이쁘게 채워질거라 하는데, 현실은 이렇게 오버플로우가 발생한다.이럴 때는 아래의 css 부분들을 체크하자.부모에 height가 설정되어 있지 않는 경우%단위값은 부모의 동일 속성 값을 상속한다. 부모에 height가 명시되어 있지 않거나 auto로 설정되어 있으면 자식 요소에 height:100%을 설정해도 동작하지 않는다.자식에 box-sizing: border-box;이 아닌 경우b..
[css] letter-spacing 적용 시 중앙 정렬 레이아웃 틀어짐 문제 문제 설명css에서 letter-spacing은 태그 내에 텍스트에서 글자간 간격을 설정한다.그런데 만약 중앙 정렬을 한 텍스트에 이 속성을 사용하면 텍스트가 살짝 왼쪽으로 치우치는 오류가 발생한다.  분석 letter-spacing은 글자마다 오른편에 마치 padding혹은 margin처럼 공백을 부여한다. 그리고 마지막 글자에 부여된 우측 공백으로 인해 전체 텍스트가 letter-spacing 값만큼 왼쪽으로 치우쳐지는 것이다.  해결방법이 문제는 각 방법마다 장단점이 있는데, 내 경우에는 두 가지 방법 중 하나를 골라서 해결했다.  /* 첫 번째 글자에 패딩을 부여 */ & .overlay_chart-title-main::first-letter { padding-left: 0.2rem; }..
[CSS] 절대 단위와 상대 단위 정리 절대단위와 상대단위는 반응형 웹을 구현하기 위한 기본 지식 중 하나이다. 이 글에서는 이들에 대해 간단히 정리한다. 두 단위의 차이 두 단위는 화면의 크기(뷰포트)에 따라 값이 변동되는지의 여부로 구분한다. 절대단위는 뷰포트에 상관없이 늘 일정한 크기를 유지한다. 반면, 상대 단위는 그렇지 않다. 따라서 절대단위는 화면 크기에 상관없이 일정한 크기를 유지해야 할 때 사용하고, 상대 단위는 그 반대의 경우에 사용한다. 여기서는 주로 반응형 웹에 많이 사용되는 상대 단위를 중심으로 알아보자. 절대 단위를 많이 사용하지 않는 이유 px 처럼 익숙한 단위 외에도 pt, cm, mm, in 등 다소 생소한 단위들도 몇 가지 있다. cm, mm, in는 현실에서 사용하는 단위와 동일하지만 화면 상에서는 px 단위로..
[CSS] position:absolute의 독특한 규칙과 문제(padding-area) position:absolute는 동작이 복잡해서 처음 css를 할 때 상당히 골칫거리다. 이 속성은 크게 3가지다. 1. absolute는 fixed와 더불어, 일반적인 문서의 레이아웃 맥락에서 제거되고 독립적인 맥락을 생성한다. 따라서 width처럼 부모로부터 물려받던 부분들을 새로 설정해야 한다. 2. absolute 요소의 최초 위치는 맥락에서 제거되기 전의 위치다. 하지만 위치 비정 속성(top, bottom, left, right)을 사용하면 가장 가까운 상위의 position:relative 요소, 만약 없다면 body를 기준으로 위치가 설정된다. 3. absolute 요소는 부모의 padding-area 왼쪽 모서리를 기준으로 시작한다. 이는 static 요소가 부모의 content-are..

티스토리툴바