0033 HTMLCSS 적용하고 기본 문법 알아보기


CSSHTML 문서에 적용하는 방법은 다음의 3가지 방식이다. 

  

Inline - 개별 요소에 style 속성으로 적용

Internal - <head>의 영역에 있는 <style> 요소에 스타일 시트 설정

External - 외부의 CSS 파일을 링크로 연결하여 적용


인라인(inline) 방식HTMLstyle 속성에서 다루었기 때문에 0025 HTML style 속성(attribute) 및 배경색 설정을 참조하자. 

    

CSSHTML 문서에 적용할 때 가장 자주 사용하는 방법은 외부에 CSS 파일을 만들어서 이를 HTML 문서에 링크하는 External 방식이다. 하지만 External 방식은 나중세 살펴보고 이번에는 우리는 주로 보기 쉽고 이해하기 편한 Internal 방식으로 기본적인 CSS 문법을 익혀보자. 

    

Internal CSS를 사용하는 경우는 하나의 HTML 페이지를 꾸미는 경우다. 이는 하나의 요소만을 대상으로 꾸미는 Inline CSS와 대조된다. 

     

Internal CSS를 사용하기 위해서는 <head> 섹션에 <style> 요소를 중첩시킨다. 

    

다음과 같이 0033.html 파일을 만들어 실행해 보자. 

    

<!DOCTYPE html>

    

<html>

<head>

 <title>간단한 CSS 적용 사례</title>

 <style>

   p

       color: white;

       background-color: red;

   }

 </style>

</head>

<body>

 <p>1번 p블록 시작<br /><br />1번 p블록 끝</p>

 <p>2번 p블록 시작<br /><br />2번 p블록 끝</p>

</body>

</html>


위의 예문은 <style></style> 요소 내에 CSS를 집어넣어 사용하는 Internal CSS 사용방식을 보여준다. 작성한 예문을 실행해보면 다음과 같이 나타난다. 



위에서 작성한 CSS가 어떻게 작성되었는지 기본적인 내용들을 살펴보자.

    

다음은 <p>요소를 선택하여 배경색(background-color) 속성(property)빨간색(red)으로 선언한 규칙이다. 



이 전체를 하나의 규칙(Rule)이라고 부른다. 그리고 규칙(Rule)어떤 요소에 어떤 속성을 적용할지 결정한다. 

    

CSS에서 작성된 규칙이 어떤 HTML의 요소에 적용되는지 나타내는 것을 선택자(selector)라고 한다. 위의 예문에서는 선택자로 <p> 요소를 선택하여 모든 <p> 요소가 해당 규칙의 적용을 받아 서로 다른 2개의 <p> 요소 블록에 동일한 CSS 규칙이 모두 적용되는 것을 확인할 수 있다. 

    

현재는 <p> 요소를 선택하고 있지만, <body> 요소, <h1> 요소 등 다른 요소를 선택할 수 있고 그 외에도 id 속성, class 속성 등 굉장히 다양한 방식으로 선택이 가능하다(나중에 자세히 살펴보자.). 

    

중괄호({ })로 감싸져 있는 부분 안에는 속성(property)속성값(value)이 위치한다. 속성속성값콜론(:)으로 연결되어 있고 여러 개의 속성값이 하나의 속성(property)에 적용되는 경우는 다음과 같이 공백으로 속성값을 구분한다. 

    

border: 10px solid white;


속성(property)속성값(value)은 합쳐서 하나의 단위를 이루고 이 단위를 선언(declaration)이라고 한다. 


그리고 선언(declaration)은 반드시 세미콜론(;)으로 마무리 한다. 

※ 이어지는 다음 선언이 없는 마지막 선언세미콜론(;)을 쓰지 않아도 되지만 그런 습관으로 오류가 발생할 수 있으므로 세미콜론(;)으로 마무리하는 것을 습관으로 하자.

     

여러 개의 선언(declaration)을 한 줄에 또는 여러 줄에 걸쳐서 한 번에 작성할 수 있다.

    

p { color: white; background-color: red; }


또는 


p {

    color: white;

    background-color: red;

  }


하나 또는 여러 개의 선언(declaration)들은 중괄호({ })로 둘러싸이는데 이렇게 중괄호({ })로 묶인 것선언(declaration) 블록이라고 한다. 

    

