1. CSS의 뜻
CSS는 Cascading Style Sheet의 약자로서 웹 페이지의 화면에 스타일과 레이아웃을 담당하는 문서이며, 보통 html(프레임), css(스타일), javascript(동작) 이 세가지가 프론트엔드의 메인 구성 언어가 된다.
이러한 CSS 코드는 크게 두가지 요소로 구성이 되어 있는데, 첫번째는 HTML 파일의 특정 태그를 선택하는 선택자(Selector)와 해당 선택자에게 속성(Property)과 속성 값(Property value)을 부여하는 선언(Declaration)이 두가지로 구성이 되어 있습니다.
/*여기서 div는 HTML 파일의 태그를 선택함을 의미하고, background는 해당 태그에 적용할 속성, red는 해당 속성에 대한 값을 의미합니다. */ div { background : red ; }
2. CSS 적용 방법
이러한 CSS 코드로 작성 된 내용을 HTML 파일에 적용시키는 방법은 크게 세 가지 방법이 존재하는데요.
HTML 파일에서 직접 추가해주는 방식은 스타일을 적용시키고자 하는 태그 안에 직접 선언을 해주는 인라인(in-line) 스타일 방식과 HTML문서 내에 style 태그를 이용해 직접 스타일을 추가 시켜주는 방식(내부 스타일 시트)이 존재하며,
외부 파일 형식으로 추가 시켜주는 방식은 HTML문서 내에 link 태그의 경로로 외부의 CSS 파일을 rel(문서와의 관계를 나타내는 속성), href(해당 파일의 상대경로 지정)속성을 활용하여 HTML문서와 연결 시켜주는 방식(링킹 스타일 시트)이 존재합니다.
보통은 HTML 문서 내에 CSS를 직접 추가할 경우 코드가 많아지고 복잡해질수록 가독성이 떨어지기 때문에 외부 CSS 파일을 추가하는 것으로 스타일 적용을 하는 것이 일반적입니다.
/* ✔ 태그 안에 style 속성으로 직접 추가*/ <div style = "background-color: red;"> 인라인 스타일 </div> /* ✔ head 태그 범위 안에서 style 속성으로 직접 추가(범위가 꼭 head 태그가 아니여도 됩니다.)*/ <head> <style> div { background-color: red; } </style> </head> /* ✔ head 태그 범위 안에 CSS 파일을 경로로 연결하는 방법*/ <link rel="stylesheet" href="/style.css">
3. CSS의 확장 라이브러리
이러한 CSS를 확장한 라이브러리
