HTML,CSS - CSS Study(3)

1. Grid 레이아웃

59강) Grid 레이아웃 학습 개요

손쉬운 격자형 레이아웃이다. 이전에는 격자형 레이아웃을 바로 할 수 없었다.

1) Grid 용어 :

Track : 한 열을 의미한다.
Gutter : 열과 열의 사이 간격
Cell : 그리드 중 1칸을 의미한다.
Area : 여러 Cell들의 묶음을 의미한다.

2) Grid 기본 속성 :

grid-template-columns : 그리드의 열을 구성.
grid-template-rows : 그리드의 행을 구성.

3) 실습 코드 :

.grid-box{
	display: grid;
	grid-template-columns: 100px 100px 100px;
	grid-template-rows: 100px 100px;
}

60강) 고정 크기 Track 만들기

1) 고정 크기 Track 만들기

.grid-box{
	display: grid;
	grid-template-columns: 100px 100px 100px;
	grid-template-rows: 100px 100px;
	
	/* column-gap: 10px; // 가로만 갭이 있다. */
	gap : 10px;	// 가로, 세로 다 갭을 생성. 
}

2) 그리드로 rland 웹 구조 짜보기

index.html

<body>
	<section class="rland">
		<h1>알랜드 소개</h1>
		
		<article class="grid-box">
		
		</article>
		
	</section>
</body>

index.css

.grid-box{
	display: grid;
	grid-template-columns: 100px 240px;
	grid-template-rows: 35px 65px;
	
	column-gap: 20px;
}

61강) 가변 크기 Track 만들기

1) 가변 크기 Track 만들기

너비를 동일한 크기로 설정하기 : %, auto, fr(fraction) 이용
너비를 동일한 크기로 설정하기 위해서는 %는 정확하지 않고 auto는 여백을 나눠서 이용하고 fr은 박스의 크기를 나눠서 이용하기 때문에 fr을 이용하는 것이 바람직하다.
왜냐하면, 여백이 없으면 auto는 동작하지 않기 때문에 fr을 이용해야 하기 때문이다.
또한, fr과 auto를 함께 사용하면 auto는 여백을 가질 수 없다.(fr이 다 차지한다.)
실습 코드 1 :
- index.html

<body>
	<section class="rland">
		<h1>알랜드 소개</h1>
		
		<article class="grid-box">
			<div>1</div>
			<div>2</div>
		</article>
		
	</section>
</body>

실습 코드 2 :
- index.css

.grid-box{
	display: grid;
	grid-template-columns: 100px 1fr;			// 이렇게하면 첫 열은 고정이고 두번째 열은 반응형에 의해 가변 가능하다.
	/* grid-template-columns: auto auto; */
	
	grid-template-rows: 100px 100px;

}

.grid-box>div{
	width: 50px;
}

.grid-box>div:first-child{
	background-color: blue;
}

.grid-box>div:nth-child(2){
	background-color: green;
}

2) 반복된 크기 설정을 위한 repeat()

grid-template-columns: repeat(3, 1fr); : 1fr 1fr 1fr과 같은 의미이다.
grid-template-columns: 30px repeat(3, 1fr) 30px; : 1fr 1fr 1fr 앞뒤에 공간을 둘 수 있다.
grid-template-columns: 60px repeat(3, 1fr 2fr); : 1fr 2fr 1fr 2fr 1fr 2fr 이런 반복도 repeat로 간단하게 쓸 수 있다.
초기 값을 60px로 설정해 놓은 박스도 반응형에 의해 창의 크기가 커졌을 때, 그 박스의 크기도 크게 만들 수 있다.
- grid-template-columns: minmax(60px, auto) repeat(3, 1fr 2fr);
- grid-template-columns: minmax(60px, 100px) repeat(3, 1fr 2fr);

실습 코드 :

.grid-box{
	display: grid;
	grid-template-columns: minmax(60px, 100px) repeat(2, 100px);
	
	grid-template-rows: 100px 100px;

}

