CSS 소개와 사용방법 (CSS란 무엇인가?)

CSS 소개

첫 단추 페이지를 포스팅하기 전에 잠시 CSS가 태어나게 된 일화를 간단히 소개 후 넘어가도록 할게요 

먼저 CSS는 Cascading Style Sheets의 약어로 사전적 용어로 풀이해 나타내면 계단식 스타일 시트라고 불립니다.

홈페이지 제작을 했었던 1,2세대 초기 웹디자인과 개발자들은 CSS라는 표준형 언어가 생기기 전에는 웹페이지 폰트에 컬러를 주거나 단일 페이지나 공용 페이지에 특수한 효과를 주고 싶을 때, 모든 페이지에 일일이 스타일 용어를 적용시키거나 개발자를 통한 프로그래밍적 언어로 제어를 해야 했습니다. ​ 

 

이때 당시에는 웹디자이너가 추구하는 미적 효과와 그것들을 실행해야 하는 개발자 사이에 마찰이 불가피했었는데요, 페이지가 늘어나면 늘어날수록 일일이 대입해 적용해야 했기 때문이죠, 이런 불편함을 개선하기 위해서, W3C에서 웹 표준으로 html 상에 스타일적 용어들을 한데 묶어 처리할 수 있게 획기적으로 개선된 것이 CSS입니다.

 

 

그럼 CSS를 어떻게 html에 적용하나요??

html 상에 스타일 태그로 일일이 대입하는 것을 나누어 CSS 핵심 코어로 두고 각각의 페이지에 적용하는 형태인데요 ​ 이는 마치 커피를 만드는 과정과 많이 닮아 있습니다.

에스프레소를 이용한 구성의 여러 종류의 커피들. 마치 CSS는 이와 같은 느낌입니다.

라테를 만들기 위해선 우유에 에스프레소를 넣어 만들고, 아포가토를 만들기 위해선 아이스크림에 에스프레소를 얹어 만들 듯, ​ 

에스프레소라는 공통 소스 (CSS)를 우유나 아이스크림에 뿌리는 것처럼 명령어를 통한 공통 소스를 만들어 메인 페이지, 서브 페이지에 각각 적용을 시켜주는 것을 의미합니다. 그럼 각각의 페이지에 어떤 방식으로 적용을 해야 할까요?? 페이지에 적용시키고 싶은 부분마다 html로 만든 골격상에 id와 class 값으로 부분을 할당하여 꾸며주면 됩니다. id와 class에 관련된 글은 전에 쓴 html 관련 포스팅 글을 참고해 주세요 :-)

반응형 홈페이지 제작의 기초2 (block, inline)

 

즉 쉽게말해 웹상에서 표현되는 대상에 id라는 단일 개체로 적용할 것인지, class라는 범용 개체로 적용할 것인지의 차이가 있다 라는 것만 이해하면 될 것 같습니다. 

id = 에스프레소를 하나 뽑아서 커피 한잔을 만든다.

class = 에스프레소를 무한하게 뽑아서 커피 여러잔을 만든다.

이런 느낌이랄까요?? 

---

 

CSS 사용법

CSS는 html에서 사용하는 1. 선택자 / 2. 명령어 및 선언문 / 3. 설정값 3가지로 나와있습니다. 밑 부분에서 각각 알아보도록 할게요. 

 

1. 선택자 :  id 값은 #(샵) / class 값은.(콤마)으로 시작합니다. 또한 html 명령코드는 직접 사용이 가능합니다. 상단 이미지의 Selector 부분이 앞서 말한 '선택자'로 html 상에서 적용할 수 있는 특정 클래스에 대한 꾸미기를 지정해주는데, 이 선택자 부분은 크게 세 가지로 나누어집니다. ​ 

 

첫 번째는 id 값을 적용할 수 있는 기호 #으로 만약 gnb라는 id에 대해 값을 적용한다면,

#gnb { color:blue; }

