XHTML+CSS 시작하기 5 ( 블록레벨엘리먼트 와 인라인 엘리먼트)
--------------------------------------------------------------------------------
<div>: Defines a section in a document 블록레벨 엘리먼트
<span> Defines a section in a document 블록엘리먼트안에서 사용하는 인라인 엘리먼트
--------------------------------------------------------------------------------
div(블록레벨 엘리먼트)의css box model을 살펴보아요
- background-color:gold;
- width:기본적으로 값을 설정하지 않으면, 부모 엘리먼트의 width값의 상대적인 100%의 width값을 가진다.
ex)
padding-top:20px;
padding-right:40px;
padding-left:30px;
padding-bottom:40px;
= padding:20px 40px 30px 40px;
위와같이 써도되지만 아래와 같이 순서대로 쓰면된다.
아래와같이쓴경우 (순서 top - right - bottom - left 순으로 값을 입력하면 된다)
▶ padding :컨텐츠 영역 바로 바깥에 생기는 공간, 배경색상이 적용, 최소값이 0이고 음수(negative)값을 가질수 없다
▶ margin :border 바깥에 생기는 공간,투명(Transperant),음수 값을 가질수 있다.
음수값을 이용하여 디테일한 영역에서의 위치를 조절하는 데 사용할 수 있다.
ex) padding:20px 10px (줄여서 쓴경우 탑이랑바툼이 20 왼쪽오른쪽이10 이란 것)
http://www.w3.org/TR/CSS21/box.html
css (cascading style sheet)
▶ * asterisk/애스터리스트/universal selector /전체선택자
--------------------------------------------------------------------------------------------------
Type selector(태그선택자):div, p, body, h1
▶ grouping (그룹선택자):body,input,button뿐만 아니라 다양한 유형의 그룹핑을 만들수 있다
▶ (.) 이 붙으면 - class select
▶ (#)이 붙으면 - id selectors
▶ () descendant selectors :하위 선택자
--------------------------------------------------------------------------------------------------
ex)
<style type="text/css">
.t1{width:200px;
background-color:gold;}
.t2{width:180px;
height:80px;
padding:10px;
background-color:orange;}
</style>
<div class="t1">div1</div>
<div class="t2">div2</div>
------------------------------------------------------------------------------------------------------
인라인 엘리먼트의 css box model을 살펴본다
-margin-top,margin-bottom,padding-top,padding-bottom의값은 디스플레이 되지않는다.
-margin-left, margin-right, padding-left, padding-right의 값은 적용된다
*css가 꼬였을때 강제적으로 이것먼저 하라고 줄때는 !important
h1{color:red !important;}
안쓰는게 제일좋지만~~!! 사람인지라 
-------------------------------------------------------------------------------------------------------
id를 사용할 것인가 class를 사용할 것인가?
-페이지에 여러번 나오는 대상에 스타일을 적용하려면 class를 이용한다
-페이지마다 단한번 나오는 부분을 구별하기 위해서는 id를 이용한다
css기반의 레이아웃은 주로 ID선택자에 의존하여 사이트 바나 푸터와 같은 웹페이지의 유일한 부분을 식별한다
웹브라우저는 클래스선택자보다 ID선택자에 우선권을 주므로 스타일 충돌을 피하기 위해 ID선택자를 쓰기도 한다
(브라우저가 동일한 태그에 대해 다른 배경색을 지정하는 두개의 스타일과 만나게 된다면 ID의 배경색상이 우선하게된다)
댓글