구리

TIL_210525_CSS_고급 선택자, 미디어 쿼리, Grid 본문

HTML,CSS

TIL_210525_CSS_고급 선택자, 미디어 쿼리, Grid

guriguriguri 2021. 5. 25. 15:52

목차

고급 선택자 - 자식 태그, 형제 태그 선택

link style : navi 

속성 선택자

미디어 쿼리
css를 이용한 버튼을 화면 세로 길이 중앙에 배치하기
미디어 쿼리 사용하여 화면 크기에 따른 배경화면 바꾸기
css- grid 속성

 

 

 

 

 

고급 선택자 - 자식 태그, 형제 태그 선택

css 적용시 부모 태그 안에 속해 있는 자식 태그 선택시 보통 부모태그 > 자식 태그로 명시함

형제 태그들 선택시 두 가지 방법이 있다

h1 + p {} 	/* h1 태그와 형제 요소인 p태그중 첫번째 태그*/
h1 ~ p {} 	/*h1 태그와 형제인 모든 p 태그들 */

 

다음은 css 자식 태그, 형제 태그 선택자 예시다

더보기 
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>고급 선택자:adj_child.html</title>
<style>
	body{
		background-color: #eee;
	}
	section{
		width:500px;
		padding: 10px;
		background-color: #fff;
		border: 1px solid #ccc;
		line-height: 2;
	}
	h1+p{	/*h1태그와 형제 요소인 p 태그 중 첫번째 태그 */
		background-color: #222;
		color: #fff;
	}
	
</style>
</head>

<body>
	<section>
		<h1>예약 방법 & 사용 요금</h1>
		<p>
			아직 온라인 예약 신청이 준비되어 있지 않습니다. <br>전화(xxx-xxxx-xxxx)로 문의 바랍니다.
		</p>
		<div>
			<p>가족실(2~4인) : 60,000원/일</p>
			<p>도미토리(4인 공용) : 25,000원/일</p>
	</section>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>고급 선택자:sibling.html</title>
<style>
	body{
		background-color: #eee;
	}
	section{
		width:600px;
		margin: 20px auto;	/*margin의 auto는 가운데 정렬 기능도 포함 */
							/*html4의 center 태그 역할*/		
	}
	p{
		width:500px;
		padding: 10px;
		background-color: #fff;
		border: 1px solid #ccc;
		line-height: 2;
	}
	h1 ~ p {		/*h1과 형제인 p태그들*/
		background-color: #222;
		color: #fff;
	}
	
	h1+p{}	/*h1태그와 형제인 첫번째 p태그*/
	
	section > p {} /*section의 자식 요소중 p태그들*/
</style>
</head>

<body>
	<section>
		<h1>예약 방법 & 이용 요금</h1>
		<p>
			아직 온라인 예약 신청이 준비되어 있지 않습니다. <br>전화(xxx-xxxx-xxxx)로 문의 바랍니다.
		</p>
		<p>가족실(2~4인) : 60,000원/일</p>
		<p>도미토리(4인 공용) : 25,000원/일</p>
	</section>
</body>
</html>

첫번째 파일 css에선 h1+p라고 했기에 첫번째 p태그만 css 적용
h1~p{}로 명시했기에 h1과 형제 태그인 모든 p태그에 동일 css 적용

 

 

link style : navi

문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획, 자주 쓰이는 예제는 메뉴, 목차, 색인

다음은 <nav>,<ul>,<li> 태그를 이용해 화면 목차를 나타낸 예시다

더보기 
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>link 스타일:navi.html</title>
<style>
	.container{
		width:960px;
		margin:0 auto;
	}
	.navi{
		width:960px;
		height: 60px;
		padding-bottom: 10px;
		border-bottom: 2px solid #ccc;
	}
	
	.navi ul{
		list-style: none;
		padding-top: 10px;
		padding-bottom: 5px;
	}
	
	.navi ul li{
		float: left;
		width: 150px;
		padding: 10px;
	}
	
	.navi a:link, .navi a:visited{
		display: block;
		font-size: 14px;
		color: #000;
		padding: 10px;
		text-decoration: none;
		text-align: center;
	}
	.navi a:hover, .navi a:focus {
		background-color: #222;
		color: #fff;
	}
	.navi a:active{
		background-color: #f00;
	}
</style>
</head>

<body>
	<div class="container">
		<nav class="navi">
			<ul>
				<li><a href="#">이용 안내</a></li>
				<li><a href="#">객실 소개</a></li>
				<li><a href="#">예약 방법 및 요금</a></li>
				<li><a href="#">예약하기</a></li>
			</ul>
		</nav>
	</div>
</body>
</html>

 

메뉴에 마우스를 올리면 해당 메뉴의 배경이 검정색으로 변하며 클릭시 적색으로 변한다

