[생활코딩][WEB2] CSS

1. CSS등장 이전

html의 디자인을 조절할 수 있는 태그를 만드는 것과, 디자인을 위해 새로운 언어를 고안하는 것 중 당연히 전자가 쉬운 것임은 틀림없다. css가 나오기 전 사람들은 문서의 내용을 디자인할 수 있는 html태그를 개발하여 사용했다. 예를 들면 font태그를 통해 글자의 색이나 사이즈 등을 조절했다는 것이다. 하지만 얼마 지나지 않아 이러한 방법의 한계를 느끼게 된다. 

 

예를 들어 이렇게 리스트가 3개면 각각 font태그를 통해 디자인하기 쉽겠지만, 리스트가 1억 개가 있다고 한다면 하나하나 작업을 하다가 진절머리가 날 것이다. 사람들은 이것을 한 번에 묶어서 적용할 수 있는 새로운 기술을 고안해 냈고, 그것이 바로 css이다.

 

2. CSS의 등장

css는 html과는 전혀 다른 언어이지만 html 코드 안에 존재한다. 

해당 코드가 css코드임을 알려주기 위해 <style> 태그를 이용한다. 즉, style태그는 html 문법이지만 안의 내용은 css내용임을 명시해준다.  

역시 예시를 보는 것이 이해가 빠를 것이다.

위의 코드에서 a가 의미하는 것은 a태그로 이루어진 모든 내용물을 의미한다. 그리고 중과호 안에 color만 red로 해주면 html 파일 안에 있는 a태그로 감싸진 모든 내용의 color를 red로 적용시켜 주는 것이다. 1번에서 font태그로 하나하나 감싸준 것과는 비교도 안될 정도로 효율적이라는 것을 알 수 있다. 이렇게 중복을 제거함으로써 유지보수를 효과적으로 할 수 있다는 것은 굉장히 큰 장점이다.

css를 통해 디자인을 할 수 있게 됨으로써, html은 정보전달의 역할에 더욱 집중될 수 있게 되었다.

 

3. CSS의 기본 문법

css코드는 html 코드 안에 함께 존재한다. 2번에서 <style> 태그를 통해 해당 코드가 css문법임을 알릴 수 있었는데, 이렇게 하는 것 외에 속성 값을 통해 css코드를 적용시킬 수 있다. style이라는 속성을 주는 것이다. 위에서 a에 해당하는 모든 내용에 color:red를 준 것과는 달리 개별적으로 디자인적 요소를 적용시킬 수 있는 방법이기도 하다. 

이렇게 style속성을 사용하면 웹브라우저는 해당 내용을 css문법으로 받아들이고 적용시킨다.

 

css에서 기본적으로 알아야 할 용어에는 선택자(selector)가 있다. 

선택자는 효과를 줄 대상을 지칭하는 용어이다. 2번에서 a태그에 모두 color:red 효과를 주려고 했으므로, 여기서는 a가 선택 자라고 할 수 있다. 하지만 위와 같이 속성을 통해 css를 적용시킬 경우 효과를 줄 대상이 명확하기 때문에 선택자가 없다고 보면 된다. 

 

4. CSS 속성 알아내기

color: red에서 color는 property이고 red는 value이다. 이 간단한 것을 알게 된 것은 매우 큰 의미를 갖는다. 어떠한 property가 어떠한 value를 갖는지 검색할 수 있게 된 것이다. 이를 통해 많은 디자인적 요소를 적용시켜 볼 수 있게 된다. 예를 들어 h1태그보다 글자의 크기를 더 키우고 싶다면 어떠한 property를 사용해야 할까?라는 생각이 가능해지고 css text size property 등의 검색어를 통해 이것을 찾아낼 수 있다. 

검색을 통해 글자 크기와 가운데 정렬에 대해 적용시킬 수 있었다.

 

5. CSS 선택자 알아내기

2번에서 css가 얼마나 혁명적으로 디자인을 적용할 수 있는지 볼 수 있었다. 특정 태그를 가진 모든 내용에 같은 디자인을 적용할 수 있는 것이다. 하지만, 그중에서도 차별화를 줄 수 있어야 좀 더 완벽하다. 한마디로 a태그 전체에 같은 디자인을 적용한 후 특정 조건에 따라 일부 내용에 다른 디자인을 적용할 수 있어야 한다는 것이다. 이를 위해 class속성을 이용할 수 있다. 

이렇게 a태그를 달고 있는 모든 내용에 특정 효과를 준 후, class값이 saw인 것들에 차별화된 디자인을 줄 수 있게 되는 것이다. 

class값을 통한 선택자는 앞에 점을 붙여서 적용시킬 수 있다. 이 속성 값들은 띄어쓰기를 통해 구분될 수 있으며, 등장하는 순서에 따라 적용 순서도 바뀌게 된다. 

 

