BLOG ARTICLE CSS | 3 ARTICLE FOUND

  1. 2014.02.06 [CSS] 박스, 테이블 모델 (2)
  2. 2014.02.06 [CSS] 박스, 테이블 속성
  3. 2014.02.06 [CSS] css 선택자, 속성

[CSS] 박스, 테이블 모델 (2)

프로그래밍/CSS/HTML 2014. 2. 6. 19:45

박스모델 CSS_2편 : margin , padding 

 

 

 

아래의 그림과 같이

margin은 (border기준)바깥쪽 여백이고

padding은 (border기준) 안쪽 여백입니다.

 

 

 

스타일시트에서 사용하는 형식은

 

 

{margin:30px;} (상/하/좌/우 모두동일)
{margin:20px 40px;}  (상하 / 좌우)
{margin:0px 20px 30px;} (상 / 좌우 / 하)
{margin: 20px 30px 40px 50px;} (상 / 하 / 좌 / 우)

* (margin-top, margin-right, margin-bottom, margin-left의 형식으로 특정값 지정 가능)

 

 

{padding:30px;} (상/하/좌/우 모두동일)
{padding:20px 40px;}  (상하 / 좌우)
{padding:0px 20px 30px;} (상 / 좌우 / 하)
{padding: 20px 30px 40px 50px;} (상 / 하 / 좌 / 우)

* (padding-top, padding-right, padding-bottom, padding-left의 형식으로 특정값 지정 가능)

 

 

>결과가 눈에 잘 보이지 않아서 결과는 생략 하였습니당~

 

 

단, margin 사용시 주의하실점이 있습니다~

 

 

두개 이상의 margin값이 세로 방향으로 만났을 경우

하나의 margin으로 합쳐지는 현상이 발생하니 주의해서 사용하세요~ 

이상입니다~

 

 

 

[출처] [CSS]박스모델 CSS-2편|작성자 Yun

저작자표시

'프로그래밍 > CSS/HTML' 카테고리의 다른 글

[CSS] 박스, 테이블 속성  (0) 2014.02.06
[CSS] css 선택자, 속성  (0) 2014.02.06
AND

[CSS] 박스, 테이블 속성

프로그래밍/CSS/HTML 2014. 2. 6. 19:43

 

박스모델  CSS속성 -1편

 

width / height / border

 

 

 

간단하게 width / height / border 에 대해서 알아볼게요! 

(width와 height는 잘 아실걸로 생각하고 PASS하겠습니다.)

 

 

 

 

border는 테두리와 관련된 속성입니다.

 

 

이렇게 사용하시면 되는데요, 사용할 수 있는 모양의 값은

solid, dashed, dotted, groove, outset , hidden, ridge, inset, putset 등이 있습니다.

 

 

 

 

결과부터 보도록 하겠습니다!

박스 모양을 다양하게 활용할 수 있겠네요!!

 


 

