본문 바로가기
자료

3. HTML & CSS, 어떻게 하지? (2/2) - 어떻게든 뭐든 만들어보자

Ch. 2012. 2. 25. 12:22
*HTML[각주:1]과 CSS의 작성법을 다룰것입니다. 아시는 분은 넘어가주세요

CSS

웹페이지의 디자인적 요소를 만들때 이녀석을 씁니다. 필요성은 저번에 설명했던 것 같고...


일단 어떤 방식으로 HTML이랑 연결하는지부터 알아보죠.

인라인 - 저번에 했던것처럼 HTML 태그 안에 속성으로 넣습니다.
<div style="border:1px solid black;">내용</div>
본문 상단 (임베디드) - 본문 상단의 <head> </head>태그 안에 <style>태그를 적고 서술합니다.
여러개의 문서에 연결할 수는 없지만 적어도 한번에 여러개의 태그에 적용 가능하다는 장점은 남아있습니다.
<html>
   <head>
       <style type="text/css">
       div {border:1px solid black}
       /* ↑ div 태그를 모두 선택해서 스타일을 부여했습니다. */
       /* 이렇게 생긴건 CSS에서의 주석입니다. */
      div.red {border-color:red;}
      /* 더 설명할 예정이지만 div 중 class가 red인 것들을 골랐습니다 */
      </style>
   </head>

<body>
   <div> 하하하 </div>
   <div class="red">하하핳</div>
</body>

</html>
링크 - <link> 태그를 써서 따로 저장해놓은 CSS를 불러옵니다.
대부분의 웹문서가 이렇게 쓰이고요. 티스토리도 이렇게합니다.
<html>
   <head>
      <link rel="stylesheet" media="screen" type="text/css" href="./style.css" />

<!-- link 태그 : 다른 무언가를 이 문서와 연결함. 이 문서와의 관계relationship는 스타일시트이고, 보여줄 화면은 스크린 (모니터 등), MIME type이 뭔진 모르겠지만 하여튼 그게 text/css이고, 연결할 파일의 주소(href-어원참조)는 같은 폴더 내의(./) style.css 문서. -->

   </head>

... 생략


CSS로 요소 선택하기

꾸밀 요소를 선택해봅시다.
#아이디 {모양지정}
.클래스 {모양지정}
html태그 {모양지정}

일단 이게 기본 형식이고, 중요한 것들입니다. 모양지정 앞에 있던것들을 보고 선택자라고 부르는 걸로 기억하고요. (html 문서의 요소를 고르니까요.)

하나하나 예제를 들어가며 어떻게 쓰는지 봅시다.


#는 html 요소에 id를 지정해줬을 때 그 id가 지정된 요소를 선택하는 선택자입니다.
#id

*id와 # 사이를 띄우면 안되고, 순서가 바뀌어도 안됨
<!-- 예제는 간략하게 설명하기 위해 임베디드 형식으로 기술합니다 -->
<!-- 또한, 일반적인 html 문서의 기본 형식은 잠시 무시합니다. 어차피 테스트용이고, 안그래도 이정도 실습이면 제대로 나오긴 하거든요. -->

<style type="text/css">
#You {color:red;}
/* 속성 color는 글자의 색을 지정합니다. 여기서는 붉은색으로 하는군요. text-color가 아니라 color임에 주의해주세요. */
</style>
너는
<span id="You">빨간
</span>
사람?

<!-- Span 태그 : 인라인(inline)으로 표시되는 영역 정도로 이해하시면 빠릅니다.
(다른 역할은 아무것도 안하고 단지 그부분의 문서를 그룹화 할 뿐)
보통 글쓰기 에디터에서 글 일부분을 선택하고 글꼴을 바꾸거나 하면 span태그로 감싸서 인라인 스타일을 넣는다죠. 이렇게요. <span style="font-family:NanumGothic">선택된 부분</span>
-->

.은 그 이름의 class 속성을 가진 요소를 선택합니다.
.classname {}

<style type="text/css">
.red{color:red;}
</style>
너는
<span class="red">빨간
</span>
사람?

<br />
맞아, 나는 <span class="red">빨간</span>사람이야.

<!-- 문서의 공백은 무시됩니다. html 에서 개행하려면 <br /> (break) 태그를 쓰거나, <p>태그로 감싸 문단으로 지정해주세요.</p> -->

<p class="red">붉은 하늘에서 떨어지는 산성의 붉은 비는 붉게도 마음 깊숙한 곳을 적신다</p><p>라는겨?</p>


아무 기호도 적지않고 html 요소(태그)의 이름을 적으면, 그 이름의 태그를 모두 선택합니다.
<style type="text/css">
span{color:red;}
</style>
<span>빨간
</span>
<div>글자</div><p>구나</p>



CSS 속성 적기

스타일을 적용한 html의 일부분을 선택했으니, 이제는 스타일을 적용해줘야 하죠.
선택자{속성이름:속성; 속성이름2:속성; 속성이름3:속성}
html에서는 <태그이름 속성이름="속성"> 이었지만, CSS에서는 선택한 것의 css를 {} 안에 속성이름:속성 식으로 적습니다.
다음 속성을 적기 위해 속성사이에 반드시 ;(세미콜론)을 넣는걸 잊지 말아주세요.[각주:2]

