-
CSS (Cascading Style Sheets)HTML & CSS 2020. 4. 7. 11:37
CSS
HTML이나 XML로 작성된 문서의 표현을 위해 쓰이는 스타일시트 언어입니다.
콘텐츠의 글꼴, 색상, 크기 및 간격을 변경하거나 여러 열로 분할하거나 애니메이션 및
기타 장식 기능을 추가하는 등의 웹 페이지 스타일 및 레이아웃에 사용됩니다.
CSS적용방법
직접적용(Inline)
<!-- HTML의 특정 태그에 직접 stlye을 적용 --> <p style="text-align: left;">inline</p>내부 (Internal CSS)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>title</title> <style> <!-- 모든 h1 태그에 빨간색, 기울임꼴을 적용 --> h1 { color: red; font-style: italic; } </style> </head> <body> <h1>Hello World!</h1> </body> </html>외부 (External CSS)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>title</title> <!-- css확장자로 저장된 stylesheet파일을 link태그의 href속성을 이용해 삽입 --> <link rel='stylesheet' type='text/css' href='myStyle.css' /> </head> <body> <h1>Hello World!</h1> </body> </html>/* 모든 h1 태그에 빨간색, 기울임꼴을 적용 */ h1 { color: red; font-style: italic; }CSS selector
스타일을 적용시킬 요소를 tag, ID, class를 활용하여 선택할 수 있습니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>title</title> <link rel='stylesheet' type='text/css' href='myStyle.css' /> </head> <body> <h1>Hello</h1> <h1>World!</h1> <!-- id --> <h2 id='sayRed'>Hello</h2> <h2 id='sayBlue'>World!</h2> <!-- class --> <h2 class='red italic'>Hello</h2> <h2 class='blue'>World!</h2> </body> </html>태그 이름
같은 태그를 가진 요소에 각각 다른 스타일을 적용하고 싶은 경우에는 다른방법을 사용해야 합니다.
<h1>Hello</h1> <h1>world!</h1>h1 { color: red; }고유 ID
하나의 요소에 특별히 스타일을 적용하고 싶을때 사용합니다.
<h2 id='sayRed'>Hello</h2> <h2 id='sayBlue'>world!</h2>#sayRed { color: red; } #sayBlue { color: blue; }class
반복되어 생성되는 요소에 같은 스타일을 적용시키고 싶을때 사용됩니다.
다른 특성을 가진 class를 만들고 하나의 태그에 여러 class를 적용할 수도 있습니다.
<h2 class='red italic'>Hello</h2> <!-- 공백을 이용하여 여러 class를 구분합니다. --> <h2 class='blue'>World!</h2>.red { color: red; } .italic { font-style: italic; } .blue { color: blue; }'HTML & CSS' 카테고리의 다른 글
문서 객체 모델 (Document Object Model / DOM ) (0) 2020.04.09 레이아웃 (Layout) (0) 2020.04.07 HTML (HyperText Markup Language) (0) 2020.04.07