.png)
🤔 CSS ?
CSS (Cascading Style Sheets)는 HTML이나 XML으로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다.
CSS는 오픈 웹의 핵심 언어 중 하나이며, 다양한 브라우저의 표준으로 작동하고 있다.
📘 기본 문법
CSS는 선택자와 선언부로 구성된다.
선택자는 스타일을 지정할 HTML 요소(태그, 아이디등)을 가리킨다.
선언부는 CSS 속성 이름과 값이 포함된다
속성이 여러 개일 경우, 한 줄로 나열해도 상관없지만 여러줄에 걸쳐 작성하는 것이 좋다.
선택자 {속성:값; 속성:값....}
h1 {color:red; font-size:15px;}- CSS 구문은
선택자(selector)와선언부(declaration)으로 구성 - 선택자는 디자인을 적용하고자 하는 HTML요소 ->
선택자 정의가 중요 - 선언부는
콜론(:)으로 구분 되어진 다수의 항목을 포함 - 각 선언은 항상
세미콜론(;)으로 끝나며, 선언블록은중괄호({})로 묶음
😃 CSS 적용 방법
내부 스타일 시트
HTML 파일에 스타일을 기술하는 방법으로 <head> 태그 사이에 <style>태그 부분에 작성한다.
HTML과 CSS가 한 파일에 있으므로 작업이 쉽고 간편하지만 CSS의 재활용이 안되는 문제가 있어 특별한 경우가 아니면 외부 스타일시트가 권장 된다.
<head>
<style>
body {
background-color: red;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
...
</body> 외부 스타일시트
CSS를 작성하는 가장 기본적인 방법이다
별도의 파일에 CSS 문서를 작성하고 해당 CSS를 필요로 하는 HTML 문서에서 불러와 사용하는 형식이다. 이때 CSS는 동일한 서버에 있어도 되고 URL을 통해 다른 서버의 CSS를 불러오는 것도 가능 하다.
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="http://cdn.site.com/css/mystyle.css">
인라인 스타일
HTML 태그에 필요한 디자인 속성을 직접 작성하는 형식이다.
그때 그때 필요한 디자인을 바로 적용할 수 있다는 편리함이 있지만 일관된 디자인 체계를 유지하는 데 방해가 되기때문에 꼭 필요한 경우가 아니라면 사용하지 않는게 좋다.
<h1 style="color:blue; margin-left:30px;">This is a heading</h1>
DB 엔지니어👍