'CSS'에 해당되는 글 3건

  1. 2015.05.07 [05] 간단한 웹페이지 작성, index.html, main.css
  2. 2015.05.07 [03] 자/후손 선택자, action, a, 부정 속성, px, %, em, css 색상, 배경 이미지, 가시속성(inline & block), 투명도, box, font, 위치속성, z-index
  3. 2015.05.07 [02] form, input, label, textarea, select, div, span, css, id, class, style, img

[05] 간단한 웹페이지 작성, index.html, main.css

|


- 2015.03.13

 


1. iptables 동작 중지


# cd /etc/sysconfig
# rm -rf iptables
# iptables -F
# iptables -X


하면 재부팅 후에 다시 동작 안함

 

 


2. 간단한 웹 페이지 작성


1) <head>


설정(폰트 등), script

 


2) <body>


내용

 


3) bootstrap


이미 만들어진 코드를 이용
다운로드 하지 않고도 Bootstrap CDN 을 head만 붙여넣어도 된다.

 


* Tip - Linux 기본 환경 확인

# locale

 

 


# cd /var/www/html
# vi index.html
<!DOCTYPE html>
<html>
        <head>
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
                <link href="main.css" rel="stylesheet">
        </head>


        <body>
                <div class="nav">
                        <div class="container">
                                <ul class="pull-left">
                                        <li> <a href="#">home</a> </li>
                                        <li> <a href="#">sitemap</a> </li>
                                </ul>
                                <ul class="pull-right">
                                        <li> <a href="#">sign up</a> </li>
                                        <li> <a href="#">Log In</a> </li>
                                        <li> <a href="#">Help</a> </li>
                                </ul>
                        </div>
                </div>
                <div class="jumbotron">
                        <div class="container">
                                <h1> GFriend Fan Page's </h1>
                                <p> I Love Girl Friends ... </p>
                        </div>
                </div>
                <div class="learn-more">
                        <div class="container">
                                <div class="row">
                                <div class="col-md-4">
                                        <h3> member </h3>
                                        <p> Introduce member .. </p>
                                        <a href="#"> member profile </a>
                                </div>
                                <div class="col-md-4">
                                        <h3> schedule </h3>
                                        <p> blar blar blar ... </p>
                                        <a href="#"> more schedule </a>
                                </div>
                                <div class="col-md-4">
                                        <h3> empty </h3>
                                        <p> ..... </p>
                                </div>
                                </div>
                        </div>
                </div>
        </body>
</html>

 

 


# vi main.css
.nav a {
        color: gray;
        padding: 14px 10px;
        font-weight: bold;
        text-transform: uppercase;
}


.nav li {
        display: inline;
}

 


.jumbotron {
        height: 400px;
        background-image:url('https://pbs.twimg.com/profile_images/551756034780311552/Nvpilgd9_400x400.jpeg');
}


.jumbotron h1 {
        color: #ee82ee;
        font-size: 50px;
        font-family: Arial;
}


.jumbotron p {
        color: #000000;
        font-size: 20px;
        font-weight: bold;
}

 

 

 

Trackback 0 And Comment 0


[03] 자/후손 선택자, action, a, 부정 속성, px, %, em, css 색상, 배경 이미지, 가시속성(inline & block), 투명도, box, font, 위치속성, z-index

|


- 2015.03.11

 


1. 후손 선택자


* 한단계 아래의 태그를 자손, 그 아래 위치한 모든 태그들은 후손으로 불린다.


선택한 태그 밑에 있는 모든 태그에 영향을 줌


<!DOCTYPE html>
<html>
<head>
    <title>CSS Selector Basic</title>
    <style>
        /*id 속성값으로 header를 가지는 태그의 후손 위치에 있는 h1와, 전체 h2 태그의 color를 red로 적용*/
        #header h1, h2 { color: red; }
        /*header 태그의 h2가 아닌 header의 h1 및 전체 h2 태그를 의미한다.
          만약 #header h2 만 주고 싶다면 #header h1, #header h2 라고 적어줘야 한다.*/


        /*id 속성값으로 section을 가지는 태그의 후손 위치에 있는 h1 태그의 color를 oragne로 적용*/
        #section h1 { color: orange; }
    </style>
