step02. - 01~06 selector (선택자)
<style>
/* 요소명 선택자 */
div{
border-width: 1px;
border-style: solid;
border-color: #ff0000;
}
/* 클래스 선택자 */
.bg-yellow{
background-color: #ffff00;
}
/* 아이디 선택자 */
#myDiv{
color: #0000ff;
}
</style>
</head>
<body>
<div>div1</div>
<div class="bg-yellow">div2</div>
<div class="bg-yellow">div3</div>
<div class="bg-yellow">div4</div>
<div id="myDiv">div5</div>
</body>어떤 항목의 css를 작성할지, 그것을 결정하는 위치가 바로 selector(선택자)이다. element(요소)가 될 수도 있고, id가 될 수도 있고, class가 될 수도 있다.
- 요소의 경우는 그대로 작성하면 된다. 작성한 요소에 해당하는 모든 곳의 css에 적용된다.
- id의 경우 앞에 #을 붙여서 작성한다. id는 유일하기때문에 해당하는 곳에만 css가 적용된다.
- class의 경우 앞에 .을 붙여서 작성한다. class는 일종의 group이기 때문에, 해당 class의 모든 곳에서 css가 적용된다.
<style>
/*div{
padding: 10px;
background-color: #000;
color: #fff;
}*/
/*.animals{
padding: 10px;
background-color: #000;
color: #fff;
}*/
/* div 요소 이면서 클래스 속성값이 animals 인 요소 선택*/
div.animals{
padding: 10px;
background-color: #000;
color: #fff;
}
/*
선택자를 붙여서 쓰면 and 조건으로 문서를 선택한다.
div.animals => 요소명이 div 이면서 클래스명이 animal
p.friends => 요소명이 p 이면서 클래스명이 friends
div.a.b => 요소명이 div 이고 클래스명이 a 와 b
.a.b => 클래스명이 a 와 b
*/
</style>
</head>
<body>
<div class="animals">
<h2>Dog</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis accusantium dignissimos minima ipsa, ut a exercitationem reiciendis quam dolores, nostrum ducimus, adipisci eius alias quia. Vitae magni dolorum delectus amet!</p>
</div>
<div class="animals">
<h2>Cat</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis accusantium dignissimos minima ipsa, ut a exercitationem reiciendis quam dolores, nostrum ducimus, adipisci eius alias quia. Vitae magni dolorum delectus amet!</p>
</div>
<div class="friends">
<h2>김구라</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita at esse facilis nisi quibusdam voluptates! Deserunt debitis error soluta, commodi labore et, quidem, ex blanditiis quisquam asperiores quasi laboriosam consequatur.</p>
</div>
<p class="animals">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla repudiandae ea iste, natus mollitia explicabo recusandae odio et consequuntur sapiente beatae veritatis adipisci, aliquid sequi porro maiores ullam enim. Repudiandae.</p>
</body>요소들 중에서도 특정 몇 가지만 따로 css를 적용할 수는 없을까? 가능하다.
- element, id, class를 붙여쓰게 되면 'and' 조건이 된다. div 요소 중 class가 animals인 css를 작성하기 위해서 'div.animals' 를 작성했다. 이는 html을 작성하는 것에도 도움이 된다. 'div.animals'를 입력하고 tab을 하게 되면 해당 animals 라는 class를 가지는 div 요소가 만들어진다. 이렇게 기억한다면 html과 css를 작성하는 것에 혼동이 줄고 편의성도 더해질 것이다.
<style> .bg-green{ background-color: #00ff00; } .text-bold{ font-weight: bold; } .text-red{ color: #ff0000; } </style> </head> <body> <p class="bg-green">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero magnam autem, accusantium quos quae assumenda a facere ut quod blanditiis voluptate ratione voluptatum debitis ipsam delectus quas minima corporis dicta?</p> <p class="bg-green text-bold">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam itaque temporibus facilis dolor ex earum minima rerum magnam beatae praesentium, molestiae. Voluptatum cumque voluptatibus molestiae eligendi voluptate recusandae, ab nihil!</p> <p class="bg-green text-bold text-red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni et incidunt eveniet nulla, voluptatibus, dolores reiciendis ipsam rerum aliquam ea explicabo assumenda fugit ullam quia nemo inventore. Repudiandae, autem, magnam.</p> </body> - class는 여러 개를 가질 수 있다. class 속성에서 띄어쓰기로 구분한다. 구분한 class의 css를 class.a.b{ } 로 작성한다.
- 띄어쓰면 안된다. 띄어쓰면 의미가 완전히 달라진다. 바로 다음의 예시를 보자.
<style> .container{ background-color: #cecece; } /* .container 의 자손 중에서 p 요소 선택 */ .container p{ /* 띄어 쓰기 : 자손 선택 */ color: #ffff00; } /* 특정 class의 자식 요소 중에 또 특정 class라면?*/ .container .aa{ color:red; } </style> </head> <body> <div class="container"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem voluptates, velit, obcaecati ipsam consectetur iusto magnam natus qui facilis non debitis corrupti nesciunt sit. Omnis voluptatem at, soluta laboriosam dignissimos.</p> <p class="aa">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestias mollitia facilis consequuntur quis, temporibus expedita. Dolorum, veritatis! Dolorum possimus modi earum delectus aut! Commodi ducimus architecto aliquid dolores odit?</p> <div> <span class="aa">test1</span> <p>test2</p> </div> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates amet consequatur, eos impedit exercitationem aliquam qui temporibus cupiditate non illum excepturi, ad debitis dolore sapiente, neque laudantium! Doloribus, obcaecati, autem!</p> </body> - 자식의 개념이 있고, 자손의 개념이 있다. 이것은 글자 그대로 받아들이면 된다. 자식은 바로 직계를 말한다. 예시에서 <div> 요소 안의 <p> 요소는 부모 자식의 관계이다. 만약 <div> 요소 안에 다른 <div> 요소가 있고, 그 자식 <div> 요소 안에 <p> 요소가 있다면 이것은 가장 상위의 <div> 요소와 부모 자식의 관계가 아니다. 이런 직계가 아닌 관계는 자손이라고 말한다. 나와 조부모님을 생각하면 된다.
- 선택자를 띄어쓰기로 작성하게 되면 앞선 무언가에 해당하는 모든 자손들에 대한 css를 작성하게 되는 것이다. 예시의 경우는 각각 container class를 가지는 모든 자손 <p> 요소, container class를 가지는 모든 자손 중에 aa class를 가지는 문서 객체의 css를 작성하겠다는 의미이다.
<style> /* .container 의 자손 중에서 p 선택*/ .container p{ background-color: yellow; } /* .constiner 의 자식 중에서 p 선택 */ .container > p{ color: blue; } /* 조금 더 구체적으로 선택 */ .container > .sub > p{ font-weight: bold; } </style> </head> <body> <div class="container"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint error quasi exercitationem, quis voluptates! Consectetur, hic! Vel libero, maxime itaque error! Distinctio nam ducimus molestias, laboriosam aspernatur fuga cum sapiente!</p> <div class="sub"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus reprehenderit ex quaerat aut, culpa error eligendi praesentium, magnam, corporis doloremque accusantium obcaecati! Necessitatibus dolore id corrupti velit nesciunt numquam fugit?</p> </div> </div> </body> - 띄어쓰기로 자손 객체들에 대한 css를 작성하는 것과 다르게, 자식 객체에 대한 css를 작성할 때는 '>'(꺾새)를 사용한다. 마찬가지로 꺾새를 여러차례 사용할 수도 있다.
<style> /* 모두 선택 */ *{ background-color: #cecece; } /* , 로 구분해서 다중 선택 */ h1, .my, .your{ color: blue; } </style> </head> <body> <h1>h1 요소입니다.</h1> <p class="my"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur animi corporis pariatur facilis blanditiis saepe deserunt itaque excepturi atque tempora, doloribus dolores consequatur sit incidunt mollitia perferendis rem nihil tempore. </p> <p class="your"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab officiis labore error itaque, optio dolorem fugiat ullam. Tenetur incidunt, quasi et asperiores adipisci excepturi, sapiente iure architecto eligendi delectus id? </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit sapiente totam, voluptas atque, illum earum ut harum repellendus odio aperiam! Ipsum animi sapiente aut, hic ipsam cupiditate laudantium necessitatibus est.</p> </body> - * : wild card 선택자이다. 해당하는 모든 것을 선택하겠다는 의미이다.
- 띄어쓰기나 꺾새가 아니라 ,(쉼표)로 이어서 표기한다면 그것은 해당하는 element나 id, class에 css를 모두 적용하겠다는 다중 선택의 의미이다.
'뒷북 정리 (국비 교육) > css' 카테고리의 다른 글
| [css] step08. pseudo element (0) | 2021.12.13 |
|---|---|
| [css] step07. position (0) | 2021.12.13 |
| [css] step06. pseudo class (0) | 2021.12.13 |
| [css] step03~05. margin / padding / border (0) | 2021.12.13 |
| [css] step01. css란? (0) | 2021.12.13 |
댓글