CSS 기초 다지기
CSS의 등장 배경, 기본 문법, 속성과 선택자의 개념
* 본 포스팅은 이전 글에서 이어집니다.
웹사이트를 디자인할 때 주로 사용해야하는 언어가 바로 CSS다. 워드프레스 기반의 웹사이트나 티스토리에서 사소한 부분을 바꾸고자 할 때 CSS의 기초를 모르니 많은 부분을 헤매게 됐다. 따라서 본격적으로 CSS의 기초 이론을 다져보고 본격적인 '디자인' 적용을 해보고자 한다.
본 포스팅 역시 생활코딩의 강좌를 공부한 내용을 바탕으로 했다.
CSS의 등장
출처 : 생활코딩, WEB2 CSS - 3. CSS의 등장웹페이지를 아름답게 디자인하는 두 개의 갈림길 중 쉬운 것은 HTML에 직접적으로 style 태그 (<font color="red">) 를 추가하는 것이 있다.
하지만 이보다 더 어렵긴 하지만 근본적인 해결책이 바로 CSS다.
출처 : 생활코딩, WEB2 CSS - 3. CSS의 등장<style>이란 태그는 HTML의 문법이면서 동시에 이런 뜻이다.
"웹브라우저야, 이 <style>이라는 태그 안쪽에 있는 내용은 CSS니까, 너는 이것을 CSS라는 언어의 문법에 맞게 해석해서 처리해야 돼."라고 하는 의미가 된다.
이 코드를 통해, <a>태그가 1억개가 있건, 10억개가 있건 순식간에 바뀌는 폭발적인 효과를 얻을 수 있다.
생활코딩에서는 어떻게 코딩을 잘할까가 아니라, 코딩을 어떻게 할까에 집중한다고 한다.
하지만, 유일하게 코딩을 잘하는 방법에 대해 말하자면 바로 '중복의 제거'다.
만약 <font-size>라는 1억개의 태그를 중복해서 스타일을 적용한다면, 이 웹페이지의 사이즈는 어마어마하게 커질 것이다.
작은 웹페이지라면 모를까, 네이버나 구글같은 거대 기업에서는 이러한 중복된 코드가 있느냐 없느냐의 차이가 굉장히 중요한 문제가 된다.
따라서 CSS의 코드를 이용하여 같은 성격의 것을 한 번에 바꿀 수 있는 것은, 유지 보수를 편리하게하며 가독성을 높일 수 있다.
CSS라는 언어가 도입된 이유는?
1. HTML은 너무 중요하기 때문에, 정보라는 특성에 전념하기 위해 HTML로 부터 디자인의 기능을 뺏어온 것이다.
2. CSS를 통해서 웹페이지를 디자인하는 것이 HTML에서 디자인하는 것보다 훨씬 더 폭발적으로 효율적이다.
CSS의 기본 문법
출처 : 생활코딩, WEB2 CSS - 4. CSS의 기본 문법웹페이지 안에 CSS를 삽입하는 2가지 방법
1. style 태그를 쓴다.
여기서 'a' 는 선택자(Selector)라 부르며, { }안의 효과를 적용하려는 내용은 선언(Declaration)이라고 부른다.
2. style 속성을 쓴다.
style태그를 직접 사용하는 경우, 여기서 style=" "은 HTML의 언어로 CSS를 적용하는 것이다.
이 때 style은 속성이며, 이 경우에는 스타일 태그가 위치하는 곳에 효과를 주는 것이기 때문에, 선택자가 없다.
세미콜론(;)
출처 : 생활코딩, WEB2 CSS - 4. CSS의 기본 문법세미콜론(;)은 디스크립션이 시작되고 끝나는 것을 구분하기 위해 사용하는 것이기 때문에, 효과를 지정한 다음에는 항상 세미콜론을 써야 한다.
세미콜론을 사용하면, 효과의 내용이 한 줄에 있더라도 구분이 가능해진다.
텍스트에 링크를 걸었을 때, 밑줄을 없애고 싶다면 style태그에 text-decoration: none 을 선언한다.
출처 : 생활코딩, WEB2 CSS - 4. CSS의 기본 문법만약 CSS라는 텍스트에만 밑줄을 넣고 싶다면, CSS 텍스트의 스타일 속성에 text-decoration:underline 값을 추가해주면 된다.
출처 : 생활코딩, WEB2 CSS - 5. 혁명적 변화정리해보자면, 위와 같이 각 요소의 명칭을 알게됐고, 이를 이해한다는 것은 초심자에게 혁명적 변화라 할 수 있다.
우리가 이것을 이해하게되면 앞으로 배우지 않은 선택자와, 효과들을 마주하더라도 이제는 무엇을 모르는지를 알 수 있기 때문에 검색할 수 있고, 질문할 수 있고, 궁금해 할 수 있기 때문이다. 이제 웹페이지를 디자인하는 과정에서 어떠한 Property가 존재하는가를 알아가며, 그 효과를 더 정확하게 선택해서 지정하기 위해서 다양한 Selector를 알아가는 두 가지의 여정을 걷게 된다.
CSS의 속성, 스스로 알아내기
Property
출처 : 생활코딩, WEB2 CSS - 6. CSS 속성 스스로 알아내기WEB이라는 텍스트에 변화를 주기 위해서는, WEB을 포함하는 태그인 h1를 건드리면 된다.
그렇기에 h1이 선택자가 되고, 원하는 효과를 선언하면 되는 것인데, 이제 기초 문법을 알고 있기 때문에 '내가 원하는 효과를 어떻게 적용할까?'라는 것은 우리는 이제 검색을 통해 스스로 알아낼 수 있다. 이제는 검색을 하면 내가 모르는 부분을 1분만에 알아낼 수 있고, 에디터에서 태그의 앞글자만 입력해도 다양한 태그가 이미 제시돼기 때문에, 우리는 굳이 외우지 않아도 쉽게 코드를 입력할 수 있는 시대이다. 그렇기에 우리가 기초를 알고 스스로 검색해나갈 수 있는 힘이 있다는 것 자체로도 이미 많은 것을 배웠다고 할 수 있다.
1. 텍스트 사이즈 조절하기
간단히 구글에 css text size property 를 검색 해본다.
요즘 구글 검색은 원하는 정보를 요약해서 바로 나타내줘서 매우 편리해졌다.
이 포스팅을 통해, 우리는 텍스트 사이즈를 조절하기 위해서는 Property를 'font-size'로 입력하면된다는 것을 알아낼 수 있고, 폰트 사이즈에 대한 Value값은 em, pt, px, %가 있고 그에 대한 차이는 무엇인지 알 수 있다.
2. 텍스트 정렬 변경하기
텍스트를 정렬하기 위해서는 어떤 CSS를 이용해야할까? 이 부분도 간단히 구글에 css text align property라고 검색해본다.
그러면 'text-align' 속성을 이용하고 Value 값을 left, right, center로 설정하면 된다는 정보를 얻을 수 있다.
CSS의 선택자의 기본
Selector
CSS를 지배하는 두 가지 중요한 요소는 효과와 선택자다. 그 중 앞서 속성에 대한 내용을 통해 효과의 토대를 닦았고, 이번에는 선택자에 대한 중대한 토대를 닦아 보도록 하자. 선택자에는 다양한 종류가 있으나, 우선 가장 기초적이고 중요한 세 가지에 대해 다룬다.
1. 기본 태그 (Element)
출처 : 생활코딩, WEB2 CSS - 7. 선택자의 기본우선, <a>태그로 링크가 걸려있는 모든 텍스트의 컬러를 블랙으로 하고자, style태그 안에 선택자 a에 대해 { color:black; } 으로 선언한다.
그리고 방문했던 페이지의 텍스트 HTML와 CSS를 회색으로, 그리고 그 중 현재 페이지인 텍스트 CSS는 빨간색으로 변경하고자 한다.
이 때 컬러를 변경하기 위해서는, 아래 <body> 부분에 <a>태그의 style 속성을 통해 직접 텍스트의 컬러를 변경하는 방법이 있지만,
이는 정보가 많을 때에는 중복의 우려가 있다. 그렇기 때문에 깔끔한 코드입력과 가독성을 위해 다른 대안(선택자)이 필요한 것이다.
2. 클래스(Class) : .
출처 : 생활코딩, WEB2 CSS - 7. 선택자의 기본이를 위해서는 중복된 코드, 즉 같은 스타일을 적용할 텍스트들을 같은 그룹으로 묶어주는 것이 필요하다.
이 때, class라는 HTML 속성을 이용하며, "saw"라는 값을 통해 클래스를 명명한다.
출처 : 생활코딩, WEB2 CSS - 7. CSS 선택자의 기본그리고 style태그에서 saw 클래스에 대한 효과를 선언해주면 되는 것인데, 이 때 기본 태그 요소들과의 중복을 막기 위해서 (.) 을 앞에 붙여준다.
(.)을 붙여줌에 따라, 이 페이지에서 클래스 값이 saw인 태그를 가르키는 선택자가 되는 것이고, 이에 { color:gray; }로 선언하여 회색으로 변경한다.
class의 의미를 탐구해보면, 학교에서 반을 class라고 한다. 이는 같은 의도에 따라 학생들을 하나로 그룹핑할 때 쓰는 말이다.
그렇기에 HTML에서도 마찬가지로, 한 페이지 내에서 같은 같은 것들을 그룹핑하고 하나로 묶기 위한 의도로 class를 사용한다.
출처 : 생활코딩, WEB2 CSS - 7. CSS 선택자의 기본다음으로, 현재 페이지인 CSS의 텍스트를 빨간색으로 변경하기 위한 방법이다.
이 때 class의 값을 띄어쓰기를 통해 구분하고 추가할 수 있다. 그래서 active를 추가하고, style태그에서 .active를 { color:red; }로 선언하면 글씨가 빨간색으로 바뀌는 것을 알 수 있다. 클래스에 대해서 명령의 우선순위는, 최근, 즉 보다 가까에 있는 명령이 우위를 갖는다.
하지만, 이렇게 빨간색으로 변경하는 방법은 그렇게 좋은 방법이 아니므로 다음의 선택자를 이용해보자.
3. 아이디(id) : #
출처 : 생활코딩, WEB2 CSS - 7. CSS 선택자의 기본id라는 속성에 active값을 입력해준다. 아이디라는 것은 웹페이지에서 한 번만 등장해야하며, 가장 높은 우위를 갖는다.
id의 의미를 탐구해보면, id는 일상 속에서 신분을 명명해주고 주민등록번호나 학번 등 단 한 명에 대한 정보를 말하며 중복되면 안된다.
그러므로 한 페이지에서 id에 대한 값은 하나씩 존재하며, 이를 통해 스타일 적용에 더욱 편의를 높인다.
출처 : 생활코딩, WEB2 CSS - 7. CSS 선택자의 기본그리고 style태그에서 id 선택자에 대한 효과를 선언해주면 되는 것인데, 이 때 id를 위한 표시는 (#) 을 앞에 붙여준다.
이 때 id선택자는 다른 요소 (클래스, element) 보다 우위를 갖기 때문에, 최신으로 명령한 것이 아니더라도 효과가 적용되는 것을 알 수 있다.
따라서 선택자 중에서의 우선순위는 기본태그 < class < id 로 이해하면 된다. 이것을 암기하려고 하기보다는, 본질적인 의미를 이해하면 도움이 된다.
마지막으로, 우리는 지식을 토대로 검색을 해볼 수 있다. 구글에 CSS selector라 검색해서 첫 글을 확인해보자.
다양한 Selector가 존재함을 알 수 있고, 사용 예시와 디스크립션을 통해 어떻게 사용할지 더욱 상세하게 공부해볼 수 있다.
