HTML + CSS23 CSS - 8-1. box-sizing 1. box-sizing 눈으로 보이는 너비가, 개발자가 코딩하는 그 값이어야 코딩과 머릿속으로 생각하는 로직이 같아진다. 수많은 개발자가 이러한 특성이 불편하다는 것을 깨닫고 새로운 CSS 프로퍼티를 만들었다. .new { box-sizing: border-box; } 이와 같이 보이는 대로 width값을 주고, 그 후에 그 안 쪽으로 padding을 주는 것이 생각하기 쉽다. 그래서 거의 대부분 웹페이지에 box-sizing 프로퍼티를 기본적으로 적용한다. 또한, 모든 태그에 이 프로퍼티가 적용되어야 하는데 일일이 태그마다 적용하기에는 코드가 길어진다. * { box-sizing: border-box; } 위와 같이 "*" selector를 쓰면 모든 태그에 적용할 수 있다. ⚠️ 'box-sizin.. 2020. 6. 13. CSS - 10. CSS selector 1. CSS selector selector표현과 우선순위. [기본 표현방법] p { font-size: 20px; } .p-tag { color: gray; } #third-line { text-decoration: underline; } [class나 id가 selector일 때, 태그와 결합하는 방법] p.p-tag { color: gray; } p#third-line { text-decoration: underline; } 첫 번째는 p태그이면서 p-tag 클래스이고, 두 번째는 p태그이면서 third-line 아이디이다. 물론 p#third-line.p-tag 이런 조합도 가능하지만, third-line라는 아이디는 오직 한 개이므로 tag+id+class의 조합은 과한 표현이다. 또한 여러 s.. 2020. 6. 13. CSS - 9. 상속, 그룹 1. 상속(Inheritance) 상속은 css가 가진 특성이다. 말 그대로 스타일이 상속되어 자식에게도 같은 스타일이 적용된다는 의미이다. body { color: red; font-size: 14px; } body라는 태그에 color는 빨간색으로, 크기는 14px로 스타일했을 때, body 안에 있는 태그들은 부모인 body태그에 영향을 받아 빨간색과 14px로 변경된다. 만약 부모 요소가 빨간색이고 본인(자식) 요소가 파란색으로 속성을 지정해줬다면, 부모 요소의 속성보다 본인의 스타일이 우선 적용된다. 2. 그룹(Grouping) 여러 태그에 한 스타일을 적용하고 싶다면 각각 코드에 적어주는 것보다 가독성을 위해 한번에 그룹으로 묶어 적용하는 것이 좋다. p, span, div, my-class .. 2020. 6. 13. CSS - 8. Border 1. Border border(테두리) 스타일 p { border: 5px solid red; } span { border: 1px dotted #0000ff; } 위 코드의 뜻은 border: 두께 선스타일 선색깔;이다. 앞서 봤던 margin의 순서는, 순서대로 확정이지만 border순서는 중요하지 않다. 그래도 전 세계적으로 약속된 coding convention(코딩 규칙)에 따라 순서를 맞춰주는 것이 좋다. 선 스타일의 종류는 dotted / dashed / solid / double / groove / ridge / inset / outset 등이 있다. 이 중에 거의 solid를 사용한다. 선 또한 윗 선, 오른쪽 선, 아래 선, 왼쪽 선 등 다양하게 스타일을 줄 수 있다. blockquot.. 2020. 6. 13. 이전 1 2 3 4 5 6 다음
