CSS 기본 문법 및 속성 정리 - 초보자도 바로 따라 할 수 있는 가이드

 

오늘은 CSS의 기본 문법과 스타일 속성에 대해 알아보겠습니다. CSS는 웹 페이지의 디자인을 결정하는 중요한 언어입니다.

여기에 대해 자세히 알아볼게요!

1. 스타일 속성 사용하기

CSS를 태그에 적용하려면 style이라는 속성을 사용합니다. 이렇게 하면 HTML 요소의 스타일을 직접 지정할 수 있습니다.

<div style="...">
   ...
</div>

설명

• 위와 같이 <div> 태그에 style 속성을 사용하여 CSS를 적용할 수 있습니다.

2. CSS 속성과 값

CSS를 사용할 때는 속성과 속성 값을 다음과 같은 형태로 적습니다.

<div style="color: #272928">
   ...
</div>

설명

• color는 CSS 속성이고, #272928은 그 속성의 값입니다. 이 경우, 텍스트 색상을 설정합니다.

3. 여러 개의 CSS 속성 사용하기

여러 개의 CSS 속성을 사용할 때는 세미콜론(;)으로 구분하여 나열합니다.

<div style="color: #272928; background-color: #eeeeee">
   ...
</div>

설명

• 이 예제는 텍스트 색상과 배경색을 동시에 설정하고 있습니다.

4. CSS 기본 단위

1. 색 이름

• 예: red, green, yellow
• 장점: 직관적이고 간단하게 사용할 수 있습니다.
• 단점: 표현할 수 있는 색상이 제한적입니다. 일반적으로 색상 코드를 사용하는 것이 더 유용합니다.

2. 색상 코드

• HEX 코드: 색상을 16진수로 표현합니다.
• 예를 들어, #FF5733은 특정한 색을 나타냅니다.
• 색상 코드를 확인하려면 "Color Picker"를 검색해 사용할 수 있습니다.

3. 픽셀(px)

• 픽셀: 화면에서 그려지는 가장 작은 단위입니다. 주로 크기를 정의할 때 사용합니다.
• 예: padding: 10px;은 10픽셀의 안쪽 여백을 의미합니다.

5. CSS 속성 예시

여기에서 주요 CSS 속성을 정리해보겠습니다.

• 배경색

background-color: #272928;

• 글자색

color: #ffffff;

• 글꼴

font-family: Poppins, 'Noto Sans KR', sans-serif;

• 글자 크기

font-size: 16px;

• 글자 굵기

font-weight: 400; /* 100부터 900까지 가능 */

• 너비

width: 560px;

• 높이

height: 380px;

안쪽 여백 (Padding)

• 세로, 가로 10px 예시

padding: 10px;

바깥 여백 (Margin)

• 세로, 가로 10px 예시

margin: 10px;

• 세로 10px, 가로 20px 예시

margin: 10px 20px;

• 세로 10px, 가로 자동 예시

margin: 10px auto; /* auto는 가로 여백에서만 동작 */

 

CSS는 웹 페이지의 디자인을 조정하는 강력한 도구입니다. 위에서 설명한 기본 문법과 속성을 이해하면, HTML 요소의 스타일을 손쉽게 조정할 수 있습니다. CSS를 더 깊이 공부하면 더욱 다양한 기능을 활용할 수 있습니다!

 

더 궁금한 점이 있으면 언제든지 질문해 주세요! 😊

 

구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