CSS : Cascading Style Sheet의 약자로 디자인 영역을 담당하는 언어. CSS3이 등장하며 텍스트 그림자, 그라데이션, 등 디자인으로 표현할 수 있는 영역이 늘어남. 또한 애니메이션 기능이 추가되어 일정범위내에서 제이쿼리와 자바스크립트를 대체함.
CSS의 구성요소 : HTML 영역, 속성, 속성값 ex) 디자인을 적용할 HTML영역 { 속성: 속성값; } ex) 이미지 { 너비: 30px; 높이: 50px; 컬러: black; }
CSS 연동 방법
인터널 방식 : HTML 문서 안에 <style> 태그를 사용하여 CSS 적용하는 방식
인터널 방식
인라인 방식 : HTML 태그 안에 style 속성을 사용하여 적용하는 방식
익스터널 방식 : CSS 파일을 생성하여 HTML 문서와 연동하는 방식. HTML문서 안에 CSS언어를 입력하면 가독성이 떨어진다는 단점이 있어 CSS 파일에 분리하여 작성하여 연동.
HTMLCSS
CSS 선택자
선택자 : 디자인 작업을 진행할 영역을 선택하는 요소.
type 선택자 : <h1>, <p>, <a> 같은 HTML태그를 기준으로 디자인을 적용.
id 선택자 : HTML 태그에 '이름'을 지어 선택하는 방식. 속성값을 하나만 사용 가능. ex) HTML 문서 -> <h2 id="bg">id선택자</h2> ex) CSS 문서 -> #bg { color: red; }
class 선택자 : HTML 태그에 '별명'을 지어 선택하는 방식. 속성값을 여러개 사용 가능. ex) HTML 문서 : <h3 class="size color">class선택자</h3> ex) CSS 문서 : .size { font-size: 50px; } .color { color : blue; }