What is the CSS?
CSS 란 Cascading Style Sheet 로 html이 구조라면, css는 html을 채워주는 도구이다.
CSS는 HTML 문서에 있는 요소에 선택적으로 스타일을 적용할 수 있다.
Why we use CSS?
매우 간단한 웹페이지라면 이렇게 HTML 코드 내에 스타일이 들어가있어도 문제가 없지만,
HTML과 CSS의 역할이 다르고 또 필요한 부분이 한 눈에 들어오지 않기 때문에 가급적이면 별도로
stylesheet를 작성해서 연동하는 것이 좋다.
이는 여러 원인 때문에 분리해서 쓰면 좋다.
- html과 css가 분리되어 유지보수가 쉽다.
- 성능이 좋아진다.
- html 안에 style을 지정하지 않기에 html이 간단, 검색엔진이 수집하기에도 쉬워진다.
Where, How we use CSS?
CSS는 HTML 요소의 스타일을 정의하는 데 사용되는데, 이를 위해서는 해당 요소를 선택할 수 있어야 한다.
선택자, 영어로는 셀렉터는 스타일을 적용하고자 하는 요소를 선택하기 위해 CSS가 제공하는 수단이다.
선택자에는 여러 종류가 있는데요. 기본적인 종류만 먼저 보자.
Basic
태그 선택자 / 요소 선택자는 가장 간단한 선택자로, HTML 요소의 이름을 직접 지칭함으로써 선택자가 지칭하는 타입의 모든 요소를 선택합니다.
위와 같이 p, em, h1, h2 태그에 property를 부여함으로써 우리는 html 문서에 css를 부여함을 알 수있다.
하지만 태그선택자만으로는 정교하게 디자인하는 데에 한계가 있습니다.
모든 p 요소 가운데 특별히 하나의 요소를 선택하고 싶거나 기타 다른 요소 하나에만 디자인 속성을 부여하고 싶다면?
이럴 때 태그별로 부여하면 문제가 생긴다. 독립적이지 않다는 뜻이다.
Class
이 때, 주어진 class 값을 attribute 값으로 보유하고 있는 html 요소를 찾아 선택하는 방법이 있다.
이를 클래스 선택자라고 한다.
선택하려는 class 속성값 앞에 . 을 하나 추가해서 작성하며, 굉장히 보편적으로 자주 사용된다.
Id
id 선택자는 클래스 선택자와 거의 유사한데, class 속성이 같은 속성값을 여러 개의 HTML 요소가 공유할 수 있는 데에 반해, id 속성값은 하나의 HTML 요소만 사용할 수 있다.
어떤 요소가 유일하고 문서 내에서 중요한 역할을 담당한다면 id 속성이 부여될 수도 있다.
id 선택자는 선택하려는 id 속성값 앞에 #기호를 추가하면 된다.
Selector
셀렉터로 HTML 요소를 선택하고 나면, 괄호 안에 속성, 프로퍼티와 값을 지정한다.
프로퍼티는 이미 스펙에 정해져 있는 것만 사용이 가능하고, 마찬가지로 값 또한 해당하는 단위 혹은 키워드만 사용이 가능하다. 여기서 property는 float 이다.
예를 들어 글씨 색깔을 바꾸고 싶다고 하면, font-color 혹은 text-color 같은 프로퍼티는 존재하지 않으며 color라고 명시해주어야 한다. 해당하는 값은 140개의 표준 색이름 내에서 사용하거나, 색상 코드 (#000000), RGB값 및 투명도 rgba(0,0,0,0), hsl(Hue, Saturation, Lightness) 등으로 표기하는 방법만을 사용해야 한다. 그 외에 다른 방식은 지원하지 않는다.
프로퍼티와 값 쌍은 선언이라고 한다. 선언은 세미콜론으로 구분한다. 여기서의 선언은 float:right; 이다.
이렇게 작성된 하나의 구문을 룰셋이라고 부릅니다.
룰셋은 해당 HTML 요소를 어떻게 렌더링할 것인지 브라우저에 지시하는 역할을 합니다.
'대학원 공부 > programming language' 카테고리의 다른 글
CSS : font background, inheritance (0) | 2019.12.14 |
---|---|
Javascript : Javascript란? (0) | 2019.12.14 |
HTML : HTML의 정의, 역사 (0) | 2019.12.14 |
HTML : HTML 기본 tag (0) | 2019.12.13 |
Python : basic : Override vs Overload (0) | 2019.12.01 |
댓글