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를 기준 (반응형 웹 핵심 기술)
- <head>안에 viewport가 선언되어야함
* flex-basis
- flex-item의 기본 너비값
- px, % 등 단위로 지정
- default값은 auto
* flex-grow
- flex-item 요소가 flex-container 요소 내부에 서 할당 가능한 공간의 정도를 선언(너비에 대한 확대인자)
- default값은 0
* flex-shrink
- flex-item 요소의 flex-shrink 값을 설정(너비에 대한 축소인자)
- default값은 1
- 0을 지정하면 원래의 너비를 유지한다.
* flex
- flex-grow, flex-shrink, flex-basis 순서대로 shorthand
- default값은 0 1 auto
* gap
- flex box를 사용하면서 flex-item들의 사이에 여백을 준다.
flex-item {
gap: 10px;
/* gap: 상하좌우10px */
ga;: 10px 20px;
/* gap: 상하10px 좌우20px */
}* 과제 피드백
- 로고를 만들 땐 <h1> 요소와 <a>요소를 이용해서 만든다.
- <picture>, <source>, <img> 요소를 사용하여 로고를 마크업 하는 것을 추천
<h1 class="logo">
<a href="/">
<picture>
<source srcset="./logo.png" />
<img src="./logo.svg" alt="네이버로고" />
</picture>
</a>
</h1>- <a> 링크가 새창으로 열릴 경우 rel="noopener noreferrer”를 함께 명시하는 것을 추천
<a href="#" target="_blank" rel="noopener noreferrer">이동할 사이트</a>- ON/OFF를 위해 두 개의 체크박스를 제공하는 것은 바람직하지 않음. 하나의 체크박스로 현재 선택된 상태를 서버에 전송할 수 있도록 구현하여야 함.
<div action="/" class="ip-toggle-group">
<input type="checkbox" id="toggle-on" value="ip_security-on" name="ip_security-on" checked />
<label for="toggle-on"></label>
</div>input[type="checkbox"]:checked + label::before {
content: 'ON';
display: block;
color: var(--primary-color);
}
input[type="checkbox"] + label::before {
content: 'OFF';
display: block;
}
남은 피드백이 있지만... 시간이 부족하여 수요일에 휴강이니 그 날 잘 이해가 안되는 부분을 찾아볼 예정이다.
사람들이 HTML과 CSS를 우습게 보는 경우가 많지만... 공부할게 정말많다.
오늘 선생님께서 내 과제 리드미를 읽고 칭찬해주셔서 너무 부끄러워 몸둘바 몰랐다....🤭🤭🤭🤭🤭
다른 동기분들이 한 코드도 보고 피드백도보고.. 오늘 조원분들과 수업 후에 이것저것 얘기했는데 공감되는 부분이 많아서 너무 즐거웠다...😎
안다고 착각하지말고 모르는게 있으면 바로바로 질문하여 머리속에 넣자!!! 화이팅!!!
'TIL' 카테고리의 다른 글
| [멋쟁이사자처럼 - 프론트엔드 스쿨 TIL] grid layout (0) | 2024.05.16 |
|---|---|
| [멋쟁이사자처럼 - 프론트엔드 스쿨 TIL] 반응형 미디어, grid (0) | 2024.05.15 |
| [멋쟁이사자처럼 - 프론트엔드 스쿨 TIL] CSS (0) | 2024.05.13 |
| [멋쟁이사자처럼 - 프론트엔드 스쿨 TIL] CSS (0) | 2024.05.09 |
| [멋쟁이사자처럼 - 프론트엔드 스쿨 TIL] CSS (0) | 2024.05.08 |