선택자중괄호 사이, 중괄호선언(declaration) 사이, 선언선언 사이에는 공백을 넣거나 줄을 바꿔 구별하는 것을 권장하는 것 같다. 실제로 공백을 넣지 않아도 작동하는 경우도 있지만 그렇지 않은 경우도 있어서 권장하는 것으로 알고 있다. 



Anki 파일


아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 


Ankilog 파일:   0033 HTML에 CSS 적용하고 기본 문법 알아보기.apkg






어렸을 때를 떠올리면 1+12가 된다는 것은 매우 의심스러운 사실이었다. 진흙으로 만든 공 2개를 겹치면 더 큰 진흙공 1개가 되어버리기 때문이다. 1개의 사과를 5개로 쪼개면 5개의 사과조각이 되지만 숫자만 가지고 보면 1=5가 된다. 이런 다양한 사례가 있음에도 불구하고 1+1이 반드시 2가 된다고 가르칠 때마다 나는 그것을 인정할 수 없었다. 이런 불만을 어머니에게 말하면 어머니는 내가 유난을 떤다고 생각했고 항상 받아들이라고 종용하기 일쑤였다. 그래서 결국, 나는 학교에는 1+1이 반드시 2가 되는 이유를 알 수 없는 규칙이 있다고 생각했다. , 일종의 게임 규칙처럼 학교에서 물어볼 때, 1+1은 반드시 2라고 답해야 한다고 생각한 것이다.

 

그리고 이때부터 세상에는 내가 모르는 암묵적인 규칙이 있을지 모른다는 두려움에 떨었다. 그건 마치 이것과 같았는데 현실에선 거리에서 돈을 주웠을 때 그 돈을 찾아주는 사람이 거의 없음에도 도덕 시험지에는 그 돈을 찾아준다고 기입하게끔 되어있는 것과 마찬가지라고 생각했다. , 학교에서 가르친 것은 현실적으로 납득할 수 있는 상식이나 진리와는 상관없이 학교의 규칙대로 말하고 따르는 법을 익히는 사람을 원한다고 생각하게 된 것이다. 그러니 공부를 하고 학문을 한다는 것이 스스로의 생각을 구체화하고 발전시키는 것이 아니라 단지, 규칙을 받아들여서 이를 응용해서 잘 한다는 것을 보여주는 것처럼만 느껴졌다.

 

그러다가 대학에 들어가서 수학사 관련 책을 읽다가 알게 된 것인데, 원래 지식의 구조가 그랬다. , 가장 완벽한 논리적 정합성을 갖춘 증명된 지식도 그 밑바닥에는 증명하기 어려운 어떤 주어진 사실이 존재한다는 것이다. 그것은 처음부터 당연하다는 듯이 암묵적으로 사실로 받아들여지는 것이다.

 

가령, 유클리드 기하학의 전제는 완벽한 평면이다. 그런 완벽한 평면에서는 평행하는 두 직선이 서로 마주치지도 않고, 삼각형의 세 각의 합은 반드시 180도를 이룬다. 하지만 지구 표면처럼 동그란 구면을 전제로 한다면 평행하는 두 직선은 끝에서 만나고 삼각형의 세 각의 합은 180도 보다 커진다

 

1+12가 되는 것도 이러한 암묵적인 전제가 있다. 그것은 어떤 기준이 존재한다는 것이다. , 1을 기준으로 볼 때, 2가 되는 것이다. 진흙공 2개를 겹치면 진흙공 1개가 되지만 당초 진흙공 1개를 기준으로 보면 2개 분량인 셈이다. 사과 1개를 기준으로 볼 때, 사과를 5개로 쪼개면 각 사과 조각은 원래의 1개의 사과를 기준으로 볼 때 1/5개의 사과가 되는 것이다. 이러한 기준이라는 말을 매번 집어넣지 않으니 나처럼 머리가 나쁜 사람은 1+1=2를 이해할 수 없었던 것이다.

 

