728x90 반응형 front-end/css2 [css] 효율적인 CSS 작성하기 효율적인 CSS 작성하는 방법입니다. Universal 규칙은 사용하지 않습니다. /** Universal 규칙 예제 */ [hidden="true"] { ... } * { ... } div > [type="number"] { ... } ID 규칙에 쓸모없는 태그나 클래스를 사용하지 않습니다. ID는 고유하므로 태그나 클래스를 붙이는 것은 매칭 작업을 더디게 만듭니다. (예외: 만약 여러가지 다른 스타일을 위해 ID가 지정된 엘리먼트의 class가 동적으로 바뀌고 이 class가 ID가 지정되지 않은 다른 엘리먼트와 공유될 경우에는 클래스 선택자가 필요합니다. ) button#btn { ... } button#btn.on { ... } table#tbl { ... } input#num[type=".. 2020. 10. 9. [css] 가변 값을 위한 함수 calc() calc는 반응형 웹 구축 시 유용한 css 함수입니다. 만약 전체 width에서 230px를 제외한 길이만큼 영역을 지정하고 싶다. 고정된 영역에서 230px를 더하고 빼는 것은 어렵지 않지만, 반응형 웹에서는 상대적인 영역을 사용하기 때문에 calc 함수를 사용합니다. .width-m230 { width: calc(100% - 230px); } 매우 간단한 방법으로 원하는 width를 사용할 수 있게 되었습니다. width 값 말고도 padding, margin, font-size 등에도 유용하게 쓸 수 있습니다. 유의할 점은 값과 연산자 사이에 띄어쓰기를 꼭 해야 한다는 점입니다. calc(값1 연산자 값2) 2020. 10. 9. 이전 1 다음 728x90 반응형