이와 같이 반응형 웹에서 메뉴나 목차 구성시 <ul>,<li> 태그 활용하는 것이 편리하다

 

 

 

 

속성 선택자

보통 태그를 선택하여 css 적용시 태그명 {} 이렇게 작성하지만 동일 태그에서도 다른 속성을 지닌 태그를 선택하고 싶을 때 다음과 같이 사용한다

태그명[태그 속성]{}

/** 예시 **/
a[class="button"]{} /** 클래스명이 "button"과 동일**/
a[class~="button"]{} /** 클래스명이 "button"을 포함**/
a[class$="button"]{} /** 클래스명이 "button"으로 끝나는**/
a[class^="button"]{} /** 클래스명이 "button"으로 시작하는**/
a[class|="button"]{} /** 클래스명이 "button"또는 "button-"으로 시작하는**/

 

예시를 통해 쉽게 이해할 수 있다

더보기 
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자:attr-1.html</title>
<style>
	ul li{
		list-style: none;
		float:left;
		padding: 10px;
	}
	li a{
		padding:5px 20px;
		font-size: 14px;
		text-decoration: none;
		font-weight: bold;
	}
	
	a[href]{
		background-color: yellow;
		border: 1px solid #ccc;
		font-weight: normal;
	}
	
</style>
</head>

<body>
	<ul>
		<li><a>메인 메뉴 : </a></li>
		<li><a href="#">메뉴 1</a></li>
		<li><a href="#">메뉴 2</a></li>
		<li><a href="#">메뉴 3</a></li>
		<li><a href="#">메뉴 4</a></li>
	</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자:attr-2.html</title>
<style>
	ul{
		list-style: none;
	}
	li{
		padding: 5px 30px;
	}
	li a{
		font-size: 16px;
		text-decoration: none;
		color: #000;
	}
	a[target="_blank"]{
		padding-right: 30px;
		background: url('images/newwindow.png') no-repeat center right; /*그림 반복하지 않고 가운데 오른쪽 정렬*/
	}
</style>
</head>

<body>
	<ul>
		<li><a href="https://html.spec.whatwg.org" target="_blank">HTML</a></li>
		<li><a href="https://www.w3.org/TR/selectors">CSS Selector Level 3</a></li>
		<li><a href="https://www.w3.org/TR/css3-mediaqueries">미디어쿼리</a></li>
	</ul>
</body>
</html>

첫번째 예시에서 a 태그중 href 속성을 지닌 태그만 따로 css 적용 결과
a 태그 중 a[target="_blank"]인 태그만 따로 css 적용하여 옆에 img 첨부

 

 

 

미디어 쿼리 

css3 별도로 추가된 내용, 반응형 웹페이지로 <meta> 태그가 필수이며 @media 기기 종류~ 는 옵션

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

css를 이용한 버튼을 화면 세로 길이 중앙에 배치하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- width=device-width 접속한 기기 가르코기를 추출해 현 브라우저의 width로 설정  -->
  <!-- initial-scale=1.0 : 가로 크기를 기본 1(=100%) 스케일로 설정  -->
  <title>세로로 중앙에 배치하기 : center.html</title>
  <style>
	*{
		margin: 0;
		box-sizing: border-box;
	}
	body{
		background: url('images/bg5.jpg') no-repeat left top fixed;
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
	}
  </style>  
</head>

<body>
  <button>클릭!</button>             
</body>
</html>

화면 크기를 달리 해도 버튼은 항상 중앙에 위치한다

 

 

 

미디어 쿼리 사용하여 화면 크기에 따른 배경화면 바꾸기

더보기 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>미디어 쿼리 사용하기 : mq-result.html</title>
  <style>
    body {
      background: url(images/bg0.jpg) no-repeat fixed;  /* 기본 배경 이미지 지정 */
      background-size: cover;
    }
    
    /** 가로크기 : 1024일 경우 **/
    @media screen and (max-width:1024px){
    	body{
    		background: url('images/bg1.jpg') no-repeat fixed;
    		background-size: cover;
    	}
    }
    
    /** 가로크기 : 768일 경우 **/
    @media screen and (max-width:768px){
    	body{
    		background: url('images/bg2.jpg') no-repeat fixed;
    		background-size: cover;
    	}
    }
    
   /** 가로크기 : 320이하일 경우 **/
    @media screen and (max-width:1024px){
    	body{
    		background: url('images/bg3.jpg') no-repeat fixed;
    		background-size: cover;
    	}
    }

  </style>
</head>
<body>
  
</body>
</html>

화면이 클 경우 왼쪽과 같이, 줄일 경우 오른쪽과 같이 배경화면이 바뀜

 

 

 

css에서 grid란?