.grid-box>div{
	width: 50px;
}

.grid-box>div:first-child{
	/* background-color: blue; */
}

.grid-box>div:nth-child(2){
	/* background-color: green; */
}

<body>
	<section class="rland">
		<h1>알랜드 소개</h1>
		
		<article class="grid-box">
			<div>111111111</div>
			<div>2</div>
		</article>
		
	</section>
</body>

62강) 줄번호로 아이템 배치하기

1) 줄번호로 아이템 배치하기

실습 코드 :

.grid-box{
	display: grid;
	grid-template-columns: minmax(60px, 100px) repeat(2, 100px);
	
	grid-template-rows: 100px 100px;

}

.grid-box>div{
	width: 50px;
}

.grid-box>div:first-child{
	background-color: red;
	width: 100%						// 100%도 매우 중요하다! .grid-box로부터 영향을 받는다.
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 3;
}

.grid-box>div:nth-child(2){
	background-color: yellowgreen;
	width: 100%;
}

2) 축약형으로 줄번호로 아이템 배치하기

실습 코드 :

.grid-box{
	display: grid;
	grid-template-columns: minmax(60px, 100px) repeat(2, 100px);
	grid-template-rows: 100px 100px;
}

.grid-box>div{
	width: 50px;
}

.grid-box>div:first-child{
	background-color: red;
	
	width: 100%				// 100%도 매우 중요하다! .grid-box로부터 영향을 받는다.
	
	grid-column: 2/4;		// 'grid-column: 2 / span 2' 라고 쓰면 같은 의미로 사용 가능하다!
	// grid-column: -1 / -2;		// 마이너스를 쓰면 오른쪽 부터 박스를 채워 나간다.	

	grid-row: 2/3;
}

.grid-box>div:nth-child(2){
	background-color: yellowgreen;
	width: 100%;
}

3) 이를 응용하여 2개의 박스를 겹치게 가능함.

실습 코드 :

.grid-box{
	display: grid;
	grid-template-columns: minmax(60px, 100px) repeat(2, 100px);
	grid-template-rows: 100px 100px;
}

.grid-box>div{
	width: 50px;
}

.grid-box>div:first-child{
	background-color: red;
	
	width: 100%				// 100%도 매우 중요하다! .grid-box로부터 영향을 받는다.
	
	grid-column: 1 /span 3;	
	grid-row: 1 / span 2;
}

.grid-box>div:nth-child(2){
	background-color: yellowgreen;
	width: 100%;
	
	grid-column: 3 /span 2;	
	grid-row: 2 / span 2;
}

63강) 알랜드 영역의 레이아웃

실습 코드(수정 전) 1 :
- index.css

.rland-item{
	background-color: gray;
	display: grid;
	grid-template-columns: 100px 1fr; 	// 그리드의 공간 나누기
	grid-template-rows: 35px 65px;
	column-gap: 20px;
}

	.rland-item>h1:nth-child(1){ 	// h1 부분! 
		grid-column: 2 / span 1;		// 그리드의 칸수 나누기
		grid-row: 1 / span 1;
	}
	
	.rland-item>div:nth-child(2){ 	// div 부분! 
		grid-column: 1 / span 1;		// 그리드의 칸수 나누기 
		grid-row: 1 / span 2;
	}
	
		.rland-item>div:nth-child(2) img{ 
			width: 100%;			// 중요!!
			height: 100%;
		
		}	
	
	.rland-item>:nth-child(3){ 
		grid-column: 2 / span 1;		// 그리드의 칸수 나누기
		grid-row: 2 / span 1;
	}

실습 코드 2 :
- index.html

<body>
	<section class="rland">
		<h1>알랜드 소개</h1>
		<article class="rland-item">
		
		</article>
		
		<article class="rland-item">
			<h1>직접 만든 과일청을 맛보세요.</h1>
			<div><img src="images/17.jpg" alt="과일청"></div>
			<p>
				신선한 과일과 알랜드만의 레시피로
			</p>
		</article>
		
	</section>
