CSS - 2. 단위, 배경, 박스모델

 

 

1. 속성 - 정의와 구문

CSS의 속성은 종류가 매우 다양하고, 지속해서 업데이트 된다. 잦은 변화로 인해 CSS 관련 서적이나 강의를 통해 모든 속성을 파악하는 데는 어려움이 있으며 다양한 변화에 대해 대응하고 학습하기 위해 www.w3schools.com, developer.mozilla.org/ko/ 등의 사이트들을 이용할 수 있다.

 

CSS Reference를 통해 확인 가능한 사항들.

• 정의: 해당 속성이 어떤 변화를 일으키고 어떻게 동작하는지 파악한다.
  • 기본 값
  • 상속 여부
  • 애니메이션 가능 여부
  • 사용 가능한 CSS 버전
• 문법: 해당 속성값을 어떤 식으로 나열하여 사용하는지 파악할 수 있다.
• 속성 값
  • initial: 속성의 기본값으로 초기화. 
  • inherit: 부모 요소에 해당 속성의 값을 상속하겠다.
• 지원 범위: 어떤 브라우저의 어떤 버전이냐에 따라 같은 값이어도 다르게 렌더링 될 수 있으므로, 현재 프로젝트의 사용자 제공 지원 범위를 확인하고 적용해야 한다.
• 예제: 문법과 속성값을 바탕으로 실제로 속성을 동작하는 예제 코드를 확인할 수 있다.
• 참고사항: 해당 속성에 대해 특이사항이나 버그에 대해 확인할 수 있다.

 

 

2. 속성 - 단위

• 절대 길이: 
  • px - pixel: 장치의 해상도에 따라 상대적
  • pt - points: 윈도우와 맥에서의 크기 차이가 있기 때문에 웹개발 시 권장하는 단위는 아니다.
  • ...
• 상대 길이: 
  • %: 부모의 값에 대해 백분율로 환산한 크기를 갖는다.
  • em - font size of the element: font-size를 기준으로 값을 환산한다. 소수점 3자리까지 표현 가능. 1em = 16px
  • rem - font size of the root element: root의 font-size를 기준으로 값을 환산
  • vw - 1% of viewport's width: viewport의 width값을 기준으로 1%의 값으로 계산
  • ...

 

 

3. 속성 - 색상

