[멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 12[3주차]
❤️Liked 느낀 점
종종 페이지를 제작하면서 수평선은 <hr> 태그를 많이 사용했는 데
강의를 듣고 난 뒤 마크업 태그들의 의미와 쓰임새를 제대로 알고 사용해야겠다고
<hr> 태그는 문단 수준 요소 사이의 주제 구분(예를 들어 장면 전환, 참고서의 섹션 내 다른 주제로의 이동 등)을 나타내는 태그로 단순히 수평선 스타일로만 사용되는 것은 좋지 않은 사례라고 합니다.
✏️Learned 공부한 내용
그리드 시스템
- 페이지 콘텐츠를 논리적으로 일관성 있는 질서와 구조로 디자인할 수 있게 도와주는 그래픽 시스템을 말합니다.
- 여기서 그리드는 사전적 의미로 '격자 무늬' 또는 '격자판'을 의미합니다.
장점
- 컬럼 단위로 요소를 구성하므로 많은 양의 콘텐츠도 정돈된 느낌을 줍니다
- 격자 형식에 따르므로 블록을 쌓듯 디자인이 편리합니다.
- 일관되고 통일성 있는 아름다운 웹 디자인이 가능합니다.
- 반응형 디자인 설계시 해상도 대응이 용이해집니다.
구성 요소
- 칼럼(Column)
- 실제 콘텐츠를 포함하는 부분으로 1개 이상의 칼럼으 조합하여 콘텐츠의 크기를 결정합니다.
- 칼럼 안에는 반드시 양 옆에 여백을 둬야 합니다.
- 거터(Gutters)
- 칼럼과 칼럼 사이의 여백(콘텐츠와 콘텐츠 사이의 간격)을 말합니다.
- 마진(Margin)
- 화면의 맨 왼쪽 및 오른쪽 가장자리 사이의 공간을 말합니다.
- 칼럼과 칼럼 사이의 공간이 거터라면 칼럼과 화면과의 간격은 마진이라고 할 수 있습니다.
원고 그리드
칼럼 그리드 시스템
모듈 그리드
계층 그리드
8 Point Grid System
8 bit (0 또는 1의 값을 가지는 데이터 단위.) = 1byte (컴퓨터의 기억장치의 크기를 나타내는 단위. bit가 여러개 모인 것.)
- 주요 스크린 사이즈들이 8로 나눠 떨어지기 때문에 디자인 요소들의 사이즈는 8의 배수로 결정하는게 좋다고 합니다.
- 만약 5px 그리드라면 아래 그림처럼 1.5x 배율일 때 픽셀이 쪼개져서 끝이 흐릿하게 보이는 현상이 발생합니다.
- 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
저는 8포인트 그리드로 작업할 수 있는 패턴에는 한계가 있다는 것을 알게 되었습니다. 특히 각종 문구와 텍스트, 하이퍼링크, 표, 버튼 등이 아주 많은 인터페이스나 기업용 소프트웨어를 만들
yozm.wishket.com
참고 사이트
960 Grid System
Download - CSS, sketch paper, and templates for: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design. Repository at GitHub. Essence The 960 Grid System is an effort to streamline web devel
960.gs
웹사이트 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 */
}해상도에 따른 규격
유형
| 값 | 설명 |
| all | 기본값, 모든 미디어 유형 장치에 사용됩니다. |
| 프린터(인쇄) 장치에 사용됩니다. 인쇄용 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 앞으로 바라는 점
- 건강관리 잘하기
- 스트레스 덜 받기