범데이의 개발노트 📄

CSS 우선순위를 이해했다고 해서 실전에서 모든 충돌을 해결할 수 있는 건 아니다.특히 수십~수백 개의 CSS 파일이 섞여 있는 레거시 프로젝트에서는 "어디서 온 스타일인지 찾는 것" 자체가 가장 큰 문제다. 이 포스팅에서는 복잡한 실무 환경에서 CSS 우선순위 문제를 관리하고 해결하는 실제 전략만 모아 정리했다.(혹시 CSS 우선순위에 대한 기본 개념이 부족하다면, 이 포스팅을 먼저 보는 것을 추천한다.) 1. 어디서 적용되는 스타일인지 빠르게 찾는 방법실무에서 가장 중요한 건 출처 추적이다. 1) Chrome DevTools "Computed" 패널 활용 요소를 검사하고 "Computed" 탭을 보면:현재 적용된 스타일어떤 파일 / 몇 번째 줄에서 왔는지우선순위 승패 여부까지 모두 확인 가능하다. 2..

HTML에서 어떤 스타일이 최종적으로 적용되는지 헷갈린다면,이 포스팅 하나로 모두 정리할 수 있다. 1. CSS 우선순위란?HTML 요소에 여러 CSS 규칙이 동시에 적용될 경우, 브라우저는 특정 규칙을 선택해 적용한다.이때 어떤 규칙을 우선할지 결정하는 기준이 바로 우선순위(Specificity & Cascade) 이다. CSS 우선순위는 다음 4가지 요소로 결정된다.중요도(!important)명시도 (Specificity)소스(origin)와 선언 위치선언된 순서 (Order) 각 요소별로 자세히 정리해보자. 2. 우선순위 1순위: !important동일 속성끼리 충돌할 때, !important는 모든 요소보다 우선한다..box { color: red !important;}단, !importan..

이 포스팅은 dev.to사이트를 둘러보다가, 참고하면 좋을만한 CSS관련 포스팅이 있어서 영어 원문에서 번역하여 작성하였다. (원본 포스팅) 대부분의 웹 개발자가 하는 일반적인 실수들과 이를 식별하고 피하는 것이 더 나은 웹 개발과 유용한 코드 작성을 도울 수 있는 방법에 대한 내용이다. 1. Shorthand 사용 CSS의 Shorthand는 여러 속성의 값을 동시에 설정할 수 있는 CSS 속성 그룹이다. 이 값들은 공백으로 구분된다. 예를 들어, border 속성은 margin-top, margin-right, margin-left 및 margin-bottom 속성을 대표하는 Shorthand이다. // Shorthand를 사용하지 않는 경우 .example { margin-top: 10px; mar..

1. 개요 때는 웹사이트를 개발할 때였다. 데스크탑 환경에서는 잘 보이던 글씨가, 모바일 환경에서는 너무 크게 보이는 문제가 있었다. 이를 해결하기 위해 font-size의 단위를 vw로 바꾸어주었더니, 글씨가 다음과 같이 보여지게 되었다. 당연하게도, 고정값을 지정하는 em단위를 상대적 크기 단위인 vw로 지정하니, 위와 같이 작아진 mobile해상도에서는 글씨가 알맞게 작게 보여지게 되었다. 그렇다면 오늘은 크기를 지정하는 단위 중 vw, wh가 무엇인지 알아보자. 2. vw와 vh vw = viewport width vh = viewport height viewport란 화면 Display상의 표시 영역을 뜻한다. 즉, vw와 vh는 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환한다. 100..

반응형 웹디자인이 대두되면서 점점 많은 웹사이트들이 em과 rem라고 불리는 CSS단위를 이용해서 스타일링이 되고 있다. 이번 포스팅에서는 상대 단위가 뭔지, em과 rem단위가 실제로 브라우저에서 어떻게 동작하는지 정확히 알고 좀 더 적재적소에 사용하는 방법에 대해 알아보고자 한다. 1. 상대 단위란? 상대(relative)단위란 고정되지 않고 어떤 기준에 따라 유동적으로 바뀔 수 있는 길이를 나타내는 단위이다. 본 포스팅에서 다룰 em, rem을 포함해 %, vw, vh등이 대표적인 CSS의 상대 단위이다. 반면 절대(absolute)단위는 어떤 상황에서든 항상 고정된 길이를 나타내는 단위이다. 대표적으로 예전부터 현재까지 많이 사용되는 px와 pt를 들 수 있고, cm나 in와 같은 실생활에서 많이..

1. 개요 웹페이지를 개발하다보면 table을 그리면서 스크롤을 구현할 때가 있다. 다음 예제를 보며 따라해보자. HTML 삽입 미리보기할 수 없는 소스 한 테이블이 있고, 행의 수가 5개이다. 가령 이 테이블이 들어갈 공간이 매우 협소하여 150px높이 내에 이 테이블을 그려줘야 한다고 가정해보자. 그렇다면 열머리의 높이는 고정이나, 테이블의 행 수에 따라 tbody는 늘어날 것이기 때문에 높이값을 제한해줘야 한다. 2. 스크롤 적용 다음과 같이 table의 tbody의 max-height값을 지정해 주고, overflow-y를 scroll로 지정해주어 넘는 높이는 스크롤로 볼수있게 해준다. table tbody { display: block; max-height: 100px; overflow-y: s..

1. 가상요소 란? - 가상 클래스(Pseudo-Class)는 별도의 클래스를 지정하지 않아도 지정한 것처럼 요소를 선택할 수 있다. - 가상 요소는, 각상 클래스처럼 선택자(selector)에 추가되며, 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능하다. 아래 간단한 예제를 살펴보자. HTML 삽입 미리보기할 수 없는 소스 first-child(가상클래스)- class를 지정하지 않아도 li의 첫번째 자식요소를 선택하여 제어할 수 있다. first-letter(가상요소) - li 내의 첫번째 글자를 감싸고 있는 요소가 없어도 있는 것과 같이 제어해줄 수 있다. 대표적으로 사용되고 있는 가상요소들은 아래와 같다. 요소 소개 ::first-line 요소의 텍스트에서 첫 줄에 ..