[CSS] clearfix

|

CSS
.pinkbox {width:324px;padding:5px;}
.redbox  {float:left;width:150px;height:60px;padding:5px;}
.bluebox {float:right;width:150px;height:130px;padding:5px;}

HTML
<div class="pinkbox">
    <div class="redbox">
         redbox
    </div>
    <div class="bluebox">
         bluebox
    </div>
</div>

위와 같은 코드가 있다고 하면, 실제로 웹 브라우저에서는 아래와 같이 보인다.

redbox
bluebox










(ie6에서는 감싸는 것처럼 보입니다.)

겉에 있는 핫핑크의 박스가 두 박스를 감싸지 못한다.


이것을 해결하려면 아래와 같은 방법이 있다.
1. redbox와 bluebox의 아래쪽에 div를 하나 더 만들어서 clear:both;를 넣어 주는 방법.
2. pinkbox에도 float:left;를 넣어 주는 방법
3. pinkbox에 height값을 넣은 눈속임

4. clearfix

1~3번은 사용이 간단하지만, 어느 것도 사용에 제약이 있다.
     1. div를 추가로 넣어야 해서 사용하기 어려운 경우가 있다.
     2. pinkbox 밖에서 다시 clear를 해 줘야 한다.
     3. 세로의 길이가 가변적이어야 할 때는 사용하지 못한다.

가장 제약이 없는 방법은, :after 를 사용한 4번이다.

CSS
<style type="text/css">
.clearfix:after  {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix   {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix   {display: block;}
/* End hide from IE-mac */

HTML
<div class="clearfix pinkbox">
    <div class="redbox">
         redbox
    </div>
    <div class="bluebox">
         bluebox
    </div>
</div>

CSS가 조금 복잡해 보이지만, 외우지 못하는 사람들은 복사해 놓고 사용하자.

이제, 아래처럼 정상적으로 보인다. :)

redbox
bluebox

우리팀 진아가 책 보다가 발견한 코드.
이거 몰라서 삽질했던 기억이 있어서, 올려봅니다.  T ^T...

출처 : dstrictws.tistory.com

'IT > CSS' 카테고리의 다른 글

[CSS] clearfix  (0) 2011.11.17
[CSS] 글 문단, 태그 재정의/Embeding, lnline, Class  (0) 2011.11.16
[CSS] HTML 링크에 밑줄 없애기  (0) 2011.10.19
트랙백0 And 댓글0

[CSS] 글 문단, 태그 재정의/Embeding, lnline, Class

|

스타일시트

 

1. 글 문단과 관련된 스타일 시트

 

스타일명 기본형식 예제 설명
bgcolor bgcolor:색상명/16진수 색상 코드 ex) bgcolor:#cccccc 글자의 배경 부분에 적용할 색상명이나 16진수 색상 코드를 정의합니다.
color color:색상명/16진수 색상 코드 ex) color:#cccccc 글자에 색상명이나 16진수 색상 코드로 정의한 색상을 정의합니다.
font-family font-family : 글꼴1, 글꼴2, 글꼴3 ... ex) font-family:돋움, serif, garamond 글꼴 군을 지정합니다. 처음 글꼴이 없을 경우 차례대로 다음 글꼬을 찾아 적용함
font-size font-size : 글꼴 크기와 단위 ex) font-size:9pt 글꼴의 크기와 함께 적용하는 단위를 지정합니다.
font-style font-style : font-style:장식 속성 ex)font-style:italic 글꼴 형태 변환 normal : 기본값, oblique : 기울림 글꼴, italic : 이탤릭글꼴
font-varient font-varient:normal/small-caps ex) font-varient:small-caps 영문자를 소문자나 대문자 형태로 변경합니다.
font-weight font-weight:글자의 두께 값이나 속성 형태 ex) font-weight:bold bold : 두껍게, bolder : bold보다 두껍게, lighter : 가늘게, 숫자값 : 기본 400이며 400보다크면 두꺼워짐
letter-spacing letter-spacing:글자 간격 값과 단위 ex) letter-spacing:150% 글자와 글자 사이의 간격을 지정
line-height line-height:줄 사이의 간격 값과 단위 ex) line-height:150% 줄과 줄 사이의 간격과 단위를 지정합니다.
text-align text-align:정렬 속성 ex) text-align:justify

태그의 align 속성과 같이 웹브라우저 왼쪽,오른쪽,가운대로 정렬

text-decoration text-decoration:글자 꾸미기 속성 ex) text-decoration:underline 글자에 밑줄, 진하게, 중간 줄 관통과 같은 꾸미기 속성을 적용합니다.
text-indent text-indent:들여쓰기 값과 단위 ex) text-indent:10pt 글 문단의 들여쓰기 값과 단위를 지정합니다.
text-transform text-transform:대/소문자 지정 속성 값 ex) text-transform:capitalize 영문자를 첫 문자만 대문자로 변경하거나 모두 대문자,소문자 형태로 변경 합니다.

 

 

