CSS Syntax 쓰는 방법
CSS 규칙 세트는 선택기와 선언 블록으로 구성됩니다.
선택기는 스타일을 지정할 HTML 요소를 가리 킵니다.
선언 블록에는 세미콜론으로 구분 된 하나 이상의 선언이 포함됩니다.
각 선언에는 CSS 속성 이름과 값이 콜론으로 구분되어 포함됩니다.
여러 CSS 선언은 세미콜론으로 구분되며 선언 블록은 중괄호로 묶습니다.
<!DOCTYPE html> <html> <head> <style> p { color: red; text-align: center; } </style> </head> <body> <p>Hello World!</p> <p>These paragraphs are styled with CSS.</p> </body> </html> |
위와 같이 html 의 head태그안에 선언해줍니다.하지만,웹 페이지를 예쁘게 꾸미기 위해서 사용하는 태그의 길이는 상당히 길어지기 때문에 따로 파일을 분리해서 만든 후 html에서 호출해주는 형식으로 사용합니다.
아래 그림과 같이
styles.css 파일을 따로 저장한 후 head태그안에
<link rel="stylesheet" href="styles/styles.css"> 라고 쓰고 호출해 줍니다.
간단하지요? 각 태그의 이름값만 알고 있으면 간단하게 호출해서 사용할 수 있습니다. 다음 글에서는 각 태그마다 꾸미는 방법을 알아보겠습니다.
'디지털노마드 > HTML과 CSS 강좌' 카테고리의 다른 글
CSS Flexbox 정복 하기 (0) | 2020.07.27 |
---|---|
CSS - 텍스트 꾸미기와 정렬하기 (0) | 2020.07.21 |
CSS - 박스 테두리 모양 둥글게 만들기 (0) | 2020.07.16 |
CSS로 전체 배경색 바꾸기 (0) | 2020.07.15 |
CSS 배우기 - CSS 기본설정하기 (0) | 2020.07.14 |