[CSS3] HTML/CSS 14일차

HTML / CSS

✔ Preview

대괄호 속성 선택자, 다중 class, z-index, 반응형 미디어쿼리

---

✍ Summary

대괄호 속성 선택자

: css 내에서 [ ](대괄호) 사이에 찾으려는 속성을 지정해 원하는 속성만 스타일을 지정할 수 있다.

/* class명이 col-로 시작하면 스타일 적용 */
[class *="col-"] {
	box-sizing: border-box;
	float: left;
	padding: 0 10px;
}

 

 

다중 class

: HTML에서 여러개의 class 값을 부여할 수 있다. 부여하려고 하는 class명 사이에 공백(space)를 넣어주면 css에 작성된 순서대로 실행된다.

<article class="col-12 col-xs-12">
	<figure>
		<img class="img-responsive img-thumbnail" src="images/img1.jpg">
		<p>치악산 복숭아<br>당도최고.</p>
	</figure>
</article>

 

 

z-index

: 요소의 수직 위치를 결정하는 속성으로서 요소가 겹치게 배치된 경우 주로 사용한다. z-index의 숫자가 클수록 위로 올라오고 , 숫자가 작을수록 아래로 내려간다. (음수로도 설정 가능)

출처: https://velog.io/@kskim625/%ED%9A%A8%EC%9C%A8%EC%A0%81%EC%9D%B8-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-2

#wrapper {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
}

 

 

미디어쿼리 (Media Query)

: 반응형 웹페이지를 만들 때 쓰이는 쿼리로서 css를 통해 어떤 스타일을 선택적으로 적용하려 할 때 사용한다. @media의 형태로 사용하며 and나 or 등의 연산자로 정의할 수 있다. 이를 통해 좁은 화면, 넓은 화면에 구애받지 않고 다양한 스타일링을 구현할 수 있다.

@media all and (min-width: 500px) { /* 500px ~ */
	background-color: black;
}