멋쟁이 사자처럼🦁 프론트엔드 스쿨 1기 2주차(목) 회고 - November 11, 2021.

[ 공부 ]

이제 계속 다음 주까지는 실습 위주의 수업이 될 것 같다.
HTML/CSS에는 정답은 없지만 더 편한 방법은 확실히 있다고!
많은 경험만이 답이겠지... 😏❗

4주차에는 SASS와 부트스트랩, 리눅스 명령어, AWS, 반응형 구현 실습 등이 예정되어 있고,
HTML/CSS 파트를 완전히 끝낸 뒤 5주차부터 자바스크립트 진도를 나간다고 한다.
꼭 미리 틈날 때마다 대비해둬야겠다 !!

---

[ 강의요약 ]

반응형 웹(Responsive Web) 또는 반응형 디자인이란?

• 화면의 크기에 따라서 웹페이지의 각 요소들이 반응해 최적화되어 동작하는 것이다.

  💡 웹은 수많은 형태의 화면에서 동작해야 한다. 그렇다 보니 웹을 만드는 사람들은 여러가지 화면에 대응되는 웹페이지를 만드는 것이 힘들었다. 그것이 웹을 개발하는 데 있어 상당히 어려운 걸림돌로 작용했고, 꽤 긴 시간동안 웹의 단점이었다. 그래서 다양한 환경에서 적응할 수 있는 기술들을 발전시킨 끝에 오늘날 반응형 디자인이라고 하는 최신 흐름까지도 나타나게 되었다.

• 요즘은 종종 많은 경우에 모바일 우선으로 개발한다.

---

미디어 쿼리 @media

• 미디어 쿼리는 특정 조건 (단말기의 유형, 화면 해상도, 뷰포트 너비 등)에서
  / 특정 스타일만 적용되도록 만들어주는 기능이다.

/* screen width >= 1440px */
@media(min-width: 1440px) {
	div {
		display: none;
	}
}

화면의 크기가 1440px보다 커지면 (= 최소 1440px이 됐을 때부터) / div 안보이게

/* screen width <= 1440px */
@media(max-width: 1440px) {
	div {
		display: none;
	}
}

화면의 크기가 1440px보다 작아지면 (= 최대 1440px이 될 때까지) / div 안보이게

• min-width는 최소 ~ 부터, max-width는 최대 ~ 까지라고 이해하면 쉽다.
• @media screen에서 screen은 액정이 있는 화면을 가진 모든 기기를 말한다.
  @media print는 프린트 결과물 및 미리보기 화면을 가리킨다.

---

Cross(상호 호환) Browsing과 Web Standard

• 웹 사이트 또는 웹 응용 프로그램이 웹 표준을 준수함으로써,
  다양한 브라우저들(크롬, 사파리, 파이어폭스 등)에서 작동할 수 있도록 호환성을 높이고
  브라우저의 기능이 없거나 부족할 때는 제한된 기능을 최대한 유지하도록 하는 것.

• 각 OS 및 브라우저마다 렌더링 엔진의 차이로 인해 똑같은 웹 페이지도 브라우저에 따라 다르게 보이게 된다. 따라서 웹 접근성을 높여 정보 격차를 줄이기 위해서는,
  크로스 브라우징을 고려하고 웹 표준을 준수해야 한다.

