jonbeo 님의 블로그

웹사이트를 만들어서 열어보면, 내가 설정하지 않았는데도 폰트 크기가 다르거나 마진이 들어간 경우를 본 적 있으시죠?이건 브라우저마다 **기본으로 적용하는 스타일(유저 에이전트 스타일 시트)**이 다르기 때문이에요.이 차이를 없애기 위해 사용하는 게 바로 reset.css입니다.✅ reset.css란?reset.css는 브라우저 기본 스타일을 없애고,모든 요소를 똑같은 기준에서 시작하게 만들어주는 CSS 파일이에요. 예를 들어, 대부분의 브라우저는 태그에 기본적으로 큰 폰트와 마진을 적용합니다.이걸 그대로 두면 브라우저마다 디자인이 달라 보이게 되죠.✅ 기본 reset 예시/* 가장 단순한 reset.css */* { margin: 0; padding: 0; box-sizing: border-box..

웹사이트를 만들다 보면 CSS가 점점 길어지고 복잡해지는 경우가 많아요.이럴 땐 스타일 파일을 기능별로 나눠서 관리하면 훨씬 편해요.이번 글에서는 CSS 파일을 분리해서 @import로 불러오는 방법을 설명할게요.어디서 어떻게 불러오는 게 좋은지, 어떤 점에 주의해야 하는지도 함께 살펴보자구요!✅ 왜 CSS 파일을 나눠서 관리해야 할까?처음엔 하나의 style.css 파일로 시작하지만,헤더푸터버튼폼 스타일등이 점점 많아지다 보면 수십, 수백 줄이 되죠.이때 CSS를 역할별로 나누고,메인 파일에서 @import로 불러오면유지보수가 쉬워지고협업도 편해지고필요할 땐 개별 파일만 수정하면 됩니다!🛠 기본 문법: @import "파일경로";CSS에서 다른 파일을 불러올 때는 @import를 사용해요.@impor..

웹 레이아웃을 만들다 보면 display: flex와 display: grid,둘 중에 어떤 걸 써야 할지 고민될 때가 많죠?둘 다 정말 강력한 CSS 레이아웃 도구지만,방식이 완전히 다르고, 잘 쓰면 작업 효율이 확 달라져요.이번 글에서는 Flexbox와 CSS Grid의 차이점, 언제 어떤 상황에서 쓰면 좋은지 쉽게 정리해볼게요!✅ 둘 다 레이아웃 도구예요! 그런데 구조가 달라요항목FlexboxGrid정렬 방식1차원(한 줄 또는 한 열)2차원(행과 열 동시에)사용 목적콘텐츠 흐름대로 정렬정확한 영역 배치배치 기준아이템 순서 중심위치 중심 (그리드 영역 지정)대표 용도메뉴바, 버튼 정렬, 카드 나열 등전체 페이지 레이아웃, 포털형 구성 등 🧭 Flexbox가 잘 어울리는 상황은?Flexbox는 콘텐츠..

🤔 단위? 그냥 px만 쓰면 안 돼요?처음 CSS를 배울 때는 대부분 px(픽셀)만 사용하죠.하지만 실제 웹사이트에서는 다양한 크기와 해상도에 대응하기 위해 %, em, rem 등의 단위를 함께 써야 해요.단위마다 특성이 다르고, 어디에 어떤 단위를 쓰냐에 따라 반응형/가독성/유지보수성까지 영향을 줍니다.✅ 단위별 의미 요약단위의미기준반응형 적합도특징px고정된 픽셀 값고정 크기❌ 낮음가장 직관적이지만 반응형에 불리함%비율부모 요소 기준✅ 좋음유동 레이아웃에 자주 사용em배수 단위부모 요소의 font-size 기준⚠️ 중간계단식으로 값이 커질 수 있음rem루트 배수 단위html의 font-size 기준✅ 안정적전역에서 일관된 스타일 유지 가능 🧪 실전 예시/* px: 고정된 크기 */h1 { font..

👀 이런 경험, 있지 않으셨나요?데스크톱에서는 완벽하던 웹페이지가 모바일에서는 글씨가 넘치고, 버튼이 겹치고, 이미지가 너무 작게 나오는 상황!그럴 때 필요한 것이 바로 ‘반응형 웹’과 ‘미디어쿼리(Media Query)’ 입니다.✅ 반응형 웹이란?반응형 웹(Responsive Web) 은 화면 크기나 디바이스 종류에 따라 웹사이트의 레이아웃, 글꼴, 이미지 크기 등이 유연하게 조정되는 웹 디자인 기법이에요.📱 PC, 태블릿, 스마트폰 등 어떤 환경에서도 웹페이지가 잘 보이도록 만드는 것이 목표!🧠 왜 필요할까?사용자 디바이스가 다양해짐 (예: 4.7인치 스마트폰 ~ 27인치 모니터까지!)화면 크기마다 보여주는 방식이 다르면 더 보기 편하고 터치도 쉬워요SEO(검색 최적화)에도 도움됨🎯 핵심 도구..

안녕하세요 😊지금까지 HTML로 여러 가지 태그들을 알아봤습니다.이번엔 웹페이지를 보기 좋게, 정리정돈할 수 있도록 도와주는 **‘구조 태그’**를 알아보겠습니다!🧱 구조 태그가 왜 필요할까?HTML 문서는 위에서 아래로 줄줄이 작성되기 때문에,내용을 논리적으로 나누지 않으면읽는 사람도, 스타일을 입히는 사람도 혼란스러워져요!그래서 HTML에서는 구역을 나눠주는 구조 태그를 사용합니다.🔖 대표적인 구조 태그 소개 태그용도아무 의미 없는 구역 나누기용 박스문서 안의 구분되는 주제 영역독립적인 콘텐츠 (예: 뉴스 글, 블로그 글) 나의 웹사이트 홈 소개 문의 ..

지난 포스팅에서 텍스트, 제목, 이미지, 링크까지 알아봤습니다이번엔 웹페이지에 **리스트(목록)**도 만들고, **표(table)**도 만들어보고,사용자에게 입력받는 폼도 만들어보겠습니다!✅ 순서 있는 목록: + ol은 Ordered List (순서 있는 목록)이고,li는 List Item (목록 항목)을 뜻합니다. HTML 배우기 CSS 배우기 JavaScript 배우기 👉 결과는 이렇게 나와요:HTML 배우기CSS 배우기JavaScript 배우기✅ 순서 없는 목록: + ul은 Unordered List (순서 없는 목록)입니다.보통 동그란 ● 표시로 항목이 나와요. 커피 차 주스 👉 결과:커피차주스📊 표 만들기: , , , table: 표 전체tr: 한 줄(Row)th: 제목 셀(..

안녕하세요! 😊이전 포스팅에서 HTML 문서 구조를 배웠다면,이번에는 웹페이지 안에 실제로 글과 이미지, 링크를 넣어보는 방법을 알아보겠습니다!✍️ 텍스트 넣기: 태그HTML에서 일반적인 문장은 태그를 사용해요.p는 "paragraph", 즉 문단이라는 뜻이죠!오늘은 HTML 공부를 시작한 기념일이에요! 👉 이 코드를 브라우저에서 실행하면 이렇게 보여요:오늘은 HTML 공부를 시작한 기념일이에요!📝 제목 넣기: 부터 제목은 ~ 까지 있어요.숫자가 작을수록 더 중요한 제목, 글자 크기도 더 커요.가장 큰 제목조금 작은 제목이제 점점 작아져요🔗 링크 만들기: 다른 사이트나 페이지로 이동하게 하려면 링크 태그를 사용 해야합니다.구글로 이동 👉 결과: 구글로 이동Tip!href="" 안에는 연결할..

이전 포스팅 에서는 HTML이 뭔지, 누가 쓰는지 알아봤습니다!이번 포스팅에서는 HTML 문서의 기본 뼈대를 설명 해드리겠습니다.앞으로 작성할 HTML은 모두 이 기본 구조 안에서 만들어집니다!🧱 HTML 문서의 기본 구조란?HTML 문서는 웹페이지의 기본 설계도예요.아래는 가장 기본적인 HTML 문서 구조예요: 안녕하세요! 이것은 나의 첫 HTML 문서예요. 🔍 태그 하나하나 알아보기✅ 이 문서는 HTML5로 작성되었다는 걸 브라우저에게 알려주는 선언이에요.한 번만 쓰면 되고, 항상 맨 위에 있어야 해요!✅ ~ 전체 HTML 문서를 감싸는 가장 바깥 태그예요.모든 내용은 이 안에 들어가야 해요.✅ 웹페이지에 직접 보이진 않지만 중요한 정보들을 담는 공간이에요.예: 페이지 제목(..

웹페이지를 만드는 기초 언어인 HTML과 CSS를 아주 쉽게 하나씩 설명 해보는 포스팅을 할까 합니다 😊첫 번째 포스팅은 HTML이란 무엇인지, 누가, 어떤 상황에서 사용하는지를 천천히 알아보도록 할게요!✅ HTML이란?HTML은 HyperText Markup Language의 줄임말이에요. 말 그대로, 하이퍼텍스트를 작성하기 위한 마크업 언어랍니다! 📌 여기서 잠깐!하이퍼텍스트란?👉 다른 페이지나 정보로 연결되는 문서예요. 우리가 인터넷에서 링크를 클릭해서 다른 페이지로 이동하잖아요? 그게 하이퍼텍스트예요!✅ HTML은 왜 필요할까?우리가 보는 모든 웹사이트는 결국 HTML로 구성되어 있어요.예를 들어, 네이버, 유튜브, 구글, 인스타그램 같은 사이트도 처음에는 HTML로 기본 뼈대를 만들어요.H..