2021.07.12 CSS-9

정혜리·2021년 7월 12일
CSS개발일지미디어쿼리코린이프론트엔드
0

웹프로그래밍

목록 보기
11/11

Day11, 저번주 금요일에 배운 미디어쿼리를 실습했다. 오늘 배운것을 복습 하기 전에 태그의 Inline/Block 속성 중 어떤 속성을 가지고 있는지 알파벳 U,V~Z로 시작하는 태그에 대해서 복습하고 넘어가자.

Inline : <u></u>,<var></var>,<wbr>
Block :<ul></ul>

오늘 무엇을 배웠지?

미디어쿼리 실습하기

pc버전에서는 X축, 모바일버전에서는 y축 정렬되는 메뉴버튼 만들기

  1. new file-save(index0712.html), save(style0712.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)
  2. 기본 설정 + html, css 파일을 연동, 미디어쿼리를 사용할 수 있도록 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 태그 입력
<link>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/style0712.css">
</head>
<body>

</body>
</html>
  1. <ul> <li>태그로 메뉴를 만들고 class를 설정한다.
	<ul class="media-menu">
		<li><a href="#">menu 1</a></li>
		<li><a href="#">menu 2</a></li>
		<li><a href="#">menu 3</a></li>
	</ul>
  1. CSS언어로 디자인!
    4-1."html, body { margin: 0; padding: 0;}" 으로 웹브라우저의 경계에 주어진 기본값을 없앤다.
    4-2. <ul>태그와 <a>태그의 디자인 기본값을 없애고, 메뉴탭이 중앙정렬될 수 있도록 설정한다. 또, 너비와 배경색상을 디자인한다. 
.media-menu { list-style: none; margin: 0; padding: 0;

	display: flex; justify-content: space-between; align-items: center;

	width: 700px; background-color: black; }
.media-menu a { color: black; text-decoration: none; }

4-3. <li>태그의 너비, 배경색, 테두리 등을 디자인하고 text-align과 패딩값을 설정해 중앙정렬한다. 또 미디어쿼리를 적용해 기기의 화면크기가 320px~767px 인 경우(스마트폰) 메뉴탭들이 column으로 y축 정렬하도록 설정하고 각 탭들의 간격을 margin값을 이용해 설정한다.

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

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

덴마크 쇼핑몰(helbak) 화면크기에 따라 위치(고정)가 달라지는 상단메뉴탭 만들어보기

https://www.helbak.com/

1. new file-save(index0712.html), save(style0712.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)
2. 기본 설정 + html, css 파일을 연동, 미디어쿼리를 사용할 수 있도록 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 태그 입력

<link>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/style0712.css">
</head>
<body>

</body>
</html>
  1. <header> <h1> <ul> <li>태그로 메뉴를 만들고 class를 설정한다.
	<header class="intro">
		<h1>Logo</h1>
		<nav>
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</nav>
	</header>
  1. <main> <h1> 태그로 상단탭 아래의 본문영역을 설정한다.
<main role="main">
		<h1>hello world hello world hello world hello world </h1>
  1. CSS언어로 디자인!
    5-1."html, body { margin: 0; padding: 0;}" 으로 웹브라우저의 경계에 주어진 기본값을 없앤다.
    5-2. <header>태그인 상단 메뉴탭이 x축을 기준으로 정렬될 수 있도록 설정하고 스크롤을 내리거나 올려도 항상 같은 위치에 고정될 수 있도록 position: fiexd로 설정한다. 또, 너비와 배경색상을 디자인한다. 
.intro { width: 100%; height: 80px; background-color: #ffffff;
	display: flex; position: fixed;}

5-3. <h1> <nav>태그의 너비, 배경색, 높이 등을 디자인한다.

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

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

5-4. <ul>태그의 기본값을 모두 없애고, 이 태그에 속한 <li>태그 3개가 3등분된 너비(33.3333%)로 설정한다. :nth-child() 코드를 사용해 각 태그의 배경색을 설정한다.

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

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

5-5. <main> 태그와 이 태그에 속한<h1>태그의 너비, 배경색, 높이 등을 디자인한다.

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

5-6. 미디어쿼리를 사용해 기기의 화면이나 브라우저 사이즈가 320px~767px(모바일)인 경우 상단메뉴탭이 y축정렬로 바뀌고 항상 고정된 위치가 아닌 기본값(position: static;)으로 설정해준다. 또 그에 따른 너비도 변경해 준다.

@media (min-width: 320px) and (max-width: 767px) {
	.intro { flex-direction: column; position: static; height: 160px; }
	.intro h1 { width: 100%; }
	.intro nav { width: 100%; }
}

bootstrap 사이트의 포트폴리오영역 만들어보기

최소 2개 이상의 분기점을 만들어 그에 따른 배열이 변경되는 설정 만들어보기

https://startbootstrap.com/

1. new file-save(index0712.html), save(style0712.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)
2. 기본 설정 + html, css 파일을 연동, 미디어쿼리를 사용할 수 있도록 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 태그 입력

