Front end/CSS13 [CSS] 테두리(Border), 여백(Margin) 목차 CSS로 테두리와 여백 꾸미기: 웹 페이지의 테두리부터 바깥 공간까지 🖼️🌌 안녕하세요, 디자인 애호가 여러분! 🌟 웹 페이지의 각 요소를 마치 작은 그림처럼 프레임으로 감싸거나, 그 요소들 사이에 얼마나 빈 공간을 줄 것인지 결정하는 것, 이것이 바로 오늘의 주제입니다. 오늘은 CSS에서 테두리(border)와 여백(margin)에 대해 함께 알아보도록 하겠습니다. 1. 테두리(Border) 꾸미기 테두리는 웹 요소의 바깥쪽을 둘러싸는 선입니다. 이 테두리는 선의 스타일, 색상, 두께 등을 지정할 수 있습니다. 스타일: border-style을 사용해 여러 스타일의 선을 선택할 수 있습니다. 예를 들면, solid, dashed, dotted 등이 있습니다. .box { border-style: .. 2023. 9. 8. [CSS] 박스 모델(Box) 목차 CSS 박스 모델: 웹 페이지의 빌딩 블록 이해하기 📦✨ 안녕하세요, 웹 디자인 애호가 여러분! 🎨 오늘은 CSS의 핵심 개념 중 하나인 '박스 모델'에 대해 알아보겠습니다. 웹 페이지의 각 요소는 마치 박스처럼 취급되고, 이 박스들이 어떻게 구성되는지를 이해하는 것은 CSS 디자인의 기본입니다. 1. 박스 모델이란? 박스 모델은 웹 페이지에서 객체를 표현하는 모델을 의미합니다. 각 요소는 마치 박스로 감싸져 있는 것처럼 여러 개의 속성(패딩, 테두리, 마진 등)을 가질 수 있습니다. 2. 박스 모델의 주요 구성요소 콘텐츠(Content): 실제 내용(텍스트, 이미지 등)이 들어가는 영역입니다. 패딩(Padding): 콘텐츠와 테두리 사이의 공간입니다. 이 공간에는 배경색이 적용됩니다. .box {.. 2023. 9. 8. [CSS] 표 스타일(Table) 목차 CSS로 웹 페이지의 표를 화려하게 꾸미기 🎨📊 안녕하세요, 디자인 애호가 여러분! 🌟 오늘은 웹 페이지에 표(table)를 아름답게 디자인하는 방법에 대해서 알아보겠습니다. 표는 데이터를 정리하고 보여줄 때 굉장히 유용하지만, 기본 디자인만으로는 부족하게 느껴질 때가 많습니다. CSS의 마법으로 표를 더욱 생동감 있게 만들어봅시다! 1. 표의 테두리(Border) 스타일링 표와 각 셀의 테두리를 디자인하려면 border 속성을 활용합니다. 아래는 표 전체와 각 셀에 테두리를 적용하는 방법입니다. /* 표 전체에 대한 테두리 */ table { border-collapse: collapse; /* 셀 테두리를 하나로 합침 */ width: 100%; border: 2px solid black; } .. 2023. 9. 8. [CSS] 목록 스타일(List) 목차 CSS로 웹 페이지의 목록을 아름답게 디자인하기 📃✨ 안녕하세요, 디자인 마법사 여러분! 🎨 오늘은 웹 페이지에서 자주 사용되는 목록 요소를 더욱 강조하고 아름답게 만드는 방법에 대해 알아보려고 합니다. HTML에서는 (비순차 목록)과 (순차 목록) 태그를 통해 목록을 생성하지만, CSS를 활용하면 이러한 기본 목록 스타일을 원하는 대로 변형할 수 있습니다. 1. 기본 목록 스타일 제거하기 기본적으로 웹 브라우저는 에 점 모양의 표시자를, 에는 숫자를 표시합니다. 이러한 기본 스타일을 제거하려면 list-style-type 속성을 사용합니다. ul, ol { list-style-type: none; } 2. 목록 표시자(list markers) 스타일 지정하기 목록 앞에 원하는 모양이나 이미지를 표.. 2023. 9. 8. [CSS] 글꼴, 폰트, 텍스트 스타일(Font) 목차 CSS로 웹 페이지의 글자를 아름답게 만들기 🖋️ 안녕하세요, 웹 디자인 애호가 여러분! ✨ 오늘은 웹 페이지의 글자 디자인을 완성시키는 CSS의 글꼴, 폰트, 텍스트 스타일에 대해 알아보는 시간을 가집니다. 글자의 스타일은 웹 페이지의 전반적인 느낌과 가독성을 결정짓는 중요한 요소입니다. 함께 디테일한 디자인의 세계로 빠져봅시다! 1. CSS에서 글꼴(Font Family) 지정하기 웹 페이지의 글꼴을 지정하려면 font-family 속성을 사용합니다. 여러 글꼴을 나열하여, 브라우저가 사용 가능한 글꼴을 순서대로 선택하게 할 수도 있습니다. p { font-family: "Times New Roman", Times, serif; } 2. 웹 폰트 사용하기 웹 폰트는 인터넷을 통해 다운로드되는 글.. 2023. 9. 8. [CSS] 캐스케이딩 스타일 시트(CSS) 목차 CSS 케스케이딩: 웹 스타일의 미스터리 풀기 🍂 안녕하세요, 디자인의 마법사 여러분! 🎩✨ 오늘은 CSS의 핵심 개념 중 하나인 '케스케이딩'에 대해 함께 알아보겠습니다. "케스케이딩"이라는 단어가 처음 들어본다면, 오늘 이 포스트를 통해 그 비밀을 풀어보도록 하겠습니다! 1. 케스케이딩(Cascading)이란? CSS의 이름인 "Cascading Style Sheets"에서 "Cascading"은 '폭포수처럼 흐르는'이라는 뜻입니다. 이는 스타일의 우선순위와 상속에 관한 CSS의 기본 원칙을 나타냅니다. 2. CSS의 케스케이딩 원칙 스타일의 상속: 기본적으로 부모 요소의 스타일은 자식 요소로 자동으로 상속됩니다. 예를 들어, 부모 요소에 텍스트 색상을 지정하면, 그 자식 요소의 텍스트 색상도 .. 2023. 9. 8. 이전 1 2 3 다음