*아무래도 다른곳에서는 속성이름을 속성(attribute), 속성을 속성값 혹은 값이라고 부를 것 같습니다.[각주:3] 제 마음대로 이름짓다보니 저렇게 되었는데요, 앞으로 헷갈릴지도 모르니

속성이름=속성종류
속성값=값
이라고 해두겠습니다. 오해의 소지가 있는 속성은 쓰면 안되겠네요. ㅠㅠ


역시 줄바뀜이나 공백은 상관 없습니다. (선택자 부분은 제외 - 나중에 설명)
.myClass
     {
      border:1px solid black;
      /* 테두리는 1픽셀, 직선, 검은색 */
      color:red
      }



부모자식과 상속

CSS는 Cascading[각주:4] Style Sheet의 약자로, 계단식(?) 스타일 시트를 의미합니다.
이름에서 알 수 있을지 없을지 모르겠지만, 적용한 스타일은 부모에서 자녀에게 상속됩니다.

이쯤에서 HTML이 나무모양 구조 (트리구조) 로 이루어졌다는걸 한번 보고 가야겠네요.
<div id="parent">

   <div id="child1">
   </div>
  
   <div id="child2">
   </div>

   <div id="child3">

         <div id="child_1">
         </div>

         <div id="child_2">
         </div>

         <div id="child_3">
         </div>

   </div>

</div>
↓

새로 산 타블렛이 누르는 순간 위치가 변해버려서... 구매처에 문의해야겠어요.



보시다시피 HTML은 부모와 자식 관계가 뚜렷이 드러나는 트리 구조로 되어있어요. 부모 요소 안에 자식 요소가 들어있고, 자식 요소 안에 또 자식 요소가 들어있고...

CSS는, 그러니까 폭포식 스타일표는 HTML의 스타일에 유전자라도 있는듯이 행동합니다. 그러니까, 부모에게 적용된 스타일이 자손에게 "상속"되요.
링크 (중간에 가계도 그림 있음)


정말 상속되나 실험해봅시다. 코드 먼저 보여드리죠.




.mother {color:red;}






!!mother 클래스 적용된 div


!!mother의 자식 div

!!mother의 자식 div의 자식 div




!!mother의 자식 p !!mother의 자식 p의 자식 span


!!mother의 자식 p의 자식 p








!!mother 클래스 적용되었지만 인라인으로 파랑글씨 지정된 div


!!mother의 자식 div

!!mother의 자식 div의 자식 div





!!mother의 자식 div이지만 또다시 mother 클래스가 적용된 녀석


!!mother의 자식 p !!mother의 자식 p의 자식 span


!!mother의 자식 p의 자식 p
출력물

.mother {color:red;}

!!mother 클래스 적용된 div
!!mother의 자식 div
!!mother의 자식 div의 자식 div

!!mother의 자식 p !!mother의 자식 p의 자식 span

!!mother의 자식 p의 자식 p


!!mother 클래스 적용되었지만 인라인으로 파랑글씨 지정된 div
!!mother의 자식 div
!!mother의 자식 div의 자식 div
!!mother의 자식 div이지만 또다시 mother 클래스가 적용된 녀석

!!mother의 자식 p !!mother의 자식 p의 자식 span

!!mother의 자식 p의 자식 p




근데 따로 실험해보니 여백이라던가 이런 부분들은 상속이 안되는 경우도 있는 듯 하더라구요. 애매모호하게 시리...


.mother {color:red;}






!!mother 클래스 적용된 div


!!mother의 자식 div

!!mother의 자식 div의 자식 div




!!mother의 자식 p !!mother의 자식 p의 자식 span


!!mother의 자식 p의 자식 p








!!mother 클래스 적용되었지만 인라인으로 파랑글씨 지정된 div


!!mother의 자식 div

!!mother의 자식 div의 자식 div





!!mother의 자식 div이지만 또다시 mother 클래스가 적용된 녀석


!!mother의 자식 p !!mother의 자식 p의 자식 span


!!mother의 자식 p의 자식 p

이 아래는 출력물

.mother {color: red; border: 1px solid red; padding: 20px;}

!!mother 클래스 적용된 div
!!mother의 자식 div
!!mother의 자식 div의 자식 div

!!mother의 자식 p !!mother의 자식 p의 자식 span

!!mother의 자식 p의 자식 p


!!mother 클래스 적용되었지만 인라인으로 color:blue; border:1px dashed blue;
!!mother의 자식 div
!!mother의 자식 div의 자식 div
!!mother의 자식 div이지만 또다시 mother 클래스가 적용된 녀석

!!mother의 자식 p !!mother의 자식 p의 자식 span

!!mother의 자식 p의 자식 p


아마 텍스트 관련 스타일이 상속되고 박스모델 쪽은 상속이 안되나봅니다. 물론 실험에 의한 추측일 뿐이니... (저도 이번에 처음 알았어요 ㅠㅠ)

박스모델?

firebug의 박스모델

이런 거?


