개발감성

.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; }..