❤️Liked 느낀 점
지난 주 금요일이 휴강이라 그런지 정말 오랜만에 강의를 듣는 것 같았습니다🤣
오후에는 지난 주 제출했던 과제에 대한 피드백을 받았는데 @font-face 부분에서 웹폰트를 불러오는 과정에서 주소를
제대로 적지 않아서 오류가 발생했는데 이를 인지하지 못하고 과제를 제출했습니다🥲
새로 알게된 점은 @font-face에서 url 주소 오류가 나면 노트북에 있는 폰트를 보여주는 것과 font-display:swap을 설정하면 에러가 나도 기본 폰트를 불러온다는 사실을 알게되었습니다!
✏️Learned 공부한 내용
flex-direction
- Flex Container의 동작 방식을 변경합니다.
- 메인축과 교차축의 방향을 결정합니다.
특징
- 반응형 디자인에 유용합니다:
- 화면 크기에 따라 레이아웃을 쉽게 변경할 수 있습니다.
- 예: 데스크톱에서는 row, 모바일에서는 column으로 전환
- 브라우저 호환성:
- 대부분의 최신 브라우저에서 지원됩니다.
- IE11 이상부터 부분적으로 지원합니다.
- 다국어 지원:
- row-reverse는 오른쪽에서 왼쪽으로 읽는 언어(예: 아랍어)에 유용합니다.
- 중첩 사용:
- Flex Container 안에 다른 Flex Container를 넣어 복잡한 레이아웃 구성이 가능합니다.
- writing-mode 속성과의 관계:
- writing-mode가 변경되면 flex-direction의 동작도 그에 맞게 조정됩니다.
- 성능 고려사항:
- 많은 항목을 포함하는 큰 Flex Container의 방향을 자주 변경하면 성능에 영향을 줄 수 있습니다.
값
- row: 왼쪽에서 오른쪽 (기본값)
- row-reverse: 오른쪽에서 왼쪽
- column: 위에서 아래
- column-reverse: 아래에서 위
flex-direction 변경 시 영향
- Flex Items의 배치 방향이 바뀝니다.
- 관련 속성들의 작동 기준이 변경됩니다.
column 값 지정 시
- flex-basis, flex-grow, flex-shrink는 높이에 영향을 줍니다.
- justify-content, align-items의 작용 축이 바뀝니다.
메타 요소 viewport
- <head> 태그 내에 위치하는 HTML 요소입니다.
- 모바일 장치에서 웹 페이지 표시 방식을 제어합니다.
<head>
<meta name="viewport" content="속성1=값1, 속성2=값2, ...">
</head>- width: 뷰포트 너비 설정 (예: device-width)
- initial-scale: 초기 확대/축소 비율
- minimum-scale: 최소 축소 비율
- maximum-scale: 최대 확대 비율
- user-scalable: 사용자의 확대/축소 가능 여부
일반적인 사용 예시
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">미 작성 시
- 대부분 모바일 브라우저에서 980px 너비로 렌더링됩니다.
- 미디어 쿼리가 정상 작동하지 않을 수 있습니다.
- 페이지가 축소되어 표시됩니다.
CSS 커스텀 프로퍼티
- CSS에서 변수를 사용할 수 있게 해주는 기능입니다.
- 특정 스타일 값을 재사용 가능하게 하고, 코드의 유지 보수를 쉽게 만들어 줍니다.
CSS 변수의 특성
- 재사용성: 동일한 값을 여러 곳에서 사용할 수 있어 코드의 일관성을 유지할 수 있습니다.
- 유지 보수 용이성: 특정 값이 변경되었을 때, 해당 값을 참조하는 모든 요소에 변경 사항이 자동으로 반영됩니다.
CSS 변수의 기본 문법
- 변수 정의
- 변수는 :root 가상 클래스 내에서 정의할 수 있으며, 전역 변수로 활용됩니다
- 변수명은 반드시 --로 시작해야 하고, 대소문자를 구분합니다.
- 변수 사용
- 정의된 변수는 var() 함수를 사용하여 참조할 수 있습니다.
- 변수의 대체값(fallback) 지정
- 변수가 정의되지 않은 경우를 대비해 대체값을 지정할 수도 있습니다.
.box {
padding: var(--default-padding, 15px);
}이 경우, --default-padding 변수가 정의되지 않았을 때 대체값인 15px이 적용됩니다.
변수의 유효 범위(Scope)
- 전역 변수
- :root 가상 클래스 내에서 정의되며, 문서 전체에서 사용할 수 있습니다.
- 지역 변수
- 특정 요소 내에서만 유효하며, 해당 요소와 그 하위 요소들에서만 사용 가능합니다.
- 특정 컴포넌트에 독립적인 스타일을 적용할 수 있습니다.
<div class="container">
<div class="box">BOX</div>
</div>
<div class="outside">OUTSIDE</div>.container {
--padding-size: 20px; /* .container 및 그 하위 요소에서만 사용 가능한 지역 변수 */
}
.box {
padding: var(--padding-size); /* 유효 */
}
.outside {
padding: var(--padding-size); /* 유효하지 않음 */
}이 예시에서 --padding-size는 .container와 그 하위 요소인 .box에서만 유효하며, .outside에서는 적용되지 않습니다. 또한, 지역 변수와 전역 변수가 동일한 이름을 가질 경우, 지역 변수가 우선 적용됩니다.
@font-face
- 웹 폰트를 정의하고, 이를 웹 페이지에서 사용할 수 있게 해주는 CSS 속성입니다.
- 웹 사이트 방문자가 해당 폰트를 로컬 컴퓨터에 설치하지 않아도, 특정 폰트를 웹 페이지에서 사용할 수 있습니다.
기본 구조
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}주요 속성
- font-family:
- 폰트의 이름을 지정합니다.
- 이 이름은 이후 CSS에서 폰트를 참조할 때 사용됩니다.
- src
- 폰트 파일의 경로를 지정합니다.
- url() 함수를 사용하여 파일의 경로를 지정하며, 여러 형식의 폰트 파일을 한 번에 정의할 수 있습니다.
- 이때 각 폰트 파일의 형식을 format() 함수로 명시합니다.
- 일반적으로 woff나 woff2 형식을 많이 사용합니다.
- font-weight:
- 폰트의 굵기를 정의합니다.
- 보통 normal, bold, 또는 숫자 값(100~900)을 사용합니다.
- font-style:
- 폰트의 스타일을 정의합니다.
- 주로 normal, italic, oblique 값을 사용합니다.
폰트 파일 형식
- WOFF (Web Open Font Format): W3C에서 권장하는 웹 폰트 형식으로, 대부분의 브라우저에서 지원됩니다.
- WOFF2: WOFF의 후속 버전으로, 더 나은 압축률을 제공하며 최신 브라우저에서 지원됩니다.
- TTF (TrueType Font): Apple과 Microsoft에서 개발한 폰트 형식으로, WOFF보다 크기가 크지만 대부분의 브라우저에서 지원됩니다.
- EOT (Embedded OpenType): 주로 Internet Explorer에서 사용되는 형식입니다.
- SVG (Scalable Vector Graphics): iOS의 이전 버전에서 사용되던 폰트 형식입니다.
😔Lacked 부족한 점
종종 실습이나 과제를 진행하면서 A는 왼쪽 끝에 B는 오른쪽 끝에 붙이는 예제들이 많았는데
이럴 때 습관적으로 display:flex , justify-content:space-between 을 주었습니다.
결과만 봤을 때는 맞게 보이지만 나중에 또 다른 콘텐트가 추가 되었을 때 이상하게 보여질 수 있다는 것을 강사님께서 알려주셨고 margin을 주거나 flex-grow, flex-basis속성을 활용하는 게 더 좋다고 알려주셨습니다.
간혹 개발을 하면서 나중에 콘텐츠가 추가될 수 도 있겠구나 라는 생각을 잘 안 하고
그냥 결과물 예시만 보고 만드는게 습관이 되어서 고쳐야겠다는 다짐을 했습니다.
🙏🏻Longed For 앞으로 바라는 점
- 웹 개발 시 다음에 추가 될 콘텐츠가 있을 수도 있다는 가정을 한 채 개발 할 것
'Education > ⛺BootCamp' 카테고리의 다른 글
| [멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 16 [4주차] (0) | 2024.08.19 |
|---|---|
| [멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 14 ~ 15[4주차] (0) | 2024.08.15 |
| [멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 12[3주차] (1) | 2024.08.10 |
| [멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 09 ~ 10[3주차] (1) | 2024.08.06 |
| [멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 06 ~ 08 [2주차] (0) | 2024.08.06 |
