CSS - 속성과 속성값

클론코딩 - CSS 속성

1. min-height / max-height

2. clear: both;

3. border-radius

4. background : url

5. border

 

 

1. min-height , max-height

블럭의 최소, 최대 높이를 설정하는데 사용하는 속성

width 도 마찬가지로 사용할 수 있다.

 

 

2. clear: both;

float를 사용한 후 블럭이 좌,우측에 있을 때 좌측을 채우는 과정에서 우측의 블럭의 양이 적을 경우

밑에 오는 블럭이 우측 블럭 밑으로 채워지는 현상이 있었다. ( 빈 공간에 채워짐..)

 

나누어 놓은 블럭에 관계없이 기본 상태로 돌아갈 수 있는 속성

속성값으로는 both, right, left 가 있지만, 내가 원하는 레이아웃을 이미 만들어 놨기 때문에 both 를 사용했다.

( 참고 : https://developer.mozilla.org/ko/docs/Web/CSS/clear ) 

 

 

3. background : url

일반적으로 background에 속성값으로 색상코드를 넣으면 배경색이 설정된다.

속성값으로 url("") 을 사용하여 이미지의 url 을 넣으면 배경에 이미지를 사용할 수 있다.

띄어쓰기 를 사용하여 좌우측, 상하단으로 이동시킬 수 있다.

기본적으로 이미지에 따라서 바둑판 배열로 적용이 되는데, no-repear 을 같이 사용하게 되면 한번만 넣어줄 수 있다.

/* 사용 예시*/
background: url(“”) 20px 20px no-repeat;

 

 

4. border 

블럭의 테두리를 설정하는데 사용하는 속성

속성값으로는 굵기, 선 종류, 색상 을 사용하여 테두리의 모양을 만들 수 있다.

/* 사용 예시 */
border : 1px soild #000000

속성을 border 이 아닌 border-right, border-bottom 등으로 원하는 위치만 사용할 수 있다.

 

 

5.  border-radius

블럭의 귀퉁이에 라운드를 주기 위해서 사용하는 속성

속성값으로 px 을 사용할 수 있는데
네 모서리가 합쳐져서 원이 되기를 원한다면, ( 블럭의 높이 값 / 2 ) 만큼을 사용해야한다. 
(특정한 값이 있지 않다면 자연스러운 블럭이지 않을까..?)