CSS 기초문법
CSS는 다음과 같이 선언됩니다.
선택자{속성:값; 속성:값; .... 속성:값;}
1. HTML요소의 선택자를 넣고 원하는 스타일로 바꿀 수 있습니다.
2. 선언부 안의 블럭은 ';' 세미콜론으로 나누어서 더 많은 선언이 가능합니다.
예를 들어서 아래와 같이 html을 작성한다면
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- p { color:blue; font-size:40px;}
- </style>
- </head>
- <body>
- <p>가나다라마바사</p>
- 가나다라마바사
- </body>
- </html>
아래와 같이 결과가 나오지요 ^-^
결과)
CSS를 선할할때는 중괄호에 포함되고 선언의 끝에는 세미콜론이 항상 붙게 됩니다.
위처럼 사용할 수도 있지만 가독성을 높이기 위해서 아래와 같이 쓰는 것이 바람직 합니다.
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- p {
- color:blue;
- text:center;
- }
- </style>
- </head>
- <body>
- <p>가나다라마바사</p>
- 가나다라마바사
- </body>
- </html>
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- p {
- color:blue;
- text:center;
- }
- </style>
- </head>
- <body>
- <p>가나다라마바사</p>
- 가나다라마바사
- </body>
- </html>
결과는 같습니다.
결과)
CSS 주석달기
주석은 자신이 작성한 코드를 설명할 때 사용합니다. 나중에 작성한 코드를 이해할때 도움이 됩니다. 주석은 브라우저에서 무시하므로 프록그램에 영항을 미치지 않습니다.
CSS 코맨트는 '/*'와 '*/' 사이에 주석을 입력하면 됩니다. 이 문법은 개행(줄바꿈)시에도 적용됩니다.
- p {
- color:blue;
- /*이 주석은 한 줄 주석입니다*/
- text:center;
- /*
- 이 주석은 여러 줄도 포함되는 주석입니다.
- */
- }
반응형