⭐ Can I Use (https://caniuse.com/)
⭐ W3C HTML/CSS validator
(https://validator.w3.org/nu/), (https://jigsaw.w3.org/css-validator/)

• validation 검사를 통과했다는 것은 적어도 웹표준을 위반하진 않았다는 것을 의미하며,
  이것은 최소한의 검사다.

---

웹 접근성을 고려한 시맨틱 HTML

• 시맨틱 웹 및 웹 접근성을 위해서는 마크업에서 큰 섹션을 나눌 때마다 <h1>,<h2>,<h3> 등 heading 태그를 적어주어야 한다.
• 핵심 내용이 heading 태그에 들어있기 때문에 브라우저가 내용을 분석할 때 아주 유용하다.
• 다음은 heading 태그가 스크린 리더에는 읽히되, 화면에는 표시되지 않도록 하는 방법이다.

position: absolute;
clip: react(0, 0, 0, 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;

---

reset.css 유용한 추가 옵션

a {
    text-decoration: none;
    color: inherit;

img {
    display: block;
    width: 100%;
}

---

Material Design

• 구글의 디자인 철학
• 모바일, 데스크톱 등 다양한 디바이스들을 아우르는 하나의 일관된 구글의 디자인 가이드라인
• 다양한 플랫폼(모바일, 웹) 안에서 사용자 경험을 하나로 묶는다는 것이 핵심이다.
• 질감이 느껴지는 표면 (tactile surfaces), 대담하고 선명한 그래픽 디자인 (bold graphic design), 아름답고 직관적인 사용자 경험을 위한 자연스러운 애니메이션을 특징으로 한다.

---

자주 쓰이는 클래스 명 함축어

• exc: excute
• cont: contents
• gnb: global nabigation
• lnb: local nabigation
• snb: side nabigation
• tbl: table

---

실습을 통해 position 이해하기

1) 로고 뒤 정중앙에 시계 넣기

.tit-law::after {
	content:'';
	display: block;
	position: absolute;
	**top: 50%;**
	**left: 50%;**
	width: 225px;
	height: 225px;
	transform: translate(-50%, -50%);
	background-image: url(images-law/title_bg.png);
	background-size: 225px;
}

top: 50%, left: 50%를 주면 부모의 넓이, 높이에서 50% 만큼 이동하게 된다.
width와 height 값을 알고 있으니까 transform: translate(-50%, -50%); 대신
margin 값을 정확히 명시해줘도 된다. (width, height 값의 절반씩)

margin-top: -112px;
margin-left: -112px; 

2) 큰 따옴표 넣기

.txt-desc::before,
.txt-desc::after {
	position: absolute;
	top: 50%;
	display: block;
	content: '';
	width: 37px;
	height: 32px;
	margin-top: -16px;
}

.txt-desc::before {
	left: 0;
	background-image: url('images-law/txt-left.png');
}

.txt-desc::after {
	right: 0;
	background-image: url('images-law/txt-right.png');
}

.txt.desc 양옆으로 큰 따옴표를 하나는 ::before, 하나는 ::after로 잡은 다음,
.txt.desc에는 relative, 가상요소들에는 absolute를 준다.
.txt.desc가 <p>태그이므로 기본값이 display: block;이니 width 값을 정해줄 수 있다.
왼쪽 따옴표에서 tit-desc을 거쳐 오른쪽 따옴표로 이어지는 전체 크기를 지정해준다.

---

• 위지윅 (WYSWYG; What You See What You Get)
  : 보는 대로 얻는다는 뜻으로, 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다.
• 폰트 파일이 무거워서 여러 폰트를 사용하기엔 효율이 좋지 않기 때문에, 한번 쓰이는 폰트일 경우 이미지화 시키는 것이 좋다.
• 레이아웃 크기를 결정하는 margin, padding 값들은 CSS 작성 시 상단에 작성할 것.
• inline CSS 방식은 가중치 1000점이며, 권장되지 않는다.
• <q>태그와 <blockquote>태그는 각각 한 줄 인용문(quote)과 여러 줄 인용문에 쓰인다.
• <button>의 기본 type은 submit이므로 굳이 명시해주지 않아도 된다.
• <footer>의 copyright 부분은 <small> 태그로 감싸면 좋다.

---

> 참고자료

1) https://opentutorials.org/course/3086/18323 반응형 디자인 - 생활코딩
2) https://onlydev.tistory.com/1 크로스 브라우징
3) https://pstudio411.tistory.com/entry/크로스-브라우징-알아보기
4) https://material.io/design 머티리얼 디자인
5) https://developers-kr.googleblog.com/2014/07/this-is-material-design.html 구글 개발자 블로그