html과 CSS 간단정리-개요와 div 구문편 (이전편)

지난번에 예고한 대로 이번엔 CSS의 클래스 선언을 이야기 해보도록 하겠음. 겸사겸사 Module 구문도 알려주고 ㅇㅇ

클래스란?

프로그래밍쪽 용어임. 되게 모호하고 직관적이지 않지만 내가 이해한 대로 대충 씨부려 보겠음

클래스란, 특정 목적과 기능을 위해 속성과 함수를 묶어둔 집합임.

예시를 하나 들어보겠음. 님들이 포장마차에서 붕어빵을 판다고 쳐보셈. 요샌 근본 팥붕어빵 말고도 무근본 슈크림 붕어빵도 팔잖음? 이 둘은 다른 종류지만 붕어빵이라는 공통점을 가지고 있고, 어차피 틀도 같은 틀을 쓰는거임. 다른건 그 안에 뭐가 들어가는지의 차이임.

이게 클래스임. 붕어빵 틀, 혹은 붕어빵의 레시피 그 자체가 ㅇㅇ

자 그럼 다시 코드를 봐 보자. (참고로 페이지는 여기임)

div 구문에 style 대신 class가 있는걸 볼 수 있을거임. 이것은 바로 "이 텍스트 박스의 설정은 미리 만들어둔 "notice" 틀/레시피를 따른다!"라는 뜻임.

그럼 notice 레시피는 어디에 있을까? 바로 맨 위 [[module CSS]] 구문 안에 있음.

현재 이 페이지에선 두개의 클래스를 미리 만들어 두었음. 하나는 lie, 다른 하나는 notice임.

이름 앞에 점 보이지? 이게 바로 이것이 클래스라는걸 지목해 주는 일종의 선언임. 클래스를 정의할 때는 꼭 잊지 말고 앞에 점을 붙여야 한다.

[[module CSS]] 구문 안의 코드는 div 구문과는 좀 다른 방식으로 코드를 쓰고 있음. 사실 이게 제대로 된 방법이 맞음. 프로그래밍 해본사람들은 익숙할거야.

이 양식을 꼭 지켜줘야 함. 클래스 이름은 뭐로 해도 상관 없지만 띄어쓰기가 들어가선 안됨. 적당히 띄어쓰기 대신 대시(-)를 넣자.

속성을 쓰기 전에 앞에 꼭 띄어쓰기 2개를 해주어야 한다. 이것은 앞의 중괄호 안에 묶여있다는 것을 표시하기 위한 것임. (띄어쓰기 4개도 상관 없음.)

속성의 값을 채워주는게 끝나면 역시 세미콜론(;)으로 줄을 끝내주고, 엔터를 쳐서 다음 속성을 적어주면 됨. 역시 띄어쓰기 두번 잊지 말고.

그럼 역시 notice 클래스를 분석해볼까?

여기선 띄어쓰기를 4번 해주었네, 암튼 이 속성은...

요로코롬 나타난다는 걸 알 수 있음.

이렇게 모듈란에 클래스를 정의해 주었다면,

[[div style="border: 1px solid #f9e24d; outline: 4px solid #b54d3b; color: #f9e24d; background: #b54d3b; padding: 10px; text-align: center;"]]

이러쿵 저러쿵

[[/div]]

이럴 필요 없이 

[[div class="notice"]]

이러쿵 저러쿵

[[/div]]

만으로도 같은 효과를 줄 수 있음. 한번 쓰이고 마는 서식 보다는 여러번 지속적으로 나와주어야 하는 그런 서식에게 이렇게 클래스를 정의해 주면 됨.

자, 그럼 다시 붕어빵의 비유로 돌아와서,

우리가 지금까지 한걸 붕어빵에 비유해 보자.

[[module CSS]]

.붕어빵 {

  모양: 붕어;

  굽기: 노릇노릇 1분간;

  겉면: 밀가루 물 묽게 섞어서;

  속: 팥;

}

[[/module]]

이렇게 붕어빵을 선언했고

[[div class="붕어빵"]]

[[/div]]

이렇게 붕어빵을 언제든 구워먹을 수 있음

자, 근데, 아까 내가 뭐라고 했음. 우리가 뭘 넣느냐에 따라 팥붕도 될 수 있고, 슈붕도 될 수 있게 하는게 클래스라고 했지.

그런데 이대로라면 팥붕 밖에 안나오게 됨. 어떻게 하면 우리가 선언한 클래스의 내용물을 조금 다르게 적용시킬 수 있을까?

바로 이렇게 하면 됨.

[[div class="붕어빵" style="속: 슈크림;"]]

[[/div]]

맨 처음 배운 style 명령어로 다시 속성과 키워드를 재정의 해주면 됨.

이제 감이 올거임. 클래스는 일종의 프리셋임. 명령어 하나만으로 미리 설정한 속성을 불러올 수 있고, 거기서 우리가 바꾸고 싶은것들을 슬쩍 바꾸는 식으로 사용하면 됨. 고로 이런것도 가능함

[[div class="붕어빵" style="모양: 황근출의포신; 속: 민트초코; 소스: 불닭볶음;"]]

[[/div]]

그럼 이것은 결국 아래 코드와 동일하게 나타남.

.붕어빵 {

  모양: 황근출의포신;

  굽기: 노릇노릇 1분간;

  겉면: 밀가루 물 묽게 섞어서;

  속: 민트초코;

  소스: 불닭볶음; <- 새로 추가됨)

}

간단한 명령어를 추가하는 것 만으로도 기합이 여간이 아닌 붕어빵을 쉽게 만들 수 있었음. 이게 클래스의 쩌는 부분임.

마지막으로 실제로 잘 활용된 예시를 보고 지나가 보자.

초상올림픽 허브에서 각 종목을 소개하는 텍스트 박스가 있음. 

중요한 점은 종목별로 배경의 픽토그램 이미지가 바뀐다는 것임.

이 텍스트 박스의 클래스는 이렇게 선언됨.

.box {

  border:solid 4px #151525;

  background:#202056;

  padding:5px;

  background-size: contain;

  background-position: top 5px right 5px;

  background-repeat: no-repeat;

  padding: 0 1em 0.5em 1.5em;

  color:white;

}

(이거 아래에 있는 .box a:link, a:visited는 텍스트 박스 안의 링크의 색을 바꾸는 용도니 신경 꺼도 됨.)

그리고 이 텍스트박스의 div 구문은 다음과 같음.

[[div class="box" style="background-image:url(여기에 픽토그램 url 붙여넣기)"]]

+++ ##dedeff|**종목 이름**##

[[collapsible show="+ 룰 개요" hide="- 숨기기"]]

간단한 룰의 개요 적어두기

[[/collapsible]]

[[/div]]

제목과 접기 구문을 빼면

[[div class="box" style="background-image:url(여기에 픽토그램 url 붙여넣기)"]]

[[/div]]

보다시피 앞서 선언된 box 클래스에다가 background-image(배경 이미지) 속성을 추가하는 것을 볼 수 있음.

이 얼마나 간편하고 좋은 기능인가!

이제 엣붕이들도 다른 사람 코드 긴빠이 할 때 쩔쩔 맬 일의 절반은 해결되었다고 볼 수 있음.

이제 남은건 바로, 테마의 요소를 내맘대로 바꾸는 것!

초상올림픽 허브는 서류더미 테마를 긴빠이해 만들어진 커스텀 테마를 적용하고 있음.

다음 시간(아마도 마지막 시간)에는 어떻게 테마의 요소를 내맘대로 커스텀 할 수 있는지를 알아보도록 하겠음.

ㅂ2