이번 포스팅부터는 CSS에 대해서 알아보겠습니다.
CSS란?
CSS, Cascading Style Sheets란 무엇일까요?
위키피디아에서 CSS를 검색하면
CSS, 종속형 시트 또는 캐스케이딩 스타일 시트는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. 기본 파일명은 style.css이다.
라고 나옵니다.
즉, 간단히 한줄로 설명하자면
CSS란 HTML의 Content가 어떻게 보여야 하는지를 브라우저에게 전달하는 스타일 언어
라고 정의할 수 있겠습니다.
그렇다면 CSS는 왜 등장하게 된 것일까요?
CSS 등장 이전의 상황
CSS 등장 이전의 웹은 매우 투박하고 단순했습니다.
즉 CSS란 웹페이지를 좀 더 아름답고 보기 좋게 만들고 싶은 욕망으로 인해 생겨났다고 할 수 있습니다.
CSS의 등장
CSS의 코드 형태는
| <style> a {color:red;} </style> |
와 같이 <style> 코드 안에서 존재합니다.
혁명적 변화
Web에 CSS를 포함시키기 위해서는
웹브라우저가 어디부터 어디까지가 CSS인지를 알게 해줘야 합니다.
그리고 그 방법은
첫 번째로 style 태그가 그 역할을 합니다.
두 번째로 style 속성을 이용하는 방법이 있습니다.
ex) style="color:red;text-decoration:underline"
그리고 이제는 CSS의 용어를 설명해드리겠습니다.
| <style> a {color:red;} </style> |
의 코드가 있다고 치면
<style>은 스타일 태그이고
a: 효과를 누구에게 줄 것인가를 정해주는 선택자 selector
color:red; : 선택자에게 지정되는 효과 declaration(선언이라고도 함)
color: 속성 property
red: 값 value
라고 구분할 수 있습니다.
* 참고로 효과가 끝난것을 의미하는 것이 ; 세미콜론 입니다.
CSS속성을 스스로 알아내는 방법
CSS속성을 모를 때, 스스로 알아내는 방법은
간단하면서도 단순하게도 검색엔진에 검색하는 것입니다.
예를 들어 글자 크기를 조절하는 속성을 알고 싶다면
css text size property로 구글에 검색하는 것입니다.
그렇다면
font-size:60px;
이런 형태의 효과라는 것을 알 수 있는 것입니다.
그리고 또 만약 글자의 위치를 조절하는 속성을 알고 싶다면
css text center property로 구글에 검색합시다.
그렇다면
text-align:center;
이런 형태의 효과라는 것을 알 수 있겠죠.
프로그래밍의 세계에는 알아야 할 것이 너무나도 많습니다.
그리고 모른다면 우리는 찾아보고 알아내면 된다는 간단한 이치를 깨달은 것입니다.
'Skills > CSS' 카테고리의 다른 글
| 2장. CSS선택자와 박스모델 (0) | 2022.01.28 |
|---|