class보다 더 높은 우선순위를 갖는 선택자는 id로 지정할 수 있다. (선택자 우선순위 : 태그 < 클래스 < id ) 

id선택자는 #을 붙여서 디자인을 적용시킬 수 있다. 또한, id의 값은 중복되어서는 안 되고 고유해야 한다.

위의 결과를 통해 각 선택자들의 우선순위를 확인해 볼 수 있다. 

 

6. 박스 모델

각 태그들은 block level element와 inline element로 나뉜다. 

h1태그처럼 해당 라인을 전부 사용하는 것을 block level element라고 하고, 딱 내용물 정도의 부피를 차지하는 것을 inline element라고 한다. 이것들은 display속성 값을 통해 서로 변경시킬 수 도있다.

 

위의 결과를 보고 각 태그들이 공간을 얼마큼 차지하는지 확인할 수 있다.

또 하나 확인할 수 있는 것은 콤마를 이용하여 공통된 효과를 주기 위한 태그들을 그룹화하여 중복을 제거할 수 있다는 점과, border의 여러 속성을 한 번에 지정해줄 수 있다는 점이다.

 

박스 모델은 컨텐트와 border사이의 padding 값과 border바깥의 margin값을 가진 하나의 구성 모델이다. 이것은 부피감을 조절한다고 볼 수 있는데 조금만 생각해보면 화면 구성 디자인의 핵심이라는 것을 알 수 있다.

위와 같은 내용인데, 어느 웹페이지든 <검사> 기능을 통해서 이러한 박스 모델이 어떻게 구성되어있는지 확인할 수 있다. 

간단하지만 박스 모델을 이용하여 구성한 화면은 아래와 같다.

 

7. 그리드

정보들을 잘 배치하기 위해 레이아웃을 잘 짜는 방법을 코드를 통해 효율적으로 해내기 위해서 많은 노력이 있었다. 플럭스를 거쳐 최근에 도달한 기술이 바로 그리드이다. 그리드를 살펴보기 위한 html 코드를 작성해보며, 그리드를 이해해 보았다.

이때, 디자인의 용도로만 사용되는 태그인 div와 span에 대해 알 수 있었다. div 같은 경우 block level이기 때문에 줄 바꿈이 일어나고, span은 inline이기 때문에 줄 바꿈이 일어나지 않는 것을 확인할 수 있었다.

그리드의 장점은 한 그리드로 묶인 태그들은 서로의 변화에 대해 자동적으로 반응된다는 것이다. 

또한 컨텐트들을 박스 모델을 유지한 채 나란히 배치하는 것이 가능해진다.

 

이러한 기술을 지금까지 해온 페이지들에 적용해보았다.

8. 반응형 디자인

반응형 디자인은 화면의 크기에 따라 최적화된 디자인이 적용되는 것을 의미한다.

이를 위해서는 미디어 쿼리가 필요하다. 미디어 쿼리는 @media를 통해 사용할 수 있는데 다양한 값을 지정할 수 있으며 이에 대한 내용은 검색을 통해 쉽게 알아낼 수 있다. 예시로는 화면의 넓이가 800px 이상일 경우 display:none 효과를 주었다.

799px

화면의 크기를 움직여보면 800px부터는 위의 컨텐트가 사라지는 것을 확인할 수 있었다.

이것을 계속해서 만들던 페이지에 적용하면 화면의 크기에 따라 디자인이 다르게 적용되는 것을 확인할 수 있다.

 

 

기존의 모습

800픽셀 이하의 모습

 

9. CSS 코드의 재사용

이 강의를 들으며 pome, bichon, samoyed 페이지를 통해 실습을 하고 있었는데, 하나의 레이아웃을 짤 때마다 이 내용을 복사하여 다른 html 코드에 붙여 넣는 등의 귀찮은 작업이 필요했다. 역시 이러한 문제는 해결되어 있었다. 같은 css내용을 적용시키기 위해 복사 붙여 넣기가 아닌 다른 방법으로 재사용이 가능했다. 이를 위해서는 공통으로 적용할 디자인 코드가 들어있는 css파일을 만들어야 한다.

style.css로 이름 붙이고 공동으로 적용시킬 내용을 넣고 난 후, link태그를 이용하여 연동시키면 되는 것이다.

이때, 스프링 부트에서 적용하기 위해서는 경로가 중요한데 기본적으로 resources/static/css 밑에 css파일을 두었다면, link 태그의  href속성 값으로 /css/style.css을 주면 된다.

 

html 코드의 style태그와 그 안에 있던 css내용들을 모두 지우고 위 한 줄만으로 간편하게 디자인을 적용시킬 수 있으므로 여러 html 코드에 공통된 디자인을 적용할 때 매우 편리하다. 이렇게 한번 작성한 css파일은 재사용될 수 있다.