</body>

실습 코드(수정 후) : article로 css 범위를 변경해서 사용한다!
- index.css

/* =========== rland-item ============ */

.rland{ 
	height: 530px;
	overflow: scroll;
	color: white;
	background: url("../images/2.jpg") no-repeat left top;
} 


.rland>article{
	background-color: gray;
	display: grid;
	grid-template-columns: 100px 1fr;		// 그리드의 공간 나누기
	grid-template-rows: 35px 65px;
	column-gap: 20px;
}

	.rland>article>:nth-child(1){ 	// h1 부분! 
		grid-column: 2 / span 1;		// 그리드의 칸수 나누기
		grid-row: 1 / span 1;
	}
	
	.rland>article>:nth-child(2){ 	// div 부분! 
		grid-column: 1 / span 1;		// 그리드의 칸수 나누기 
		grid-row: 1 / span 2;
	}
	
		.rland>article>div:nth-child(2) img{ 
			width: 100%;			// 중요!!
			height: 100%;
		
		}	
	
	.rland>article>:nth-child(3){ 
		grid-column: 2 / span 1;		// 그리드의 칸수 나누기
		grid-row: 2 / span 1;
	}

64강) 영역이름으로 아이템 배치하기

영역이름으로 아이템 배치하기
실습 코드 1 :
- grid.html

<body>
	<div class="wrapper">
		<div class="item1">1</div>
		<div class="item2">2</div>
		<div class="item3">3</div>
		<div class="item4">4</div>
	</div>
</body>

실습 코드 2 :
- grid.css

.wrapper{ 
	display: grid;
	grid-template-columns: 250px 1fr;
	grid-template-rows: 70px minmax(200px, auto) 100px;
	grid-template-areas:
	"header header"
	"aside main"
	"footer footer"
}

.item1{ 
	background-color: aquamarine; 
	grid-area: header;
}

.item2{ 
	background-color: blueviolet; 
	grid-area: aside;
}

.item3{ 
	background-color: yellowgreen; 
	grid-area: main;
}

.item4{ 
	background-color: violet;
	grid-area: footer;
}

Grid에 아이템을 자동으로 Track에 추가하기

.wrapper{ 
	grid-template-columns: repeat(auto-fit, minmax(100px, auto));
}

Grid에 자동확장이 가능인 격자형 레이아웃의 가장 간단한 코드 : 단순한 패턴으로 확장이 되는 아이템 배치

.wrapper{ 
	display:
	grid-auto-columns: 100px;		// auto-fill과 같은 의미이다.
	grid-auto-rows: 100px;
}

Grid에 자동확장이 가능인 격자형 레이아웃의 가장 간단한 코드 : 단순한 패턴으로 확장이 되는 아이템 배치

.wrapper{ 
	display: grid;
	
	grid-template-columns: repeat(4, 100px);
	grid-template-rows: repeat(3, 100px);
	grid-template-areas: 
	"hd hd hd hd"
	"sd main main main"
	"ft ft ft ft";
}

// Grid를 아래 같은 표현으로 더 간단하게 쓸 수 있다.
.wrapper{ 
	display: grid;
	
	grid-template: 
	"hd hd hd hd"			100px				// 우측 3개가 row: height이다.
	"sd main main main" 100px
	"ft ft ft ft"			100px
	100px 100px 100px 100px;

	// 아래측 4개가 col:width이다.
}

자동 아이템 배치(grid-auto-flow) :
- grid.css

.wrapper{ 
	display: grid;
	grid-template-columns: repeat(4, 100px);
	grid-template-rows: repeat(3, 100px);
	grid-auto-flow: row;			// 박스가 쌓이는 순서를 변경할 수 있다. 
	
}

