CSS (48) 썸네일형 리스트형 Box Shadow *효과를 극명하게 보여주기 위해 예쁘지 않은 색을 선택했다. 이해 바람.. 0. 기본 셋팅 Heading Lorem ipsum dolor sit amet consectetur, adipisicing elit. A, vel! Heading Lorem ipsum dolor sit amet consectetur, adipisicing elit. A, vel! Heading Lorem ipsum dolor sit amet consectetur, adipisicing elit. A, vel! 1. offset-x | offset-y | color /* offset-x | offset-y | color */ box-shadow: 10px 20px teal; offset-x는 박스 shadow 오른쪽 두께 offse.. before & after Pseudo Selector (feat.포토샵 없이 배경 이미지 흐리게) Name form 작성 시 유용한 코드. 반드시 input을 받아야하는 경우 (이름, 이메일 주소 등등..) 개발자 도구를 보면 마크업에는 나타나있지 않다. 사실 내가 before, after Pseudo Selector를 처음 배우게 된 건 랜딩 페이지에서 배경 이미지는 약간 흐리지만, nav나 content는 선명하게 보이는 효과를 원했을 때! 처음 배우게 됐다. 예시) - 개발자 도구에서 ::before 부분을 선택하면 거기에 적용 된 css 코드들을 볼 수 있다. 실제 코드) Hello World Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam, hic! Lorem, ipsum dolor. Lorem ipsum, dolor sit .. nth-child Pseudo Selector 1. li:first-child li:last-child 첫 번째와 마지막 아이템을 선택하는 방법 li:first-child{ background-color:#f48fb1; } li:last-child{ background-color:#f36339c; } 2. Position 5 특정 위치의 아이템 선택 li:nth-child(5){ background-color:#ce93d8; } 3. 매 3, 4, 5...번째 아이템 선택 li:nth-child(3n){ background-color:#b399ddb; } li:nth-child(4n){} li:nth-child(5n){} 4. 7번째 아이템부터 매 3번째 아이템 선택 li:nth-child(3n+7){ background-color:#a5d6a7; .. Targeted Selector 1. Child (div p) div p{ background-color:#555; } 라고 하면 div 아래에 있는 모든 p들(div의 child)의 배경색이 변한다. 마지막 hello world는 div의 child가 아니기 때문에 배경 색이 변하지 않는다. 2. Direct Child (div > p) div > p{ background-color:#555; } div > p 라고 selector를 주면 div의 direct child인 p들만 선택이 된다. item2는 (div의 child 중 한 명이지만) ul 속 li의 direct child이기 때문에 선택이 안된다. 3. Directly After (div + p) div + p{ bakground-color:#333; color:#fff;.. Flexbox 기본 상태 display:flex; flex-direction은 기본으로 row; 상태 flex-direction:row-reverse; flex-direction:column; flex-direction:column-reverse; Position: static, relative, absolute, fixed, sticky 헷갈리면 relative -> absolute -> fixed 순서로 기억할 것. relative는 자기 자신의 원래 위치 기준으로 이동. absolute는 가장 가까운 부모 위치를 기준으로 이동. fixed는 웹 창을 기준으로 이동. Box Model: Block, inline-block, inline 기본 div, span 성질 - div element는 content없어도 css로 width, height, background-color를 주면 웹에 등장! - span은 css로 꾸며줘도 content가 있어야만 화면에서 볼 수 있다. div에 display:inline div element에 display:inline을 하면 span처럼 inline element가 된다. 그래서 content가 없으면 화면에서 볼 수 없다. div에 display:inline-block; div를 display:inline-block;으로 바꿔주면 화면 크기에 따라 상자 배열이 바뀐다. 화면 크기가 클 때는 저렇게 일렬로 있지만, 화면이 작아지면 뒤에 div 박스들이 아래줄로 내려간다. 기본 span 크기 spa.. CSS Buttons 버튼 Property정리 버튼 배경색 background-color 버튼 사이즈 font-size 원형 버튼 border-radius 코드 .button1 {border-radius: 2px;} .button2 {border-radius: 4px;} .button3 {border-radius: 8px;} .button4 {border-radius: 12px;} .button5 {border-radius: 50%;} 출력 버튼 테두리 색 border HTML Green Blue Red Gray Black CSS .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: c.. 이전 1 ··· 3 4 5 6 다음
