본문 바로가기

전체 글77

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.
CSS - 7. Margin과 Padding 1. Margin과 Padding margin과 padding라는 property는 요소의 여백을 스타일할 수 있다. 모든 요소는 옆 그림과 같이 margin, border, padding의 스타일을 갖고 있다. 주황색은 margin 영역으로, 위, 오른쪽, 아래, 왼쪽에 모두 50px를 차지하고, 노란색은 border 영역으로, 보더의 두께는 5px이다. 초록색은 padding 영역으로, 위, 오른쪽, 아래, 왼쪽에 모두 50px를 차지하고, 요소의 가로는 273px, 세로는 90px이다. 요소에 border 스타일을 주면 테두리가 그려진다. padding은 border 내에 생기는 영역이다. 그림에서 273px이라는 가로값은 padding 영역이 합쳐진 가로길이이다. 그리고 margin은 border.. 2020. 6. 13.
CSS - 6. 문구 스타일 1. 텍스트 정렬 텍스트 정렬은 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬이 있다. property 이름은 text-align이고 값은 left, center, right이다. .left { text-align: left; } .center { text-align: center; } .right { text-align: right; } 모든 요소의 기본 정렬은 왼쪽 정렬이다. 그래서 tex-align을 주지 않은 부분들은 기본적으로 왼쪽 정렬이 된다. 단, 예외사항이 있는데 span같은 inline-element들은 오른쪽 정렬을 부여해도 되지 않는다. 그 이유는 span이 차지하는 영역(inline-element들이 차지하는 영역)은 span의 오른쪽 정렬만큼의 길이밖에 안되기 때문이다. 2. indent.. 2020. 6. 13.

티스토리툴바