HTML, CSS 기초 : CSS 시작하기

CSS의 뜻과 구성요소

• CSS : Cascading Style Sheet의 약자로 디자인 영역을 담당하는 언어. CSS3이 등장하며 텍스트 그림자, 그라데이션, 등 디자인으로 표현할 수 있는 영역이 늘어남. 또한 애니메이션 기능이 추가되어 일정범위내에서 제이쿼리와 자바스크립트를 대체함.
  
  
• CSS의 구성요소 : HTML 영역, 속성, 속성값
  ex) 디자인을 적용할 HTML영역 { 속성: 속성값; }
  ex) 이미지 { 너비: 30px; 높이: 50px; 컬러: black; }

CSS 연동 방법

• 인터널 방식 : HTML 문서 안에 <style> 태그를 사용하여 CSS 적용하는 방식

인터널 방식

 

• 인라인 방식 : HTML 태그 안에 style 속성을 사용하여 적용하는 방식

 

• 익스터널 방식 : CSS 파일을 생성하여 HTML 문서와 연동하는 방식. HTML문서 안에 CSS언어를 입력하면 가독성이 떨어진다는 단점이 있어 CSS 파일에 분리하여 작성하여 연동.

HTML

CSS

 

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; }