개발감성

.box1 { box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);}.box2 { box-shadow: 0 0 40px rgba(30, 144, 255, 0.5);}.box3 { box-shadow: 10px 10px crimson;}.box4 { box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);}.box5 { box-shadow: inset 40px 10px 20px rgba(255, 255, 255, 0.9);}.box6 { box-shadow: inset 0 0 100px #000;}box-shadow 속성은 x위치_y위치_번짐 정도_색상으로 이뤄져 있으며앞에 inset을 추가해 주면 내부 그림자로 적용된다..textshadow..

.box1 { border-radius: 20px; border-bottom: none; } .box2 { border-radius: 50px; } .box3 { border-radius: 50%; } .box4 { border-radius: 50px 0 50px 0; } .box5 { border-radius: 200px 0 0 0; } .box6 { border-radius: 200px 200px 200px 0; } .box7 { border-radius: 200px 0 200px 0; } .box8 { border-radius: 100px 100px 0 0; }

.parent { border: 1px solid red; width: 600px; height: 200px; } .child { border: 1px solid blue; width: 200px; height: 50px; } .parent div { border: 1px solid yellowgreen; padding: 20px; width: 200px; } 한 칸을 띄우고 선택자를 적으면 모든 자식에 대해 적용을 시킨다. .parent > div { background: #352351; } >를 적어주면 바로 아래의 자식에 대해 적용을 시킨다. .parent > div div { background-color: aqua; } parent 클래스를 가진 요소의 바로 아래 div의 모든 div태그에 aq..

//html 문단1 문단2 문단3 //css p { text-align: center; color: red; } p.class { text-align: right; color: blue; } #id { text-align: left; color: green; } 태그 선택자 보다 class와 id 선택자가 우선된다. 태그 클래스 아이디 인라인 !important li { color: red; } .text { color: blue; } #text { color: green; } 태그 > red 태그 + 클래스 > blue 태그 + 클래스 + 아이디 > green 태그 + 클래스 + 아이디 + 인라인 > gold li { color: red !important; } .text { color: blue; }..