티스토리

개발감성

검색하기

블로그 홈

개발감성

developefeel.tistory.com/m

파리외 개발자 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

css 그림자 효과 주기 (box-shadow) .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.. 공감수 0 댓글수 0 2024. 6. 13.
border-radius로 여러 모양 만들기 .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; } 공감수 0 댓글수 0 2023. 11. 2.
부모 자식 선택자 .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.. 공감수 0 댓글수 0 2023. 11. 1.
css 선택자 우선순위 //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; }.. 공감수 0 댓글수 0 2023. 10. 31.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.