7.12 AI SCHOOL css(9)

이민정·2021년 7월 12일

CSS

대구 AI SCHOOL

목록 보기

11/47

✔ TODAY

오늘부터는 css 응용실습단계에 들어간다. 기본속성과 관계를 확실히 파악&정리하면서 실습을 하자!

✔ 학습한 내용

helbak의 상단메뉴만들기

helbak
해당링크 사이트의 메뉴 만들기

pc에는 x축
모바일에는 y축정렬이 되는 메뉴판 만들기
html코드

<header class="intro">
  <h1></h1>
  <nav>
    <ul>
      <li>메뉴1</li>
      <li>메뉴1</li>
      <li>메뉴1</li>
    </ul>
  </nav>
</header>
<main role = "main"> -익스플로우는 main를 인식 하지 못 하기 떄문에 'main role'를 인식시킨다.
  <h1> hello world</h1>
</main>

css코드

.intro{display: flex; -h1테그와 네비테그를 와이 축에서 엑스축으로 바꾸기
	position: fixed;-pc버전메뉴는 항상 상단에 고정
	width: 100%;
	height: 80px;
	background-color: #ffffff;}

.intro h1{width: 50%;
	height: 80px;
	background-color: black}

.intro nav{width: 50%;
	height: 80px;
	background-color: yellow;}

.intro nav ul{list-style: none;
	padding: 0;
	margin: 0;}

.intro nav ul li{width: 33.333333%; -메뉴영역을 3개로 최대한 분할
	height: 80px;}

.intro nav ul{display: flex;}- y축을 x축으로 변환

.intro nav ul li:nth-child(1){
	background-color: blue;}
.intro nav ul li:nth-child(2){
	background-color: gray;}
.intro nav ul li:nth-child(3){
	background-color: green;}
- 메뉴별  따로 색상주기

main{width: 100%;
	height: 2000px;
	background-color: gold;

	padding-top: 80px;}
    -header는 3차원, main 2차원
    먼저나오는 형제가3차원이면 나중의 형제가 뒤에 들어갑 레이어 겹침.
header와 main이 겹침. 
main에 padding를 주어 해결

-미디어쿼리로 모바일 부분 만들기
@media (min-width: 320px) and (max-width: 767px){
	.intro{
		position: static; -항상 상단.
		flex-direction: column;
		height: 160px;}

	.intro h1 {width: 100%;}

	.intro nav{width: 100%;}
	main{padding-top: 0;}
    -pc에 준 main padding를 해결하기 위해 넣음.

내용(사진)6개 정렬하기

pc버전에서는 32, 모바일에는 23, 더 작은 사이즈에서는 1열로 정렬하게 만들기

htm코드

<div class="container">
		<div class="column">
			<img src="https://via.placeholder.com/250x150">
			<div class="img-info">
				<h2>title</h2>
			</div>
		</div>
		<div class="column">
			<img src="https://via.placeholder.com/250x150">
			<div class="img-info">
				<h2>title</h2>
			</div>
		</div>
		<div class="column">
			<img src="https://via.placeholder.com/250x150">
			<div class="img-info">
				<h2>title</h2>
			</div>
		</div>
		<div class="column">
			<img src="https://via.placeholder.com/250x150">
			<div class="img-info">
				<h2>title</h2>
			</div>
		</div>
		<div class="column">
			<img src="https://via.placeholder.com/250x150">
			<div class="img-info">
				<h2>title</h2>
			</div>
		</div>
		<div class="column">
			<img src="https://via.placeholder.com/250x150">
			<div class="img-info">
				<h2>title</h2>
			</div>
		</div>
	</div>-->

css코드

*.container {
	display: flex;
	flex-wrap: wrap;-정해진 크기를 넘으면 줄바꿈
	justify-content: space-between;
	width: 1140px;
	margin: 0 auto;
	background-color: pink;}

.column{
	width: 355px;
	background-color: #ffffff;
	border: solid 2px red;
	margin-bottom: 10px;}

.column:nth-child(4),
.column:nth-child(5),
.column:nth-child(6){
	margin-bottom: 0;}
    -밑줄 라인의 공백을 없앰

.column img{
	width: 100%;
	vertical-align: middle;}

	- 이미지와 타이틀영역의 태생적인 공백을 없앰

.img-info{
	padding: 20px 0;
	text-align: center;}

.img-info h2{
	margin: 0;}

-모바일 버전-

@media (min-width:  540px) and (max-width:  720px){
	.container{width: 720px;}
	.column:nth-child(4){
		margin-bottom: 10px;}}
        - 모바일로 전환해 약간의 일그러짐을 보정

-더 줄이면 일렬로 정렬하게 하기-
@media (min-width: 320px) and (max-width: 539px){
	.container{
		box-sizing: border-box;
		width: 100%;

		padding: 0 20px;}
	.column{
		width: 100%;}
	.column:nth-child(4),
	.column:nth-child(5){
		margin-bottom: 10px;}

미디어쿼리를 적용하는 3가지

지금 처럼 css파일안쪽에다가 @media미디어쿼리 삽입(실무에 자주사용)
모바일과 피시를 한꺼번에 만들기
모바일 버전으로 새로 만들기
모바일 css 만들어 그 안에 미디어 쿼리 넣고
html에 링크로 css파일 피시와 모바일css 파일 분리
코드가 너무 길어지면 유지보수를 위해 선택하는 방법

유지보수 상황에 맞게 선택하기
스타일태그를 사용

<stlye media="(min-width:300px) and (max-width:700px)">
  bady{background-color:red;}
 </stlye>

1,2번 만 기억해도 충분!

✔ 학습한 내용 중 어려웠던 점 또는 해결못한 것들

첫번째 실습에서 header와 main이 병첩이 되어야 되는 데 안되거나. 별도의 색상을 가지고 있어서...틀린 부분을 찾는 데 많은 시간이 요소되었다.
강의에 따라 코드를 쳤는데도 따라가는데 조금 힘들었음.
-코드 작성시 나무만 보고 작성하는 버릇이 있어, 전체적인 구조를 파악하는데 아직도 시간이 걸림.