CSS (Cascading Style Sheets)
• 웹페이지의 디자인과 화면 배치를 담당하는 스타일 언어이다.
• HTML이 웹페이지의 구조를 만든다면, CSS는 색상, 크기, 위치 등의 디자인을 적용한다.
• 보통 HTML과 함께 사용되며, 웹페이지를 더 보기 좋고 사용자 친화적으로 꾸밀 수 있다.
> HTML → 건물의 설계도
> CSS → 건물의 인테리어
CSS 기본 구조
• CSS는 누구를 선택할지(Selector), 어떻게 꾸밀지(Declaration) 를 작성하는 방식으로 동작한다.
h1 {
color: blue;
font-size: 30px;
}> h1 → Selector(선택자)
> color, font-size → Declaration(스타일 선언)
CSS 사용 방법
1. 외부 CSS 연결 (권장 방식)
• 별도의 .css 파일을 만들고 <link> 태그를 사용하여 HTML 문서의 <head> 내부에 연결한다.
<link rel="stylesheet" href="style.css">• 장점:
> 유지보수가 편하다.
> 여러 HTML 파일에서 재사용 가능하다.
2. 내부 CSS 사용
• HTML 문서 내부의 <style> 태그 안에 직접 CSS를 작성하는 방식이다.
<style>
h1 {
color: red;
}
</style>• 주로 간단한 테스트 또는 작은 페이지에서 사용된다.
박스 모델(Box Model)
• 모든 HTML 요소(Element)는 사각형 박스 형태로 구성되며, 4가지 영역으로 이루어져 있다.
1. Content
• 실제 내용이 표시되는 영역이다.
> 텍스트
> 이미지
> 버튼 내용
2. Padding
• 콘텐츠(Content)와 테두리(Border) 사이의 안쪽 여백이다.
> 버튼 내부 여백
> 글자와 테두리 사이 간격
3. Border
• 요소의 테두리 영역이다.
• 테두리의 두께, 색상, 스타일 등을 지정할 수 있다.
4. Margin
• 요소 바깥쪽의 여백이다.
• 다른 요소와의 거리를 조절할 때 사용한다.
박스 모델 핵심 개념
• 실제 콘텐츠(Content)를 기준으로 안쪽 여백(Padding), 테두리(Border), 바깥 여백(Margin)을 설정하여 요소의 크기와 간격을 조절한다.
• 비유하면:
> Content → 물건
> Padding → 물건과 박스 사이의 완충재
> Border → 박스 테두리
> Margin → 박스와 박스 사이 거리
Display 속성
• 요소가 화면에 어떻게 배치될지를 결정하는 CSS 속성이다.
display: block;
• 한 줄 전체를 차지하는 방식이다.
> <div>
> <p>
> <h1>
• 자동 줄바꿈 발생한다.
display: inLine;
• 자신의 콘텐츠 크기만큼만 공간을 차지한다.
> <span>
> <a>
• 옆 요소와 같은 줄에 배치된다.
display: flex;
• 자식 요소들을 쉽고 유연하게 정렬할 수 있는 현대적인 레이아웃 방식이다.
• 주로 가로 정렬, 세로 정렬, 가운데 정렬 등에 많이 사용된다.
display: none;
• 요소를 화면에서 완전히 숨긴다.
• 화면에도 보이지 않고 공간도 차지하지 않는다.
'웹개발' 카테고리의 다른 글
| Server (0) | 2026.05.28 |
|---|---|
| JavaScript (0) | 2026.05.28 |
| HTML (0) | 2026.05.26 |
| 웹(Web) (0) | 2026.05.26 |
| 프론트엔드 & 백엔드 (0) | 2026.05.26 |
