본문 바로가기

전체 글17

CSS 기본 스타일링 팁: 글꼴, 색상, 여백 설정하기 HTML로 웹페이지의 구조를 만들었다면, 이제는 그 구조에 멋을 입힐 차례입니다.웹사이트의 첫인상을 좌우하는 요소는 바로 **디자인(스타일)**이며, 이 디자인을 구현하는 핵심 도구가 **CSS(Cascading Style Sheets)**입니다.이번 글에서는 웹 스타일링에서 가장 기본이 되는 ‘글꼴(Font)’, 색상(Color), 여백(Margin/Padding)’ 설정 방법을 CSS 코드 예제와 함께 쉽고 명확하게 설명합니다.비전공자 및 입문자도 따라할 수 있는 실용적인 스타일링 팁으로 구성했습니다.1. 글꼴(Font) 설정하기웹사이트의 텍스트 분위기를 결정하는 핵심 요소가 바로 **글꼴(Font)**입니다.✅ 기본 문법: selector { font-family: 글꼴1, 글꼴2, 기본글꼴; } .. 2025. 10. 7.
CSS 선택자 완전 정리 – 예제 중심 설명 HTML로 웹페이지의 구조를 만들었다면, 이제는 그 구조에 **스타일(디자인)**을 입힐 차례입니다.바로 이때 사용하는 것이 **CSS 선택자(selector)**입니다.선택자란?CSS에서 ‘어떤 HTML 요소에 스타일을 적용할 것인지 지정하는 방법’입니다.이 글에서는 초보자도 이해할 수 있도록 CSS 선택자의 종류를 예제와 함께 명확하게 설명하고, 자주 쓰이는 실전 패턴까지 소개합니다.1. 전체 선택자 (*) * { margin: 0; padding: 0; } 모든 요소에 스타일을 적용합니다.웹페이지의 기본 여백 제거에 자주 사용됩니다.2. 태그(요소) 선택자 p { color: gray; font-size: 16px; } HTML의 특정 태그 전체에 스타일 적용예: , , , 등3. 클래스 선택자 .. 2025. 10. 7.
HTML에서 자주 사용되는 기본 태그 10가지 정리 웹사이트를 구성하는 가장 기본적인 언어인 **HTML(HyperText Markup Language)**는 다양한 태그(tag)를 통해 콘텐츠의 구조를 정의합니다.웹 페이지에서 글을 작성하거나 이미지를 삽입하고, 버튼을 만들거나 링크를 연결하는 모든 작업은 HTML 태그를 기반으로 이루어집니다.이번 글에서는 HTML에서 자주 사용되는 기본 태그 10가지를 소개하며, 각 태그의 용도와 사용 예제를 함께 정리해드리겠습니다.비전공자와 초보자도 쉽게 이해할 수 있도록 실습 중심으로 설명하니, 웹 코딩의 기초를 다지는 데 큰 도움이 될 것입니다.1. – HTML 문서의 시작과 끝을 감싸는 태그 html> html> HTML 문서 전체를 감싸는 최상위 태그입니다.웹 브라우저는 이 태그 안의 내용을 기반으로 페이.. 2025. 10. 6.
비전공자를 위한 나만의 첫 번째 웹페이지 만들기 코딩이 처음이라도, 나만의 웹페이지를 한 번쯤 만들어보고 싶었던 적 있으신가요?복잡한 프로그래밍 없이, 기본적인 HTML과 CSS만으로도 누구나 자신의 프로필 페이지나 소개 페이지를 만들 수 있습니다.이 글에서는 비전공자도 따라할 수 있도록 HTML과 CSS를 활용한 아주 간단한 웹페이지 제작 방법을 단계별로 알려드리겠습니다.1. 웹페이지를 만든다는 건 어떤 의미일까?웹페이지는 기본적으로 두 가지 기술로 구성됩니다:HTML: 콘텐츠의 구조를 정의 (제목, 문단, 이미지, 버튼 등)CSS: 콘텐츠에 스타일을 적용 (색상, 정렬, 여백, 배경 등)이 두 가지만 알아도 개인 소개 페이지, 블로그 템플릿, 간단한 랜딩페이지까지 만들 수 있습니다.2. 필요한 준비물은?아래 두 가지만 있으면 됩니다:✅ 메모장 또는.. 2025. 10. 6.

티스토리툴바