Flex와 차이점을 비교하자면 Flex는 한 방향 레이아웃 시스템(가로 혹은 세로)이고 Grid는 두 방향(가로-세로) 레이아웃 시스템이다. 

<div class="container">
	<div class="item">A</div>
	<div class="item">B</div>
</div>

다음과 같은 코드에서 부모 요소인 div.container를 Grid Container(그리드 컨테이너)라고 부르고, 자식 요소인 div.item들을 Grid Item(그리드 아이템)이라고 부른다.

즉,  "컨테이너가 Grid의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것”이라고 생각하면 된다.

Grid는 컨테이너에 display:grid;  를 설정하는 것으로 시작한다. 

 

grid를 활용한 예시는 다음과 같다

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Grid Layout : grid-1.html</title>
<style>
	#wrapper{
		display: grid;
		grid-templete-columns:repeat(auto-fit, minmax(200px, 1fr));
		grid-templete-rows:minmax(50px, auto);
	}
	
	.items{
		padding: 10px;
		background-color: #eee;
	}
	
	.items:nth-child(odd){
		background-color: #bbb;
	}
</style>

</head>
<body>
	<div id="wrapper">
		<div class="items">Lorem ipsum dolor sit amet consectetur
			adipisicing elit. Amet, reprehenderit.Lorem ipsum dolor, sit amet
			consectetur adipisicing elit.</div>
		<div class="items">Lorem ipsum dolor, sit amet consectetur
			adipisicing elit.Lorem ipsum dolor, sit amet consectetur adipisicing
			elit</div>
		<div class="items">Lorem ipsum dolor sit amet.Lorem ipsum dolor,
			sit amet consectetur adipisicing elit</div>
		<div class="items">Lorem ipsum dolor sit.Lorem ipsum dolor, sit
			amet consectetur adipisicing elit</div>
		<div class="items">Lorem, ipsum dolor.</div>
	</div>
</body>
</html>

예시2

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>상품 갤러리 만들기 : grid-gallery-result.html</title>
  <link rel="stylesheet" href="css/gallery-result.css">
</head>

<body>
  <div class="wrapper">
  
    <div class="card">
      <header>
        <h3>사진 제목</h3>
      </header>
      <figure>
        <img src="images\cup-1.jpg">
      </figure>
      <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
    </div>

    <div class="card">
      <header>
        <h3>사진 제목</h3>
      </header>
      <figure>
        <img src="images\cup-2.jpg">
      </figure>
      <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
    </div>

    <div class="card">
      <header>
        <h3>사진 제목</h3>
      </header>
      <figure>
        <img src="images\cup-3.jpg">
      </figure>
      <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
    </div> 
    
    <div class="card">
      <header>
        <h3>사진 제목</h3>
      </header>
      <figure>
        <img src="images\cup-4.jpg">
      </figure>
      <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
    </div>     

    <div class="card">
        <header>
          <h3>사진 제목</h3>
        </header>
        <figure>
          <img src="images\cup-5.jpg">
        </figure>
        <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
      </div>
  
      <div class="card">
        <header>
          <h3>사진 제목</h3>
        </header>
        <figure>
          <img src="images\cup-6.jpg">
        </figure>
        <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
      </div>
  
      <div class="card">
        <header>
          <h3>사진 제목</h3>
        </header>
        <figure>
          <img src="images\cup-7.jpg">
        </figure>
        <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
      </div> 
      
      <div class="card">
        <header>
          <h3>사진 제목</h3>
        </header>
        <figure>
          <img src="images\cup-8.jpg">
        </figure>
        <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
      </div> 
             
  </div>
</body>
</html>
* {
  box-sizing: border-box;
}
body {
  background-color:#eee;
  font-size:16px;
}

.wrapper{
	display: grid;
	grid-templete-columns:repeat(auto-fit, minmax(320px, 1fr));
	grid-gap:1rem;
}

.card{
	background-color: #fff;
	box-shadow: 0px 1px 5px #222;
}

.card > header{
	font-size: 1.5rem;
	padding: 0.5rem;
}

.card > p {
	padding: 0.5rem;
	line-height: 1.6rem;
}

.card > img{
	max-width: 100%;
}

'HTML,CSS' 카테고리의 다른 글

CSS - block 요소, inline 요소, z-index  (0) 2021.06.01
TIL_210524_CSS 관련(border, image,float,box) 예시  (0) 2021.05.24
HTML - input 태그 date 타입 관련 예시  (0) 2021.05.21
TIL_210506_프로젝트 문제 해결(simple_shop 회원가입 완료)  (0) 2021.05.06
TIL_210504_CSS 연습 및 예제 (simple_shop 기본 틀)  (0) 2021.05.04
'HTML,CSS' Related Articles more