ChipTuneX

CSS 완벽 정리 4부 – CSS 박스 모델 & 크기 단위 정리웹 개발에서 CSS는 필수적인 역할을 합니다.특히 크기 단위, 박스 모델, 여백(margin & padding), 테두리(border), 박스 크기 설정(box-sizing) 등의 개념을 이해하면 더 직관적이고 깔끔한 디자인을 만들 수 있습니다.이 글에서는 CSS 속성을 초보자도 쉽게 이해할 수 있도록 상세한 설명 + 예제 코드(CSS & HTML) 와 함께 정리해보겠습니다! 🚀✅ 1. CSS 크기 단위 – 절대 단위 vs 상대 단위CSS에서 크기를 정의할 때는 절대 단위와 상대 단위를 사용할 수 있습니다.단위유형설명px절대 단위고정된 크기 (화면 크기와 상관없이 일정)em상대 단위부모 요소의 폰트 크기를 기준으로 결정rem상대 단위최상위 ..

CSS 완벽 정리 1부 – 스타일을 입히는 기술!웹사이트를 만들 때, HTML은 구조(뼈대) 를 담당하고, CSS(Cascading Style Sheets)는 디자인(옷, 색, 배치) 을 담당합니다.이번 글에서는 CSS의 개념, 네이버에 CSS가 없다면 어떻게 보일까? 그리고 CSS를 적용하는 다양한 방식과 우선순위까지 쉽게 설명해드릴게요! 🚀📌 1. CSS란?✅ CSS(Cascading Style Sheets)란?웹페이지의 디자인과 레이아웃을 담당하는 스타일 언어HTML 요소의 색상, 폰트, 크기, 배경, 배치 등을 조정 가능하나의 CSS 파일로 여러 개의 HTML 페이지에 일관된 스타일 적용 가능✅ CSS를 적용하면?💡 밋밋한 HTML 페이지가 → 세련된 웹사이트로 변신! ✔️ CSS 적용 전 ..

디자인 작업을 할 때 꼭 필요한 Figma Tools, 제대로 알고 사용하면 훨씬 더 효율적으로 디자인할 수 있습니다.이번 글에서는 Frame, Guide, Grid, Grid & Breakpoint, 도형 그리기 등 Figma의 필수 도구 5가지 를 하나씩 쉽게 설명해드리겠습니다. 실전 예제도 함께 다룰 예정이니, 끝까지 읽어보세요! 🚀📌 1. Frame – 디자인의 기본 단위!🖼️ Frame(프레임)란?Frame은 Figma에서 아트보드 역할을 하는 공간입니다. 웹, 모바일, 태블릿 등 다양한 디바이스 크기에 맞춰 디자인을 할 수 있습니다.✅ Frame 사용 방법1️⃣ 단축키 F 를 누르거나 왼쪽 툴바에서 Frame 아이콘 선택2️⃣ 상단 패널에서 원하는 디바이스 크기 선택 (예: iPhone ..

🎨 디자인 툴 완전 정복! Figma부터 Photoshop까지디자인을 할 때 필수적으로 알아야 하는 디자인 툴(Design Tools)! 하지만 용어가 생소하고, 각 툴의 차이를 잘 모르면 어떤 프로그램을 사용해야 할지 고민될 수 있습니다.이번 글에서는 디자인 작업에 필수적인 개념과 함께, 대표적인 디자인 툴의 종류와 특징을 쉽게 정리해보겠습니다. 특히, 요즘 대세인 Figma의 특장점과 가입 방법까지 소개하니 끝까지 읽어보세요! 😊📌 1. 디자인에서 꼭 알아야 할 개념디자인 툴을 제대로 활용하려면, 기본적인 개념부터 이해해야 합니다.🖥️ 해상도(Resolution)란?참고사이트 : https://gs.statcounter.com Statcounter Global Stats - Browser, O..