</head>
<body>
    <div id="header">
        <h1 class="title">Lorem ipsum</h1>
        <h2 class="title">Lorem ipsum</h2>
        <div id="nav">
            <h1>Navigation</h1>
            <h2 class="title">Navigation</h2>
        </div>
    </div>
    <div id="section">
        <h1 class="title">Lorem ipsum</h1>
        <h2 class="title">Lorem ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</body>
</html>


=> header 아래쪽에 있는 nav 에도 h1 태그가 영향을 미침
=> h2 는 section에도 영향을 미침

 

 


2. 자손 선택자


한단계 아래에 있는 태그에만 영향을 줌


<!DOCTYPE html>
<html>
<head>
    <title>CSS Selector Basic</title>
    <style>
        /*id 속성값으로 header를 가지는 태그의 자손 위치에 있는 h1 태그의 color를 red로 적용*/
        #header > h1 { color: red; }


        /*id 속성값으로 section을 가지는 태그의 자손 위치에 있는 h1 태그의 color를 oragne로 적용*/
        #section > h1 { color: orange; }
    </style>
</head>
<body>
    <div id="header">
        <h1 class="title">Lorem ipsum</h1>
        <div id="nav">
            <h1>Navigation</h1>
        </div>
    </div>
    <div id="section">
        <h1 class="title">Lorem ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</body>
</html>


=> header 아래쪽에 있는 nav 에는 h1 태그가 영향을 안미침

 

 


3. 마우스 Action 태그


<!DOCTYPE html>
<html>
<head>
    <title>CSS Selector Basic</title>
    <style>
        /*h1 태그에 마우스를 올릴 경우에 color 속성에 red 키워드를 적용합니다.*/
        h1:hover { color: red; }


        /*h1 태그에 마우스를 클릭할 때 color 속성에 blue 키워드를 적용합니다.*/
        h1:active { color: blue; }
    </style>
</head>
<body>
    <h1>User Action Selector</h1>
</body>
</html>

 

 


4. 자손선택 옵션 줘서 css 주기