모든 요소의 크기 및 위치를 지정해주는 거랄까요. (CSS)

Firebug에서의 레이아웃 탭에서 확인할 수 있습니다.

바깥에는 margin : 바깥쪽 여백,
테두리도 길이를 차지하고요 (border),
패딩(padding)은 안쪽 여백입니다.

가운데 적혀있는건 가로폭X세로폭 이니 신경쓰실 거 없구요.

position은 위치 형태. static (기본값), relative(다른것과 상관), absolute (절대),  fixed (스크롤하던말던 고정)

z는 z-index 속성을 말하는데, 위아래 순서죠. 지정하지 않는 이상 오토인 걸로 보이네요.





박스모델에서의 3개의 값, 그러니까 여백 두개와 테두리는 잘만 이용해 먹으면 깔끔하게 만들 수 있습니다.
레이아웃 지정하는데 쓰이기도 하구요.


저조차도 헷갈리는 CSS 상속 덕에 대충 끝낸 점 죄송하구요. 당장 스킨이 만들고 싶은 관계로...


아까 다루지 않았던 선택자들

선택자 더 있습니다. 여기 보면 자세히 나옵니다. 그치만 일단 필요한 거부터.

자손 선택자 : ~의 자손인 ~를 선택합니다.

선택자(빈칸)선택자

div p : div의 자손인 p를 모두 선택합니다.
#body p : id가 body인 요소의 자손 p를 모두 선택합니다.
위에껀 잘 안쓰지만 거꾸로도 됩니다. p #body

선택자 남발도 가능. div div p : div의 자손 div의 자손 p를 선택. 근데 비추.

자식 선택자 : ~의 자식인 ~을 선택합니다. 그러니까 바로 아래의 녀석만 선택하는 거죠. IE6은 미지원이라는듯.

선택자 > 선택자

.classA p : class가 classA 인 요소의 자손을 선택.
물론 거꾸로도 됩니다. 중첩도 되구요. 요소 선택자(태그 선택자) 끼리 남발해도 됩니다. 물론 비추.

가상 클래스 선택자 : 자바스크립트로 했던 것들을 CSS로. 그러니까 마우스 올린다던가, 첫번째 자식이라던가 하는 때의 스타일 지정 말이죠. 링크의 스타일을 지정할 때 잘 씁니다.

선택자:가상클래스

a:active : a 를 눌렀을 때
a:hover : a 에 마우스 올렸을 때. ie 8이라던가 하는 녀석들은 hover 뒤에 하위 div로 마우스를 옮기면 hover가 해제되서 골치.

처음에 만들었던 스킨의 변형인 new stylist - purple tone에서 * (전체 요소 선택자)에 hover를 달아서 마우스 올리면 그림자가 생성되게... 했었다죠. 으아..

input:focus : focus는 input 태그에 잘 쓰이죠. 그러니까, 커서라던지 해서 초점이 그 태그에 있을때를 의미합니다 .글씨 입력 대기 상태라던가...


클래스 & 아이디 선택자 : 클래스가 ~인 요소 ~, 아이디가 ~인 요소 ~를 선택합니다. 고놈만 집어서 지정하기에 딱 좋죠. 이걸 처음에 몰라서...

요소선택자.클래스
요소선택자#아이디

사이에 띄어쓰기가 없다는것에 주의하시길.

div.box : 클래스가 box인 div를 집습니다.
이건 순서 못바꿉니다.
div#footer : 아이디가 footer인 div를 집습니다.



아참, ID는 한태그에 한개, class는 여러개 됩니다. 한 태그에 아이디와 클래스 모두 지정할 수 있고요. 물론 클래스 여러개 지정은 IE6에서 안된다는게 문제. 그 이상의 웹브라우저는 ... 잘 모르겠는걸요 ^^;



복합 선택자 : 위에서 썼던것들 다 섞어봅시다. 신난다!

요소선택자.클래스 선택자 >선택자
등등... 무슨 의미인지는 아시겠죠?



모든 요소를 선택하는 * (전체 선택자) 도 있긴 하지만 어렵지 않으니 그냥 알아둡시다.


추가 ) CSS 속성 한개를 마무리하기 전에 띄우고 !important로 마무리하면 상속을 무시하고 적용해버립니다. 이렇게 스타일 지정해놓으면 골때림.
그래도 우선순위는 역시 인라인 스타일이 우선이죠. 아래쪽에 적힌 스타일하고요.
ex) border:1px solid black !important;



드디어 기나긴, 그리고 쓸데없는 HTML&CSS 기초를 끝냈습니다. 다음부터 당장 만들죠. ㅠㅠ
  1. 는 이미 했음. [본문으로]
  2. 마지막에는 넣어도 되고 안넣어도 됨 [본문으로]
  3. 물론 추측. 하하하하핳하지만 HTML에서 attribute라고 쓰고 속성이라고 읽었던 걸 보면 이게 맞을것 같기도 합니다.에라 몰라 [본문으로]
  4. daum 영어사전 cascade : ① 작은 폭포 ② 직렬 ③ 폭포가 되어 떨어지다 [본문으로]

'자료' Related Articles

티스토리툴바