.item1{ 
	background-color: aquamarine; 
	grid-area: header;
}

.item2{ 
	background-color: blueviolet; 
	grid-area: aside;
}

.item3{ 
	background-color: yellowgreen; 
	grid-area: main;
}

.item4{ 
	background-color: violet;
	grid-area: footer;
}

65강) 영역이름으로 아이템 배치하기

1) 영역이름으로 아이템 배치하기

첫 번째 방법 : 묵시적인 방법

.grid-box{ 
	display: grid;
	grid-template-columns: 250px 1fr;
	grid-template-rows: 70px minmax(200px, auto) 100px;
	grid-template-areas:
	"header header"
	"aside main"
	"footer footer"
}

.item1{ 
	grid-column: aside-start / main-end; 
	grid-row: header-start / header-end;
}

두 번째 방법 : 62강 참고!

2) 정렬하기

align-items: center; : 전체 아이템들을 수직으로 조정해준다.
justify-items: center; : 전체 아이템들을 수평으로 조정해준다.
justify-self: start; : 특정 아이템의 위치를 조정해준다.
justify-content: end; : 전체 아이템들을 감싸는 박스의 위치를 수평으로 조정해준다.(여백이 있어야 한다.)
align-content: end; : 전체 아이템들을 감싸는 박스의 위치를 수직으로 조정해준다.(여백이 있어야 한다.)

3) 정렬하기의 응용 :

align-content: space-between; : 전체 아이템들을 감싸는 박스의 위치를 수직 방향으로 벽면 양쪽에 위치할 수 있다. 여기에 justify-content: space-between; 까지 하면 네가지 귀퉁이에 아이템의 위치가 가능하다.
아이템에 margin-top: auto;로 여백을 줘서 정렬을 할 수 있다.

4) 정렬하는 방법을 요약하는 방법 :

align-items: center 와 justify-items: center;를 합친 경우
- place-items : center center;

align-content: space-between; 와 justify-content: end;를 합친 경우
- place-content : space-between end;

align-self: end; 와 justify-self start;를 합친 경우: - place-self : end start;

66강) Miultiple column Layout

신문이나 칼럼 같은 곳에서 아래와 같은 코드를 이용할 수 있다.
- 이러한 방식을 이용할 때, mdn에서 찾아보기!
multi-col.css

.multi-col-box{ 
	column-count: 3;
	column-gap: 10px;
	column-rule: 2px dashed red;
	
}

67강) CSS3를 이용한 트랜지션

CSS Transition :
- 속성의 값이 변화되는 과정을 보여주는 효과
CSS Transition은 초기값을 설정해줘야 한다.
- 실습 코드 :

.top-menu li>a{ 
	width: 100%;
	height: 100%;
	
	text-align: center;
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	background-color: #0006;
	color: #fff;
	
	top: 0%;					// 초기값 설정해줘서 transition을 이용해주자!
	transition: 1s;
}l

.top-menu li:hover>a{ 
	
	position: relative;
	top: -100%;				// top을 쓰기 위해서 position을 잡아줘야 한다.
								// 바로 쓸 수 없다. 초기화를 해줘야 한다.
}

