본문 바로가기
반응형

CSS8

[CSS] 모바일 브라우저에서 발생한 sticky 하단 고정 오류 버튼이 자유분방하게 움직인다고? 회사에서 업무를 진행하던 도중 놀랍게도 말썽꾸러기인 사파리 환경이 아니라 크롬, 삼성 브라우저에서 이슈가 발생하였다. QA팀 제보로 알게 되었는데, bottom: 0으로 박아두었던 버튼이 자유분방하게 돌아다닌다는 것이다. 놀랍게도 position: sticky / bottom: 0px 의 조합으로 구현된 footer버튼이 전혀 예상하지 못한 방향으로 동작하였다. 원인 파악 사실 이 글을 작성하는 시점에서도 정확한 원인을 알 수 없다는 게 좀 슬프다. 단지, 브라우저의 뷰포트를 잘못 인식하는게 아닌가 "추측"만 할 뿐이다. 특히 이는 본문 시작할 때 언급한 것 처럼 크롬, 삼성브라우저 중에서 유독 삼성브라우저에서 재현이 잘된다. 크롬의 경우에는 "특정 버전"에서만 stick.. 2024. 3. 22.
[CSS] aspect ratio - 요소 가로세로 비율 지정하기 aspect-ratio? 언제 나왔는지는 모르겠으나 과거에는 css에서 비율로 요소를 조절할 수 없었다. 하나 이제부터 aspect-ratio 속성을 사용하여 비율을 지정할 수 있게 되었다. aspect-ratio 속성은 주로 이미지나 동영상을 비율대로 줄이거나 늘리는데 활용되며 매우 직관적인 특징이 있다. 해당 속성으로 인해여 이제 요소를 width/height로만 지정하던 시대가 저물지 않을까 싶다. 일반적인 사용방법은 다음과 같다. aspect-ratio: 1 / 1; aspect-ratio: 1; /* fallback to 'auto' for replaced elements */ aspect-ratio: auto 3/4; aspect-ratio: 9/6 auto; /* Global values *.. 2024. 2. 15.
[CSS] 글자를 줄 바꿈 없이 한 줄로 표현하기 (ft. white-space/overflow/text-overflow) CSS를 통해 텍스트 글자를 줄 바꿈 없이 한 줄로 표현하는 방법에 대해 알아보자. 보통 글자가 길면 자동 줄바꿈이 일어나 표현되고는 하는데, 만약 칸의 여유가 없고 디자인적으로도 넘치는 부분을 잘라내고 한 줄로만 표현하고자 한다면 이는 javascript를 사용하지 않고도 css만으로도 표현이 가능하다. 가장 흔하게 알려진 방법으로는 이 아래 3가지 속성을 주로 사용하여 제어를 하는 방법이다. white-space : 요소 내부의 공백을 처리하는 방법에 대한 설정 ( normal|nowrap|pre|pre-line|pre-wrap|initial|inherit ) text-overflow : 공백 문자를 처리하는 법 즉, 표시되지 않은 오버플로된 콘텐츠를 사용자에게 알리는 방법에 대한 설정이며 잘리거나 .. 2023. 1. 7.
[CSS] CSS vs CSS-in-CSS vs CSS-in-JS CSS CSS(Cascading Style Sheets)에 대해서는 다들 어느 정도 알거라 생각된다. CSS-in-CSS 와 CSS-in-JS에 알아보기 전에 왜 CSS를 사용하다가 CSS-in-CSS와 CSS-in-JS가 등장했는지에 대해 알아보자. CSS는 지금까지 사용하면서 명확한 단점이 존재했었다. 모듈화가 어렵다. 클래스 이름의 최소화 문제 (방법론을 사용하면 어느 정도 해소는 되겠으나 완전한 해결은 아닌 듯하다.) CSS의 우선순위를 파악하기 어렵다. 뭐 그 외에도 여러 단점들이 존재하겠지만 당장 생각나는 건 이 정도이다. 그래도 요즘 CSS 같은 경우 매우 많은 업데이트를 해왔기 때문에 변수 사용, 중첩(nesting) 사용 등 많이 편리해지거나 편리해질 예정이라는 점에는 부정할 수 없다. .. 2022. 10. 26.
[CSS] CSS 방법론이란? (ft. OOCSS / BEM / SMACSS) CSS 방법론 CSS 방법론이란 CSS를 어떤 방법으로 구성하면 더 효율적으로 구성할 수 있는가에 대한 방법론이다. 즉, 쉽게 말하면 CSS에서 클래스 네임을 쉽게 정의하기 위한 일종의 규칙이라고 생각하면 될 것 같다. CSS방법론을 사용하는 이유는 뭘까? 원활한 유지보수 코드의 재사용성 클래스명으로도 무슨 내요인지 예측 가능 확장 가능 그리고 CSS 방법론에는 크게 OOCSS, BEM, SMACSS로 나뉘어 있다. OOCSS OOCSS(Object Oriented CSS)는 CSS를 모듈 방식으로 작성하여 중복을 줄이는 방식의 방법론이다. 실제로 가장 많이 쓰이는 방법론이라고 볼 수 있는데, 나 역시 현업에서 프로젝트를 진행할 때 OOCSS 방법론을 많이 사용하였다. 주요 원리는 구조와 스타일을 분리해.. 2022. 10. 26.
[CSS] Reset.css 와 Normalize.css란? 등장 배경 브라우저마다 제공하는 user agent style이라는 게 존재하는데, 말 그대로 브라우저별 스타일 기본값이라고 생각하면 된다. 브라우저 별로 모두 일관된 스타일을 제공해줘야 하는 입장에서 이 기본 스타일이 브라우저별로 다르다는 점은 참으로 불안한 상황이다. 그래서 나온 전략으로 reset.css 와 normalize.css라는 게 등장하였다. reset.css 이름 그대로 모든 브라우저의 형태에서 기본으로 제공하는 스타일을 전부 없애버린 초기화 기법이다. 아무래도 가장 유명한 기법이었는데, 마지막 업데이트 날짜가 2011년인 것을 보면 오래된 자료이기도 하고, 유용한 스타일까지도 초기화해서 비효율적이다 라는 말이 많이 나온다. Eric Meyer의 reset.css normalize.css.. 2022. 6. 13.
[CSS] 사용자 지정 변수(Variable) 사용하기 CSS에서도 사용자 지정 변수를 사용할 수 있는데, 이는 JS 같은 곳과 마찬가지로 문서 전반적으로 재사용할 임의의 값을 변수에 담아 사용하는 것과 동일하다. CSS에서 변수를 사용하는것도 처음부터 가능했던 건 아니라, CSS preprocessor(전처리기)의 등장으로 변수를 많이들 사용하다 보니까 이게 CSS 표준으로 들어오게 된 것이다. 아마 추후에는 전처리기에서 사용하는 기능들이 하나씩 표준으로 들어오지 않을까 생각된다. 이제 예제를 통해 사용법을 하나씩 알아보자. 1. 기본 사용법 사용자 지정 변수는 두 개의 붙임표(--)로 시작하는 속성의 이름과 함께, 유효한 CSS 값이라면 아무거나 그 값으로 지정해 선언한다. Here is id div-01 Here is class div-03 Here i.. 2022. 6. 11.
[CSS] 스크롤바 스타일 커스텀하기 CSS를 통해 스크롤바 스타일을 커스텀하는 방법에 대해 알아보자. 스크롤바 스타일에 대한 웹표준은 존재하지 않으며 webkit 브라우저에 한해서 커스텀이 가능하며, 스크롤을 커스텀하는데 주로 아래 3가지를 사용한다. ::-webkit-scrollbar : 스크롤바 전체 영역에 대한 설정 ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정 ::-webkit-scrollbar-track : 스크롤바 뒷 배경에 대한 설정 그 외에도 몇가지가 존재하는데 자세한것은 본문 하단에 참고 사이트를 확인해보고, 이제 저 3가지를 활용한 예제 코드를 살펴보자. /* 스크롤바 설정*/ .box2::-webkit-scrollbar{ width: 6px; } /* 스크롤바 막대 설정*/ .box2::-.. 2022. 6. 8.
반응형
TOP

티스토리툴바