✍🏻 CSS의 기본 개념
📖 CSS(style)의 사용 이유
웹 문서에서 style이란 HTML에서 사용하는 글꼴, 색상, 정렬 등의 문서의 겉모습을 결정하는 것이다.
📄 이를 HTML로 하지 않고 스타일을 따로 사용하는 이유 정리
📌 웹 문서의 디자인만 바꿀 수 있다.
웹 문서의 내용은 HTML, 웹 문서의 디자인은 CSS로 구성하는 것이 웹 표준이다.
이렇게 내용과 디자인을 나누면 내용을 수정할 때 디자인을 건드리지 않아도 되고
반대로 디자인을 바꾸려면 스타일시트를 이용해 디자인만 바꿔 완전히 다른 웹 사이트를 만들 수 있다.
📌 다양한 기기에 맞게 바뀌는 문서를 만들 수 있다.
기존 HTML 문서는 PC의 웹 브라우저 화면이 기본으로 되어 있었다.
하지만 CSS를 이용하면 대상 기기에 맞춰 CSS만 바꿔 주면 같은 내용을 기기에 맞게 볼 수 있다.
📌 반응형 웹 디자인
'반응형 웹 디자인' 이란 PC, 모바일 등의 여러 기기로 접속했을 때 웹 브라우저의 크기에 따라 화면 레이아웃을 자동을 바꿔주는 방법이다.
📖 스타일과 스타일 시트
📌 스타일 형식
CSS 스타일의 기본 형식
선택자 { 속성1: 속성값; 속성2: 속성값; }<p> 태그의 스타일 적용한 부분이다.
텍스트 단락의 글자를 가운데 정렬하고, 색상을 파란색으로 지정하는 코드이다.p { text-align: center; color: blue; }주석을 표기하는 방법
/* 설명하고자 하는 내용 줄바꿈도 가능하다. */ p { text-align: center; /* 한줄짜리 주석도 가능 */ color: red; }
📌 스타일 시트
스타일 규칙을 한눈에 보기 쉽게 한 곳에 묶어 놓은 것을 스타일 시트라고 한다.
스타일 시트는 웹 브라우저에 기본으로 만들어져 있는 브라우저 기본 스타일과 사이트 제작자가 만든 사용자 스타일로 나누어져 있다.
사용자 스타일은 다시 인라인 스타일, 내부 스타일, 외부 스타일로 나누어져 있다.
- 인라인 스타일 : 적용하고자 하는 태그 안에 style 속성을 사용해 스타일을 지정
- 내부 스타일 : 웹 문서 내부에 <head> 태그 안에 <style> 태그를 넣어 스타일을 지정
- 외부 스타일 : 가장 많이 사용하는 스타일로, 별도의 파일로 외부에 css파일을 만들어 필요할 때마다 가져와서 사용한다. 이 때 HTML문서 내에 <link> 태그를 사용하여 외부 스타일을 불러온다.
<link rel="stylesheet" href="외부 스타일 시트 파일 경로">
개발일지 작성 블로그