CSS 속성 2편 ( display + 배경 속성 )

1편 - [Web Programming] - CSS 속성 1편 ( 단위 + 박스 속성 )

1편에 이어 알아볼 내용은 display속성과 배경 속성이다.

2편의 첫번째로 display속성을 살펴보겠다 😚

HTML이 나오면서 display속성에 입력할 수 있는 다양한 키워드가 등장했지만

모든 display속성을 제대로 지원하는 웹 브라우저는 아직 없다고 한다.

display속성을 알아보기에 앞서 이전에 등장했던 친구 중 공간 분할 태그 를 기억하고 있으면 좋겠다.

div는 블록 형식, span태그는 인라인 형식으로 알고 있을 것이다.

우리는 display속성을 이용해 div와 span같이 인라인, 블록, 인라인-블록 형식을 설정할 수 있다.

예) display: 키워드 명;

여기서 인라인-블록 형식 의 차이가 무엇인가 궁금증이 생긴다.

찾아보면 width와 height속성, margin 속성 사용 시 인라인 형식과 다른 점이 있다.

실제 인라인 형식의 스타일로 width와 height을 주면 적용이 되지 않는다.

또한 margin속성이 div태그의 좌우로만 적용이 된다.

반면에 inline-block 키워드를 적용하면 width와 height속성이 적용되고 margin속성도 상하좌우로 적용 된다.

블록 형식은 width와 height, margin속성을 적용할 수 있다.

두번째는 배경 속성이다.

배경 이미지 지정 은 이전에 말했던 url 단위를 사용하여 넣어주면 된다.

배경 이미지의 크기 지정  부분에서는 주의 할 점이 있다.

바르게 사용한 문장은 background-size: 100% 250px; 이와 같다.

하지만 만약에 background-size: 100%, 250px; 이렇게 값에 쉼표를 넣어주게 되면 

각 배경에 서로 다른 크기를 입력하는 것으로 인식되므로 주의 하자.

보통 이미지를 넣게 되면 하나의 사진만이 나타날 것이다. 

만약 반복해서 사진을 나타내고 싶다면 repeat: repeat;을 사용하면 된다.

가로로만 (x축으로만) 반복하고 싶다면 repeat-x, 세로로 (y축으로) 반복하고 싶다면 repeat-y를 사용한다.

background-attachment 속성 은 배경 이미지를 화면에 고정하는 속성으로 기본 키워드로 scroll이 있다.

이를 사용시 화면 스크롤에 따라 배경 이미지가 함께 이동한다.

마지막으로 background-position 속성은 아이콘을 만들 때 자주 사용된다고 한다.

- background-position: 키워드;

- background-position: X축 위치;

- background-position: X축 위치 Y축 위치;

로 사용한다.