CSS(Cascading Style Sheets)
: 웹 페이지의 디자인을 담당하는 스타일 규칙 언어로, HTML 콘텐츠에 스타일을 적용하는 데 사용되며, 배경색과 글꼴을 설정하고 콘텐츠를 여러 열에 배치하는 등 HTML 콘텐츠의 시각적 표현을 제어한다.
- HTML로 부터 웹 페이지의 내용과 디자인적인 요소를 분리해 정의하여 유지&관리 및 재사용에 용이하다.
기본문법
: CSS는 선택자(selector)와 선언부(declaration)로 구성된다. 선택자는 스타일을 지정할 HTML 요소(태그,아이디 등)를 가리키고, 선언부에는 CSS 속성 이름과 값이 포함된다. 속성이 여러 개일 경우, 한 줄로 나열해도 상관없지만 여러 줄에 걸쳐 작성하는 것이 일반적이다.
선택자 {속성:값; 속성:값....}
/* ex) h1태그의 색상을 빨간색으로 크기는 15px로 지정 */
h1 {color:red; font-size:15px;}주석 처리
/* 한 줄 주석 */
/* 여러
줄
주석*/소스코드 위치
1. 태그 사이
: HTML 문서 내부에 CSS 코드를 두는 방식으로, 태그 사이에 태그 부분에 작성한다.
<head>
<style>
body {
background-color: red;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
...
</body>- html 과 css 가 한 파일에 있으므로 작업이 쉽고 간편하지만 css의 재활용이 안되는 문제가 있어 특별한 경우가 아니면 외부 스타일시트가 권장 된다.
2. 인라인 스타일
: HTML 문서 내부에 CSS 코드를 두는 방식으로, HTML 문서의 태그 내부에 작성한다. HTML 요소의 style 속성을 사용하여 CSS 코드를 작성한다.
<body style="background-color: blue;">
...
</body>3. 외부 CSS 파일
: CSS 코드를 별도의 .css 파일로 만들고, HTML 문서에서 불러올 수 있다. 외부 CSS 파일은 형태로 불러온다.
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>- CSS를 작성하는 기본적인 방법으로, 코드를 여러 HTML 문서에서 재사용하기 용이하다.
rel : relation. 현재 문서와 외부 리소스 사이의 연관 관계를 명시
type="text/css" : 링크된 외부 리소스의 미디어 타입을 명시. (text 형식의 CSS 파일임을 명시)
href : hyper reference. 링크된 외부 리소스의 URL을 명시
IT 보안, 관심 있는 것을 공부합니다.