<!DOCTYPE html>
<html>
<head>
    <title>CSS Selector Basic</title>
    <style>
        ul { overflow: hidden; }
        li {
            list-style: none;
            float:left; padding: 15px;
        }


        li:first-child { border-radius: 10px 0 0 10px; }
        li:last-child { border-radius: 0 10px 10px 0; }


        li:nth-child(2n) { background-color: #FF0003; }
        li:nth-child(2n+1) { background-color: #800000; }
    </style>
</head>
<body>
    <ul>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li>Fourth</li>
        <li>Fifth</li>
        <li>Sixth</li>
        <li>Seventh</li>
    </ul>
</body>
</html>


=> ul 에 있는 overflow 는 다음 참조 http://aboooks.tistory.com/84

 


& 햇갈리는 nth


<!DOCTYPE html>
<html>
<head>
    <title>CSS Selector Basic</title>
    <style>
        li > a:first-child { color: red; }      
    </style>
</head>
<body>
    <ul>
        <li><a href="#">Condrasa</a></li>
        <li><a href="#">Condrasa</a></li>
        <li><a href="#">Condrasa</a></li>
        <li><a href="#">Condrasa</a></li>
        <li><a href="#">Condrasa</a></li>
    </ul>
</body>
</html>


=> 첫번째만 나올 것 같지만 전체에 나온다. li 밑에 있는 a 의 첫번째 자손이라는 의미
=> 아래 것이 정답


<!DOCTYPE html>
<html>
<head>
    <title>CSS Selector Basic</title>
    <style>
        li:first-child > a { color: red; }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">Condrasa</a></li>
        <li><a href="#">Condrasa</a></li>
        <li><a href="#">Condrasa</a></li>
        <li><a href="#">Condrasa</a></li>
        <li><a href="#">Condrasa</a></li>
    </ul>
</body>
</html>


=> li의 첫번째 자손 중 a 태그에 해당 css를 준 것

 

 


5. a tag 관련 css


<!DOCTYPE html>
<html>
<head>
    <title>CSS Selector Basic</title>
    <style>
        a { text-decoration: none; }
        a:visited { color: red; }
        /*방문한 경험 있는 링크는 red로 표시*/


       /*href 속성을 가지고 있는 a 태그 뒤의 공간에 "- (href 속성)"을 추가*/
       a:link::after { content: ' - ' attr(href); }
    </style>
</head>
<body>
    <h1><a>Nothing</a></h1>
    <h1><a href="http://hanbit.co.kr">Hanbit Media</a></h1>
    <h1><a href="http://www.w3.org/">W3C</a></h1>
    <h1><a href="http://github.com/">Github</a></h1>
</body>
</html>

 

 


6. 부정 속성 주기


<!DOCTYPE html>
<html>
<head>
    <title>CSS Selector Basic</title>
    <style>
        /*input 태그 중에서 type 속성값이 password가 아닌 태그의 background 속성에 red 적용*/
        input:not([type=password]) {
            background: red;
        }
    </style>
</head>
<body>
    <input type="password" />
    <input type="text" />
    <input type="button" />
    <input type="radio" />
    <input type="image" />
    <input type="file" />
    <input type="checkbox" />
    <input type="search" />
</body>
</html>

 


* Tip


http://www.w3schools.com/

 

 


7. Size 관련 css - px, %, em


<!DOCTYPE html>
<html>
<head>
    <title>CSS Selector Basic</title>
    <style>
        h1 {
            margin: 10px;      /*px : 픽셀*/
            font-size: 200%;   /*% : 백분율*/
            line-height: 2em;  /*em : 배수*/
        }
    </style>
</head>
<body>
    <h1>margine, font-size, line-height test</h1>
</body>
</html>

 


&


<!DOCTYPE html>
<html>
<head>
    <title>CSS Selector Basic</title>
    <style>
        p:nth-child(1) { }
        p:nth-child(2) { font-size: 100%; }
        p:nth-child(3) { font-size: 150%; }
        p:nth-child(4) { font-size: 200%; }
        p:nth-child(5) { font-size: 15px; }
        p:nth-child(6) { font-size: 20px; }
        p:nth-child(7) { font-size: 2em; }
        p:nth-child(8) { font-size: 3em; }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
</body>
</html>

 


&


<!DOCTYPE html>
<html>
<head>
    <title>CSS Selector Basic</title>
    <style>
        * { font-size: 12px; }
       
        h1 { font-size: 3.0em; }
        h2 { font-size: 1.5em; }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <h2>consectetur adipiscing elit. Sed nec purus elit, nec cursus dolor.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec purus elit, nec cursus dolor.</p>
</body>
</html>


=> 만약 크기를 0으로 줄 때에는 단위를 적지 않아도 된다.

 

 


8. css 색상 부여


<!DOCTYPE html>
<html>
<head>
    <title>CSS Selector Basic</title>
    <style>
        /*이름으로 색상 부여*/
        h1 { background-color: red; }
        h2 { background-color: orange; }
        /*rgb로 색상 부여*/
        h3 { background-color: rgb(255, 216, 0); }
        h4 { background-color: rgb(0, 255, 33); }
        /*16진수로 색상 부여*/
        h5 { background-color: #823600; }
        h6 { background-color: #4f20b2; }
    </style>
</head>
<body>
    <h1>Header - 1</h1>
    <h2>Header - 2</h2>
    <h3>Header - 3</h3>
    <h4>Header - 4</h4>
    <h5>Header - 5</h5>
    <h6>Header - 6</h6>
</body>
</html>

 

 

 


9. 배경에 이미지 넣기


<!DOCTYPE html>
<html>
<head>
    <title>CSS Selector Basic</title>
    <style>
        body {
            background-image: url('Desert.jpg')
            /*경로를 'Other/Desert.jpg' 처럼 상대경로로 줄 수 있음
              루트 폴더로 줄 때엔 '/Desert.jpg' 로 주면 됨*/
        }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor amet.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>

 

 

 


10. 가시 속성


Remark) span : inline, div : block


<!DOCTYPE html>
<html>
<head>
    <title>CSS Selector Basic</title>
    <style>
        #box {
            display: none;
        }
    </style>
</head>
<body>
    <span>Dummy</span>
    <div id="box">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </div>
    <span>Dummy</span>
</body>
</html>


=> display 속성을 inline 으로 주면 div의 속성이 block에서 inline 으로 변한다.


& 투명도


<!DOCTYPE html>
<html>
<head>
    <title>CSS Selector Basic</title>
    <style>
        #box {
            background-color: black;
            color: white;
            /*투명도*/
            opacity: 0.2;
        }
    </style>
</head>
<body>
    <span>Dummy</span>
    <div id="box">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </div>
    <span>Dummy</span>
</body>
</html>

 

 


11. box 관련 css


각각의 px 값을 바꿔가며 확인 해볼것


<!DOCTYPE html>
<html>
<head>
    <title>CSS Selector Basic</title>
    <style>
        div {
            width: 100px; height:100px;
            background-color: red;


            border: 20px solid black;
            margin: 10px; padding: 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

 


&


<!DOCTYPE html>
<html>
<head>
    <title>CSS Selector Basic</title>
    <style>
        div {
            width: 100px; height:100px;
            background-color: red;
            /*margin: 위아래 왼쪽오른쪽
            padding: 위아래 왼쪽오른쪽*/
            margin: 0 30px; padding: 0 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

 

 


12. 배경 이미지 관련 태그


<!DOCTYPE html>
<html>
<head>
    <title>CSS Selector Basic</title>
    <style>
        body {
            background-color: #E7E7E8;
            background-image: url('BackgroundFront.png'),
                url('BackgroundBack.png');


                            /*너비 높이*/
            background-size: 100% 250px;
           
            /*중첩 안되게 하는 옵션*/
            background-repeat: no-repeat;


            /*문서는 스크롤 되지만 배경이미지는 스크롤 되지 않아
            배경 위에 텍스트가 떠 있는 느낌 표현*/
            background-attachment: fixed;


            /*그림 위치를 아래쪽으로 줌*/
            /*background-position: bottom;*/
                                /*x축 y축*/
            background-position: 0px 50%;
        }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
    <p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
    <p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum</p>
    <p>Morbi ut lorem in purus facilisis vulputate. Sed purus nibh.</p>
</body>
</html>

 

 


13. Font


<!DOCTYPE html>
<html>
<head>
    <title>CSS Selector Basic</title>
    <style>
        .a { font-size: 32px; }
        .b { font-size: 2em; }
        .c { font-size:14pt; }
        .d { font-size:10pt; }


        /*폰트 이름에 공백 없으면 그냥, 공백 있으면 ''로 묶어주기*/
        .font_arial { font-family: Arial; }
        .font_roman { font-family: 'Times New Roman'; }
    </style>
</head>
<body>
    <h1 class="font_arial">Lorem ipsum</h1>
    <p class="a">Lorem ipsum</p>
    <p class="b">Lorem ipsum</p>
    <p class="c">Lorem ipsum</p>
    <p class="d">Lorem ipsum</p>
    <p class="font_roman">Lorem ipsum</p>
</body>
</html>

 

 

 


14. 위치 속성


<!DOCTYPE html>
<html>
<head>
    <title>CSS Selector Basic</title>
    <style>
        .box {
            width: 100px; height: 100px;
            /*절대 위치이기 때문에 겹쳐서 파란색만 보임
            position: absolute;*/
            position: static;
        }
        .red { background-color: red; }
        .green { background-color: green; }
        .blue { background-color: blue; }
    </style>
</head>
<body>
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box blue"></div>
</body>
</html>

 


& 각각의 위치 지정


<!DOCTYPE html>
<html>
<head>
    <title>CSS Selector Basic</title>
    <style>
        .box {
            width: 100px; height: 100px;
            position: absolute;
        }
        .red { background-color: red;
               left: 10px; top: 10px;
        }
        .green { background-color: green;
                 left: 50px; top: 50px;
        }
        .blue { background-color: blue;
                left: 90px; top: 90px;
        }
    </style>
</head>
<body>
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box blue"></div>
</body>
</html>


=> 이미지, 글자 등을 겹치는 효과도 가능

 


& z-index를 이용하여 겹치는 위치도 지정 가능


<!DOCTYPE html>
<html>
<head>
    <title>CSS Selector Basic</title>
    <style>
        .box {
            width: 100px; height: 100px;
            position: absolute;
        }
        .box:nth-child(1) {
            background-color: red;
            left: 10px; top: 10px;
            z-index: 100;
        }
        .box:nth-child(2) {
            background-color: green;
            left: 50px; top: 50px;


            z-index: 10;
        }
        .box:nth-child(3) {
            background-color: blue;
            left: 90px; top: 90px;


            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box blue"></div>
</body>
</html>


=> z-index가 높은 것이 위에 나온다.


 

 

Trackback 0 And Comment 0


[02] form, input, label, textarea, select, div, span, css, id, class, style, img

|


- 2015.03.10 웹보안

 

 

1. form tag


[기본]

 

<body>
 <form>
  <input type="text" name="search" />
  <input type="submit" />
 </form>
</body>

 


[form get 방식]


<body>
 <form method="get">
  <input type="text" name="search" />
  <input type="submit" />
 </form>
</body>

=> 주소에 입력해서 값을 보냄

 

 


[form post 방식]


<body>
 <form method="post">
  <input type="text" name="search" />
  <input type="submit" />
 </form>
</body>

=> 비밀스럽게 보냄

 

 

 


2. form - input type


<body>
 <form>
  <input type="text" name="search" /><br />
  <input type="password" name="password" /><br />
  <input type="file" name="file" /><br />
  <input type="submit" />
 </form>
</body>


아래 처럼 다양한 것을 확인해볼 수 있다.


<body>
 <form>
  <input type="text" /><br />
  <input type="botton" /><br />
  <input type="checkbox" /><br />
  <input type="file" /><br />
  <input type="hidden" /><br />
  <input type="image" /><br />
  <input type="password" /><br />
  <input type="radio" /><br />
  <input type="reset" /><br />
  <input type="submit" />
 </form>
</body>

 


3. form - label


<body>
 <form>
  <label>이름</label>
  <input type="text" /><br />
 </form>
</body>


보통은 아래처럼 많이 사용한다.


<body>
 <form>
  <label for="name">이름</label>
  <input id="name" type="text" /><br />
 </form>
</body>

 

 

 


4.textarea


<body>
 <form>

 <textarea>

      show me the money.

 </textarea>

</body>

 

 

 

 

5. select

 

<select multiple="multiple">
   <optgroup label="HTML 5">
      <option>김밥</option>
      <option>떡볶이</option>
      <option>순대</option>
      <option>오뎅</option>
   </optgroup>
   <optgroup label="CSS 3">
      <option>Animation</option>
      <option>3D Transform</option>
   </optgroup>
</select>

 

- optgroup 선택옵션을 묶을 때 사용

- select 에 multiple이라는 옵션을 주면 여러게 고를수 있다.
- 스마트폰에서 좀 더 정확히 볼 수 있다)

 

 

 

 

6. div && span

 

<body>

   <div>Lorem ipsum</div>
   <div>Lorem ipsum</div>
   <div>Lorem ipsum</div>

   <span>Lorem ipsum</span>
   <span>Lorem ipsum</span>
   <span>Lorem ipsum</span>

</body>

 

- div, span : 공간 분할태그

- div : block방식 (하나씩 차례대로 다음줄에 출력)
- span : inline방식 (한줄안에 차례대로 출력)

 

*
h1 태그 - 블락 방식
p 태그 - 블락방식
a, i 태그 -인라인 방식

 

 

 

 

7. CSS Basic


<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        h1 {                            // 스타일 시트
            color: red;
            background-color: orange;
        }
        p{
            background-color: blue;
        }
    </style>
</head>
<body>
    <p>Hi Hello</p>
    <h1>CSS3 Selector Basic</h1>
    <p>The end</p>
</body>
</html>

 


* Tip


태그 자리에 * 를 줘서 태그를 주면 body 뿐 아니라 전체 모든 태그에 영향을 줌 ~ 까지만 알고 있기
ex)
        * {
            color: red;
        }


다중 속성 부여


        body, p, h1, h2, h3, h4, h5, h6 {
            margin: 0; padding: 0;     // 박스 속성
        }

 

 

 


8. id 와 CSS 연동


<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        /* id 속성값으로 header를 가지는 태그의 스타일을 지정*/
        #header {
            width: 800px;
            margin: 0 auto;
            background: red;
        }


        #wrap {
            width: 800px;
            margin: 0 auto;
            overflow: hidden;
        }


        #aside {
            width: 200px;
            float: left;
            background: blue;
        }


        #content {
            width: 600px;
            float: left;
            background: green;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>Header</h1>
    </div>
    <div id="wrap">
        <div id="aside">
            <h1>Aside</h1>
        </div>
        <div id="content">
            <h1>Content</h1>
        </div>
    </div>
