본문 바로가기

성장하기.27

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.
CSS - 5. font style 1. font family font-family는 폰트 스타일을 지정하는 속성이다. #title { font-family: Georgia, "Times New Roman", Times, serif; } Georgia, "Times New Roman", Times, serif 라는건, 브라우저가 Georgia라는 폰트를 지원해주면 Georgia폰트로 적용하겠다는 뜻이다. 만약 Georgia 폰트가 지원되지 않으면, "Times new Roman"을, 이것도 없으면 Times, 그리고 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻이다. "Times new Roman"에만 ""(쌍따옴표)로 감싸져 있는 건, 폰트 이름에 띄어쓰기가 되어있으면 ""를 사용해야 한다. font-family.. 2020. 6. 12.

티스토리툴바