본문 바로가기
즐거움 넘치는 IT 세계/코드로 만드는 디자인

[ CSS 입문 ] CSS 속성

by 디리씨 2018. 9. 7.
728x90

| 개요

HTML과 비슷하게 CSS도 특정한 기능을 하는 속성들이 미리 정의가 되어 있으며, 

이를 잘 활용하여 태그의 스타일을 정의 할 수 있습니다. 

"속성 : 값"의 형태로 사용되며, 여러 속성끼리는 ; (세미콜론)을 통해 구분됩니다.

하나의 선택자의 속성들을 한줄로 쓰든, 여러줄로 나누어 쓰든 상관 없으며 작업자의 편의에 따라 작성하면 된다.

선택자{ 속성1: 값1; 속성2: 값2 }
/* or */
선택자{
   속성1: 값1;
   속성2: 값2;
}

브라우저의 개발자툴을 이용하면, 특정 태그에 어떤 CSS 속성이 사용되었는지 쉽게 알 수 있습니다.

그리고 브라우저 내에서 미리 스타일을 변형해보고 추가적인 브라우저의 특정 앱들을 이용하면 

바로 코드로 저장되어 사이트에 적용까지도 가능합니다.

이 방법을 가지고도 다른 많은 사이트들을 돌아다니면서 자신이 모르는 속성을 알 수 있고, 

다른 사람들의 작업 방식과 속성의 사용법을 공부할 수 있습니다.

 

 

| 목록

CSS의 속성은 매우 많으며 자주 사용되는 속성들의 일부 내용을 소개합니다.

CSS를 이용해 작업을 하다 보면 작업자마다 작업 방식과 스타일을 표현하는 방식이 다들 다르기 때문에

추후에는 본인에게 맞는 속성들을 이용하여 작업하면 됩니다.

 

      • width, height

      • margin, padding

      • color

      • font

      • text-align

      • background

      • border

      • visibility

      • display

      • float

      • clear

      • position

      • cursor

 

 

 

728x90
반응형