210709 개발일지

📌 학습한 내용

미디어 쿼리

: 웹사이트를 모바일, 테블릿 환경에 맞게 자연스러운 변화를 줄 때 사용하는 CSS쿼리

• 적응형 : 끊기면서 공간의 크기 변경
  -> 고정값을 가진 px 단위를 사용해서 제작

• 반응형 : 자연스러운 resize -> % 단위를 사용

• @media (min-width: ) and (max-width: px) {}

<미디어쿼리 사용시, width 값을 기준으로 분기점을 설정(구분)한다.>

• 320px ~ 768px 미만 : 스마트폰
• 768px ~ 1024px 미만 : 테블릿
• 1024px 이상 ~ : PC

@media (min-width: 600px) and (max-width: 767px) {
	.pc {
		color: blue;
		font-size: 20px;
		background-color: yellow;
	}
@media (min-width: 100px) and (max-width: 599px) {
	.pc {
		color: green;
		font-size: 10px;
		background-color: grey;
	}
}

• 단계별로 지정하는 것도 가능

👉 미디어 쿼리의 바깥쪽에서 작성된 코드가 미디어 쿼리에 상속된다.
-> pc버전의 css를(미디어 쿼리의 바깥쪽에서 작성된 코드) 확인하면서 작성해야 한다. or pc버전과 mobile용 버전을 다른 파일로 만들 것

<미디어쿼리 사용시, 반드시 넣어줘야 할 <meta>>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 
viewport = 웹사이트에 접속하는데 사용되는 기기의 화면(자동으로 스케일업)
width= decive-width = 웹사이트의 width값은 디바이스의 width값으로 적용
initial-scale=1.0 = 비율은 항상 1.0을 유지 
-->

(이미지 출처 : https://www.w3schools.com/css/css_rwd_viewport.asp)

모든 디바이스 크기의 width값
: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
(portrait - 세로모드 / landscape - 가로모드)

<작성한 미디어 쿼리 확인 작업>

1. dothome에서 서버에 업로드 후 생성된 도메인 주소로 직접 확인 (가장 정확, 그러나 한정적인 디바이스로 확인)

2. chrome 브라우저 '검사'기능으로 확인 (다양한 디바이스에 적용 가능, 에딧가능)

• 실무tip 1
  display: none;
  : 디바이스에 따라 사용자에게 노출되지 않을 요소를 감춰줌(디바이스 종류에 따른 텍스트 정보 제공)

<h1 class="pc">PC Hello World</h1>
<h1 class="mobile">Mobile Hello World</h1>

.pc {
	display: none;

	color: red;
	font-size: 50px;
	background-color: pink;
}

• 실무 tip 2
  : (미디어쿼리 응용) @media 안쪽에서 작성해서 version 구분

<h1>미디어쿼리 응용</h1>

h1 {
	font-size: 20px;
	background-color: yellow;
}   /* => mobile version */

@media (min-width: 768px) {
	h1 {
		font-size: 40px;
		background-color: pink;
	}  /*-> max-widht는 1024px이 된다 */
      /* => tablet version */
    
@media (min-width: 1024px) {
	h1 {
    font-size: 80px;
	background-color: grey;
}   /* => pc version */   

👉 간단한 것에서 복잡한 것 순으로 코드 작성
(mobile version -> tablet -> pc version), 코드 분량이 줄어든다.

📌 학습내용 중 어려웠던 점

1. '실무 tip 1'에서 display: none; 속성을 이용해 디바이스 종류별로 사용자에게 노출될 요소를 결정

📌 해결방법

사실 어려웠던 부분이라기 보단 좀 헷갈리는 부분이었다. 앞부분에서 block, inline-block 요소를 사용해 공간을 만들 수 있다고 배워서, 그 부분과 혼동해 display: none;도 공간과 관련한 부분인가? 하고 생각했다. 하지만 서치 결과 단순히 '보여주지 않는다.' 하는 visibility: hidden;과 비슷하게 생각하면 될 것 같다.

📌 학습소감

크게 어려웠던 부분은 없었던거 같다. 이제 개념들을 어느 정도 익히게 돼서 정리가 필요한 시점이라고 생각한다. 주말동안은 2주간 배운 내용들을 정리하고 보다 확실한 개념을 잡는 학습이 필요할 것 같다. 또한 개인 홈페이지를 만드는 작업에 들어갈 예정이다. 서두르지 말고 꼼꼼하고 확실하게! 🏃‍♂️