CSS 자주 사용되는 속성 알아보기 (feat. 작성순서, 우선순위)

 

나만의 웹사이트를 이쁘게 꾸며주기 위한 언어인 CSS, 단순히 HTML로만 코딩을 한다면 정말 못생긴 웹사이트가 되어 버린다. 이런 웹사이트를 꾸며줄 수 있는 도구가 바로 CSS이다. 실제로 코딩을 하려고 하니 자주 사용하지만 헷갈리는 CSS속성들이 있어 정리해보고자 한다. 그럼 CSS의 속성은 무엇이 있는지 어떻게 작성해야 하는지 알아보자.

 

 

 

---

 

1. CSS 권장 작성순서

① 레이아웃 : display, float, postiton, 

② 박스모델 : width, height, margin, padding, border

③ 배경 : background

④ 폰트 : font, color, text-align, vertical-align

⑤ 그 외 속성

 

 

2. CSS 적용 우선순위

① 속성 값 뒤에 !important를 붙인 속성

② HTML에서 style을 직접 지정한 속성

③ #id로 지정한 속성

④ .class 로 지정한 속성

⑤ 태그이름 (body 등) 으로 지정한 속성

 

 

3. CSS 자주 사용되는 속성

display

속성을 어떻게 보여줄지 결정한다.

none : 노출되지 않게 설정
block : 가로 한 블록 전체를 사용
inline : 가로에 한줄에 노출되도록 사용
inline-block : 블록과 인라인의 중간

 

flex-box

display의 속성중 하나이며, 알아만 두면 사용하기 편한 속성이다.

사실 이것 하나만 알고있으면 위에 4개의 display 속성보다 편하게 사용할 수 있다.

우선 display:flex 를 작성하고 나면 아래의 속성 값들을 사용할 수 있다.

 

flex-direction : 항목을 스택하려는 방향을 정의
 - row(기본값) : 가로 
 - row-reverse : 가로 역순
 - column : 세로 
 - column-reverse : 세로 역순 

flex-wrap : 플렉스 항목을 래핑할지 여부를 지정
 - wrap : 플렉스 항목이 래핑 되도록 지정
 - nowrap(기본값) : 플렉스 항목이 래핑 되지 않도록 지정 
 - wrap-reverse : wrap의 역순

flex-flow : direction과 wrap 두가지를 한 번에 쓸 수 있는 약식 속성
 - ex) flex-flow: row wrap;

justify-content : 플렉스 항목을 정렬하는데 사용
 - center : 가운데 정렬
 - flex-start : 컨테이너 시작 부분에 정렬
 - flex-end : 컨테이너 끝 부분에 정렬
 - space-around : 공백이 있는 일정한 간격에 맞게 정렬
 - space-between : 공백 없이 일정한 간격에 맞게 정렬 

align-items : 플렉스 항목을 정렬하는데 사용
 - stretch(기본값) : 항목을 확장하여 컨테이너를 채움
 - center : 컨테이너 중간 정렬
 - flex-start : 컨테이너 시작 부분에 정렬
 - flex-end : 컨테이너 끝 부분에 정렬
 - baseline : 기준선과 같은 라인에 정렬

 

float

해당 요소를 어떻게 배치할 건지 지정하는 속성

inherit : 부모 요소에 상속
left : 왼쪽에 배치
right : 오른쪽에 배치
none : 배치하지 않음

 

clear

float 속성을 통해 태그를 배치한 후 문서의 흐름을 제거하기 위해 사용.

left  : 좍측 배치 제거
right : 우측 배치 제거
both : 양쪽 모두 제거

 

position

태그를 어떻게 위치 시킬지를 정의

static : 기본값, 다른 태그와의 관계에 의해 자동 배치
absolute : 절대 좌표와 함께 위치를 지정.
relative : 원래 있던 위치를 기준으로 좌표 지정
fixed : 스크롤과 상관없이 좌표를 고정
inherit : 부모 태그의 속성 값을 그대로 상속

 

 

width, height

width=가로 / height = 세로 길이를 의미.

값을 정의할 때 auto / px / % / em 등으로 설정한다.

 

margin, padding

margin = 바깥쪽 여백 / padding = 안쪽 여백을 의미

방향 지정도 가능하며 px, auto 등의 값으로 설정이 가능하다.

값을 작성하면 위쪽부터 시계방향으로 돌아가며 작성한다.

