CSS 기초 - 3

border 속성은 요소에 테두리를 줄 수 있다.

굵기, 스타일, 색을 지정할 수 있다.

ex) border : 2px solid black;

 

box-sizing 속성은 너비와 높이 값에 padding과 border값을 포함시킬지 결정

 

- box-sizing이 content-box일 때는, 너비와 높이에

padding과 border를 제외시키고, 안쪽의 텍스트 박스부분만 적용

- box-sizing이 border-box일때는 너비와 높이에 padding과 border값을 포함시킴

 

border-radius 속성은 모서리를 둥글게 함 

 

 

 

 

 

overflow 속성은 부모 요소보다 높이나 너비값이 큰 자식요소를 나타내는

방법을 지정할 수 있다.

 

overflow에 x,y축을 함께 주거나, overflow-x, overflow-y 속성들로

따로 지정할 수 있다. 

 

 

overflow : auto

자식요소가 부모 영역을 벗어났을 때, 스크롤을 통해 보여준다

 

overflow : scroll

자식요소가 부모 영역을 벗어났을 때, 스크롤을 통해 보여준다

부모 영역을 벗어나지 않아도 무조건 스크롤바가 나온다.(맥은 아님)

 

overflow : visble 

자식요소가 부모 영역을 벗어났을 때 넘어서 보여준다.

 

overflow : hidden

부모 영역을 벗어난 부분을 아예 안보여준다.

 

 

 

 

box-shadow 속성은 박스 요소에 그림자를 줄 수 있다.

 

box-shadow : inset 여부 / offset-x / offset-y / blur-radius / spread-radius / color

*inset을 넣어주면 안쪽 그림자가 된다

 

ex) box-shadow : inset 4px; 4px; 4px; 4px; gary;

 

 

 

 

 

이미지를 배경에 사용하는 속성

 

background-image : url()

background-size :

background-position : 

 

 

 

 

 

position

 

position 속성은 요소들이 화면에 어떻게 배치될지를 지정

font-size등과 다르게, 자식요소에게 되물림 되지않는다

 

 

position : static

기본값, 페이지의 흐름을 따르며, top,bottom,left,right,z-index 속성의 영향을 받지 않음

 

position : relative

원래 위치를 기준으로 top~right 속성값이 적용되도록 함

요소의 위치는 이동하나, 요소가 차지하는 공백의 위치는 유지

(의자는 그대로, 나만 일어나서 움직이는 느낌)/

 

position : absolute 

static이 아닌 첫 부모 요소를 기준으로 top~right을 사용하여 위치를 조정할 수 있음

 

요소는 페이지의 문서 흐름에서 벗어나, 자리를 차지하지 않게 됨

 

position :  fixed

부모 요소가 아닌 veiwport를 기준으로 위치를 지정

스크롤에 영향을 받지않으므로, 팝업 등 움직이지 않는 요소들에 유용하게 사용 가능

 

position : sticky 

요소가 스크롤로 이동할 수 있는 공간을 top~right 속성으로 제한할 수 있음

 

 

 

 

 

z-inded 속성은 static이 아닌 요소들간 위아래 배치 순서를 지정

auto는 0과 같으며, 같은 값의 요소들 중에는 나중에 배치된 것이 위로 올라오게 됨

 

 

 

 

 

cursor 속성

 

요소에 마우스를 가져다 놓았을 때, 포인터가 어떻게 표시될지 정하는 속성

auto : 커서가 어떤 모양일지를 브라우저가 적절히 정함 

default : 무조건 화살표 모양

none : 커서가 없어짐

pointer : 클릭할 수 있는 요소임을 알려줌

zoom-in : 확대할 수 있는 요소임을 알려줌

not-allowed : 클릭하면 안되는 요소임을 알려줌

 

더 많은 다양한 속성이 있다.

 

 

 

 

 

[요소를 숨기는 3가지 방법]

 

opacity

불투명도이다. 

속성을 0으로하면 모습만 감춘다. 스크린 더에 따라 읽지않을 수도 있음

 

visibility

속성을 hidden으로 하면 opacity 효과에 더하여

마우스 오버 효과나, 포커스, 클릭 등도 무효화 한다.

 

display

속성을 none으로 하면 opacity,visibility 효과들에 더하여 자리도 차지하지 않는다.