물론, 기준이 바뀌면 계산식도 바뀐다. 만일, 우리가 기준을 개체의 개수로 바꾼다면 각각 1개씩 2개의 개체가 합해져서 다시 1개의 개체가 될 수 있다. 그러므로 1+1=1이 되고 5=1이 될 수도 있다. 그것은 우리가 지금 숫자로 세는 것이 어떤 기준을 따르는 지를 명확히 한다면 아이들하고 같이 다양한 방식의 숫자 세기를 해볼 수 있을 것이다. 

 

가끔 이런 날이 있다. 뜬금없이 오랫동안 묵혀서 이젠 그 존재조차 희미해진 문제가 뜬금없이 생각나고 갑작스럽게 문제가 해결되어 버리는 날이다. 이 뜬금없는 축복이 기꺼워 글을 쓴다. 물론, 이 글은 당시의 내가 납득할지도 모르는 설명이다. 버트란드 러셀이나 화이트헤드의 복잡하고 어려운 논리적 증명과는 관계가 없으니 행여나 오해가 없었으면 좋겠다.

 

마지막으로 재미있는 것은 1+12가 되는 것에 항상 의문을 가졌음에도 이 규칙을 기반으로 다음 단계인 곱하기로 넘어가 구구단을 외우게 되었을 때에는 이러한 의문을 풀고 싶은 욕구가 사라져 버린 것이다. 오히려, 그냥 1+12가 되는 세상이어야 한다고 생각해버렸다. 왜냐하면 구구단을 힘들게 공부하고 나니 그것이 근본적으로 불안한 기반 위에 있는 것이라는 생각 자체가 큰 부담이 되어버린 것이다. 그래서 모든 것을 의심하던 소년이 이번에는 그 사실을 부정당할까봐 편집증적으로 그것을 방어하게 되었다.

 

살다보니 공부하는 과정이 매번 그런 식이었다. 납득하기도 어렵고 이해하기도 어려운 것을 툴툴거리면서 공부하다가 그것을 응용하여 이것저것 사용할 수 있는 수준이 되어버리니 그 납득하기 어려운 점이라는 부분을 애써 지워버리고 무마하는 과정의 반복이었던 것이다. 이제라도 먼 옛날의 의문점 하나를 풀어서 다행이다. 

고시에 도전하겠다고 결정한 것은 순전히 재수시절의 기억 때문이었다. 재수생 시절의 마법같은 일이 다시 발생한다면 단 기간에 고시 패스가 가능할 것이라는 기대가 있었다. 물론, 이 마법같은 경험은 대학교 공부를 할 때 전혀 힘을 발휘하지 못해 학점은 참혹했지만, 그 때는 청춘의 교우 관계에 힘을 쏟고 각종 행사에 토론에 정신이 없었고 전공 공부에는 큰 관심이 없었기 때문이라고 생각했다. , 대학 시험은 벼락치기로 간단히 넘어가기 어려웠기 때문이기도 하다. 그러니 차근차근 시간을 들여가면서 대입공부를 하던 때처럼 공부한다면 고시의 수월한 통과가 가능할 것이라고 속단한 것이다.

 

7년을 내리 놀기만 하다가 다시 공부를 하려고 하니 공부가 잘 될 리가 없다. 솔직히 엉덩이를 의자에 붙이고 있는 것도 어려웠다. 몸이 공부에 익숙해지는 것은 시간이 지나면 해결될 문제였다. 하지만 잠이 오지 않는 것은 정말 큰 문제였다. 모든 활동을 정지하고 공부에 전력투구하기 시작했을 때, 기다렸다는 듯이 바로 수면에 난조가 왔다. 어차피 다른 활동을 하고 있지 않으니 졸리면 자고 일어나서는 공부하면 되는 것이라고 쉽게 생각할 수 있다. 하지만 이건 그럴 수 있는 것이 아니었다. 어떻게 묘사해야할까? 졸려서 자려고 누우면 정신이 맑아지고, 잠이 오지 않으니 일어나서 공부하려고 하면 미친 듯이 졸리고 피곤하다. 이러지도 못하고 저러지도 못한다. 누워있어도 고통스럽고 활동을 해도 고통스럽다. 내가 할 수 있는 활동은 오직 강력한 자극으로 정신을 각성시키는 활동만 가능했다. 공부를 하거나 사색을 하거나 책을 읽으려고 하면 너무 피곤하고 눈이 감기며 글은 머리에 들어오지도 않았다. 너무 졸리고 피곤해서 이제 누우면 자겠지 하고 누우면 잠은 오지 않고 이런 저런 생각만 머리를 어지럽힌다. 정말 미치고 팔짝 뛸 일이었다.

 

