HTML&CSS:: 3. CSS 기본스타일 적용방법

1. COLOR, FONT와 같은 스타일 변경 방법

* 글자색, 배경색, 글꼴은 어떻게 바꾸는 것일까용?

-font 색상 변경

 color : red;

 color : rgba(255.0.0.0.5);

 color : #ff0000;

-font 사이즈 변경

 font-size : 16px;

 font-size : 1em;

-배경색

 background-color : #ff0;

-글씨체/ 글꼴

 font-family : "Gulim";

 font-family : monospace;

실습코드

.myspan은 부모 속성의 font-size를 상속받아 16px의 1.5배(1.5em)가 적용된다. 즉 부모에 의해 바뀔 수 있는 값이다.

2. BOX MODEL을 이용한 엘리먼트 배치

*박스모델의 속성과 다양한 축약표기법에 대해 알아보도록 하자.

-CSS에서 element는 박스의 형태를 가지고 있는데, 이를 BOX model이라고 한다.

-BOX model

: HRML의 elements는 사각형 박스 형태를 가지며, 다음과 같은 속성을 가진다.

 

-margin : elements간의 간격

-border : 테두리 두께

-padding : 테두리와 글자 간의 간격

-margin의 특성

> 인접한 두 개의 block elements가 서로 다른 margin을 가지고 있다면?

 : 큰 값을 가진 margin값이 공유되어 사용된다.

 : 10px + 20px = 20px

> 인접한 두 개의 inline elements의 margin은?

 : 각각의 margin의 합으로 표현된다.

 : 10px + 20px = 30px

-margin, padding의 다양한 축약표기법

> margin : 0px, 0px, 0px, 0px,; (top, right, bottom, left)

> margin : 10px (네개의 분면이 모두 10px)

> margin : 10px 15px; (top, bottom은 10px, right,left 는15px)

실습코드

.wrap에만 padding이 적용된 상태이며 margin-bottom은 30px로 설정했다.