본문 바로가기

HTML + CSS23

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.
CSS - 4. Introduction to CSS 1. CSS(Cascading Style Sheets) HTML만으로도 사이트를 만들 수 있지만, 화려한 웹사이트를 만들려면 HTML과 CSS가 필요하다. CSS란 HTML 태그들에 디자인을 입혀주는 것이다. HTML이 헤더, 문단, 테이블 등으로 정보를 조직화하는 구조를 제공한다면, CSS는 HTML이 아름다워 보이도록 스타일을 입히는 것이다. 2. CSS 적용 css를 작성한 후 html에 적용되도록 반영하는 방법은 3가지가 있다. 인라인 스타일 : 태그 style 속성에 직접 작성할 수 있다. (예. Hello ) 이 방법은 빠르고 편리하다. 하지만, h1태그에 글씨 색상뿐만 아니라, 적용해야 할 스타일이 10개가 넘어간다면 코드 가독성이 떨어진다는 단점이 있다. 또한 html 태그와 style 코.. 2020. 6. 12.

티스토리툴바