새소식

HTML, CSS

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

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.