728x90
반응형

selector

  
선택자의 대상
: 요소(태그)가 스타일을 적용하는 대상이 된다.

table, th, td 
table td (table내 td 자식 자손 모두 포함		  
선택자 {
}		  
id만 유일하게 중복속성이 없기에 태그.
태그들x
<body>
<form> 
<input type-="text" id="uid" name="id" calss="form1" style="width:80px;">
<input type-="text" id="uid1" name="id" calss="form1" style="width:80px;">
<input type-="text" id="uid3" name="id" calss="form" style="width:80px;">
<input type-="text" id="uid4" name="id" calss="form" style="width:80px;">
<button class="form1" style="width: 80px;">버튼1</button>
< button class="form1" style="width: 80px;">버튼1</button>
</form>
</body>
input#uid
클래스 선택자
.form1 {  }
input.form1 {  }

범용
* { }

조합선택자

자손선택자 - 자식, 자손 모두 포함
- 공백으로 구분
ex) table td {  }

자식선택자 - 자식만 가능
-' > ' 기호로 구분
ex) div > p {  }

인접 형제 선택자
- ' + ' 기호로 구분
- 바로 인접한 태그에 한함
ex) div + p {  }
<div></div>
<p></p>
<p></p>
<div></div>
<h1></h1>
<p></p>

ex) div ~ p {  }
<div></div>
<p></p>
<p></p>
<div></div>
<h1></h1>
<p></p>


가상 엘리먼트선택자
:: 스타일명

table { width:50px !important;} - 최상위 우선순위

 

선택자 우선순위

동급인 경우, 가장 마지막에 기술된 style 적용
float : left
- 블럭레벨을 평행정렬될 수 있도록 함.
- 왼손을 잡는다
- 끊어내는건 clear
- float를 적용받은 블럭레벨은 width를 컨텐츠의 크기만큼 바꿔버림.
인라인레벨에 한해서 태그들 enter공간에 따라 여백공간이 생성된다.

section - width:100% 값 가짐

float
clear
<!DOCTYPE html>
<html>
  <head>
  <title>div</title>
    <style>
      /*겹치는 속상에 한하여 우선순위 가짐*/
      div.gallery {
        margin: 5px;
        border: 1px solid #ccc;
        float: left; /*블럭레벨을 평행정렬될 수 있도록 함  <>clear*/ 
        width: 180px;
      }
      .gallery {
        margin: 5px;
        border: 1px solid red;
        float: right;
        width: 300px;
      }
      div.gallery:hover {
        border: 3px solid #f00;
      }
      div.gallery img {
        width: 100%;
        height: auto;
      }
      div.desc {
        padding: 15px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="gallery">
      <a target="_blank" href="../img/img_5terre.jpg">
        <img
          src="../img/img_5terre.jpg"
          alt="Cinque Terre"
          widht="600"
          height="400"
        />
      </a>
      <div class="desc">Add a descrpition of the image here</div>
    </div><div class="gallery">
      <a target="_blank" href="../img/img_forest.jpg">
        <img
          src="../img/img_forest.jpg"
          alt="Cinque Terre"
          widht="600"
          height="400"
        />
      </a>
      <div class="desc">Add a descrpition of the image here</div>
    </div>

    <div class="gallery">
      <a target="_blank" href="../img/img_lights.jpg">
        <img
          src="../img/img_lights.jpg"
          alt="Cinque Terre"
          widht="600"
          height="400"
        />
      </a>
      <div class="desc">Add a descrpition of the image here</div>
    </div>

    <div class="gallery">
      <a target="_blank" href="../img/img_mountains.jpg">
        <img
          src="../img/img_mountains.jpg"
          alt="Cinque Terre"
          widht="600"
          height="400"
        />
      </a>
      <div class="desc">Add a descrpition of the image here</div>
    </div>

    <!-- <div style="clear:left"></div> -->
    <!-- <div style="clear:right"></div> -->
    <!-- <div style="clear:both"></div> -->

    <!-- <div>테스트div태그입니다.</div> -->
    <!-- <div>테스트div태그입니다.</div>
    <!-- <div>테스트div태그입니다.</div> -->
    <div>테스트div태그입니다.</div>
    <div>테스트div태그입니다.</div>
    <div>테스트div태그입니다.</div>
    <div>테스트div태그입니다.</div>
    <div>테스트div태그입니다.</div>
    <div>테스트div태그입니다.</div>
    <div>테스트div태그입니다.</div>
    <div>테스트div태그입니다.</div>
    <div>테스트div태그입니다.</div>
    <div>테스트div태그입니다.</div>
    <div>테스트div태그입니다.</div>
    <div>테스트div태그입니다.</div>
    <div>테스트div태그입니다.</div>
    <div>테스트div태그입니다.</div>
    <div>테스트div태그입니다.</div>
    <div>테스트div태그입니다.</div>
    <div>테스트div태그입니다.</div>
    
  </body>
</html>

 

 

css-selector
<!DOCTYPE html>
<html>
  <head>
    <title>조합선택자</title>
    <style>
      div {
        border: 1px solid #000000;
        padding: 10px;
        border-radius: 5px;
      }

      /* 자식/자손선택자(하위 선택자) */
      div p {
        background-color: yellow;
      }

      /* 자식 선택자(하위 선택자) */
      div > span {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <h2>조합 선택자(Combinator selectors)</h2>
    둘 이상의 단순 선택자를 포함 할 수 있다.<br />
    단순 선택자 사이에 결합자(+)를 포함 할 수 있다.<br />
    <div>
      <p>Paragraph 1 in the div.</p>
      <p>Paragraph 2 in the div.</p>
      <section><p>Paragraph 3 in the div.</p></section> 
      <!--section: width:100%-->
    </div>
    <div>
      <span>Span 1 in the div.</span><br />
      <span>Span 2 in the div.</span><br />
      <section><span>Span 3 in the div.</span></section>
    </div>

    <p>Paragraph 4. Not in the div.</p>
    <p>Paragraph 5. Not in the div.</p>
    <br /><br />
  </body>
</html>

728x90
반응형
저작자표시 비영리 변경금지

'[CSS]' 카테고리의 다른 글

[CSS] hover 가상클래스( : ) 선택자  (0) 2024.02.20
[CSS] hover 가상클래스( : ) 선택자  (0) 2024.02.20
[CSS] div  (0) 2024.02.19
[CSS] border  (0) 2024.02.19
[CSS] <style = "background : ~~">  (0) 2024.02.19

+ Recent posts

티스토리툴바