본문 바로가기

CSS실습3

CSS 기초 완전 정복 가이드! 🎨 안녕하세요, 초록대디 입니다! 🙋‍♂️ 오늘은 '유노코딩과 함께하는 더덕마켓 클론 코딩' 강의의 CSS 기초 모든 내용을 총정리하여, 웹 페이지를 더욱 매력적으로 만드는 CSS를 학습해보고자 합니다! 🚀 1. CSS란 무엇일까요? HTML과의 환상의 짝꿍! 🤝CSS(Cascading Style Sheets)는 HTML이나 XML과 같은 마크업 언어로 작성된 문서의 스타일을 꾸미기 위한 스타일 시트 언어입니다. HTML이 웹 페이지의 구조와 콘텐츠를 정의한다면, CSS는 그 문서를 시각적으로 꾸미고 스타일을 지정하여 레이아웃을 제어합니다. 마치 제가 Cursor로 코드를 구조화하고 n8n으로 워크플로우를 구성하는 것처럼, CSS는 HTML 구조에 시각적 질서를 부여하는 역할을 합니다.HTML: 웹.. 2025. 6. 19.
웹 페이지에 생명을 불어넣는 마법! CSS 기초 이론 2 안녕하세요, 초록대디 입니다. 😊 지난 CSS 기초 이론 1 에 이은 CSS 기초 학습에 대한 내용 리뷰입니다. 오늘은 HTML 문서에 생명을 불어넣는 CSS의 세 가지 핵심 개념인 박스 모델, 우선순위, 그리고 단위에 대해 깊이 있게 다뤄보고자 합니다. CSS 박스 모델 (Box Model): 모든 HTML 요소는 박스다!개념 설명: 박스 모델의 네 가지 영역박스 모델(Box Model)은 CSS의 가장 기본적인 개념으로, 웹 페이지의 모든 HTML 요소가 사각형 '박스'로 구성된다는 것을 의미합니다[cite: 1]. [cite_start]이 박스는 단순히 콘텐츠를 담는 공간이 아니라, 다음과 같이 네 가지 중요한 영역으로 나뉘어 구성됩니다.Content (콘텐츠): 텍스트나 이미지와 같은 실제 내용.. 2025. 6. 16.
웹 페이지에 생명을 불어넣는 마법! CSS 기초 이론 1 HTML이 건물의 뼈대라면, CSS(Cascading Style Sheets) 는 그 건물의 외관 디자인과 인테리어를 담당한다고 할 수 있습니다. 오늘은 웹 문서를 아름답고 사용자 친화적으로 디자인하는 핵심 언어인 CSS의 기본 개념과 구조, 그리고 특정 요소를 선택하여 스타일을 적용하는 방법에 대해 학습 하고자 합니다. CSS: 웹 문서를 디자인하는 스타일시트 언어HTML이 문서의 구조와 콘텐츠( , , 등)를 정의하는 마크업 언어라면, CSS는 그 HTML 문서의 시각적인 스타일을 꾸미고 레이아웃을 제어하기 위한 스타일시트 언어입니다. 마치 제가 VScode를 활용하여 코드를 구조화하고, 워크플로우를 구성하는 것처럼, CSS는 HTML 구조에 시각적 질서를 부여합니다. CSS의 기본 구조: 스타일.. 2025. 6. 13.