<link>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/style0712.css">
</head>
<body>

</body>
</html>
  1. <div> <img> <h2> 태그로 포트폴리오 항목을 만들고 class를 설정한다. 
<div class="container">
		<div class="column">
			<img src="https://via.placeholder.com/250x150">
			<div class="image-info">
				<h2>title</h2>
			</div>
        </div>
  1. class가 column으로 설정된 <div> 태그가 하나의 포트폴리오이기 때문에 같은 태그 5개를 추가로 만들어 총 6개의 항목을 만든다.
  2. CSS언어로 디자인!
    5-1."html, body { margin: 0; padding: 0;}" 으로 웹브라우저의 경계에 주어진 기본값을 없앤다.
    5-2. <div>태그인 .container에 속한 태그들이 x축을 기준으로 정렬될 수 있도록 설정하고 wrap으로 감싼다. 또 각 태그 사이들이 중앙정렬 될 수 있게 설정한다. 또, 너비와 배경색상을 디자인한다.
    포트폴리오 하나의 항목인 .column의 너비, 배경색, 테두리 등을 설정하고 각 항목사이의 위아래 간격을 설정한다. :nth-child()로 가장 마지막 줄의 항목에는 공백이 없도록 설정한다.
.container { display: flex; flex-wrap: wrap; justify-content: space-between;
	width: 1140px; margin: 0 auto; background-color: pink; }
.column { width: 355px; background-color: white;
	border: solid 2px darkred; margin-bottom: 10px; }
.column:nth-child(4), 
.column:nth-child(5), 
.column:nth-child(6) { margin-bottom: 0; }

5-3. <img> 태그의 너비를 디자인하고 verticla-align: middle로 <img>태그와 <h2>사이의 공백을 없앤다.

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

5-4. 미디어쿼리를 사용해 기기의 화면이나 브라우저 사이즈가 540px~720px(태블릿)인 경우 가장 큰 태그인 .container의 영역도 720px로 변경되도록 설정한다. (->3열2행에서 2열 3행으로 바뀜) 또 두번째 줄 부터 각 포트폴리오의 아래 공백이 생기도록 설정한다.

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

5-5. 미디어쿼리를 사용해 기기의 화면이나 브라우저 사이즈가 320px~539px(모바일)인 경우 가장 큰 태그인 .container의 영역도 화면크기에 맞게 변경되도록 설정하고 (->2열 3행에서 1열 6행으로 바뀜) padding 값을 적용해서 이미지와 전체 화면사이의 좌우 공백을 만들어준다. 또 , 각 포트폴리오의 아래 공백이 생기도록 설정한다.

@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; }
}
  1. 미디어쿼리 방식을 각각 사이즈를 설정해 직접 입력 -> 가장 많이 쓰는 방법
    @media () and () { }
  2. 모바일버전, 태블릿 버전, pc버전 등 각각의 파일을 따로 만들어 html 파일에 연동함. ->코드가 길어지는 경우
  3. <style> 태그 사용
<style media="(min-width:320px) and (max-width: 700px)">
	body { background-color: red; } </style>

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

무엇이 어려웠지?

시간이 얼마나 지났다고 display:flex 등 레이아웃을 설정하는 코드에 대해서 잊어버렸다. 선생님이 ~기 때문에 이것만 설정하면 되겠죠? 라고 하는데 손으로는 이해와 확신없이 선생님의 코드를 따라할 뿐이고 머릿속에는 왜였더라..?하는 의문이 들었다.

어떻게 해결했지?

내가 정리한 개발일지를 보고 다시 공부했다. 역시 복습, 반복만이 길인것 같다. 덴마크 웹사이트의 상단메뉴탭을 만들때 'display :flex;'만 사용해도 다 자연스럽게 x축의 한줄로 정렬이 된다고 했는데 row를 왜 안해도되지? 라는 의문이 들었다. (바보같이) row는 display: flex의 기본값이기 때문에 좌->우로 설정되기 때문에 더이상의 설정은 필요가 없다. 정말이지 부끄러웠다. 배웠는데 왜 모르냐고ㅠ

그래서?

이렇게 진도를 따라가다보면 분명 배웠는데 잘 기억이 나지 않는 때가 종종 있다. 복습을 해도 채워지지 않는 구멍이다. 그래도 긍정적으로 생각하면 나의 부족한 부분을 채울 수 있는 기회가 많고, 그 전보다는 점점 늘어가고 있다는 것이다. 하지만, 이 구멍이 0개가 될것 같지는 않다. 배우면 배울수록 구멍들이 늘어날 것 같은데... 걱정이다.. 언제까지 다시 찾아보고 할 수는 없는데 말이다...

sublime3를 이용해 오늘 만들어본 파일
https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0712

profile
정혜리
.
이전 포스트

2021.07.09 CSS-8

0개의 댓글

관련 채용 정보