html,css ,js 갑자기 생각나서 해보기로해봤다
예전에 몇번만져보고 안만져봤는데 오늘좀 깊숙히좀해봤더니..
나도모르게 하고있다...
overflow:hidden =콘텐츠를 자르지 않으며 안쪽 여백 상자 밖에도 그릴 수 있습니다.
auto
사용자 에이전트가 결정합니다. 콘텐츠가 안쪽 여백 상자에 들어간다면 visible과 동일하게 보이나, 새로운 블록 서식 문맥을 생성합니다. 데스크톱 브라우저의 경우 콘텐츠가 넘칠 때 스크롤바를 노출합니다.
overlay
auto와 동일하게 동작하지만, 스크롤바가 공간을 차지하는 대신 콘텐츠 위에 위치합니다. Webkit(Safari 등)과 Blink(Chrome 또는 Opera 등) 기반 브라우저만 지원합니다.
scroll
콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라냅니다. 브라우저는 콘텐츠를 실제로 잘라냈는지 여부를 따지지 않고 항상 스크롤바를 노출하므로 내용의 변화에 따라 스크롤바가 생기거나 사라지지 않습니다. 프린터는 여전히 넘친 콘텐츠를 출력할 수도 있습니다.
auto
구문이빠져나올떄 scroll을 생성해서 스크롤을 할수있는 공간을 만들어줄수도 있다.
하지만 hidden을 사용하면 구문밖에 영역은
잘리게된다.
visible은 안쪽여백 상자밖에도 그릴수있다!
box-shadow: none | x-position y-position blur spread color | inset | initial | inherit
none : 그림자 효과를 없앱니다.
x-position : 가로 위치입니다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어집니다. (필수)
y-position : 세로 위치입니다. 양수면 아래쪽에, 음수면 위쪽에 그림자가 만들어집니다. (필수)
blur : 그림자를 흐릿하게 만듭니다. 값이 클 수록 더욱 흐려집니다.
spread : 양수면 그림자를 확장하고, 음수면 축소합니다.
color : 그림자 색을 정합니다.
inset : 그림자를 요소의 안쪽에 만듭니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.
box-shadow: x, y값부터시작
간단히 코드를짜다가 심심해서 해보기로했다.
사진을 보게되면
box-shadow:5px 0px black;를 지정했을떄
가로위치에서 양수에 값을 지정해줬더니 오른쪽에 지정되는것을 볼수있다.
왼쪽에 값을지정해줄라면..
box-shadow:-5px 0px black;
x포지션에서 음수값을 지정해주면된다.
색상을 바꿀라면 black --> 원하는 color를 지정해주면된다.
x포지션 양수값,y포지션 양수값 또한 색상을 pink로지정
