CSS 기초 공부(2) - 속성, 값

CSS 속성과 값이란?

저번 글에서 그림으로 보여줬듯이 속성이란 선택자의 디자인이라고 할 수 있다.

예를 들어 가구의 종류(책상, 장롱 등)을 선택자라고 한다면 속성은 가구의 색, 크기, 모양 등을 디자인 요소를 지정하는 방식이라고 할 수 있다.

그리고 그 디자인의 세부적인 수치를 지정하는 것이 값이다. 50cm 짜리 의자, 등받이가 없는 의자, 파란색 의자 등이라고 할 수 있다.

---

이런 속성의 종류를 예시와 함께 살펴보자면 다음과 같다.

 

HTML 상의 body 부분에 <button> 태그를 사용해서 버튼을 만들고

CSS 상에서 버튼의 속성과 값을 지정하였다.

button{
    color: white; /* 텍스트 색상 */
    background-color: green; /* 배경 색상 */
    width: 100px; /* 요소의 너비 */
    height: 50px; /* 요소의 높이 */
    border-bottom: 20px solid blue; /* 요소 테두리 */
}

 

해당 속성을 지정한 다음 웹페이지를 실행 시키면 다음과 같은 모양의 버튼이 나온다.

텍스트의 색상을 white로 했기 때문에 버튼이라는 내용이 white로 표시된다.

배경색상을 green으로 했기 때문에 버튼의 색상이 green으로 표시된다.

width와 height는 각각 너비와 높이인데 녹색 영역 부분이 100px만큼의 가로 길이 50px 만큼의 세로 길이를 가진 것을 볼 수 있다.

border-bottom은 아래쪽 테두리를 의미한다. 20px solid blue로 지정해서 20px 크기를 가진 아래쪽 테두리가 파란색으로 만들어진 것을 볼 수 있다.

테두리의 종류는 다음과 같다.

• none: 테두리를 표시하지 않는다. (기본값)
• solid: 실선 테두리
• dashed: 파선 테두리
• dotted: 점선 테두리
• double: 이중선 테두리

그렇다면 여기서 border 속성을 변경하면 어떻게 될까?

button{
    color: white; /* 텍스트 색상 */
    background-color: green; /* 배경 색상 */
    width: 100px; /* 요소의 너비 */
    height: 50px; /* 요소의 높이 */
    border-color: aqua ; /* 테두리 색 */
    border-width: 3px; /* 테두리 너비 */
    border-style: dotted; /* 테두리 스타일일 */
}

 

이번에는 테두리를 전체 적용으로 수정하고 점선, aqua 색상, 너비 3px로 지정했더니 아래와 같은 모양의 버튼이 나왔다.

이처럼 버튼이라는 태그 또한 다양한 방법으로 디자인이 가능하다.

---

또한 이런식의 속성은 버튼에만 해당하는 것이 아니라 h2같은 태그나 p같은 태그도 속성을 사용해서 꾸미는 것이 가능하다.

이번에는 외부 스타일 시트 css를 사용했지만 내부 스타일 방식으로 하나의 태그에 스타일을 하나 하나 입력해서 특정 태그만 꾸미는 것도 가능하다.

---

여러가지 속성들

1. 텍스트 관련 속성

• color: 텍스트 색상을 지정합니다.
• font-size: 텍스트 크기를 지정합니다.
• font-family: 텍스트 글꼴을 지정합니다.
• font-weight: 텍스트 굵기를 지정합니다.
• text-align: 텍스트 정렬을 지정합니다.
• text-decoration: 텍스트 밑줄, 취소선 등을 지정합니다.
• line-height: 줄 간격을 지정합니다.

2. 배경 관련 속성

• background-color: 배경 색상을 지정합니다.
• background-image: 배경 이미지를 지정합니다.
• background-repeat: 배경 이미지 반복 방식을 지정합니다.
• background-position: 배경 이미지 위치를 지정합니다.
• background-size: 배경 이미지 크기를 지정합니다.

3. 박스 모델 관련 속성

• width: 요소의 너비를 지정합니다.
• height: 요소의 높이를 지정합니다.
• margin: 요소 바깥쪽 여백을 지정합니다.
• padding: 요소 안쪽 여백을 지정합니다.
• border: 요소 테두리를 지정합니다.

4. 레이아웃 관련 속성

• display: 요소의 표시 방식을 지정합니다.
• position: 요소의 위치를 지정합니다.
• float: 요소의 흐름을 지정합니다.
• flexbox: 유연한 레이아웃을 구성합니다.
• grid: 격자 레이아웃을 구성합니다.

5. 애니메이션 관련 속성

• transition: 요소의 속성 변화를 부드럽게 만듭니다.
• animation: 요소에 애니메이션 효과를 적용합니다.

6. 기타 속성

• visibility: 요소의 표시 여부를 지정합니다.
• opacity: 요소의 투명도를 지정합니다.
• cursor: 마우스 커서 모양을 지정합니다.