-
CSS는 HTML로 만들어진 콘텐츠에 레이아웃과 디자인 요소를 정의하는 기술을 의미한다.
-
잘 설계된 CSS는 재사용이 가능하다.
-
CSS는 글씨의 색상이나 크기, 이미지 크기나 배치 방법 등 웹 문서의 디자인 요소를 담당한다.
-
CSS를 활용하면 웹 문서의 내용과 디자인을 별개로 관리할 수 있다.
-
CSS의 기본 구조
-
CSS 구문은 선택자와 선언부로 구성된다.
-
디자인 속성은 너무 많기 때문에 외울 필요없이, 필요 시 검색하여 사용한다.
-
CSS를 HTML에 적용하는 방법은 3가지가 있다.
- 인라인 스타일 시트 : HTML 태그에 CSS속성을 정의한다. (추천 X , 재활용 불가능)
- 내장 스타일 시트 : HTML 문서의
<head>부분에 CSS정의 부분을 포함한다. - 외장 스타일 시트 : 별도의 CSS파일을 생성한 후 HTML 문서에 링크를 포함한다. (추천😻)
-
<style> </style>태그 안에 디자인 속성을 작성한다. -
HTML의 주석 형태 :
<!-- 이 부분은 HTML 주석입니다. --> -
CSS의 주석 형태 :
/* 이 부분은 CSS 주석입니다. */ -
선택자 = 디자인을 적용할 html 요소
-
선택자는 셀렉터라고도 불린다.
-
셀렉터에는 태그 셀렉터, 아이디 셀렉터, 클래스 셀렉터가 있다
-
태그 셀렉터는 html의 구성 요소를 선택자로 놓는 가장 쉬운 방법이다.
다만, 중복 사용이 될 위험이 있기 때문에 조심히 사용해야 한다. -
아이디 셀럭터는 문서에 존재하는 유일한 값으로 아이디를 지정하여 특정 요소를 가장 확실하게 선택할 수 있는 방법이다.
-
클래스 셀럭터는 가장 보편적으로 사용하는 셀렉터이다. 클래스 이름으로 구분해 스타일을 만들어두고 HTML에서 클래스 속성을 적용해 원하는 디자인을 적용하는 방법이다. 재활용에 용이하다.
-
부트스트랩은 가장 대표적인 오픈소스 CSS 라이브러리이다.
-
부트스트랩을 사용하기 위해서는 전체 소스코드를 내려받아 원하는 부분을 수정해 프로젝트에서 사용하는 방법과 단순히 CSS링크만 이용하여 기본 설정 형태로 바로 사용하는 방법이 있다.
-
부트스트랩 버전은 가급적 5.0버전을 사용하는 것이 좋다.
-
아래는 가장 기본적인 버튼만드는 부트스트랩 활용 예시이다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-primary">blue button</button>
</body>
</html>