CSS 기초1

 

 

• 학습내용

 프로그램을 만드는 것을 집을 짓는 것에 비유할 수 있다고 했다. 그중 html은 구조를 결정하고 기초공사를 하는 것이다. 이번에 배울 css는 그 구조와 외관의 디자인을 결정하는 작업이다. css도 html과 같은 마크업 언어가 표현되는 방법을 결정하는 언어이지만, 디자인의 영역의 표현을 결정한다고 볼 수 있다. html과 마찬가지로 css 역시 프로그래밍 언어는 아니다. css를 구체적으로 배우기 앞서 css에 대한 인식과 간단한 css의 구조에 대해서 살펴보고자 한다.

 

• css에 대한 오해

 보통 사람들이 css를 볼 때 css는 개발자의 영역이 아닌 디자이너의 영역이라고 오해를 많이 한다. 그러나 css는 디자이너만의 영역이 아니다. 개발자가 만드는 일반 사용자를 대상으로 하는 앱은 UI(User Interface)가 없으면 소용이 없다. 여기서 UI란 사용자 인터페이스를 말하는데 사람과 컴퓨터 프로그램이 소통할 수 있도록 만들어진 요소를 의미한다. 그리고 좋은 앱이 되기 위해선 UI이 뿐만 아니라 UX까지도 고려하는 것이 중요하다. UX는 사용자 경험을 의미한다. 즉, UX가 고려된 적절한 UI를 만드는 일이 필요한 것이다. 

 둘째로, css를 막연히 어렵다고 생각하는 오해이다. 사실 css는 웹 개발자가 배우기 가장 쉬우면서 가장 어려운 언어 중 하나라고 할 수 있다. 만약 진행하는 프로젝트의 규모가 커진다고 한다면 css를 적절히 의미있게 구성하는 일은 아주 어렵고 복잡해진다. 그러나 다행히도 css가 가진 고유한 복잡함을 다루기 위해 많은 종류의 다양한 모범 사례가 만들어져 있다. 이것을 잘 학습한다면 어려움을 상당 부분 해소할 수 있다. 그러나 또 문제는 이러한 모범 사례들 중에도 상충되는 사례가 있어서 어렵게 한다. 그러나 사례를 집중하여 학습한다면 이것 역시 해소할 수 있다. 그리고 그 과정에서 무엇이 css를 어렵게 만드는 지를 이해하는 것이 중요하다고 할 수 있다.

 

• css의 구조

그렇다면 이제 본격적으로 css의 구조에 대해서 살펴보고자 한다. 구조에 대한 이미지 파일은 내가 학습하고 있는 '코드스테이츠'의 자료를 빌려왔다.

구조를 살펴보면 셀렉터는 태그의 이름이나  id, 또는 class를 선택하는 부분이다. ({})중괄호를 사용해 선언 블록을 지정하고 선언을 한다. 선언에는 속성이 있는데 속성은 요소에 적용할 수 있는 내용이다. 위의 경우  'color'라는 속성을 가지고 와서 그 값을 'red'로 지정하여 이 셀렉터의 색이 빨강임을 지정한다. 선언은 (;)세미콜론으로 닫아서 선언끼리 구분한다. 

 이제부터는 간단한 css사용법을 본격적으로 다루고자 한다. 이번 스크립트에서는 css파일을 프로그램에 추가하는 방법과 기본적인 셀렉터를 사용하는 방법까지 살펴보겠다.

 

• css파일을 프로그램에 추가하는 방법

css파일의 내용을 프로그램에 적용시키는 방법에는 3가지가 있다. 첫째로 html의 같은 요소의 줄에 css내용을 적용하는 인라인 방법이 있다.

<p style="color:red; background-color:yellow;">안녕하세요.</p>
<p style="color:green;">Hello.</p>

위 코드의 결과는 이렇다.

안녕하세요.

Hello.

그러나 이런 인라인 스타일 방법은 권장되지 않는 방법이다. css의 내용이 아주 적은 경우나 매우 급한 경우를 제외하고는 지양하는 것이 좋다.

 두번째 방법은 css의 내용을 html의 style태그 내에 작성하는 내부 스타일 시트 방법이다.

<style>
.hello1 {
  color: red;
  background-color: yellow;
}
.hello2 {
  color: green;
}
</style>
<p class='hello1'>안녕하세요</p> <p class='hello2'>Hello.</p>

이런 식으로 사용할 수 있다. 이렇게 작성해도 위의 인라인 스타일과 동일한 결과가 출력된다. 보통 이 style태그는 head태그 안에 들어가는 게 국룰이다. 

 마지막으로 가장 많이 사용되는 외부 스타일 시트 방법이다. 외부 스타일 시트는 css파일을 따로 작성하여 html의 link태그안에서 href속성을 통해 파일을 연결하여 적용하는 방법이다. 

#hello1 {
  color: red;
  background-color: yellow;
}
#hello2 {
  color: green;
}

css파일을 이렇게 작성하고,

<link rel="stylesheet" href="mystyle.css">

<p id='hello1'>안녕하세요.</p>
<p id='hello2'>Hello.</p>

이러한 방법으로 html에 링크를 걸어 css를 적용한다. 이 코드의 결과도 위의 방법과 같은 출력을 낼 것이다. 

 

• 셀렉터

 기본적으로 셀렉터는 어떤 요소를 스타일하고자 할 때 그 요소 태그를 선택하는 것이다. 

h4 {
  color: red;
}

이와 같이 작성하면 h4의 요소의 색을 전부 red로 바꿔준다. 

 그러나 이렇게 사용하는 경우 다른 코드에서 쓰이는 동일한 요소 모두에 적용하기 때문에 원하지 않는 결과를 만들 수 있다. 그럴 때 사용하는 것이 요소에 id를 담는 것이다. 

<h4 id="navigation-title">This is the navigation section.</h4>

html을 이렇게 작성하고,

#navigation-title {
  color: red;
}

css를 이렇게 작성하는 것이 id를 사용하는 방법이다. '#'으로 id를 선택할 수 있다.

 만약 리스트를 작성하고자 할 때 그 리스트에 css를 적용한다고 하자. 위와 마찬가지로 특정 리스트 여러 개의 스타일만 변경하고 싶다고 할 때는 id를 사용할 수 없다. 왜냐하면 id는 문서 내에 단 하나의 요소에만 적용할 수 있는 유일한 이름이어야 하기 때문이다. 그때 사용하는 것이 class이다. 

<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>

이렇게 html을 class를 사용하여 작성하고

.menu-item {
  text-decoration: underline;
}

css를 이렇게 작성한다. '.'으로 class를 선택할 수 있다.

 위에서는 하나의 class를 여러 요소에 적용했다. 그러나 반대로 여러 class를 하나의 요소에 적용하는 방법도 있다. 

<li class="menu-item selected">Home</li> //공백으로 menu-item 클래스와 selected 클래스를 구분한다

.menu-item {
  font-weight: bold;
}
.selected {
  color: #009999;
}