[멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 12[3주차]

❤️Liked 느낀 점

종종 페이지를 제작하면서 수평선은 <hr> 태그를 많이 사용했는 데

강의를 듣고 난 뒤 마크업 태그들의 의미와 쓰임새를 제대로 알고 사용해야겠다고 

<hr> 태그는 문단 수준 요소 사이의 주제 구분(예를 들어 장면 전환, 참고서의 섹션 내 다른 주제로의 이동 등)을 나타내는 태그로 단순히 수평선 스타일로만 사용되는 것은 좋지 않은 사례라고 합니다.

 

✏️Learned 공부한 내용

그리드 시스템

• 페이지 콘텐츠를 논리적으로 일관성 있는 질서와 구조로 디자인할 수 있게 도와주는 그래픽 시스템을 말합니다.
• 여기서 그리드는 사전적 의미로 '격자 무늬' 또는 '격자판'을 의미합니다.

장점

• 컬럼 단위로 요소를 구성하므로 많은 양의 콘텐츠도 정돈된 느낌을 줍니다
• 격자 형식에 따르므로 블록을 쌓듯 디자인이 편리합니다.
• 일관되고 통일성 있는 아름다운 웹 디자인이 가능합니다.
• 반응형 디자인 설계시 해상도 대응이 용이해집니다.

구성 요소

리메인 ❘ 리메인 커리어 (remain.co.kr)

• 칼럼(Column)
  • 실제 콘텐츠를 포함하는 부분으로 1개 이상의 칼럼으 조합하여 콘텐츠의 크기를 결정합니다.
  • 칼럼 안에는 반드시 양 옆에 여백을 둬야 합니다.
• 거터(Gutters)
  • 칼럼과 칼럼 사이의 여백(콘텐츠와 콘텐츠 사이의 간격)을 말합니다.
• 마진(Margin)
  • 화면의 맨 왼쪽 및 오른쪽 가장자리 사이의 공간을 말합니다.
  • 칼럼과 칼럼 사이의 공간이 거터라면 칼럼과 화면과의 간격은 마진이라고 할 수 있습니다.

원고 그리드

그리드시스템 :: grid system (heesangs.com)

칼럼 그리드 시스템

리메인 ❘ 리메인 커리어 (remain.co.kr)

리메인 ❘ 리메인 커리어 (remain.co.kr)

리메인 ❘ 리메인 커리어 (remain.co.kr) 모

모듈 그리드

그리드시스템 :: grid system (heesangs.com) 계

계층 그리드

그리드시스템 :: grid system (heesangs.com)

8 Point Grid System

8 bit (0 또는 1의 값을 가지는 데이터 단위.) = 1byte (컴퓨터의 기억장치의 크기를 나타내는 단위. bit가 여러개 모인 것.)

• 주요 스크린 사이즈들이 8로 나눠 떨어지기 때문에 디자인 요소들의 사이즈는 8의 배수로 결정하는게 좋다고 합니다.
• 만약 5px 그리드라면 아래 그림처럼 1.5x 배율일 때 픽셀이 쪼개져서 끝이 흐릿하게 보이는 현상이 발생합니다.

8-point 그리드로 디자인하기 – UI Design Guide (uidesignguides.com)

• px이 아니라 pt(dp)인 이유는 화소밀도에 따라 크기가 달라지는 px과 달리 pt(dp)는 같은 비율로 보여지는 독립적인 수치이기 때문입니다.
  • Font sizes
  • Line heights
  • Padding
  • Margins
  • Radius
  • Fixed Width
  • Fixed heights (잘 사용하지 않음) 적용 가능한 요소

4px Grid System

https://yozm.wishket.com/magazine/detail/720/

8px 그리드 시대가 끝나고, 4px 그리드의 시대가 열릴까? | 요즘IT

참고 사이트

https://960.gs/

960 Grid System

웹사이트 960 그리드 시스템 정보가 있는 웹사이트입니다.

 

Media Query

• 브라우저와 장치의 환경에 따라 특정 CSS 규칙을 적용할 수 있게 해주는 방법으로 반응형 웹 디자인의 핵심 요소 입니다.
• 뷰포트 크기에 따라 서로 다른 레이아웃을 생성할 수 있으며, 이 외에도 사용자가 터치스크린을 사용하는지와 같은 환경적 요소를 감지하는 데 활용할 수 있습니다

쓰임새

• CSS @media와 @import @규칙을 사용해 특정 조건에 따라 스타일을 적용할 때.
• <style>, <link>, <source>, 기타 다른 HTML 요소에 media 특성을 사용해 특정 매체만 가리키게 할 때.
• Window.matchMedia()와 MediaQueryList.addListener() JavaScript 메서드를 사용해 미디어 상태를 판별하고 관측할 때.

기본

@media 조건{

}

viewport 너비에 맞춘 media query

@media screen and (사이즈조건){
	//조건에 맞는 기기에 적용할 CSS
}

viewport meta tag

<meta name="viewport" content="width=device-width, initial-scale=1" />

템플릿

@media screen and (min-width:1024px) {
	/* Desktop */
}
@media screen and (min-width:768px) and (max-width: 1023px) {
	/* Tablet */
}
@media screen and (max-width:767px){ 
	/* Mobile */
}

해상도에 따른 규격

[CSS3강좌] 35강 반응형웹을 위한 미디어쿼리(@media screen{ }) (tistory.com)

[CSS3강좌] 35강 반응형웹을 위한 미디어쿼리(@media screen{ }) (tistory.com)

[CSS3강좌] 35강 반응형웹을 위한 미디어쿼리(@media screen{ }) (tistory.com)

유형

값	설명
all	기본값, 모든 미디어 유형 장치에 사용됩니다.
print	프린터(인쇄) 장치에 사용됩니다. 인쇄용 CSS를 설정합니다.
screen	컴퓨터화면, 태블릿, 스마트폰 등에 사용되는 viewport 사이즈를 설정합니다.
speech	스크린리더기(시각장애인 분들을 위해 웹컨텐츠를 읽어주는 프로그램) 페이지를 소리내어 읽을 때 사용합니다.

구성 요소

• 미디어 유형으로, 브라우저에 이 코드가 어떤 종류의 미디어(예: 인쇄 또는 화면)를 위한 것인지 알려줍니다.
• 괄호로 묶은 CSS 규칙이 적용되기 위해 전달되어야 하는 규칙 또는 조건문 격인 미디어 표현식입니다.
• 조건문을 통과하고 미디어 유형이 올바른 경우 적용되는 CSS 규칙 집합입니다.

미디어 기능 규칙

• 너비와 높이
  • 반응형 디자인에서 가장 자주 사용하는 미디어 쿼리 기능은 뷰포트 너비 탐지로, 주로 min-width, max-width, width를 활용해 특정 너비 이상 또는 이하일 때 CSS를 적용합니다.
• 방향성
  • 잘 지원되는 미디어 기능 중 하나는 orientation로 세로 모드인지 가로 모드인지를 검사할 수 있도록 해줍니다. 장치가 가로 방향에 있는 경우 본문 텍스트 색상을 변경하려면 다음과 같은 미디어 쿼리를 사용합니다.
• 포인팅 장치의 사용
  • 수준 4 규격에서는 hover 미디어 기능이 도입되어, 사용자가 요소 위에 마우스 커서를 올릴 수 있는지, 즉 어떤 종류의 포인팅 장치를 사용하는지를 감지할 수 있게 되었습니다. 

더 복잡한 미디어쿼리

• 논리곱
  • and를 사용해 미디어 기능을 결합할 수 있습니다.

@media screen and (min-width: 600px) and (orientation: landscape) {
  body {
    color: blue;
  }
}

• 논리합
  • 여러 쿼리들의 집합이 있는 경우, 어떤 것이라도 일치할 수 있습니다.

@media screen and (min-width: 600px), screen and (orientation: landscape) {
  body {
    color: blue;
  }
}

• 부정논리
  • not 연산자를 사용하여 전체 미디어 쿼리를 부정할 수 있습니다.

@media not all and (orientation: landscape) {
  body {
    color: blue;
  }
}

😔Lacked 부족한 점

전 날 강의가 끝난 뒤 왼쪽 이마와 눈 쪽에 극심한 통증을 느껴서 복습을 제대로 하지 못해 속상했습니다.

다행히 약을 먹고 푹 쉬니까 몸 상태가 나아졌지만 최근 강의를 듣느라 저도 모르게 스트레스를 받은 것 같습니다.

종종 스트레스를 많이 받으면 나타나는 증상인데 몸 관리를 제대로 못한 것 같습니다.

공부를 하는 것도 중요하지만 무엇보다 가장 중요한 것 건강관리 같습니다.

🙏🏻Longed For 앞으로 바라는 점

• 건강관리 잘하기
• 스트레스 덜 받기