본문 바로가기

CSS8

Button_ 여러 버튼 속성지정 * btn--abc 속성을 이용해 버튼의 성질을 나타내는 클라스를 만들어 각각의 요소에 지정해 줄 수 있다. 1. html에 btn 클래스를 지정 HI 2. CSS에 모든 버튼에 공통으로 들어갈 .btn 속성을 넣어준다. 예) .btn{ width: 130px; border: 2px solid #333; padding:10px; border-radius: 4px; color: #333; cursor: pointer; box-sizing: border-box; font-size: 16px; font-weight: 700; text-align: center; } 3. btn--abc 로 각각의 속성을 지정 예) .btn:hover{ background-color:#333; color:white } // 버튼.. 2022. 6. 4.
box-sizing_ 박스의 크기 유지 요소의 크기를 유지하면서 내부여백과 테두리선이 추가될수 있게 해줌. 2022. 6. 2.
글자/박스에 그림자 넣기 text-shadow: 가로거리 세로거리 번짐정도 색상 ex) text-shadow: 10px 10px 5px #232931 👉가로거리의 값 - 양수: 오른쪽으로 그림자 이동 음수: 왼쪽으로 그림자 이동 👉세로거리의 값 - 양수: 아래쪽 그림자 이동 음수: 위쪽으로 그림자 이동 👉번짐정도 - 값이 커질 수록 번짐정도 심해짐. 음수 값을주면 그림자가 사라짐. 👉색상 - 그림자의 색 지정. 따로 값을 입력하지 않으면 기존 텍스트의 색상으로 박스에 그림자를 넣을때는 box-shadow: 10px 10px 5px #232931 10px 10px 5px #232931 10px 10px 5px #232931 2022. 5. 26.
두개의 div 한줄에 넣기 클라스 지정후, display: inline-block 2022. 5. 26.