본문 바로가기

전체 글17

반응형 웹이란? CSS 미디어쿼리로 모바일 대응하기 오늘날 대부분의 웹사이트는 데스크탑뿐만 아니라 모바일, 태블릿 등 다양한 화면 크기에서 동작해야 합니다.이러한 요구를 충족시키기 위해 사용되는 기술이 바로 **“반응형 웹 디자인(Responsive Web Design)”**이며,그 핵심 도구가 바로 **CSS의 미디어쿼리(Media Query)**입니다.이번 글에서는 비전공자와 입문자도 쉽게 이해할 수 있도록 반응형 웹의 개념과 미디어쿼리의 활용 방법을 예제와 함께 정리해드립니다.✅ 반응형 웹이란?사용자의 화면 크기에 따라 콘텐츠의 레이아웃이 유연하게 변경되는 웹 디자인 방식즉, 하나의 HTML 코드로 다양한 디바이스에서 적절한 화면을 보여주는 방식입니다.기기 종류화면 폭 예시데스크탑1024px 이상태블릿약 768px~1023px스마트폰767px 이하반.. 2025. 10. 7.
HTML과 CSS만으로 만드는 나만의 프로필 페이지 웹 개발을 처음 시작할 때 가장 많이 만드는 예제가 자기소개 페이지, 즉 **프로필 페이지(Profile Page)**입니다.복잡한 기능 없이도 HTML과 CSS만으로 간단한 웹페이지를 만들 수 있으며, 포트폴리오로 활용하기에도 좋습니다.이 글에서는 HTML과 CSS만을 사용해 디자인된 나만의 프로필 페이지를 만드는 전 과정을 예제와 함께 안내합니다.비전공자도 그대로 따라할 수 있도록 구성했으니, 실습과 학습을 동시에 경험해보세요.✅ 프로필 페이지에 포함될 내용프로필 이미지이름과 직업간단한 자기소개연락처 또는 SNS 링크꾸며진 레이아웃과 스타일이 정도 구성만 있어도 간단한 개인 브랜딩 페이지로 충분합니다.✅ 실습 준비물코드 편집기 (예: 메모장, VS Code, Sublime Text 등)웹 브라우저 (.. 2025. 10. 7.
CSS 박스 모델(Box Model) 쉽게 이해하기 웹페이지를 구성하는 모든 요소는 보이지 않더라도 보이지 않는 상자(Box) 형태로 존재합니다.바로 이 개념이 **CSS Box Model(박스 모델)**입니다.이 글에서는 비전공자도 이해할 수 있도록 박스 모델의 구성 요소, 작동 방식, 마진과 패딩의 차이, 실전 예제를 통해 쉽고 명확하게 정리해 드리겠습니다.✅ 박스 모델(Box Model)이란?CSS 박스 모델은 웹페이지의 모든 요소를 하나의 사각형 상자로 보고,그 상자에 여백(margin), 테두리(border), 패딩(padding), **내용(content)**이 어떻게 쌓이는지를 설명하는 모델입니다.즉, 텍스트 하나, 버튼 하나, 이미지 하나도 모두 보이지 않는 박스로 구성되어 있으며,이 박스의 크기와 간격을 조절하는 것이 웹 레이아웃의 핵심입.. 2025. 10. 7.
HTML 폼(Form) 태그 기초: 회원가입 폼 만들기 실습 웹사이트를 이용하다 보면 자주 마주치는 기능 중 하나가 회원가입 폼입니다.이처럼 사용자로부터 정보를 입력받는 인터페이스는 모두 HTML의 태그로 구현됩니다.이번 글에서는 비전공자도 따라할 수 있도록 HTML 폼 태그의 기본 구조와 주요 입력 요소들을 익히고, 실제로 간단한 회원가입 폼을 만들어보는 실습까지 안내드립니다.1. HTML에서 태그란?은 사용자로부터 데이터를 입력받아 서버로 전송하는 역할을 하는 HTML 태그입니다.회원가입, 로그인, 검색, 문의하기 등 모든 입력 기반 기능에서 사용됩니다. form action="서버주소" method="POST"> form> action: 데이터를 전송할 서버 주소 (초보자 실습에선 생략 가능)method: 전송 방식 (GET, POST 중 선택)2. 기.. 2025. 10. 7.

티스토리툴바