1. 학습내용

실습

메뉴버튼

pc버전에서는 x축으로 정렬되고 모바일버전에서는 y축으로 정렬되는 메뉴버튼

<ul class="media-menu">
	<li><a href="#">menu1</a></li>
	<li><a href="#">menu2</a></li>
	<li><a href="#">menu3</a></li>
</ul>

.media-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 700px;
    background-color: black;
}

메뉴 텍스트 꾸미기

.media-menu a {
    color: black;
    text-decoration: none;
}
.media-menu li {
    width: 150px;
    background-color: yellow;
    border: solid 5px red;
    padding: 5px 15px;
    text-align: center;
}

li 정렬

pc버전 레이아웃작업 완료

.media-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}    

모바일버전 작업

@media (min-width: 320px) and (max-width: 767px) {
    .media-menu {
        flex-direction: column;
    }
    .media-menu li {
        margin-bottom: 10px;
    }
    .media-menu li:last-child {
        margin-bottom: 0;
    }
}

세밀한 마무리

줄였을때 전체 width값 감소시켜서 남는 여백제거, 그리고 flex-start로 맨앞(왼쪽위)에서부터 시작하도록

@media (min-width: 320px) and (max-width: 767px) {
    .media-menu {
        width: 190px;
        align-items: flex-start;
    }
}

덴마크 쇼핑몰

pc버전에서는 상단메뉴버튼 고정, 모바일에서는 상단메뉴 고정x

왼쪽이 h1태그 영역, 오른쪽이 nav-ul-li 영역

<header class="intro">
	<h1></h1>
	<nav>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</nav>
</header>

pc버전 기준 브라우저를 늘렸다가 줄였다가 하면 높이값은 resize 되지않고 width 값만 바뀜.

width는 오른쪽, 왼쪽이 절반으로 나누어져있음

.intro {
    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;
}

오른쪽 영역에 있는 li 태그 3등분, 서로 다른 색깔을 가지고 있음

각각의 메뉴버튼은 브라우저의 크기에 따라서 버튼의 크기도 각각 달라짐(width 값 % 사용)

3등분 하려면 딱 나눠지지않기때문에 최대한 근소한값으로 나누어야함

.intro nav ul li {
    width: 33.3333%;
    height: 80px;
}
.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;
}

li태그는 block요소라서 y축정렬 --> x축정렬

.intro nav ul {
    display: flex;
}

h1태그와 nav태그 x축정렬

.intro {
    display: flex;
}

본문넣기

main태그는 익스플로러에서 사용안되기때문에 role속성 사용해줘야함

header와 main은 block요소 성격을 가지고 있기 때문에 y축정렬

<main role="main"></main>

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

스코롤시 상단 영역 고정

.intro {
    position: fixed;
}

여기서 문제 발생! - header와 main이 둘다 2차원인 static 일 때는 겹치지 않았지만 첫번째가 fixed(3차원)로 변경되고 두번째가 static(2차원)이면 레이어 겹침

해결법

공백을 만들어 전체 content를 내리는 방법(여전히 main은 겹쳐져있음)

main {
    padding-top: 80px;
}

모바일버전 작업

고정한거(fixed) 풀고 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;
    }
}

불편한 코드임 = 실무에서는 3차원적인 특징을 잘 활용해서 자신의 높이값이 부모에게 영향을 주는 특징을 활용해서 레이아웃작업을 하는데 우리는 입문단계라 일일이 전부 높이를 잡아줌

연습할때도 하나하나 높이값을 다 잡아주고 연습하기

bootstrap 사이트

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

영역에 대해서 디자인작업

흰색배경에 핑크컨테이너가 중앙에 위치

.container {
    width: 1140px;
    margin: 0 auto;
    background-color: pink;
}

안에있는 박스가 박스들을 감싸고 있는 영역보다 훨씬 더 클경우 자동으로 줄 바꿈현상이 일어나도록 해야함

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

column자체가 명확한 width값을 가지고 있지않아서 이렇게 뜨는것(즉, 355px로 주면 전체크기가 1140px이라서 4개가 되면 넘어가게 됨) --> 자연스러운 줄바꿈 현상

.column {
    width: 355px;
}

이미지의 width값을 column안쪽에 꽉차게 디자인작업

높이값은 width값에 맞춰 비율이 자동적으로 변경

.column img {
    width: 100%;
}

column 디자인작업

.column {
    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;
}

텍스트 디자인 작업

h2 공백제거, 글자배열조정

img태그와 div사이에 미세한 공백제거

.image-info {
    padding: 20px 0;
    text-align: center;
}
.image-info h2 {
    margin: 0;
}
.column img {
    vertical-align: middle;
}

미디어쿼리-1

크기를 줄이면 3개가 아니라 2개로 줄바꿈

@media (min-width: 540px) and (max-width: 720px) {
    .container {
        width: 720px;
    }
}

공백이 어그러짐 - 미디어쿼리 바깥쪽에서 만들어놓은 4,5,6번째에 대한 마진바텀값을 0으로 적용해서 그럼

@media (min-width: 540px) and (max-width: 720px) {
	.column:nth-child(4) {
   	 margin-bottom: 10px;
   	 }
}

미디어쿼리-2

한줄로 정렬시 마찬가지로 4,5,6번째에 대해서 공백이 없음

@media (min-width: 320px) and (max-width: 539px) {
    .container {
        width: 100%;
    }
}

@media (min-width: 320px) and (max-width: 539px) {
   .column {
        width: 100%;
    }
   .column:nth-child(4),
   .column:nth-child(5) {
   	 margin-bottom: 10px;
    }
}

홈페이지를 보면 좌우측에 공백이 들어가있음 -> 공백적용

그리고 padding 값을 포함하기 위해 boxsizing-border적용

@media (min-width: 320px) and (max-width: 539px) {
    .container {
        box-sizing: border-box;
        padding: 0 20px;
    }
}

boxsizing border을 적용하지 않으면?

그래서 작업시 * (선택자 : 이 웹페이지에 등장하는 모든 태그)에 boxsizing:border-box를 주는 경우도 있다.

미디어쿼리 적용방법 3가지

1. css파일 안쪽에 @media 코드를 기입하는 방식 (실무에서 많이 사용)

2. 모바일버전용 파일을 따로 만드는 것 (moblie.css) 그 안에 @media 코드를 적용시키고 index.html에서 link로 mobile.css를 적용

코드분량이 너무많을 때(2000줄 이상) - 유지보수를 편하게 하기위해

3. style 이라는 태그를 사용해서 media라는 속성을 사용하여 min-width 값을 바로 direct로 적용시키 버리는것

1, 2번 정도만 기억하기

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