즉, 위쪽 / 오른쪽 / 아래쪽 / 왼쪽으로 설정이 가능. 

 

margin : 8px;  => 상하좌우 모두 22px여백
margin : 8px 12px;  => 상하 8px, 좌우 12px 여백
margin : 8px 12px 5px 24px  =>  위 8px, 오른쪽 12px, 아래 5px, 왼쪽 24px

 

위 방법 이외 아예 방향을 지정하여 설정이 가능하다.

 

margin-top : 위 여백 지정
margin-bottom : 아래 여백 지정
margin-left : 왼쪽 여백 지정
margin-right : 오른쪽 여백 지정

 

border

태그의 테투리를 설정하는 속성 

border-width : 테두리의 두께 설정
border-style : 테두리의 스타일 설정 (solid, dotted 등이 있음)
border-color : 테두리의 색상을 설정 (color)

위 마진처럼 방향 설정이 가능

border-top : 위쪽 테두리
border-bottom : 아래쪽 테투리
border-left : 왼쪽 테두리
border-right : 오른쪽 테두리

 

border속성은 보통 아래와 같이 함께 사용한다.

boder: 1px solid #eeeeee;
boder-bottom: 3px solid gray;

 

border-radius

border의 테두리를 둥글게 만들어주는 속성 (px, % 단위를 사용)

작성법은 margin / padding과 동일하게 4개의 값을 띄어 쓰면 된다.

border-radius : 5px;   => 4방향 모두 적용
border-radius : 3px 4px 3px 4px ;   => 왼쪽 위 , 오른쪽 위, 오른쪽 아래, 왼쪽 아래 적용

 

 

background

배경을 지정하는 속성

background-color : black;  => 배경색 지정
background-image : url("xxx.png");  => 배경 이미지 지정
background-repeat : repeat-x; => 배경이미지 반복 여부 (x=가로, y=세로, no=반복 X)
background-position : 배경 이미지 위치

 

 

font

글자의 폰트를 정의하는 속성.

font-style : 글자 스타일 지정
font-weight : 글자 두께 지정
font-size : 글자 크기 지정
line-height : 줄 간격 지정
font-family : 글꼴 설정
font-variant : 글꼴 변경 (소문자를 대문자로 등)

 

color

색상을 정의하는 속성, 글자 색상

color : blue; 
color : #555555

 

text-align

텍스트의 정렬 방향 지정

left : 왼쪽 정렬
right : 오른쪽 정렬
center : 가운데 정렬
justify : 양쪽 정렬 (자동 줄 바꿈 시 오른쪽 경계선 부분 정리)

 

z-index

postition 속성을 이용하면 요소를 겹치게 둘 수 있음

이때 겹치는 요소들의 순서를 지정. 양수 또는 음수로 지정.

숫자가 클수록 스택의 우선순위가 높음.

 

z-index : 1;

 

overflow

영역에 맞지 않는 콘텐츠를 제어. 텍스트 값이 너무 길 때 사용.

visible : 디폴트 값, 오버플로가 잘리지 않음
hiddne : 오버플로가 잘리고 내용은 보이지 않음
scroll : 오버플로가 잘리고 스크롤바가 추가되어 나머지 콘텐츠를 볼 수 있음
auto : 자동으로 사용

 

@media

CSS3에 도입된 기술인 미디어 쿼리.

특정 조건이 true인 경우에만 css 속성을 포함

작성법은 아래와 같다.

 

@media only screen and (max-width:786px){
   /*css 작성 */
   /*가로 사이즈가 786px이 되면 해당 css적용*/
}

 

 

이 외에도 CSS에는 많은 속성 값들이 있다.

사용하다가 필요한 게 있다면 아래 사이트에서 찾아서 사용해보는 걸 추천한다.

 

 

 

▼참고사이트

①CSS Flexbox 모델의 개념을 익히기 좋은 사이트이다.

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

② 모질라에서 제공하는 사이트이다. 
https://developer.mozilla.org/ko/docs/Web/CSS

CSS: Cascading Style Sheets | MDN

 

③ 온라인으로 다양한 웹 기술을 배울 수 있는 w3schooks 사이트이다. 중간중간 퀴즈도 풀 수 있어서 학습하기에 좋다.
https://www.w3schools.com/css/default.asp

CSS Tutorial