컴퓨터/CSS 썸네일형 리스트형 CSS 주석 1. 한줄 // 한줄 주석 {} 주의사항: {}이 빠지면, 상황에 따라 한줄만 주석처리 될 수도 있고, 다음 여러줄까지 주석처리 될 수도 있다. 2. 여러줄 /* 여 러 줄 */ 3. 결론 CSS 에서는 원칙적으로는 한줄 주석이 없다고 봐야 한다. 그래서 한 줄 주석도 아래와 같이 처리하는 것이 안전하다. /* 한줄도 이렇게 주석처리하자 */ CSS calc() 속성값을 계산 height: calc(100% - 100px); '-' 앞, 뒤로 반드시 띄어쓰기! CSS overflow - visible : 기본 값입니다. 넘칠 경우 컨텐츠가 상자 밖으로 보여집니다. - hidden : 넘치는 부분은 잘려서 보여지지 않습니다. - scroll : 스크롤바가 추가되어 스크롤할 수 있습니다.(가로, 세로 모두 추가 됩니다.) - auto : 컨텐츠 량에 따라 스크롤바를 추가할지 자동으로 결정됩니다.( 필요에 따라 가로, 세로 별도로 추가될 수도 있습니다.) overflow: overflow-x: overflow-y: CSS transition 문법 transition: property duration timing-function delay 트랜지션 효과를 보기 위해 반드시 입력해야 하는 값은 duration이다. 나머지는 입력하지 않아도 기본값이 적용된다. 1. property 변화될 프로퍼티를 지정한다. 기본값은 all 이다. 지정될 수 있는 값은 한정적인데, 아래와 같다. 하지만 주로 all을 사용한다. // Box model width height max-width max-height min-width min-height padding margin border-color border-width border-spacing // Background background-color background-position // 좌표 top left .. CSS transform transform: translate(30px, 50px); x방향으로 30px, y방향으로 50px 이동한다. transform: translateX(30px); x방향으로 30px 이동한다. transform: translateY(10px); y방향으로 10px 이동한다. translate() 를 리셋하려면 transform: none 을 지정한다. 요소를 가운데로 보내기 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); top, left 값과 translate 의 x, y 값이 부호만 다르고 크기는 같아야 한다. 약간 윗쪽으로 배치하려면 top을 30% 정도로 조정할 수 있다. 단, 그러면 translate의 x값도.. 이전 1 2 3 다음