▲ 위와 같이 gnd라는 지정 코드 앞에 샵(#)을 붙여 id 값을 명명해준 후 css 명령어를 기술해 주면 됩니다.

 

 

두 번째는 class 값으로 기호.(콤마)으로 표현하며, gnd라는 지정 네임에 대해 값을 적용한다면,

.gnb { color:blue; }

▲ 위와 같이 gnd라는 지정 코드 앞에 점(.)을 붙여 class 값을 나타내 준 후 명령어를 기술해 주면 됩니다.

※ 단 주의해야 할 점은 아이디와 클래스명을 지정할 때, 숫자로 시작할 수 없다는 점 참고해 주세요

 

---

 

2. 명령어 및 선언하기:  해당하는 CSS 코드를 명령 및 선언해준다. 말로는 풀어 설명하면 이해하기 힘든 부분이 있지만, 예시를 보는 것이 좀 더 간단합니다.

{ color:변경하고 싶은 컬러값;}

▲ 컬러를 변경하는 명령어 (color)

 

 

{ width:가로 설정값; height:세로 설정값;}

▲ 가로와 세로를 설정하는 명령어 (width, height) 이와 같이 지정한 선택자에 적용하고 싶은 효과를 명령 및 선언해 주면 되는데, 한글로 써놓은 설정값을 제외한 나머지의 영어로 표기한 부분이 공통언어인 css 명령문입니다. 즉, 컬러를 바꾸기 위해선 color라는 영문표기에 설정값과 세미콜론을 붙여 적용해 줍니다. (컬러를 사용하고 싶다는 명령문을 작성하는 것이죠) 명령문에 대한 범위는 상당히 광범위해서, 하나씩 포스팅을 통해 풀어갈 예정입니다.

 

---

 

3. 설정값 입력하기 : 선언문을 작성했다면, 해당하는 수치값을 입력해야 합니다. 각 수치값은 명령문에 따라 틀리게 작용하며, 어떤 것은 숫자로, 어떤 것은 영문으로 입력을 해야 할 수도 있으며, 또한 복합이 될 수 있습니다.

{color:white;}
{color:#fff;}

▲ 두 가지의 설정값 모두 하얀색을 만들어주는 명령문과 설정값입니다. ​

 

 

.gnb { margin:0 auto 15px; }

▲ 여백을 주는 마진(margin) 값의 적용 모습, 숫자와 영문의 명령이 복합으로 들어간 걸 볼 수 있습니다.

 

---

 

공통 1. 중복되는 selector(선택자) 값은 한데 모아서 명령할 수 있습니다. 

공통으로 적용되는 명령어의 구절은 한데 모아 진행할 수 있습니다. 아래의 예시는 제목으로 많이 쓰이는 html 코드 h1~h2 코드와  본문 p 코드입니다.

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

가령 위와 같은 CSS의 정의가 있을 경우엔 텍스트를 정렬해주는 text-align 구절과 컬러 변경인 color가 중복되고 있어, 관리가 불편한 부분이 있는데, 이를 한데 묶을 수 있습니다.

 

 

h1, h2, p {
    text-align: center;
    color: red;
}

▲ 공통적으로 적용되는 사항을 깔끔하게 콤마(,)로 나누어 적용한 모습입니다.

 

반응형

 

 

---

 

공통 2. 주석을 달 수 있습니다. 

CSS 코드는 html 코드와는 다르게 명령어와 꾸며주는 설정값이 많기 때문에, 코드 개수가 수백 줄 또는 수천 줄이 될 수 있습니다. 웹 표준과 유지 보수를 위해서라도 주석문(도움말)을 달아주는 것이 훨씬 관리하기 용이한데요, html 코드는 주석문을 <!-- 주석문 -->으로 사용하지만, CSS 코드는 주석문을 /* 주석문 */으로 사용합니다. 주석문은 한 줄로 길게 늘어뜨려서 쓸 필요가 없으며, 줄바꿈을 적용할 수 있습니다.

/* 본문 제목과 글씨 수정하는 곳 */
h1, h2, p {
    text-align: center;
    color: red;
}

▲ 한 줄로 태그를 닫은 주석의 모습

 

 

/* 본문 제목과 글씨 수정하는 곳
사용할 때 수정을 좀 더 신경써주세요
부탁드립니다. */
h1, h2, p {
    text-align: center;
    color: red;
}

▲ 긴 줄로 태그를 닫은 주석의 모습 (태그가 시작된 곳과 끝나는 지점이 있다면 안에 글씨를 쓴 건 코드에 영향을 받지 않습니다.)

 

---

 

※ 주의! CSS 태그는 명령과 설정문이 끝나고 꼭 "세미콜론(;)"으로 명령을 끝내주어야 합니다.

하나의 선택자를 통해 여러 가지의 명령문이 복합적으로 이루어져 있는 CSS는 그 명령의 구분을 "세미콜론(;)"으로 제어합니다. 이 표시를 해주지 않으면 CSS 튜닝 기능을 정상적으로 사용할 수 없으니 꼭! 잊지 말고 넣어주세요.

h1 {
    text-align: center color: red;
}

▲ text-align:center의 명령문에 세미콜론을 적용하지 않은 모습. 이 경우 명령문에 대한 설정값이 끝나지 않았다고 생각하고 text-align:에 대한 설정값을 centercolor:red;로 이해합니다. html에 적용이 안되겠죠

 

 

h1 {
    text-align: center; 
    color: red;
}

 

---

 

★ TIP: 줄 바꿈과 라인 정렬은 센스입니다. 한 줄보다는 눈에 잘 뜨일 수 있도록 줄바꿈과 탭(tap) 들여 쓰기로 라인 정렬하기!

유지 보수가 필수인 CSS 코드에서 한눈에 보기 쉬운 코드 정렬은 작업을 하는 자신뿐만 아니라 작업에 관계된 모든 사람에게 이롭습니다. 보기 좋은 게 작업하기도 좋겠죠? 길게 늘여뜨려 쓰는 코드 또한 존재하는데요 여기에 대한 자세한 포스팅은 차후에 하도록 하겠습니다

h1 {
    text-align: center; color: red; text-align: center; color: red; text-align: center; color: red; text-align: center; color: red;text-align: center; color: red;text-align: center; color: red; 
}

▲ 옆으로 계속 명령문을 실행한다면 페이지가 넘어가는 순간부터 옆 스크롤이 생깁니다. 관리하기 불편하겠죠

 

 

h1 {
    text-align: center; 
    color: red; 
    text-align: center; 
    color: red; 
    text-align: center; 
    color: red; 
    text-align: center; 
    color: red;
}

▲ 한눈에 들어오는 깔끔한 구성 :-) 이렇게 반복해서 코드를 쓰는 경우는 없답니다. 라인 정렬의 예시로 봐주세요~ 사실상 기본적인 CSS에 대한 소개는 간단하게 이 정도에서 마무리하고 디테일한 부분은 이어지는 포스팅을 통해 알아보도록 하겠습니다 :)

출처: https://www.w3schools.com