웹 문서에서 스타일이란 html 문서에서 자주 사용하는 글꼴이나 색상 등 배치 방법과 같이 겉모습을 결정짓는 것을 말한다.
기존 html 문서는 웹 브라우저 화면이 기본으로 되어있어 모바일용 홈페이지는 스마트폰 브라우저에 적합하게 문서를 따로 만들어야한다.
하지만 css를 사용하면 html 로 작성한 내용을 그대로 기기에 맞게 css만바꿔주면 여러 기기에서 볼 수 있다.
이를 반응형 웹 디자인이라고 한다.
chrome 웹 스토어의 확장 프로그램 "web developer" 를 사용해 스타일이 비활성화 된 사이트를 확인할 수 있다.
css 스타일 형식
기본형 ) 선택자 { 속성1: 속성값1; 속성2: 속성값2 }
앞 선택자는 스타일을 어느 태그에 적용할 것인지 알려주는 것이고 중괄호 사이에 스타일 정보를 넣는다.
속성과 값이 하나의 쌍으로 이루어진 것을 스타일 규칙이라고 하며 세미콜론으로 구분해 스타일 규칙을 여러 개 지정한다.
텍스트 단락의 글자를 가운데로 정렬하고 글자색을 파랑색으로 지정하는 예제 코드
p {
text-align : center;
color: blue;
}
스타일 시트
웹 문서에서 사용하는 여러개의 스타일규칙을 한눈에 확인하고 필요할 때마다 수정하기 쉽도록 한군데 묶어놓은 것을 스타일 시트라고 한다.스타일 시트는 크게 웹 브라우저에 기본으로 만들어져 있는 브라우저 기본 스타일과 제작자가 만드는 사용자 스타일로 나눌 수 있다.사용자 스타일은 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트로 나뉜다.
브라우저 기본 스타일
css를 사용하지 않은 웹 기본 스타일을 사용한 웹 문서를 브라우저 기본 스타일이라고 한다.<h1> 태그가 글자가 크게 표시되고 <p> 태그를 사용한 본문 텍스트는 제목보다 작게 표시된다.이런것들이 브라우저에서 미리 정해놓은 스타일이다.
인라인 스타일
간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시한다.스타일을 적용할 부분에 해당 태그에 style 속성을 사용해 style = "속성 : 속성값;" 형태로 스타일을 바꾼다.
인라인 스타일 예제
<h1> 레드향 </h1>
<p style = "color: blue;"> 껍질이 붉다. </p>
<p> 레드향은 한라봉 </p>
내부 스타일 시트
웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것이다.스타일 정보는 웹 문서를 브라우저 화면에 표시하기 전에 결정해야 하므로 모든 스타일 정보는 <head> 태그 안에서 정의하고 <style> </style> 태그 사이에 작성한다.
내부 스타일 시트 예제
<!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>
h1{
padding: 10px;
background-color: #222;
color: #fff;
}
</style>
</head>
<body>
<h1>내부 스타일 시트</h1>
</body>
</html>
외부 스타일 시트 웹 사이트를 만들 때 하나의 웹 문서로 끝나는 경우는 거의 없다.대부분 디자인에 일관성 있도록 같은 스타일을 여러 웹 문서에 사용한다. 그때마다 똑같은 내부 스타일 시트를 만들면 서버 공간과 문서 내려받는 시간을 낭비하는 것으로 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해놓고 필요할때마다 가져와서 사용하는 것이 일반적이다. 이를 외부 스타일 시트라고 하고 *.css 라는 파일 확장자를 사용한다.
외부 스타일 시트 파일에 스타일을 작성할 때는 <style> 태그를 사용하지 않는다 그리고 외부스타일 시트를 연결해야 적용된다.이때 사용하는 태그는 <link> 태그이다.<link ref = "stylesheet" href = "외부 스타일 시트 파일 경로">
'CSS' 카테고리의 다른 글
| [css] 기본 선택자 (0) | 2023.10.10 |
|---|