`—

68강) CSS3에서 확장된 변형 속성 1

CSS3 참고할 사이트
Transform : Scale, Translate, Skew, Rotation, Matrix, Perspective
하지만, Transform을 이용해야 하는 이유는? 기존에도 Translate, Scale이 있었다. 하지만, 초기값을 설정해줘야 하는 것 때문에 불편하고 어색하다.
- transform : translate()를 이용한다.
- 그 차이를 알기 위해서 margin-top, top, transform-translate();
Transform을 이용하여 초기값을 설정하지 않아도 되는 경우
- 실습 코드 :

.top-menu li>a{ 
	width: 100%;
	height: 100%;
	
	text-align: center;
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	background-color: #0006;
	color: #fff;
	
	/* top: 0%;					// 초기값 설정해줘서 transition을 이용해주자! */
	transition: 1s;
}


.top-menu li:hover>a{ 
	
	position: relative;
	transform: translateY(-100%); 		// 이렇게 이용하면, 초기값을 설정하지 않아도 박스를 이동시킬 수 있다. 
}

69강) 알랜드 소개 섹션 스타일링

섹션 중 article에 hover할 경우, 스타일링

css에서 class 이름보다는 태그 이름으로 하는 것이 나중에 찾기에는 더 낫다.
- 태그로 하부구조를 구성하면 >로 구조를 구분한다.

하지만, css에서 class 이름을 잘 지으면 이게 더 사용하기에는 편하다.
- class이름으로 지으면 띄어쓰기로 구조를 구분된다.

/* =========== rland-item ============ */

.rland{ 
	height: 530px;
	overflow: scroll;
	color: white;
	background: url("../images/2.jpg") no-repeat left top;
} 


.rland>article{
	cursor : pointer;			 // 포인터 변경! 클릭하는 것처럼 
	
	display: grid;
	
	/* grid-template-columns: 100px 1fr;		// 예전 그리드의 공간 나누기
	grid-template-rows: 35px 65px;
	grid-template-areas:
	"img title"
	"img content"; */
	
	/* grid-template-columns: 100px 1fr;		// 예전에 그리드의 공간 나누기
	grid-template-rows: 35px 65px; */
	
	grid-template-areas:
	"img title"			35px
	"img content";		65px
	/100px	1fr;
	
	column-gap: 20px;
	padding: 10px 24px;
	
	transition: 5s;			// transition 효과 
}

.rland>article:hover{			// article에 마우스로 hover하면 배경의 색깔 변경 
	background-color: yellowgreen;
}g
}

.rland>article:nth-child(2n+1){
	
	display: grid;
	
	grid-template-areas:
	"title img"			35px				// 이미지와 텍스트 위치 변경 
	"content img";		65px
	/100px	1fr;
	
	column-gap: 20px;
}

	.rland>article>h1{ 					// h1 부분!
	
		font-family: 'Nanum Pen Script', cursive;
		font-weight: normal;
		
		white-space: nowrap;				// 텍스트의 제목을 내려쓰기를 하지 않는다. 
		overflow: hidden;					// 텍스트가 길어지면 숨기자!!
		text-overflow: ellipsis;		// 텍스트가 길어지면 '...'로 쓴다.
			
		/* layout */
		/* grid-column: 2 / span 1;		
		grid-row: 1 / span 1; */
		
		grid-area : title;
		align-self: center;
	}
	
	.rland>article>div{ 			// div 부분! 
		/* grid-column: 1 / span 1;		
		grid-row: 1 / span 2; */
		
		grid-area: img;
	}

		.rland>article>div>img{ 
			/* layout */
			border-radius: 20px 0 0 20px;	
			width: 100%;			// 중요!!
			height: 100%;
			object-fit: cover;
			
			transition: 600ms; 		// hover하면 이미지의 모퉁이가 바뀐다.
		
		}	
		
		.rland>article:hover>div>img{ 
			border-radius: 0;		// 원래 초기값!!
		}	
	
		.rland>article:nth-child(2n+1)>div>img{ 
		
			/* layout */
			border-radius: 0 20px 20px 0;		// hover하면 이미지의 모퉁이가 바뀐다.
		}	
		

	.rland>article>p{ 
		/* text */
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		font-size: 11px;	
		
		/* grid-column: 2 / span 1;		// 그리드의 칸수 나누기
		grid-row: 2 / span 1; */
		grid-area: content;
	}
	

70강) CSS3에서 확장된 변형 속성 2

Transform으로 회전 가능!

71강) Timing Function

시간 빠르기 일정 조정 :

72강) 애니메이션

Transform의 추가 기능!

이전Project - 1th 프로젝트

다음TIL - 11주차 코드