FRONTEND/CSS4 [CSS] DIV 그림자 주는 법(box-shadow) box-shadow offset-x 그림자의 수평위치(x)를 설정합니다. 요소로부터 떨어진 거리를 나타낸다. offset-y 그림자의 수직위치(y)를 설정합니다. 요소로부터 떨어진 거리를 나타낸다. blur-radius 그림자 테두리에 흐려지는 효과를 부여합니다. 클수록 테두리가 흐려진다. spread-radius 그림자의 크기를 설정합니다. 클수록 그림자의 크기가 커진다. color 그림자의 색상을 설정합니다. chrome 기준으로 기본값은 black. 2개 인자를 전달하는 경우 : offset-x offset-y (color) .phone-screen { background-color: white; height: 600px; width: 300px; margin: 50px; border: 2px rg.. 2021. 4. 16. [CSS] CSS Hack - div 가운데 정렬 space-between disply : flex - > justify-content : space-between 을 했을 때, 원하는 대로 중심이 딱 맞지 않는 경우가 있다. div 마다 width가 틀리기 때문에 벌어지는 일이다. CSS HACK 1. 부모 div에 justify-content: center; 2. 모든 자식 div에 width:33%; 3. 가운데 자식 div display:flex;, justify-content:center; 4. 오른쪽 자식 div display:flex;, justify-content:flex-end; 2021. 4. 14. [CSS] BEM(Block Element Modifier) 이란? BEM(Block Element Modifier) BEM(Block Element Modifier) 은 개발자들이 ID와 Class를 섞어 쓰면서, HTML에서 자신이 ID를 썼는지 Class를 썼는지 헷갈리면서 계속 확인하게 되자 그 시간을 단축시키려고 Class만 사용하기로 통일 하면서 사용되었다고 한다. Block 독립적으로 존재하고 재사용 가능한 요소를 block으로 명명 태그 값, id 사용x 클래스로 정의 position, margin 등의 위치값을 지정하지 않음 (어디든지 재사용해야하니까!) 색상이나 크기 등을 묘사하는 이름x 구조적으로 의미 있는 이름으로 짓기 Ex) Element 블록 내부에 종속되어 실제 기능을 담당하는 것 종속의 의미를 block-name__element-name로 나.. 2021. 3. 29. [CSS] Inline, Block, Inline-Block 비교 Inline in the same line(같은 줄에 위치할 수 있다) 의 줄임말 Height(높이)와 Width(넓이) 가 속성을 지정해도 무시 됨. (해당 태그가 마크업하고 있는 Content의 크기 만큼만 공간을 차지하기 때문) margin의 상하 간격이 적용되지 않는다.(위아래가 적용이 안됨.) Block Width,Height,Margin,Padding 모두 적용 가능하다. margin : box의 boader(경계)로부터 바깥 쪽에 있는 공간 padding : box의 boader(경계)로부터 안 쪽에 있는 공간 Inline-Block Inline처럼 줄 바꿈 없이 한 줄에 엘리먼트 나란히 배치. Inline에서 불가능한 Width,Height 조정 및 Margin,Padding 상하 조정이 .. 2021. 3. 26. 이전 1 다음