<!DOCTYPE html>
    <html>
       <head>
            <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
            <title></title>
            <style type="text/css">
                 p{width:400px; height:70px;}   /*p태그의 모든 사이즈를 한번에 지정해 주었습니다.*/
                 .box1 {none; /* border:0 */}
                 .box2 {hidden;}
                 .box3 {border:3px dotted #333;}
                 .box4 {border:3px dashed #333;}
                 .box5 {border:3px solid #333;}
                 .box6 {border:3px double #333;}
                 .box7 {border:3px groove #333;}
                 .box8 {border:3px ridge #333;}
                 .box9 {border:3px inset #333;}
                 .box10 {border:3px outset #333;}
                 .box11 {border-top:1px solid #333; border-bottom:1px solid #333;}
              </style>

      </head> 

    

      <body>
             <p class="box1" style="border-style:1px;">box1-박스의 테두리가 none으로 지정된 경우</p>
             <p class="box2">box2-박스의 테두리가 hidden으로 지정된 경우</p>
             <p class="box3">box3-박스의 테두리가 dotted로 지정된 경우</p>
             <p class="box4">box4-박스의 테두리가 dashed로 지정된 경우</p>
             <p class="box5">box5-박스의 테두리가 solid로 지정된 경우</p>
             <p class="box6">box-6박스의 테두리가 double로 지정된 경우</p>
             <p class="box7">box-7박스의 테두리가 groove로 지정된 경우</p>
             <p class="box8">box-8박스의 테두리가 ridge로 지정된 경우</p>
             <p class="box9">box-9박스의 테두리가 inset으로 지정된 경우</p>
             <p class="box10">box-10박스의 테두리가 outset으로 지정된 경우</p>
             <p class="box11">box-11박스의 테두리를 위와 아래만 주기!</p>
 </body>
</html>

이상입니당~

 

 

 

[출처] [CSS] 박스모델 CSS속성 -1편|작성자 Yun

 

저작자표시

'프로그래밍 > CSS/HTML' 카테고리의 다른 글

[CSS] 박스, 테이블 모델 (2)  (0) 2014.02.06
[CSS] css 선택자, 속성  (0) 2014.02.06
AND

[CSS] css 선택자, 속성

프로그래밍/CSS/HTML 2014. 2. 6. 19:39

 

CSS 선택자 

 

 

1) 전체 선택자 (모든 태그에 적용)

*{ 속성: 값; }

 

2) 요소명 선택자 (ex:p태그에 적용시)

p{ 속성: 값; }

 

3)  id 선택자

#id명{ 속성: 값; }

 

4) class 선택자

.class명{ 속성: 값; }

 

 

 

1) 전체선택자 >> * 

 

<!DOCTYPE html>

<html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   * { color:red; }
   </style>
   <title>CSS</title>
   </head>

 

<body>
  <h1> CSS선택자를 알아봅시다! </h1>

  <p>나는 전체선택자입니다. *</p>
  <p>나는 그냥 p태그 입니다!</p>
  <p id="id">나는 id가 있는 p태그 입니다.</p>
  <p class="class">나는 class가 있는 p태그 입니다.</p>
 </body>
</html> 

전체 선택자 결과 >> 모든 글자에 적용됩니다!

 

 

 

 

 

 

2) 요소명 선택자 

 

<!DOCTYPE html> <html>
  <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <style type="text/css">
          * { color:red; }

          p { color:blue; }

         </style>
        <title>CSS</title>
   </head>

 

<body>
       <h1> CSS선택자를 알아봅시다! </h1>

       <p>나는 전체선택자입니다. *</p>
       <p>나는 그냥 p태그 입니다!</p>
       <p id="id">나는 id가 있는 p태그 입니다.</p>
       <p class="class">나는 class가 있는 p태그 입니다.</p>
 </body>
</html> 

요소명 선택자 결과 >> P태그 (P태그 요소)에 적용됩니다.

 

 

 

 

 

 

 

3) id 선택자 >> #id명

 

<!DOCTYPE html> <html>
  <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <style type="text/css">
          * { color:red; }

          p { color:blue; }

           #id { color:green; } /*  p#id { color:green; } 로 사용하셔도 됩니다 */

         </style>
        <title>CSS</title>
   </head>

 

<body>
       <h1> CSS선택자를 알아봅시다! </h1>

       <p>나는 전체선택자입니다. *</p>
       <p>나는 그냥 p태그 입니다!</p>
       <p id="id">나는 id가 있는 p태그 입니다.</p>
       <p class="class">나는 class가 있는 p태그 입니다.</p>
 </body>
</html> 

아이디 선택자 결과 >> 해당 id 태그에 적용

 

 

 

 

 

 

 

4) class 선택자 >> .class명

 

<!DOCTYPE html> <html>
  <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <style type="text/css">
          * { color:red; }

          p { color:blue; }

           #id { color:green; }

           .class { color:orange; } /*  p.class { color:green; } 로 사용하셔도 됩니다 */

         </style>
        <title>CSS</title>
   </head>

 

<body>
       <h1> CSS선택자를 알아봅시다! </h1>

       <p>나는 전체선택자입니다. *</p>
       <p>나는 그냥 p태그 입니다!</p>
       <p id="id">나는 id가 있는 p태그 입니다.</p>
       <p class="class">나는 class가 있는 p태그 입니다.</p>
 </body>
</html> 

클래스 선택자 결과 >> 해당 class 태그에 적용

 

 

 

 

 

저는 쉬운 설명을 위해 노력하고 있는데

어떻게....css선택자 이해가 되셨는지 모르겠네요  ㅠㅠ

 

이상입니다!

 

아참 css의 주석은 /* */입니다~~

 

 

[출처] [CSS] CSS선택자|작성자 Yun

저작자표시

'프로그래밍 > CSS/HTML' 카테고리의 다른 글

[CSS] 박스, 테이블 모델 (2)  (0) 2014.02.06
[CSS] 박스, 테이블 속성  (0) 2014.02.06
AND

티스토리툴바