CSS 기초부터 활용까지 1편

 

 

안녕하세요, 도롱군입니다.

 

CSS의 기초부터 활용까지 1편 포스팅을 해보도록 하겠습니다.

 

CSS란 무엇인가요?

 

CSS의 의미는 Cascading Style Sheet 의 약자입니다.

CSS는 HTML의 요소를 화면에 가시화할 수 있으며, 많은 HTML 스타일을 저장하여 따로 디렉토리를 만들고

그 안에 .css 문서 안에 코딩을 하게 되면 여러 html 레이아웃을 제어 할 수 있습니다.

디자인, 레이아웃 등 다양한 Function과 모바일이 보급되며 대중화 되어 반응형 웹 디자인을 할 때 필수적인 요소로

자리매김 하였기 때문입니다.

 

CSS는 왜 써야할까요?

 

 

HTML은 웹 페이지의 레이아웃 형식을 지정하기 위해 Tag를 포함하지 않았습니다.

일반적으로 HTML만 이용하여 웹 개발을 할 경우 일일히 Tag마다 <font> 등 스타일 작업을 해야합니다.

이렇게 작업을 하게 될 경우 웹 개발의 속도가 매우 저하되며, 외주 단가또한 기하급수 적으로 값이 올라가게 되었습니다.

 

W3C (World Wide Web Consortium)은 이러한 문제점을 막고 더욱 발전된 웹 개발을 위하여 CSS를 제작 및 배포하게 되었습니다.

이로인하여 CSS는 HTML 페이지에서의 들어가게 되는 스타일을 최소화 시킬 수 있게 되었습니다.

 

 

 

 

CSS 구문을 알아봅시다!

 

CSS의 rule-set은 선택자(Selector)와 선언블록(Declaration)으로 이루어지게 됩니다.

선언블록 속에는 속성(Property)와 속성의 값(Value)가 정의됩니다.

조금 더 쉬운 설명을 위해 아래의 사진을 참조 부탁 드립니다.

 

 

저 구문을 해석하자면, a 태그에 속해있는 텍스트(선택자) 의 색상을 검정색으로 지정한다(선언블록)는 것입니다.

모든 CSS 구문은 이렇게 구조가 되어 있습니다.

각 선언에는 콜론으로 구분되어 있는 CSS 속성과 값이 포함 되어 있어야합니다.

항상 선언의 끝은 콜론으로 마추어야 하며, 선택자 하나의 시작과 끝은 중괄호로 엮어주어야 합니다.

하나의 선택자에 속성이 여럿 들어간다면 각 속성 별로 콜론을 기입해주어야 합니다.

 

 

 

CSS 선택자

 

CSS 선택자는 HTML 요소를 요소 이름(Name), ID, Class, 특성 등에 따라 선택하는 데 사용 되고 있습니다.

위의 사진을 예로 들어 봅시다.

해당 CSS 문서를 읽어들인 모든 HTML 문서 속의 <p> 요소를 선택합니다.

(이는 모든 <p> 요소에 해당 되는 텍스트는 black 색상으로 표시가 되게 됩니다.)

 

id 선택자

 

id 선택자는 HTML 요소에 id 속성을 사용된 요소를 선택하는 데 사용 되고 있습니다.

id 요소는 페이지 내에서만 고유해야 합니다. 그래서 1개의 요소를 선택하는 것에만 쓰입니다.

특정 id가 있는 요소를 선택하려면 (#)해시 앞에 id를 기입해주면 됩니다.

이 또한 해당 CSS 문서를 읽어들인 HTML 문서 속에 id를 적용시킨 요소만 적용이 됩니다.

 

class 선택자

 

class 선택자는 HTML 요소에 class 속성을 사용된 요소를 선택하는 데 사용 되고 있습니다.

클래스가 적용된 요소를 선택하려면 마침표 "." 다음 클래스 지정 이름을 기입합니다.

위의 사진에서 해당 클래스에 이름이 쓰인 요소의 텍스트 색생은 검정으로 표시되게 합니다.

*CLASS의 이름은 숫자로 시작될 수 없습니다.

 

또한 class의 경우 특정 요소만 지정하여 스타일을 적용시키게 할 수도 있습니다.

아래의 사진을 참조 해주시길 바랍니다.

위의 예제문을 해석하자면 <p> 요소에 class가 class라는 이름을 갖고 있을 경우 해당 <p> 요소의 텍스트를 검정으로

표시하게 해줄 수 있습니다.

 

이 외로 그룹화 하여 스타일을 적용 시킬 수도 있는데, 이는 다음 포스팅에서 계속 진행하도록 하겠습니다.