</body>
</html>

 

 

 


9. class 속성 값으로 style 주기


1) Basic


<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
       /* class 속성값으로 select를 가지는 태그의 color 속성에 red 키워드로 적용*/
       .select { color: red; }
    </style>
</head>
<body>
    <ul>
        <li class="select">Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li class="select">Lorem ipsum</li>
        <li>Lorem ipsum</li>
    </ul>
</body>
</html>

 

 


2) 여러 class 의 속성을 가져다 사용


<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
       /* class 속성값으로 item을 가지는 태그의 color 속성에 red 키워드로 적용*/
       .item { color: red; }


       /* class 속성값으로 header를 가지는 태그의 background-color 속성에 blue 키워드로 적용*/
       .header { background-color: blue; }
    </style>
</head>
<body>
    <h1 class="item header">Lorem ipsum</h1>
</body>
</html>

 

 


3) 특정 태그 및 클래스에 style 적용


<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
       /* li 태그 중 class 속성값으로 select를 가지는 태그의 color 속성에 red 키워드를 적용*/
       li.select { color: red; }
    </style>
</head>
<body>
    <h1 class="select">Lorem ipsum</h1>
    <ul>
        <li class="select">Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
    </ul>
</body>
</html>

 

 


4) style 과 태그의 속성을 일치시키자.


