Intro to CSS
모든 웹페이지의 기본 구성인 HTML은 그 자체로는 밋밋하다. 시각적으로 아름다운 다양한 웹사이트들은 오늘날 CSS 및 다양한 도구들의 도움을 받아 운영된다. CSS는 Cascading Style Sheets의 약자로써 개발자들이 웹 페이지를 디자인하기 위해 사용하는 언어이다.
Inline Styles
CSS가 비록 HTML과는 다른 언어이지만, HTML 문서 내에 직접 CSS 코드 삽입이 가능하다. 이것을 inline syles라고 한다. HTML 요소에 스타일을 넣기 위해서는 style 속성을 사용해주면 된다.
<p style="color: red; font-size: 30px">Connect your ideas globally</p>style 속성에 “color : red;” 값을 넣어주면 웹 브라우저에서는 p 태그 내에 작성된 텍스트가 빨간색으로 나타난다. style 속성에 2개 이상의 inline style을 추가할 수 있다. 간단하게 세미콜론 뒤에 추가로 작성해주면 된다.
The style>tag
Inline style은 HTML의 요소를 빠르게 디자인 할 수 있지만, 한계 또한 존재한다. 예를 들어 현재 작성하고 있는 HTML 문서에서 모든 h1 태그에 폰트 색깔을 파란색으로 바꾸고 싶다면, 우리는 문서 내에 존재하는 모든 h1 태그를 찾고 inline style 문을 작성해야 한다. 이는 매우 번거로운 작업일 것이다.
<h1 style=“color : blue;”> * ∞번 작성다행스럽게도 HTML은 CSS 코드를 style 태그 내에서 작성하는 것을 허용해준다. style 태그는 head 태그 내에 반드시 작성되어야 한다.
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
h1 {
color: green;
font-size: 20px;
}
</style>
</head>위 코드처럼 head 태그 내의 style 태그에서 h1 태그의 스타일을 지정해주면. HTML 문서 내에 존재하는 모든 h1 태그의 색을 초록색 사이즈는 20px로 지정해 줄 것이다.
The .css file
HTML 코드와 CSS 코드가 같은 문서 내에 존재하는 것은 코드의 가독성을 떨어트리고 유지보수를 어렵게 만든다. 이런 이유로 개발자들은 HTML 문서와 CSS 문서를 따로 저장하여 보관한다. CSS 파일은 .css 확장자를 사용한다 (파일이름.css).
ex) style.css
Linking the CSS File
HTML 파일과 CSS 파일은 각각 따로 저장되어있으므로 HTML 문서 내에 CSS 스타일을 불러오기 위해서는 이 둘을 서로 연결하는 작업을 해야 한다. link 태그를 활용하면 된다. link 태그는 총 세 가지의 속성을 필요로 한다.
<link rel="stylesheet" href="introduce_style.css" type="text/css">- href : CSS 파일의 주소를 넣어준다.
- type : 연결하고자 하는 파일의 정보를 넣어준다. (CSS 파일일 경우 “text/css”를 넣어준다)
- rel : 이 속성은 HTML 문서와 CSS 문서 간의 관계를 설명해준다. CSS는 stylesheet이므로 값은 “stylesheet”로 해준다.
Tag Name
CSS 는 HTML의 태그 이름으로 정의 할 수 있다. 예를 들어 p 태그의 스타일링을 해주고자 한다면, CSS 문서에서는 다음과 같이 구현해줄 수 있다.
p {
font-size: 30px;
}중괄호 안에 CSS 코드를 넣어주면 된다.
Class Name
HTML의 태그 이름뿐만 아니라 class name을 통해서도 CSS 스타일을 지정해줄 수 있다.
<p class="idea">Connect your ideas globally</p>위 문단에 CSS 스타일을 적용하고자 한다면 class 속성을 활용해주면 된다.
.idea {
color: maroon;
}Multiple Classes
하나의 태그에는 1개 이상의 class 속성을 부여할 수 있다. 이는 다양한 CSS 스타일링을 하는 데 도움이 된다. 예를 들어 h1 태그에 제목에 초록색, bold 속성을 주고 싶다면 다음과 같이 코드를 구현하면 된다.
.bold {
font-weight: bold;
{
.green {
color: green;
}<h1 class="bold green">Innovation Cloud</h1>적용하고자 하는 태그의 class 속성에 2개의 클래스 이름을 작성해준다.
ID Name
만일 HTML 요소에 독자적으로 스타일이 적용되어야 한다면 (클래스와는 상관없이) 우리는 id 속성을 활용할 수 있다.
<h1 id="large-title">큰 제목</h1>#large-title {
font-size:300px;
}CSS 파일에서 스타일을 정의하고자 한다면 #뒤에 아이디를 작성하고 중괄호 안에 코드를 입력하면 된다.
Classes and IDs
HTML 요소들은 tag, class, id에 의해서 스타일링이 된다. CSS의 class와 id들은 각기 다른 스타일이 적용되어 있다. CSS는 HTML 문서 내의 많은 요소에 의해 재사용되는 것을 의도하고 있다. CSS에 정의되어있는 class나 id를 적절하게 조합하여 원하는 스타일링을 할 수 있다. 한 페이지에 2개의 제목이 필요하다고 예를 들어보자. 첫 번째 제목은 bold, blue 속성이 필요하고 두 번째 제목은 bold, green 속성이 필요하다. 각각의 제목에 서로 다른 CSS를 정의해주는 것보다는 bold CSS, green CSS, blue CSS를 정의해주고 상황에 따라 적절하게 조합하여 주면 된다.
.bold {
font-weight: bold;
{
.green {
color: green;
}
.blue {
color: blue;
}
<h1 class="bold blue">첫 번째 제목</h1>
<h1 class="bold green">두 번째 제목</h1>
반면에 ID는 단 한 개의 HTML 요소를 스타일링 하도록 의도되어 있다. ID는 미리 정의된 CSS의 tag 와 class를 override 하는 속성을 가지고 있다. 따라서 ID를 통한 스타일링이 적용되는 적절한 HTML 요소는 주로 변하지 않는 성질들을 지녀야 한다.
Specificity
Specificity란 CSS 스타일이 적용되는 우선순위이다. CSS 스타일을 HTML 요소에 적용될 때 가장 좋은 방법은 가장 작은 순위의 specificity를 적용하는 것이다, 그래서 만약 그 요소가 새로운 CSS 스타일링이 필요하면 앞서 tag로 정의되어있는 CSS 스타일위에 바로 override 작업을 쉽게 할 수 있기 때문이다. CSS 스타일 우선순위는 다음과 같다.
tag < class < id
Chain Selectors
HTML 요소가 2개 이상의 CSS 선택자를 가질 수도 있다. 이럴 때 2개 이상의 선택자를 조합하는 방법이 있다. 이것을 chaining이라고 한다.
h1.special {
font-family: cursive;
}
위와 같이 코드를 작성하면 HTML 문서내의 h1 태그의 class 속성이 “special”인 요소들만 cursive 스타일링이 적용될 것이다.
또한, 아래와 같은 식으로 CSS 선택자를 구체적으로 정의할 수도 있다.
.nav-list h4 {
color: cyan;
}.nav-list 클래스에 소속된 모든 html 요소들 내의(nested) h4 태그에만 스타일을 적용하라는 뜻이다.