body{color:black} /* By color names */
body{color:#000000} /* Hexadecimal colors */
body{color:#000} /* Hexadecimal colors */
body{color:rgb(0,0,0)} /* As RGB values (red, green, blue / 0-255) */
body{color:rgba(0,0,0,0)} /* (red, green, blue, alpha(투명도) / 0-255, 0 or 1) */
/* As HSL values (CSS3) */
/* AS HWB values (CSS4) */
...

• 컬러 키워드: CSS 자체에서 사용 가능한 문자 식별자
• 16진법: 각각 두 자리씩 세 가지 색상을 나타낸다. 각각의 두 자리가 같은 값을 가지면 3자리로 축약해 사용할 수 있다.
• RGB (): 0-255의 정수로 된 값을 지정할 수 있으며 각 변수 값의 강도를 정의한다. (R, G, B)
• RGBA(): 기존 RGB 값에 A(투명도)가 추가된 형태이다.

 

 

4. 속성 - background

/* 속성 */
background-color: green;
background-image:url("img_tree.gif");
background-repeat:no-repeat;
background-position: top center;
background-attachment: scroll;
...

/* 축약형 */
background: grren url("img_tree.gif") no-repeat fixed center;

• background-color: 기본값 transparent, 배경의 색을 지정하는 속성
• background-image: 기본값 none, 배경으로 사용할 이미지의 경로를 지정하는 속성. url 경로는 절대경로와 상대경로 모두 사용가능.
• background-repeat: 기본값 repeat, 이미지의 반복 여부와 방향을 지정하는 속성. x축, y축으로 반복되어 표시
  • <속성값>
  • repeat: x, y축으로 모두 반복
  • repeat-x: x축 방향으로만 반복
  • repeat-y: y축 방향으로만 반복
  • no-repeat: 이미지를 반복하지 않음
• background-position: 기본값 0%, 
  • %
  • px
  • 키워드: top, left, right, botttom, center
• background-attachment: 기본값 scroll, 화면 스크롤에 따른 배경 이미지의 움직임 여부를 지정하는 속성
  • scroll: 요소 자체를 기준으로 고정된 이미지. 내용과 함께 스크롤 되지 않음
  • local: 요소의 내용을 기준으로 고정. 내용과 함께 스크롤 됨.
  • fixed: 뷰포트를 기준으로 고정. 스크롤에 영향을 받지 않음. (뷰포트: 사용자가 시각적으로 볼 수 있는 웹페이지 영역)

 

 

5. 속성 - boxmodel

• content 영역: 요소의 실제 내용을 포함하는 영역. 크기는 내용의 너비 및 높이를 나타낸다.
• border 영역: content 영역을 감싸는 테두리 선
• padding 영역: content 영역과 테두리 사이의 여백. content 영역이 배경, 색이나 이미지가 있을 때 패딩 영역까지 영향을 미침.
• margin 영역: border 바깥쪽의 영역. border 영역을 다른 요소와 구별하기 위해 쓰이는 빈 영역. 

 

 

6. 속성 - border

/* 속성 */
border-width: 1px; /* 두께 <length> | thin | medium | thick */
border-style: solid /* 종류 none | hedden | dotted | solid } double | groove | ridge | inset | outset */
border-color:#000 /* 색상 */

/* 축약형 */
border; 1px solid #000; /* 단축 속성 */
border-left 6px solid red; /* 보더 왼쪽 */
border-width: 6px; /* 보더 두께 */
border-width: 6px 3pxl /* 보더 상하, 좌우 두께 */
border-width: 6px 3px 4px; /* 보더 상,우(좌), 하 두께 */
border-width: 6px 3px 4px 1px; /* 보더 상, 우, 하, 좌 두께 */

• border-width: 선의 굵기를 지정하는 속성. 상하좌우 선의 굵기를 다르게 표현할 수 있다.
• border-style: 선의 모양을 지정하는 속성. 마찬가지로 상하좌우 선의 모양을 다르게 표현할 수 있다.
• border-color: 선의 색상을 지정하는 속성. 상하좌우 다르게 표현 가능.

 

 

7. 속성 - padding

요소의 안쪽 여백. 0인 경우 단위 생략이 가능하다.

• padding-top:  영역의 위쪽 여백을 지정
• padding-right: 영역의 오른쪽 여백을 지정
• padidng-bottom: 아래쪽 여백을 지정
• padding-left: 왼쪽 여백을 지정

padding: [-top] [-right] [-bottom] [-left];
            0    10px	   20px	   30px /* 상, 우, 하, 좌 다름 */
            0    10px	   20px		/* 좌, 우 같음 */
            0    10px				/* 상, 하 같음 & 좌, 우 같음 */
            0							/* 상, 우, 하, 좌 모두 같음 */

 

 

8. 속성 - margin

요소의 바깥 여백

margin: length | auto | initial | inherit;

margin-left: auto; /* 우측 정렬 모양 */
margin: auto; /* 가로축 중앙 정렬(요소에 width 값 필요) */

• margin collapse: tom값과 bottom 값이 겹치게 되면 더 큰 값으로 적용된다.
• margin auto: 가로축을 기준으로 정렬한다.(가운데 정렬) width 갖고 있는 요소에만 적용할 수 있음.

 

9. 속성 - margin & padding

	+	-	auto	단위
margin	O	O	O	px, %
padding	O	X	X	px, %

* %값은 상하좌우의 방향에 관계 없이 모두 요소의 width 값을 기준으로 값이 결정된다.

 

 

10. 속성 - width

요소의 가로 값을 결정

width: auto | value | initial | inherit

width는 content 영역의 너비를 제어할 때 사용하는데 이때 auto가 아닌 특정한 값을 지정해 사용하면, 그 크기는 box model 영역에서 margin영역을 제외한 모든 영역에 대해 영향을 받는다. 예를들어, 

<div class='box'> box <div>

.box{
  width: 100px;
  padding: 20px;
  border: 10px solid black;
}

위와 같이 선언 됐을 때 요소의 총 가로 크기는 160px이다. content속 내용이 100px + 양 옆의 패딩 40px + 양 옆의 border 20px이 되기 때문이다.

 

 

11. 속성 - height

요소의 세로 크기를 정의하는 데 사용하는 속성. 기본적으로 width의 동작 방식과 같게 동작하지만, % 값을 가졌을 때의 동작방식이 다르다.

% 사용시는 누군가의 기본값이 있어야 할당 가능하다.

• height auto: 기본적으로 컨텐츠 영역의 내용만큼 높이를 가진다. 
• height percent: 컨테이닝 블락의 높이에 대한 백분율로 높이를 정의한다. 컨테이닝 블락이란 부모를 의미한다.

 

 

12. 속성 - boxmodel

박스 모델의 구성영역

1. Content: 너비 width/ 높이 height/ Content value + (Padding value * 2) + (Border value * 2) = Box Size

2. Padding: Border와 Content 사이의 여백의 크기

3. Border: Box 요소의 전체 크기를 가늠할 수 있는 요소.

4, Margin: 음수 값 선언 가능, 다른 요소와의 여백. 병합기능.