<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        /* input 태그 중에서 type 속성값을 text로 가지는 태그의 background 속성 적용*/
        input[type=text] {background: red; }
    </style>
</head>
<body>
    <form>
        <input />                     // type을 지정하지 않으면 기본 text가 되지만 css 적용안됨
        <input type="text" />
    </form>
</body>
</html>

 

 


5) 스타일 속성 세분화 - img 확장자


<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        /* img 태그 중에서 src 속성값이 png로 끝나는 태그의 border 속성에 3px solid red 속성 적용*/
        img[src$=png] { border: 3px solid red; }
     
        /* img 태그 중에서 src 속성값이 png로 끝나는 태그의 border 속성에 3px solid red 속성 적용*/
        img[src$=jpg] { border: 3px solid green; }


        /* img 태그 중에서 src 속성값이 png로 끝나는 태그의 border 속성에 3px solid red 속성 적용*/
        img[src$=gif] { border: 3px solid blue; }
    </style>
</head>
<body>
    <img src="jajq.png" width="200" height="250" />
    <img src="node.jpg" width="200" height="250" />
    <img src="ux.gif" width="200" height="250" />
</body>
</html>

 

 


* Tip - 확장자 말고도 다양한 옵션이 있음


        img[src$=jpg] { border: 3px solid green; }   // 특정 값으로 끝남
        img[src^=jpg] { border: 3px solid green; }   // 특정 값으로 시작
        img[src~=jpg] { border: 3px solid green; }   // 특정 값을 단어로 포함
        img[src*=jpg] { border: 3px solid green; }   // 특정 값을 포함

 

 

 

Trackback 0 And Comment 0


prev | 1 | next