-
<style> 태그의 적용프론트엔드/CSS 2020. 8. 23. 20:17
CSS는 <Style>가 있어야 적용할 수 있고 이를 통해 나타내는 방법은 네가지다.
다만 가급적이면 CSS는 HTML과는 분리해서 사용하는 것이 좋다.
간단한 웹페이지라면 상관없다.
하지만 사이트의 크기가 커지면 같은 페이지 내에서 CSS와 HTML을 같이 다루면 혼란스러워진다.
1. <Style> 태그를 <body>태그 밖에 써주는 경우
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p { font-size: 50px; } </style> </head> <body> <p> 안녕하세요! </p> </body> </html><body> 밖의 <head> 태그 내에 <style>태그를 써 준 뒤 그 안에 CSS를 적어준다.
2. <style> 태그를 <body> 태그 안에 써주는 경우
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style> p { font-size: 50px; } </style> <p> 안녕하세요! </p> </body> </html><body> 태그 안에 <style> 태그를 쓰고 스타일링을 해줄 수 있지만 명시성이 떨어진다.
3. 'style'을 속성 값으로 주는 경우
<body> <p style="font-size: 50px; color: red;"> 안녕하세요! </p> </body>스타일링을 원하는 태그 안에 'style'의 속성 값을 준 뒤 그 안에서 해당 태그를 꾸며주면 된다.
4. HTML과는 다른 별도의 Style 전용 문서를 만드는 경우
<style> 태그를 따로 써서 css를 분리하더라도 css가 너무 길어질 경우가 있다.
그럴 경우에는 css 전용 문서를 만들어서 불러오는 방법도 있다.
CSS 전용 문서는 아래와 같이 별도의 형식이 없이 식별자, 속성, 속성값만 주면 된다.
p{ font-size: 50px; color: red; }그 뒤엔 아래와 같은 형식으로 CSS를 쓴 스타일 시트를 <head>든 <body>든 적어주면 적용할 수 있다.
<link rel="stylesheet" href="css 파일 경로">
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="new_test.css"> </head> <body> <p> 안녕하세요! </p> </body> </html>'프론트엔드 > CSS' 카테고리의 다른 글
CSS - 목록 스타일 (0) 2020.08.23 CSS - 텍스트 관련 (0) 2020.08.23 CSS의 적용 우선 순위 (0) 2020.08.23 선택자 (selector) (0) 2020.08.23 CSS란? (0) 2020.08.21