Today I Learn - 2024.05.16 (1)* grid 로 레이아웃 잡기 (0) 공통 CSS/* common layout */.container { display: flex; flex-flow: column nowrap; align-items: center; min-height: 100vh; .header, .navigation, .footer { width: 100%; inline-size: 100%; height: 100px; block-size: 100px; }}.main { max-width: 100%; width: 90%; flex: 1 0 auto;} (1) grid-areas 로 잡기.main { --grid-gap: 24px; --colu..
Today I Learn - 2024.05.14* 유연하게 미디어(이미지, 비디오) 다루는 법(1) 반응형 이미지- div / span 요소 - figure 요소(1) - figure 요소(2) : alt=""를 안쓰고 figcaption 내용이 긴 경우 aria-describedby로 연결 이미지 캡션- picture, source 요소- 브라우저는 각 하위의 source 요소를 고려하고 그 중에서 가장 일치하는 항목을 선택함- source 요소에 일치하는 항목이 없을 땐 picture의 url이 선택됨 ⭐ ⭐ ⭐ ⭐ ⭐ 레이아웃과 컴포넌트는 분리해서 작성하자 ⭐ ⭐ ⭐ ⭐ ⭐ /* 레이아웃 */.box { width:..
Today I Learn - 2024.05.13* responsive web (반응형 웹)- 반응형 웹 설계는 웹 페이지가 모든 화면 크기와 해상도에서 잘 렌더링되면서 사용성을 보장하는 웹 디자인 접근방식@media (조건) { /* 조건이 만족되면 적용되는 style */}@media (min-width: 768px) { /* 768px ~ */}@media (max-width: 1200px) { /* ~ 1200px */}@media screen and (min-width: 768px) { } === @media (min-width: 768px) { }- 조건은 min-width, max-width를 기준 (반응형 웹 핵심 기술)- 안에 viewport가 선언되어야함* flex-basis- fl..
Today I Learn - 2024.05.10* box-sizing- CSS 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용됩니다. 요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 더해서 화면에 그립니다. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 합니다.content-box : 기본값, width + padding + borderborder-box : 테두리와 안쪽 여백의 크기도 요소의 크기로 고려. padding을 주어도 width 사이즈를 유지* flexflex-containerflex-flowjustify-content (메인축)align-items (교차축)order* float (떠있다)- 요소가 기본 레이아웃 흐름에서 ..
Today I Learn - 2024.05.09* input type의 비밀?- input의 type에 따라 모바일 환경에서의 키패드 모양이 달라진다?!* 인 경우 모바일에서 숫자 키패드가 올라온다.* 인 경우 모바일에서 숫자+문자 키패드가 올라온다.* icon을 쓸 때 주의점- web font를 쓰기 위해 fontawesome을 많이 사용한다. 이 때, 가 아닌 을 사용하도록 하자.- 로 아이콘을 나타낼 때 대체텍스트를 비워둔다. (alt=" ") → 스크린리더가 읽지 않는다.- CSS로 background-image로 넣기* box-shadow- 요소 박스에 그림자 효과를 넣는 속성이다..box { box-shaodw: 5px 5px 0 0 rgba(0, 0, 0, 0.7); /* box-sh..
Today I Learn - 2024.05.08* sr-only (Screen Reader Only)- 디자인상으로 화면에 표시되지는 않지만 스크린리더로는 접근이 가능하여 스크린리더 사용자에게 필요한 정보를 제공.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0; clip: rect(0 0 0 0);}* background💬 예시.box { width: 300px; height: 300px; background-image: url("이미지경로"); background-repeat: no-repea..
Today I Learn - 2024.05.07* 텍스트 및 글꼴- font-size: font-weight, font-style, font-variant, font-size, /line-height, font-family- 1순위 : font-wieght, font-style, font-varient 순서 상관X- 2순위 : font-size (필수)- 3순위 : /line-height- 4순위 : font-family (필수)💬 예시font: italic small-caps bold 12px /16px "Fira Sans", sans-serif;font-style: italic;font-variant: small-caps;font-weight: bold;font-size: 12px;line-heig..
Today I Learn - 2024.05.03* box-sizing- CSS 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용됩니다. 요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 더해서 화면에 그립니다. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 합니다.content-box : 기본값, width + padding + borderborder-box : 테두리와 안쪽 여백의 크기도 요소의 크기로 고려. padding을 주어도 width 사이즈를 유지* flexflex-containerflex-flowjustify-content (메인축)align-items (교차축)order* float (떠있다)- 요소가 기본 레이아웃 흐름에서 ..