이제 시험은 전혀 중요하지 않게 되었다. 자고 싶었다. 아니 깨어있을 때는 정신이 맑고 잘 때는 푹 쉬고 싶었다. 하지만 오만가지 이유로 잠을 잘 수 없었다. 첫 번째는 소리였다. 눕기만 하면 주위의 소리가 아무런 여과 장치 없이 뇌로 쏙쏙 박히는 것만 같아서 계속 신경이 쓰였다. 문 밖에서 소곤거리는 소리, 어디선가 세탁기 돌아가는 소리, 시계의 똑딱거리는 소리, 대로변에서 차량이 이동하는 소리 등 정말 많은 소리가 침범해왔고 나는 그 소리를 감내할 수 없었다. 그 모든 소리에 분노하고 짜증을 내며 소리를 질렀다. 귀마개를 꽂아도 그런 소리는 여전히 너무나 잘 들렸다. 두 번째는 온도였다. 몸이 뜨거운 건지 항상 더워서 땀을 흘리고 그러한 땀이 배는 것을 참지 못하고 일어나게 되었다. 세 번째는 욱신거림이었다. 지금에는 하지불안 증후군이라는 이름을 확인할 수 있지만 당시에는 그것을 전혀 알지 못해서 원인 불명의 증세가 나를 괴롭힌 것이다. 눕기만 하면 발을 쭉 뻗고 움직이고 싶은 욕구가 스멀스멀 올라오는데 그 느낌이 신경을 미친 듯이 건드리고 있어 전혀 무시할 수 없었다. 마지막 네 번째는 체증이었다. 나는 자주 체했다. 정말 자주 체해서 일주일에 5일은 체해있는 상태였다. 체하면 두통이 밀려오고 속이 뒤집어져서 잠 뿐만 아니라 어떠한 활동도 할 수 없었다. 잠이 들기 전에 체증이 가라앉으면 다행이지만 일단, 체증에 걸려있는 상황에서는 잠을 잔다는 것은 불가능했다.


내가 할 수 있는 일이라곤 지쳐 쓰러질 때가지 걷거나 자극적인 인터넷 세계를 탐방하는 것, 만화책을 보는 것이었다. 그것 말고는 제정신으로 할 수 있는 것이 없었다. 그렇게 하루를 보내면서 체력을 완전히 소모하고 나면 체증이 가라앉고 지쳐 쓰러지면서 잠을 잘 수 있었다. 하지만 상황은 이러한 조치도 허용하지 않을 정도로 나빠지기 시작했다.  어느 순간부터 눕기만 하면 누가 머리를 바이스 같은 도구로 조이는 느낌을 받았다. 그리고 이어서 꽝꽝 때리는 느낌도 왔다. 그것은 실질적인 통증을 동반했고 정말 무지 아팠다. 이제는 지쳐 쓰러지듯 잠을 자는 것도 만만하지 않게 되었다. 다양한 실험을 해보았는데 일단 베개를 사용하면 머리를 조이는 느낌이 강해졌고, 모로 누워서 잘 수도 없었다. 엎드려 자는 것이 가장 심했기 때문에, 정자세로 누워서 목이 15도 정도 좌우로 기운 상태에서만 잘 수 있었다. 그 자세에서 조금만 벗어나면 정말 참을 수 없는 고통이 찾아왔다. 이제는 지쳐 쓰러질 것 같은 상황에서도 엄격한 규칙을 지켜야 잠을 잘 수 있었고, 이러한 규칙은 종종 나를 배반했다.  

 

