본문 바로가기

StyleSheet/CSS

(29)
[CSS] 타이포그래피(Typography) 인터넷에 존재하는 정보의 90% 이상은 '텍스트'로 이루어져 있습니다. 화려한 비디오와 이미지들이 시선을 끌 수는 있지만, 결국 사용자가 그 웹사이트에 머무르며 정보를 습득하고 구매 버튼을 누르게 만드는 최종적인 설득의 매개체는 잘 정돈된 글씨(Typography)입니다. 종이 출판물 시대부터 이어져 온 타이포그래피의 엄격한 규칙들은 웹으로 넘어오면서 모니터 픽셀과 브라우저 렌더링이라는 새로운 변수를 만나 더욱 고도화되었습니다. 주니어 프론트엔드 개발자들이 흔히 font-size나 대충 키우고 font-weight를 굵게 만드는 것으로 글꼴 디자인을 끝냈다고 착각하지만, 진짜 전문가들은 줄 간격(Line Height)의 미세한 황금비율을 계산하고, 외부 웹 폰트가 로딩될 때 발생하는 끔찍한 '깜빡임 현상..
[CSS] Color & Background 웹사이트에 처음 접속한 사용자가 이 사이트가 트렌디한지, 신뢰할 만한지, 아니면 10년 전에 만들어진 낡은 사이트인지 판별하는 데 걸리는 시간은 0.05초(50 밀리초)에 불과하다고 합니다. 텍스트를 읽기도 전에 우리의 뇌는 화면의 '색상(Color)'과 '배경(Background)'이 뿜어내는 분위기를 본능적으로 스캔하여 결론을 내려버립니다. 프론트엔드 개발자가 레이아웃과 단위를 아무리 기가 막히게 짜놓아도, 버튼 색상이 촌스러운 순수 빨간색(red)이거나 배경 이미지가 찌그러져 있다면 그 프로젝트는 처참하게 실패한 것입니다. 웹에서의 색상은 단순한 미적 장식이 아닙니다. 클릭을 유도하는 심리적 넛지(Nudge)이자, 다크 모드를 전환하는 아키텍처의 핵심 데이터입니다. 이번 04단계 포스팅에서는 컴퓨터..
[CSS] 단위(Units) 완벽 가이드 웹 디자인을 시작할 때 우리가 가장 먼저 집어 드는 무기는 픽셀(px)입니다. width: 300px;, font-size: 16px; 등 직관적이고 절대적인 수치를 제공하는 px은 포토샵이나 일러스트레이터 같은 고전적인 그래픽 툴에 익숙한 디자이너와 개발자들에게 엄청난 안도감을 줍니다. 하지만 모던 웹 개발의 세계로 깊숙이 들어가는 순간, 이 '절대적인 고정 단위'는 반응형 웹(Responsive Web)과 웹 접근성(Accessibility)을 파괴하는 거대한 족쇄로 돌변합니다. 사용자가 손바닥만 한 아이폰으로 접속하든, 거대한 32인치 4K 모니터로 접속하든 똑같이 300px의 크기를 고집하는 요소는 필연적으로 화면 밖으로 잘리거나 현미경으로 봐야 할 만큼 작아지는 촌극을 빚어냅니다. 현대 프론트엔..
[CSS] Box Model - 브라우저가 세상을 바라보는 네모난 시선 웹 개발에 입문하여 CSS로 글씨 색깔도 바꿔보고 배경색도 칠해보다 보면, 문득 "이제 버튼들을 옆으로 나란히 배치해 볼까?" 또는 "이 사진과 텍스트 사이의 간격을 좀 띄워볼까?" 하는 시도를 하게 됩니다. 그리고 이때부터 끔찍한 절망이 시작됩니다. 분명히 간격을 10px 주었는데 옆으로 튕겨 나가고, 테두리를 그렸더니 레이아웃 전체가 아래로 와르르 무너져 내리는 기이한 현상들을 마주하게 됩니다. 구글에 검색해 가며 margin, padding 값을 이것저것 아무렇게나 때려 맞추다 보면 어찌어찌 화면은 예뻐지지만, 코드는 누더기가 되어버립니다. 왜 이런 일이 발생할까요? 그것은 바로 웹 브라우저가 HTML 요소들을 화면에 그릴 때 사용하는 절대적인 수학 공식, 'CSS 박스 모델(Box Model)'의..
[CSS] CSS의 탄생 배경과 HTML과의 완벽한 분리 웹 개발에 입문하는 거의 모든 사람들이 가장 먼저 접하는 기술은 HTML과 CSS입니다. 코딩 부트캠프나 온라인 강의에서는 보통 "HTML은 웹페이지의 뼈대를 만들고, CSS는 그 뼈대를 예쁘게 꾸미는 역할을 합니다"라고 간단명료하게 설명하고 넘어갑니다. 하지만, 깊이 있는 프론트엔드 개발자가 되기 위해서는 단순히 이 문장을 외우는 것을 넘어, "대체 왜 처음부터 HTML 자체에 디자인 기능을 빵빵하게 넣지 않고 굳이 CSS라는 완전히 다른 언어를 발명하여 분리해야만 했는가?"에 대한 역사적이고 구조적인 근본 이유를 이해해야 합니다. 이 분리의 철학을 이해하지 못하면, 실무에서 수천 줄의 코드가 얽히고설키는 유지보수 지옥을 마주하게 됩니다.오늘 포스팅에서는 초창기 웹의 혼란스러웠던 역사부터 CSS가 가져..

티스토리툴바