오늘의 나는 무엇을 잘했을까?

1. Weekly Mission을 완료했다. 사이즈에 따라 자연스럽게 바뀌게하려고 노력했다. 또, 너무 flex박스만 사용하고 grid는 사용하지 않은 것 같아서 일부로 footer의 구조를 바꿔 응용했다!

2. flex와 grid의 order 속성에 대해 공부 후 적용했다. 선택 요구사항을 충족하기 위해서 기존 형제 2개였던 구조를 쪼개서 형제 3개로 만들고, 이를 order를 적용해 순서를 바꿔줬다. (자세한 내용은 WIL에서..ㅎㅎ)

3. PR 템플릿을 만들었다! 내일 제이든한테 전달해서 등록할 것이다~ ㅎㅎ

오늘의 나는 무엇을 배웠을까?

[1] 반응형 웹을 위한 미디어 쿼리

미디어 쿼리

• 화면(screen), 티비(tv), 프린터(print)와 같은 미디어 타입과 적어도 하나 이상의 표현식으로 구성된다.

• CSS3에 포함되어 있고, 컨텐츠의 변경없이 주로 화면의 크기에 따라 스타일 시트를 달리해 적절한 UI를 보여준다.

• css3-mediaqueries.js는 IE6-9까지만 지원한다. 즉 옛날 브라우저는 지원X...

  • E8 이하에서 미디어 쿼리를 사용하게 해주는 polyfill(웹 개발에서 오래된 브라우저가 지원하지 않는 특성을 지원하게 해주는 기술)이 몇가지 있다고 한다..

1. HTML방식

<link rel="stylesheet" media="screen and (max-width: 1199px)" href="style.css" />

• <link> 요소에 사용해 특성이 조건에 맞을때 css 파일을 불러온다.

2. CSS 방식

@media screen and (max-width: 1199px) {
  body {
		background-color: lightgreen;
	}
}

[2] Ordering flex items

Flexbox와 grid와 같은 새로운 레이아웃 방법은 콘텐츠 순서를 제어할 수 있다. 즉, 재정렬이 가능하다.

html상에서 위에서 아래로 내려오면서 원래 위치에 있어야 하는 것들을 임의로 보이는 형태만 순서를 바꿀 수 있다는 뜻이다.

• 따라서 시각적으로만 변경될 뿐(시각적 렌더링에만 영향을 미침) 음성 순서나 네비게이션은 소스의 순서로 유지된다.
  • 예를들어 tab키를 누르면 보이는 순서가 아니라 소스코드 순서대로 tab이 넘어간다.

1. flex-direction 사용

   속성의 속성값을 사용해 정렬을 reverse할 수 있다.

   • row / column :기존 방향 정해주는 것. row가 기본
   • row-reverse : row를 오른쪽에서부터 시작한다.
   • column-reverse : column을 아래에서부터 시작한다.

2. order 속성 사용
   속성을 사용해 개별 항목을 대상으로 지정하고 표시되는 순서를 변경할 수 있다.

   • order의 값은 상대적이다. 따라서 - 값으로도 지정가능하다.
   • 숫자가 작을 수록 앞에 위치한다. 만약 같은 숫자일 경우 소스코드상 앞에 있었던 것이 우선시 된다.

오늘의 나는 어떤 어려움이 있었을까?

1. media query로 범위를 min-width와 max-width로 나누었을 때, width의 경계값은 미디어쿼리가 적용이 안되는 어려움이 있었다.
   1) width: 1198px
   2) width: 1199px
   3) width: 1200px
   

   min값과 max값 둘 중 하나만 명시하는 것으로 문제를 해결하긴 했는데.. 이유를 아직 모르겠다! 아마 1px보다 더 작은 단위가 포함되어서 안되는 걸지도..

2. weekly mission git 방식이 매번 헷갈린다. 혼자만 fork해서 하기 때문에, 다른 분들과 방법이 달라서 더 어렵다..(괜히 혼자 튄건가 싶기도..ㅋ) 또 repository를 지웠다가 재생성했다.
   특히 upstream의 main을 rebase 하는 방식이 가장 헷갈린다.. 어찌저찌 하긴 했는데 여전히..! 방식을 정리해서 나만의 매뉴얼로 만들어놓으려고 한다.

내일의 나는 무엇을 해야할까?

• WIL 작성 (feat. Weekly Mission 회고)
• 팀 데일리 미션