스트레스가 극심해져서인지 체증은 더 자주 찾아왔다. 이 체증에 대해서는 따로 말해야겠지만 중등 시절부터 자주 겪어온 증세였고 평생의 지병처럼 생각하고 있는 증세였다. 그리고 고시생 시절에야 이 증세의 이름이 체증이라는 것을 발견한 것이다. 이 체증은 최근에야 완전히 극복되어서 극복하는데 25년이 걸렸다. 당시, 스트레스가 극심하고 무언가의 균형이 깨졌는지, 체증이 정말 극심해졌다. 평소에는 머리가 아프고 속이 뒤집어지는 정도였다면 이 때 부터는 항상, 오한을 동반하고 몸이 미친듯이 떨리고 고통으로 정신을 하나도 차릴 수 없게 만드니 나중에는 이 체증이 말라리아 같은 학질이 아닌가 의심하기까지 했었다.

 

그러고 누우면 다시 공포스러운 고통이 찾아왔다. 너무 지쳐서 의식을 잃을 때까지 밀어붙여야 가까스로 잠을 잤는데, 일어날 때는 식은땀에 흠뻑 젖어서 고통스러워하며 일어나는게 일상이었다. 잠을 잔 것이 말끔하고 개운한 느낌을 주는 것이 아니라 죽다 살아난 것 같은 기분을 주면서 허우적거리며 일어나서는 그동안 숨을 쉬지 못했다는 듯이 숨을 몰아쉬었다. 지금 와서 생각해보면 수면 무호흡증도 심했던 것 같다.

 

당연히, 병원을 찾아가서 이것저것을 하소연해보기도 했다. 하지만 의사들의 말은 한결같이 스트레스를 줄여라.”였다. 물론, 이 모든 증세에 스트레스가 한몫하고 있는 것도 사실이었지만 또 증세로부터 오는 스트레스가 너무 극심했기 때문에 증세를 없애는 것이 우선이어야 했다. 하지만 의사들의 처방은 스트레스 과다였고, 나는 좌절하면서 병원을 나설 수밖에 없었다.

 

고시 공부는 전혀 문제가 되지 않았다. 이 정도로 아프게 되면 아무리 주위 보기가 민망하고 인생에서 낙오하는 것 같아도 내가 살아야 했기에 고시의 포기는 깔끔하게 되었다이 상황을 개선해야겠다는 생각 말고는 어떠한 생각도 할 수 없었고 고시 공부를 포기해서 스트레스를 줄여여 이 문제를 해결할 수 있다면 기꺼이 할 수 있었다. 하지만 고시 공부를 포기했어도 여전히 증세는 계속되었다. 오히려 고시 포기에 따른 우울증까지 겹쳤다. 끊임없이 악몽을 꾸었다. 악몽을 꿀 것을 알아도 자지 않을 수는 없었다. 수면은 어쩔 수 없이 지옥으로 입장하는 것이었지만, 그 지옥도 깨어있는 현실에 비하면 천국이었다. 아귀의 고통이 이런 걸까? 아귀는 먹고 싶은 탐욕에 미쳐있지만 먹을 기회가 거의 없고 가까스로 먹을 것을 구해 먹을 것을 넘길 때 어마어마한 고통을 느낀다. 내가 바로 그러한 느낌이었다. 쉬고 싶고 자고 싶은 열망에 몸부림치지만 잠을 자면 첫 번째로 잠을 잘 수 없는 상황 때문에 미친 듯이 수면에 대한 욕구에 시달렸다. 두 번째로는 잠에 들기 직전까지 반드시 머리를 조이고 때리는 것 같은 고통에 시달렸고, 가까스로 잠을 자면 악몽이 덮쳤다. 그리고 깨어날 때는 전혀 개운하지 않고 죽었다가 살아난 느낌으로 일어났다. 몸은 식은땀으로 젖어서 숨이 부족해 숨을 몰아쉬었고 기분에 끔찍했다.

 

