12.HTML CSS
익스랩 최고 관리자
·2019. 10. 28. 19:32
CSS로 HTML 스타일 지정하기
CSS는 CSS(Cascading Style Sheets)의 약자입니다.
CSS는 HTML 요소를 화면, 문서 또는 다른 매체에 표시하는 방법을 기술한 것입니다.
CSS는 많은 작업을 절약합니다. 한 번에 여러 웹 페이지의 레이아웃을 제어할 수 있습니다.
CSS는 다음 세 가지 방법으로 HTML 요소에 추가할 수 있습니다.
| Inline | HTML 요소에서 style 속성 사용 |
| Internal | <head> 섹션의 <style> 요소 사용 |
| External | 외부 CSS 파일 사용 |
CSS를 추가하는 가장 일반적인 방법은 별도의 CSS 파일에 스타일을 지정하는 것입니다. 그러나 여기서는 Inline 및 Internal 방식으로 Style을 지정하려고 합니다. Inline이나 Internal은 시연하기 쉽기 때문입니다.
Inline CSS
Inline CSS는 하나의 HTML 요소에 특정 스타일을 적용하는 데 사용합니다.
Inline CSS는 HTML 요소의 style을 사용합니다.
해당 예제에선 <h1> 요소의 텍스트 색상을 파란색으로 설정합니다.
See the Pen 01.Inline CSS by heunho (@heunho) on CodePen.
Internal CSS
Internal CSS는 단일 HTML 페이지의 스타일을 정의하는 데 사용됩니다.
Internal CSS는 HTML 페이지의 <head> 섹션에서 <style> 요소 내에 정의됩니다.
See the Pen 02.Internal CSS by heunho (@heunho) on CodePen.
External CSS
External CSS는 많은 HTML 페이지의 스타일을 지정하는 데 사용됩니다.
External CSS를 사용하면 하나의 파일을 변경하여 전체 웹 사이트의 모양을 변경할 수 있습니다.
External CSS를 사용하려면 HTML 페이지의 <head> 섹션에 링크를 추가해주세요.
See the Pen 03.External CSS by heunho (@heunho) on CodePen.
External CSS는 텍스트 편집기로 작성할 수 있습니다. 파일에는 HTML 코드가 없어야 하며. css 확장자로 저장해야 합니다.
CSS Fonts
CSS 색상 속성은 사용할 텍스트 색상을 정의합니다.
CSS font-family 속성은 사용할 글꼴을 정의합니다.
CSS font-size 속성은 사용할 텍스트 크기를 정의합니다.
See the Pen 04.CSS Fonts by heunho (@heunho) on CodePen.
CSS Border
CSS Border 속성은 HTML 요소 주위에 테두리를 정의합니다.
See the Pen 05.CSS Border by heunho (@heunho) on CodePen.
CSS Padding
CSS Padding 속성은 텍스트와 테두리 사이의 공백을 정의합니다.
See the Pen 06.CSS Padding by heunho (@heunho) on CodePen.
CSS Margin
CSS Margin 속성은 테두리 외부의 여백(공백)을 정의합니다.
See the Pen 07.CSS Margin by heunho (@heunho) on CodePen.
ID 속성
특정 요소에 대한 특정 스타일을 정의하려면 id 속성을 요소에 추가해보세요.
<p id="p01">I am different</p>다음 특정 ID로 요소의 스타일을 정의해보세요.
See the Pen 08.The ID Attribute by heunho (@heunho) on CodePen.
Class 속성
특수 유형의 요소들에 대한 스타일을 정의하려면 요소에 Class 속성을 추가해보세요.
<p class="error">I am different</p>해당 예제에선, 특정의 클래스를 가지는 요소의 스타일을 정의합니다.
See the Pen 09.The Class Attribute by heunho (@heunho) on CodePen.
External References
External CSS는 전체 URL 또는 현재 웹 페이지와 관련된 경로로 참조할 수 있습니다.
전체 URL을 사용하여 CSS에 연결하는 방법
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
웹 사이트의 HTML 폴더에 있는 CSS에 연결하는 방법
<link rel="stylesheet" href="/html/styles.css">
현재 페이지와 같은 폴더에 있는 CSS에 연결하는 방법
<link rel="stylesheet" href="styles.css">
요약
Inline Style에 HTML Style 속성 사용
HTML <style> 요소를 사용하여 내부 CSS 정의
HTML <link> 요소를 사용하여 외부 CSS 파일을 참조하세요.
HTML <head> 요소를 사용하여 <style> 및 <link> 요소 저장
텍스트 색상에 CSS color 속성 사용
텍스트 글꼴에 CSS font-family 속성 사용
텍스트 크기에 CSS font-size 속성 사용
테두리에 CSS border 속성 사용
테두리 안에 있는 공백에 CSS Padding 속성 사용
테두리 밖에 있는 공백에 CSS Margin 속성 사용
틀린 내용, 오타, 오역이 있을 경우 댓글로 알려주시면 감사하겠습니다.
질문도 올려주시면 아는 선에서 답변해드리겠습니다.
대부분의 내용의 저작권은 w3schools에 있습니다.
HTML CSS
HTML Styles - CSS CSS = Styles and Colors Manipulate Text Colors, Boxes Styling HTML with CSS CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can c
www.w3schools.com
'IT 언어 연구소 > HTML,CSS [초급, 기본 개념, W3C 번역]' 카테고리의 다른 글
| 14. HTML Images (0) | 2019.11.04 |
|---|---|
| 13.HTML Links (0) | 2019.10.28 |
| 11.HTML Colors (0) | 2019.10.28 |
| 10.HTML Comments (0) | 2019.10.28 |
| 09.HTML Quotation (0) | 2019.10.28 |
