[html/css] 선택자 사용법 ( 종류들 ) 2편

IT/Programming

by Design_Life 2020. 7. 9. 12:05

선택자 사용법 ( 종류들 ) 1편

[html/CSS] 선택자 사용법 ( 종류들 ) 1편

CSS를 사용하려면 반드시 짚고 넘어 가야 할 부분이죠 ㅎㅎ 선택자란 무엇일까요?? 이름에서 나와있듯이 특정한 요소를 선택 ( 지칭 ) 해주는 것입니다. 특정 요소를 선택하여 스타일을 바꾸는 것

design-in-life.tistory.com

선택자 사용법 ( 종류들 ) 1편하고 반드시 동시에 보기를 권합니다.

1편하고 2편하고 동시에 봐야지만, 사용법을 익히고 이해 하실 수 있습니다.

아래 보여지는 코드는 내부 스타일 (Internal Style Sheet) 로 작성했습니다.

( 혹시, 내부 스타일을 모르신다면 css공부하기 1편을 참고 해주세요 )

세세한 설명은 아래 코드내 주석처리를 참고해주세요

반드시 1편 내용과 같이 보시기를 권합니다.

( 아래 코드를 보고 어떤 식으로 사용되는지 이해 하세요 ~!! )

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Selectors</title>
	<style>
      
		div{ border: 3px solid #F08080; }
	  
       /* -----------------------------------*/
      /* Sibling */
      div ~ p { background-color: #FFE4E1; }
      /* div ~ p 는 : div 태그 보다 위치상 뒤에 있는 것  */
      div + p { background-color: #FFE4E1; }
      /* div 태그 바로 뒤 태그만 선택  */

       /* -----------------------------------*/
     /* input 스타일 설정 ( check box ) */
   	    span { margin-left: 5px; }
		input { color: #FFEFD5; }
		input:checked + span { color: #CD853F; }

      /* -----------------------------------*/
     /* 의사 코드 */
     div.first{ border: 3px solid #008000; }
     div.second{ border: 3px solid #FFD700; }
     p:last-child { 
			color: red;
			font-weight: bold;
		}
     /* p:first-child  첫 번째 자식 
      p:nth-child(2n)	2의 배수 자식
      p:nth-last-child(3n)	뒤에서 3의 배수 자식
      p:first-of-type  첫 번째 자식
      */
      
       /* -----------------------------------*/
      /* pseudo-element */
      p::first-letter { /* 택스트 첫 글자만 선택함 */
     /* p::first-line   택스트 첫 라인 */
     /* p::before    택스트 앞 부분 */
     /* p::after   택스트 뒷 부분 */
     /* p::selection   택스트 특정 부분 드래그 할때.. */
     /* 여러 요소를 동시 적용이 가능하다. */     
          
			color: #FF4500;
			font-size: 2em;
		}/* css3부터 :: 가 요소, : 클래스로 구분함 */
      
       /* -----------------------------------*/
      /* attribute selectors */
      [title] {
			background: black;
			color: yellow;
		}
      [title="first h2"] {} /* title에서 first h2인 속성 선택 */
      [title~="first"] {} /* first 문자열을 포함하는 것 선택 */
      [title|="first"] {} /* firtst와 -(하이픈) 로 시작하는 문자열 선택 (혹은, first만 이거나 ) */
      [title^="first"] {} /* firtst로 시작하는 문자열 선택 ( first만 X , 순서가 바꾸면 X (first가 먼저 나와야함)) */
      [title$="first"] {} /* first로 끝나는 요소 선택 */
      [title*="first"] {} /* first가 들어간 모든 요소 선택 */	
  	
    input[type="text"] {
			width: 150px;
			display: block;
			background-color: #FFEFD5;
			margin-bottom: 10px;
		}
     input[type="password"] {
			width: 130px;
			display: block;
			background-color: #90EE90;
			border: 2px solid red;
      }
   
      
  </style>
</head>

<body>



	<div>
		<p>이 p 태그는 div 태그의 child 입니다!</p>
	</div>
  
	<p>이 p 태그 : div ~ p ( div 뒤 ) , div + p (div 바로 뒤 )에 속함 </p>






	<h1>input 요소의 스타일 설정</h1>
 <form>
		<input type="checkbox" name="lecture" value="html" checked="checked"><span>HTML</span><br>
		<input type="checkbox" name="lecture" value="cpp" disabled="disabled"><span>C++</span>	
      <!-- disabled="disabled 는 사용 불가를 나타냄 -->
 </form>
  
  
  
  
  
  <h1>:last-child를 이용한 선택</h1>
  
	<div class="first">
		<div class="second">
			<p>이 p 태그는 div 태그의 첫 번째 child 입니다!</p>
			<p>이 p 태그는 div 태그의 마지막 child 입니다!</p>
		</div>
	</div>
  


</body>

</html>

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

[html/CSS] 선택자 사용법 ( 종류들 ) 1편 (0)	2020.07.09
[html/css] 의사클래스 ( a:link, a:visited, a:active, a:hover) 사용법 (0)	2020.07.08
CSS 공부 하기 (1편) (0)	2020.06.18
C언어, C++, Java, Python 장단점 / 선택 / 활용분야 (0)	2020.06.11