CSS 기초: 스타일링의 기본, 셀렉터와 프로퍼티
반응형
웹 페이지의 시각적 요소를 꾸미고 디자인하는 것은 사용자 경험에 중요한 역할을 합니다. 이 강의에서는 CSS(Cascading Style Sheets)의 기본적인 요소, selector의 종류와 사용 방법, 그리고 스타일링에 자주 사용되는 property에 대해 배워보겠습니다.
CSS란 무엇인가?
CSS는 웹 페이지의 HTML 요소에 스타일(색상, 글꼴, 레이아웃 등)을 적용하기 위해 사용되는 언어입니다. HTML이 페이지의 구조와 내용을 정의한다면, CSS는 그것들이 어떻게 보일지 결정합니다.
CSS 기본 구조
CSS 규칙은 셀렉터와 선언 블록으로 구성됩니다.
selector {
property: value;
property: value;
}- 셀렉터(Selector): 스타일을 적용할 HTML 요소를 지정합니다.
- 속성(Property): 스타일을 변경하고자 하는 요소의 특징(예: 색상, 너비).
- 값(Value): 속성에 적용할 값(예: red, 20px).
CSS 셀렉터의 종류
CSS 셀렉터는 다양한 방식으로 HTML 요소를 선택할 수 있습니다.
태그 셀렉터
- 태그 이름을 사용하여 그 태그를 가진 모든 요소를 선택합니다.
p {
color: blue;
}
클래스 셀렉터
- .으로 시작하며, 특정 클래스를 가진 모든 요소를 선택합니다.
.button {
background-color: green;
}ID 셀렉터
- #으로 시작하며, 특정 ID를 가진 요소를 선택합니다.
#header {
font-size: 24px;
}CSS property: 예시와 설명
CSS는 다양한 프로퍼티를 제공하여 웹 페이지의 다양한 요소를 스타일링할 수 있습니다.
텍스트 스타일링
- color: 텍스트의 색상을 지정합니다.
- font-size: 글꼴 크기를 지정합니다.
- font-family: 글꼴 유형을 지정합니다.
박스 모델
- margin: 요소 주위의 외부 여백을 설정합니다.
- padding: 요소 내부의 여백을 설정합니다.
- border: 요소의 테두리를 설정합니다.
레이아웃과 위치
- display: 요소의 표시 유형을 결정합니다 (block, inline, flex 등).
- position: 요소의 위치 조정 방식을 설정합니다 (static, relative, absolute 등).
<div style="background-color: #f5f5f5; padding: 20px; border-radius: 10px;">
<p style="color: blue; font-size: 20px; font-family: Arial, sans-serif;">
이것은 스타일링된 텍스트입니다.
</p>
<div style="margin: 20px; padding: 10px; border: 2px solid black;">
이것은 박스 모델을 적용한 박스입니다.
</div>
<div style="display: flex; justify-content: space-around; margin-top: 20px;">
<div style="background-color: lightgray; padding: 10px; width: 100px; text-align: center;">
1
</div>
<div style="background-color: lightgray; padding: 10px; width: 100px; text-align: center;">
2
</div>
<div style="background-color: lightgray; padding: 10px; width: 100px; text-align: center;">
3
</div>
</div>
<div style="position: relative; left: 20px; top: 10px;">
상대 위치 박스
</div>
<div style="position: absolute; right: 0; bottom: 0;">
절대 위치 박스
</div>
</div>
예제
이것은 스타일링된 텍스트입니다.
이것은 박스 모델을 적용한 박스입니다.
1
2
3
상대 위치 박스
절대 위치 박스
- 전체 틀 스타일링:
- background-color: #f5f5f5;는 전체 틀의 배경색을 연한 회색으로 설정합니다. 이는 하얀색 배경과 대비되어 시각적으로 구분됩니다.
- padding: 20px;는 틀의 내부에 20픽셀의 패딩을 추가하여, 내용과 테두리 사이에 공간을 만듭니다.
- border-radius: 10px;는 틀의 모서리를 둥글게 만들어줍니다.
- 텍스트 스타일링:
- color: blue;는 텍스트의 색상을 파란색으로 지정합니다.
- font-size: 20px;는 글자 크기를 20픽셀로 설정합니다.
- font-family: Arial, sans-serif;는 사용할 글꼴을 Arial, 그리고 대체 글꼴로 sans-serif를 지정합니다.
- 박스 모델 스타일링:
- margin: 20px;는 박스 주위의 마진을 20픽셀로 설정하여 박스 주변의 공간을 만듭니다.
- padding: 10px;는 박스 내부의 패딩을 10픽셀로 설정합니다.
- border: 2px solid black;는 박스 주위에 2픽셀 두께의 검은색 실선 테두리를 추가합니다.
- 플렉스박스 레이아웃:
- display: flex;는 컨테이너를 플렉스박스 컨테이너로 만듭니다. 부모요소에 flex 선언을 해주면 자식 요소들이 부모를 기준으로 유연하게 정렬될 수 있습니다.
- justify-content: space-around;는 플렉스 항목들을 컨테이너 내에서 공간을 균등하게 분배하여 정렬합니다.
- 개별 항목 스타일링:
- 항목들은 background-color: lightgray;, padding: 10px;, width: 100px;, text-align: center; 속성을 통해 스타일링됩니다. 이는 각 항목의 배경색, 패딩, 너비 및 텍스트 정렬을 설정합니다.
- 위치 스타일링:
- position: relative;와 position: absolute;는 요소의 위치를 상대적 또는 절대적으로 지정합니다. left, top, right, bottom 속성을 통해 정확한 위치를 조정합니다.
CSS는 웹 페이지의 외관을 꾸미고 사용자에게 보다 나은 시각적 경험을 제공해줍니다. 밋밋한 html 뼈대를 둥글고 귀엽게 만들거나 그림자를 주는 등 무채색의 화면에 색감을 더해주고 디자인을 해주는 기법이 바로 CSS 입니다. 웹 개발에서 html과 css는 정말 중요합니다. css만 잘 알아도 왠만큼의 웹 개발(프런트)를 잘 다룰 수 있게 됩니다. 이번 4번째 강의서는 기본적인 셀렉터와 프로퍼티를 통해 웹 페이지 스타일링의 기초를 살펴보았습니다.
반응형
댓글