3년을 버티다가 결국 수면제를 받아서 복용해보았다. 이 때 처음이자 마지막으로 수면제를 복용했는데, 일단, 잠은 바로 잘 수 있었다. 하지만 1시간 만에 일어났다. 그것은 그냥 일어난 것이 아니었다. 어마어마한 고통과 함께 잠에서 쫓겨나듯이 일어났다. 처음 겪어본 고통이었던 것 같다. 평소 머리를 조이는 것 같은 고통과 머리를 꽝꽝 때리는 것 같은 고통을 한계가지 밀어붙이면 어떤 고통이 오는지 처음 알았다. 고통을 없앨 수만 있다면 나는 내 머리를 부수어도 좋다고 진심으로 생각하고 행동했다. 한 치의 망설임도 없이 머리를 벽에다가 찍었다. 아무런 느낌이 없고 무언가 비현실적인 느낌이었다. 고통이 가라앉을 때까지 끊임없이 머리를 벽에다가 찍었다. 나는 원래 겁이 많고 소심한 편이라 이런 식의 고통스러운 자해 행동을 매우 싫어하지만 당시는 살고 싶지 않았고 모든 두려움과 걱정은 없었다. 그냥 실행에 옮겼다. 다행히, 고통으로 힘이 없었는지 내 머리가 부서지지도 않았고 고통도 가라앉았다. 이 때의 고통은 지금도 떠올리기만 해도 무섭고 진저리쳐진다.

 

그리고 이 고통을 겪고 나서야 나는 의심하기 시작했다. 평소에 나는 이러한 수면의 장애가 체증으로 인한 스트레스와 고시에 대한 스트레스, 그리고 평소의 낮과 밤이 바뀐 불규칙한 생활습관이 맞닿아 일어난 증세라고 의심했었다. 체증은 항상 있었고 고시공부를 시작하자마자 너무 갑작스럽게 수면 장애가 왔기 때문에 그렇게 의심할 수밖에 없었다. 그래서 머리를 조이는 통증과 꽝꽝거리는 통증도 그 동일선상에서 왔다고 생각했다그 때 내 스스로가 반쯤은 말 그대로 미쳤다고 생각했기 때문에 그 사실을 정신병원을 가서 확증하는게 너무 무서웠다. 그래서 스스로 미치지 않았다고 자위하면서 이 모든 문제를 어떻게든 극복하려고 노력하게 되었다. 그래서 통증도 내 자신의 광증의 소산이 아닐까 의심하고 있었다. 이런 상황이었기 때문에 고시를 포기하고 모든 것을 내려놓고 건강한 수면 패턴을 다시 찾으면 체증은 어떻게 안되더라도 수면은 회복할 수 있을 것이라고 기대했었다. 그 일환으로 수면제를 처방 받은 것이다(엄밀하게 확인할 정신은 없어서 진짜 수면제인지는 잘 모르겠다.). 그런데 이 모든 문제가 정신적인 것이었다면 수면제로 인한 그 지독한 고통이 설명되지 않았다. 이 때, 나는 잠시 차분해졌다. 그 동안의 전제를 내려놓고 상황을 둘러보다가 물을 마실 때마다 어금니 쪽이 시려지는 느낌이 갑자기 떠올랐다. 확신이 왔다.

 

치과에서 10년간 교정을 해서 치과에 매우 익숙하면서도 정말 싫어한다. 이빨을 가는 드릴의 소리와 느낌이 이상하고 그 뾰족한 도구들을 보는 것도 싫다. 숱하게 겪었던 치료와 진료도 지겨웠고 교정이 끝나면서 다시는 치과를 갈 필요가 없다는 사실에 환호했었다. 그리고 단 한 번도 치과를 가지 않았다. 하지만 그 날은 그 모든 불쾌감을 무릅쓰고 결연하게 치과에 갔다. 어쩌면 치과를 싫어하는 마음이 너무 강하기 때문에 그동안 충치라는 가능성을 애써 외면해왔던 것이 아닌지, 그래서 그 보다 더 강력한 고통을 겪고 나서야 그 가능성을 떠올린 것이 아닌지 의심하지 않을 수 없었다.

 

치과 선생님은 한 번 입안을 스윽 보시더니 이렇게 말했다.

 

사랑니가 다섯 조각으로 갈라져 균열이 갔습니다. 고통이 심했을 텐데 빨리 오시지.”

 

그 날 사랑니를 뽑고 집에 돌아오면서 앓던 이를 뽑는 느낌이 무엇인지 정말 확실하게 배웠다.

 

그리고 충치를 뽑자마자 머리를 바이스로 꽉 누르는 통증과 때리는 통증은 사라졌다.

 

하지만 나의 문제는 전부 사라지지 않았다. 극히 일부만 사라졌을 뿐이었다.

 

+ Recent posts