티스토리 툴바

Daum
Tistory
로그인

CSS Box Model

Computer/Web
posted by 희정냥★ 2011/09/18 23:15

각각의 엘리먼트를 문서에 배치하기 위해서는 Box Model 이라고 부르는 margin, padding 그리고 border 속성을 전체적으로 이해해야 합니다.

 

위의 그림에서 중요한 4가지는 content, padding, border, margin 입니다.

content : 순수한 콘텐츠
padding : 콘텐츠와 경계선 사이의 여백
border : 경계선
margin : 경계선 밖에서 박스모델의 최종 경계선까지의 여백
 

 <table width="300" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
 <td bgcolor="#EEEEEE">
  <div style="padding:10px; margin:10px; border:1px gray solid;">Box Model을 설명하기 위한 예제</div>
 </td>
</tr>
</table>
이 예제에서 padding값과 margin값을 변경해 보면 이 값이 어떤 부분을 의미하는지 이해할 수 있습니다.

저작자 표시
크리에이티브 커먼즈 라이선스
Creative Commons License

'Computer > Web' 카테고리의 다른 글

CSS Box Model  (0) 2011/09/18
CSS 선택자  (0) 2011/09/18
Web 2.0 기반의 Presentation On The Web  (0) 2009/08/06
syntaxhighlighter를 tistory에서 사용 하는 방법  (0) 2008/10/08
IE6,IE7 ,FireFox 에 대해 CSS 맞추기  (0) 2008/07/09
CSS에서 브라우저 구별 (IE6, IE7, FIREFOX)  (0) 2008/07/09
Trackback 0 Comment 0

Trackback http://cutewebi.tistory.com/trackback/700 관련글 쓰기

댓글을 달아 주세요

CSS 선택자

Computer/Web
posted by 희정냥★ 2011/09/18 23:13
CSS에서 가장 중요한 개념은 선택자(Selector)라고 할 수 있습니다. 선택자(Selector)가 있어야 선언된 CSS가 어디에 적용될지를 결정할 수 있기 때문입니다. 특히 CSS는 상속의 개념을 가지므로 선택자(Selector)에 대한 확실한 이해가 없이는 CSS를 제대로 활용하지 못합니다.

선택자(Selector)의 종류

선택자(Selector)는 아래와 같이 4개로 나누어볼 수 있습니다.

공통 선택자(Universal Selector)
타입 선택자(Type Selector)
ID 선택자(ID Selector)
Class 선택자(Class Selector)
 

공통 선택자(Universal Selector)
공통 선택자(Universal Selector)는 *로 표현되는 선택자입니다.

* { color: gray; }
위와 같이 정의하면 모든 element 에 color: gray; 라는 스타일을 지정한다는 의미입니다.

 

타입 선택자(Type Selector)
타입 선택자(Type Selector)는 p, div, span, table, td, form...등과 같은 HTML 태그를 선택하는 선택자 입니다.

p { color: gray; }
이런식으로 정의하면 P element에 color: gray; 라는 스타일을 지정한다는 의미입니다.

 

ID 선택자(ID Selector)
#이라는 지시어를 사용하면서 element의 아이디값을 지정해주면 됩니다. 즉 특정 element에만 스타일을 지정한다는 의미입니다. 

#gray_text { color: gray; }
위와 같이 지정하면 id 값이 gray_text 인 element에만 스타일이 적용됩니다.

 

Class 선택자(Class Selector)
.이라는 지시어를 사용하면서 element의 클래스값을 지정해주면 됩니다. 특정 element에만 스타일을 지정한다는 의미로 ID 선택자와 차이점이라면 클래스의 경우는 한 문서에 동일한 이름의 클래스가 여러개 위치해도 괜찮으나 아이디는 유일해야 한다는 차이가 있습니다.

.gray_text { color: gray; }
위와 같이 지정하면 클래스 값이 gray_text 인 element에만 스타일이 적용됩니다.

 
저작자 표시
크리에이티브 커먼즈 라이선스
Creative Commons License

'Computer > Web' 카테고리의 다른 글

CSS Box Model  (0) 2011/09/18
CSS 선택자  (0) 2011/09/18
Web 2.0 기반의 Presentation On The Web  (0) 2009/08/06
syntaxhighlighter를 tistory에서 사용 하는 방법  (0) 2008/10/08
IE6,IE7 ,FireFox 에 대해 CSS 맞추기  (0) 2008/07/09
CSS에서 브라우저 구별 (IE6, IE7, FIREFOX)  (0) 2008/07/09
Trackback 0 Comment 0

Trackback http://cutewebi.tistory.com/trackback/699 관련글 쓰기

댓글을 달아 주세요

MAC에서 /etc/hosts 파일 수정하려고 할 땐

Computer/MAC
posted by 희정냥★ 2011/09/12 21:36
터미널 실행 후 sudo nano /private/etc/hosts 입력 하고 enter!

내용을 수정 후 ctrl + o 누른 후 enter! (Write Out)

ctrl + x 로 빠져나감. (exit)

내용 적용하려면 재부팅 하거나

dscacheutil -flushcache 입력후 enter 해서 바로 적용.


저작자 표시
크리에이티브 커먼즈 라이선스
Creative Commons License

'Computer > MAC' 카테고리의 다른 글

MAC에서 /etc/hosts 파일 수정하려고 할 땐  (0) 2011/09/12
Mac에서 애플매직마우스 감도 좋게 하기  (0) 2011/09/12
Trackback 0 Comment 0

Trackback http://cutewebi.tistory.com/trackback/698 관련글 쓰기

댓글을 달아 주세요