2. <HEAD> 부분에서 정의한 스타일시트 <BODY> 부분에서 재사용하기

-태그 재정의/Embeding 방식

 

기본형식

<STYLE type="text/css">

<!--

태그명 { 속성 1:값;

               속성 2:값;

                   ...}

-->

</STYLE>

 

ex)

<HTML>

<HEAD>

<TITLE> HTML 태그를 재정하자. - P 와 B 태그 재정의 </TITLE>

<STYLE type="text/css">

<!--

P{font-family : 돋움;

   font-size : 9pt;

   line-height : 150%; }

 

B{font-family : 돋움 ;

   font-size : 12pt;

   font-weight : bold ;

   letter-spacing : 12px ; }

-->

</STYLE>

</HEAD>

<BODY>

<B> B태그의 재정의</B><BR><BR>

<P> P태그의 재정의</P>

</BODY>

</HTML>

 

 

3. 직접 태그 안에서 스타일시트 정의하여 사용하기 -lnline 스타일시트

 

기본형식

<태그 STYLE = "속성 1:값;

                       속성 2:값;

                         ....">

 

ex)

<HTML>

<HEAD>

<TITLE> BODY태그 안에 직접 스타일시트 속성을 삽입</TITLE>

</HEAD>
<BODY>

<P style="color:green;

              font-size:12pt;

              letter-spacing:12px;

              text-indent:10 pt;">

p 속성을 스타일시트로 직접 하나씩 지정 </P><br><br>

 

<P style="color:#009966;

              font-size:12pt;

              letter-spacing:12px;

              text-indent:10 pt;">

2번째 예문</P>

</BODY>

<HTML>

 

4. Class를 이용하여 사용자 정의 스타일시트 만들기

 

기본형식

<STYLE type="text/css">

<!--

이름 { 속성 1:값;

         속성 2:값;

                  ....}

-->

</STYLE>

 

ex)

<HTML>

<HEAD>
<TITLE> CLASS 이용하기 </TITLE>

<STYLE type="text/css">

<!--

style1{ color : green;

         font-family : 돋움;

         font-size : 12pt;

         text-indent : 20pt;

         letter-spacing : 12px; }

 

style2{ color : #0066cc ;

          font-family : 돋움 ;

          font-size : 12pt;

          font-indent : 40pt;

          text-indent : 40pt; }

-->

</STYLE>

</HEAD>

<BODY>

<P class="style1"> 스타일1 지정의 글 </P>

<P class="style2"> 스타일2 지정의 글 </P>

</BODY>

</HTML>

 

5. 특정부위만 변경하는 id

 

기본형식

<STYLE type="text/css">

<!--

#이름 { 속성 1:값;

           속성 2:값;

                     ..}

-->

</STYLE>

 

ex)

<HTML>

<HEAD>
<TITLE> ID 이용하기</TITLE>

 

<STYLE type="text/css">

<!--

#style1 { color : #000000;

             font-family : 돋움 ;

             font-size : 15pt ;

             text-indent : 50pt ;

             letter-spacing : 25px ;

             font-weight : bold ; }

 

#style2 { color : green ;

              font-family : 굴림 ;

              font-size : 10pt ;

              text-indent : 40pt ;

              letter-spacing : 17px ;

              font-weight : bolder ; }

-->

</STYLE>

</HEAD>

<BODY>

<P id="style1"> 스타일1인 아이디의 값</P><br><br>

<P id="style2"> 스타일2인 아이디의 값</P>

</BODY>

</HTML>

출처 : http://blog.naver.com/baegaha 

'IT > CSS' 카테고리의 다른 글

[CSS] clearfix  (0) 2011.11.17
[CSS] 글 문단, 태그 재정의/Embeding, lnline, Class  (0) 2011.11.16
[CSS] HTML 링크에 밑줄 없애기  (0) 2011.10.19
트랙백0 And 댓글0

[CSS] HTML 링크에 밑줄 없애기

|
- 소 스 -

<HEAD>
<TITLE> 링크에 밑줄 없애기 </TITLE>
<style tape="text/css">
 
a:link { color: red; text-decoration: none;}
 
a:visited { color: black; text-decoration: none;}
 
a:hover { color: blue; text-decoration: underline;}
</style>

- 해 석 -
style 소스의 type = text를 제어하는 css로 한다.
a:link : 클릭하지 않은 링크
a:visited : 한번 클릭했던 혹은 다녀갔던 링크
a:hover : 링크를 클릭하려고 마우스를 가져갔을 때
decoration : 밑줄
none : 없는 상태
underline : 있는 상태

a:active : 링크부분에서 마우스를 누르고 있는 동안의 상태

'IT > CSS' 카테고리의 다른 글

[CSS] clearfix  (0) 2011.11.17
[CSS] 글 문단, 태그 재정의/Embeding, lnline, Class  (0) 2011.11.16
[CSS] HTML 링크에 밑줄 없애기  (0) 2011.10.19
트랙백0 And 댓글0
prev | 1 | next

티스토리 툴바