Development/Publishing (18) 썸네일형 리스트형 [CSS]웹 폰트 파일 형식 정리 - WOFF, WOFF2부터 TTF까지 웹 개발을 하다 보면 다양한 폰트 파일 형식을 알게 됩니다.특히 웹 폰트를 사용할 때 .woff, .woff2, .ttf 같은 확장자들이 헷갈리는 것 같아서 정리를 해보았습니다.📝 웹 폰트 파일 형식의 종류1. WOFF (Web Open Font Format)확장자: .woff출시 연도: 2009년압축률: 약 40% 압축지원 브라우저: IE 9+, Chrome 5+, Firefox 3.6+, Safari 5.1+WOFF는 웹 전용으로 개발된 폰트 형식입니다.기존 OpenType이나 TrueType 폰트를 압축하여 웹에서 빠르게 로딩할 수 있도록 만든 것이 특징입니다. 장점:파일 크기가 작아 로딩 속도가 빠름웹 전용으로 설계되어 보안성이 좋음대부분의 브라우저에서 지원단점:WOFF2에 비해 압축률이 낮음모.. 퍼블리셔가 꼭 알아야 할 HTML 기본 태그 10개 웹 퍼블리싱을 시작할 때 반드시 알고 있어야 할 HTML 기본 태그들을 소개해 보겠습니다이 태그들은 웹 페이지의 구조를 만드는 데 핵심적인 요소들이며, 실무에서도 자주 사용됩니다1️⃣ 웹 문서의 시작과 끝을 감싸는 최상위 태그모든 HTML 요소는 이 태그 안에 위치해야 합니다 2️⃣ 화면에 표시되는 내용3️⃣ ~ 제목 태그입니다. 이 가장 크고 중요한 제목이며, 까지 작아질수록 중요도가 낮아집니다가장 큰 제목부제목 4️⃣ 단락(paragraph)을 나타내는 태그이며, 텍스트를 문단 단위로 구분할 때 사용이것은 문단입니다. 5️⃣ 하이퍼링크를 만들 때 사용하는 태그입니다사이트로 이동6️⃣ 이미지를 삽입할 때 사용하며, src는 이미지 경로, alt는 대체 텍스트입니다7️⃣ / / : 순서 없는.. 브라우저별 CSS 차이 & 대응법 크로스 브라우징이란? 벤더 프리픽스란? 쉽게 알아보기!웹 퍼블리싱을 하다 보면 같은 CSS 코드를 썼는데도 크롬에서는 잘 보이는데, 사파리에서는 깨진다? 이런 경험, 한 번쯤 들어보셨을 거예요이런 문제를 해결하려면 크로스 브라우징과 벤더 프리픽스 개념을 알아야 해요!오늘은 웹 초보자도 쉽게 이해할 수 있도록 브라우저별 CSS 차이와 그 대응법에 대해 정리해볼게요 😊크로스 브라우징이란?**크로스 브라우징(Cross Browsing)**은 말 그대로"여러 브라우저에서 내 웹페이지가 똑같이 보이도록 만드는 것"입니다.왜 필요할까요?브라우저(Chrome, Safari, Firefox, Edge 등)마다 CSS를 해석하는 방식이 미묘하게 달라서어떤 브라우저에서는 잘 나오는데, 어떤 브라우저에서는 레이아웃이 깨지.. [CSS] margin & padding 비교 📌 margin과 padding의 핵심 차이구분설명padding박스 안쪽 여백. 콘텐츠와 테두리 사이 공간margin박스 바깥쪽 여백. 요소와 요소 사이의 공간 📝 마무리 요약 padding은 "내용물과 테두리 사이 여백"margin은 "이 박스랑 다른 박스 사이 거리" [CSS] color-scheme이란? 웹사이트도 다크 모드, 라이트 모드가 있다는 거 알고 계셨나요?color-scheme은 웹사이트가 운영체제의 테마(밝은 모드 / 어두운 모드)에 맞게 보이도록 도와주는 CSS 속성입니다!✔ 어떤 역할을 할까요?브라우저에 "이 웹사이트는 다크 모드도 지원해요!" 라고 알려줍니다입력창, 스크롤바 같은 기본 UI 요소들이 자동으로 어울리는 색으로 바뀌어요✔ 어떻게 사용하나요?:root { color-scheme: light dark;} 이렇게 쓰면 운영체제가 다크 모드일 때,브라우저가 웹사이트도 다크 모드처럼 보여주려고 해요✔ 더 자연스럽게 만들기color-scheme은 기본 UI 색만 바꿔주기 때문에,전체 디자인은 아래처럼 직접 스타일을 지정해주면 더 좋아요@media (prefers-color-schem.. [HTML] <input type="button"> vs <button type="button"> 차이점 HTML에서 버튼을 만들 땐 두 가지 방법이 있습니다바로 과 인데요, 둘의 차이점을 간단하게 정리해보겠습니다!1️⃣ 텍스트 넣는 방법이 달라요!👉 value 속성으로 버튼 글자를 정해요확인👉 버튼 태그 안에 글자를 직접 넣거나, 아이콘 같은 HTML 요소도 함께 넣을 수 있어요!2️⃣ 사용 목적에 따라 골라 써요!👉 단순 클릭만 필요할 때 사용하고, 구조가 단순해서 스크린 리더 등 접근성 면에서도 유리할 수 있어요👉 버튼 안에 아이콘, 이미지 등 다양한 요소를 넣고 싶을 때 사용하고, 더 자유롭게 꾸밀 수 있습니다📝 TIP!✔️ 클릭만 필요한 간단한 버튼 👉 ✔️ 아이콘이나 스타일 다양하게 넣고 싶은 버튼 👉 [CSS] white-space 속성 🔹 normal (기본값)텍스트가 박스 너비에 따라 자동으로 줄바꿈 돼요하지만 \n(줄바꿈 문자)이나 태그 같은 걸 사용해도 줄바꿈이 적용되진 않아요📌 예시:긴 문장은 자동으로 다음 줄로 넘어가지만, 직접 줄을 바꾸고 싶을 땐 을 써도 무시돼요🔹nowrap줄바꿈이 일어나지 않아서 텍스트가 한 줄로 쭉 이어져요공백이 여러 개여도 하나로 보이고, 줄바꿈 문자도 무시돼요단, 태그는 줄을 바꿔줘요📌 예시:메뉴 같은 걸 한 줄에 쭉 보여주고 싶을 때 사용해요🔹pre텍스트가 입력한 그대로 보여져요공백이나 줄바꿈도 입력한 대로 유지돼요텍스트가 박스를 넘쳐도 자동 줄바꿈은 안 돼요📌 예시:소스 코드나 시를 입력할 때, 띄어쓰기와 줄바꿈이 중요한 경우에 사용해요🔹pre-wrappre와 비슷하지만, 박스 .. [CSS]BEM 방법론이란? CSS 클래스 이름을 지을 때 규칙을 정해두면 유지보수도 쉽고, 협업할 때도 편합니다!그중 하나가 바로 BEM(BEM: Block, Element, Modifier) 방법론입니다📌 BEM이란?BEM은 아래 3가지 단어의 줄임말이에요B: Block (블록)E: Element (엘리먼트)M: Modifier (수정자)📌 Block (블록)✔ 재사용 가능한 '덩어리' 컴포넌트Block은 페이지 안에서 독립적으로 사용할 수 있는 ‘기본 단위’에요보통 하나의 컴포넌트라고 생각하면 이해가 쉬워요예를 들어, 헤더나 버튼, 카드 같은 것들입니다 --> 여기서 header가 바로 Block이입니다!📌 Element (엘리먼트)✔ Block 안에서 사용하는 하위 요소Block 하나만으로는 부족하죠. 그 안에 여러 요.. 이전 1 2 3 다음
