[CSS] 근접, 자식요소에 따라 부모요소를 제어할 때 :has()

:has() 선택자는 언제 필요한가요?코드를 작성하다보면 근접요소, 자식요소에 따라 특정 엘리먼트의 디자인을 제어해야 할 때가 있습니다. 그동안의 CSS는 근접요소, 자식요소만 컨트롤이 가능했습니다. 부모/상위 요소를 제어하기 위해서는 자바스크립트를 이용해야만 했습니다. 이제는 상위에 있는 요소를 제어할 수 있는 방법이 생겼습니다. 예를 들어서 제목+본문으로 된 구성과 제목+부연설명+본문으로 구성된 박스가 혼용된 디자인을 만들어보겠습니다.  제목 아래에 margin을 20픽셀로 주었습니다. 그런데 인접한 p태그에 부연설명이 들어간다면 태그 아래의 마진은 5픽셀, 부연설명 태그의 마진을 20픽셀 주어야 합니다. 해결책은 여러 가지가 있습니다. 에는 여백을 주지 않고 본문용 태그 상단에 여백을 주는 것..

• topic HTML&CSS
• · 2024. 9. 16.
• textsms

CSS의 중첩 (CSS nesting)

CSS 중첩이란?CSS 중첩이란 스타일 규칙을 HTML 요소에 적용할 때 부모 요소의 스타일이 자식 요소에 영향을 미치는 방식을 말합니다. 중첩된 구조는 가독성을 높이고 스타일을 보다 체계적으로 관리하는 데 유용합니다. CSS로 중첩을 이용해 코드를 작성할 때에는 선택자를 이용하는 방법이 있습니다..box { display:flex; gap:10px;}.box .item { border:1px solid #ddd; }.box .item p { margin-bottom:10px; } .box 클래스를 가진 요소의 자식인 .item 클래스를 가진 요소에만 스타일이 적용됩니다. 부모 요소-자식 요소의 스타일이 중첩된 방식으로 표현한 것입니다. 그동안의 CSS는 위와 같은 방식으로만 중첩을 허용했습니다.  CS..

• topic HTML&CSS
• · 2024. 9. 16.
• textsms

CSS의 변수(Variables)

변수란? 변하는 값을 '변수'라고 합니다. 부가세를 계산하는 프로그램을 만든다고 예를 들어보겠습니다.부가세 = 입력 금액 * 0.1  금액을 입력하면 0.1을 곱해서 부가세가 얼마인지 계산을 해주겠지요. 이 때  '입력 금액'은 사용자가 입력하는 값이니 언제든 바뀔 수 있습니다. 입력 금액에 따라 계산 결과값은 달라지기 때문에 '부가세'도 바뀔 수 있지요. 이렇듯 바뀔 수 있는 값을 담는 공간을 '변수'라고 합니다.  CSS의 변수는 왜 필요한가?CSS의 문법은 무척 쉽습니다. 아래와 같이 단조로운 구성으로 되어 있습니다..클래스 { 프로퍼티 : 프로퍼티 속성; }#아이디 { 프로퍼티 : 프로퍼티 속성; } 작성하기 쉬운 문법은 CSS의 큰 장점입니다. 쉽게 웹페이지를 생성하고 디자인할 수 있다는 점에서..

• topic HTML&CSS
• · 2024. 9. 15.
• textsms

티스토리 제목(h2, h3, h4) 글자크기 바꾸는 방법

스킨에 기본 적용되는 제목, 본문의 글자크기티스토리에서 블로그 글을 작성할 때 제목 1, 제목 2,..., 본문 2, 본문 3까지 문단의 스타일을 지정하도록 되어 있습니다. 글자 크기를 별도로 지정하는 옵션이 없기 때문에 네이버 등 다른 블로그에서 넘어오신 분들은 당황스러울 수 있습니다. 티스토리에서는 제목의 서식 디자인을 스킨에서 제어합니다. 그리고 티스토리는 블로그 스킨에 대한 커스텀이 굉장히 자유롭습니다. 마음에 드는 티스토리를 선택하거나 다른 유저가 만들어둔 스킨 파일을 다운로드하여 업로드하는 것도 가능합니다. 저도 지금은 '쭈미로운 생활'님이 제작한 '한눈에 스킨'을 다운로드하여 커스텀한 후 사용하고 있습니다.  티스토리 스킨은 커스텀이 가능합니다제 포스트 글 중 하나를 골라 '개발자도구'를 열..

• topic HTML&CSS
• · 2024. 9. 15.
• textsms

한컴오피스(한글), MS 워드에서 복사한 글이 블로그에 붙여넣기 잘 안되는 이유

.hwp .doc 문서에서 복사-붙여넣기 했는데 뭐가 잘 안 돼요…주변 사람들, 클라이언트한테서 정말 많이 받는 질문입니다. 표를 복사-붙여넣기 했는데 표 모양이 이상하게 나온다든지, 중간에 문구가 끊겨서 저장이 되고 수정해도 적용이 안된다든지 하는 내용의 질문이요. 어떻게 보면 너무도 당연한 일인데 아래에서 설명할 위지윅(WYSISYG)만 익숙한 사람들에게는 참 미스터리한 일인가 봅니다. 위지윅(WYSIWYG)위지윅은 What You See Is What You Get의 약자로 직역하면 "보이는 대로 얻는다"라는 뜻을 가지고 있습니다. 프로그램이나 브라우저에서 원하는 디자인의 문서를 만들어내려면 코드 형태의 문장으로 작성해야 합니다. 비전문가는 코드로 만들어진 문서의 내용을 읽고, 편집하는 것이 사실상..

• topic HTML&CSS
• · 2024. 9. 14.
• textsms

한글 웹폰트 비교: Noto Sans KR vs 본고딕 vs Pretendard 특징 및 다운로드

웹폰트 탄생 이전의 시대웹폰트를 처음 사용하기 시작했을 때 그야말로 신세계를 경험했던 것 같습니다. 굴림체를 벗어날 수 있다니!그때 당시에는 굴림체를 12픽셀이 웹사이트 본문 글꼴의 정석이었습니다. 작은 안내문을 달기 위해서는 11픽셀의 돋움체를 썼습니다. 굴림체는 12픽셀의 크기를 벗어나면 갑자기 모양이 바뀌는 마법을 부렸기 때문입니다. 흑마법 같은 것을요...  맥 OS에서는 자체 폰트가 무척이나 아름다웠기 때문에 큰 문제가 없었습니다. 하지만 윈도우 사용자가 압도적으로 많았습니다. 윈도우에 맑은 고딕체가 기본 탑재가 될 때엔 '이제야 일을 좀 하네'하는 느낌이었습니다. 그 후로 '웹폰트'라는 것이 탄생했지만 한글 폰트는 터무니없이 부족했습니다. 나눔 고딕체가 나왔을 때 와아- 하는 기분, 본 고딕이..

• topic 폰트
• · 2024. 9. 13.
• textsms