멋사 4주차

primav·2024년 8월 13일

CSS html 멋사

멋사

목록 보기

11/29

8/12 (월)

복습 ( `flexbox` )

가용 공간 활용 방법
1. 여백화 - margin

	.playground {
		display: flex;
	}
	.frog {
		flex-basis: auto;
	}
	.frog.first {
		**margin-left: auto;**
	}

너비화 - flex-grow
가용 공간을 비율로써 나눠 갖는다. ( flex-basis가 기준 )
➡️ 너비가 확장되는데 도움을 줌
❗️ block 레벨 요소의 width: auto 처럼 유연하게 사용

	.playground {
		display: flex;
	}
	.frog {
		flex-basis: auto;
        **flex-grow: 1;**
	}

	.frog {
		flex-basis: 0;
        **flex-grow: 1;**
	} ➡️ flex-basis 상관 없이 모두 같은 너비를 갖게 함

++ )

	.frog {
		width: 100%;
	} // 위와 같이 모두 같은 너비를 갖게 한다.
    ➡️ flex-shrink: 1 이라는 기본 속성 때문에

복습 ( `min-width` )

flex-shrink의 기본 값은 1이라고 했는데 공간이 부족한데도 방의 크기가 더 이상 안줄어들고 넘치는 이유가 무엇일까?

flex-shrink: 1때문에 너비가 줄어들다가 min-width: auto라는 기본 값 때문에 flex-items안의 컨텐츠의 값보다는 너비가 더 이상 줄어들 수가 없어진다. (컨텐츠: img)

👀 해결법

min-width: 0;
over-flow: hidden;
넘쳐 흐르는 것을 보여줄래, 자를래, 스크롤할래?
.frog img { width: 100% }
이미지 고유의 너비를 그대로
flex-wrap: wrap
flex-shrink가 있지만 공간이 밑으로 자꾸 늘어나므로 공간이 부족할 틈이 없어 실행 안됨
❗️ flex-container 에 사용 (부모)
❗️ 줄 바꿈은 flex-basis 기준
❗️ 각 row (한 줄 마다) 가용 공간이 생김
➡️ flex-grow:1 적용하면 그 가용 공간이 전부 채워짐

flex 단축 속성

💡 flex: 1
flex-grow: 1 + flex-shrink: 1 +
flex-basis: 0

💡 flex: 1 1 200px ➡️ grow, shrink. basis

justify-content

가용 공간이 없을 때 메인 축을 정렬하는 기능
❗️ flex-container 에 사용 (부모)

align-items

기본값: normal (stretch) 로 하위에 있는 모든 flex-items 들이 height에 따라 늘어난다.
❗️ flex-container 에 사용 (부모)

✔️ 맨 앞 요소만 바닥에 붙이고 싶을 때

.playground {
	display: flex;
    justify-content: center;
    align-items:center;
}
.frog.acgn {
	**align-self: flex-end;**
}

💡 align-items vs align-self

align-items - flex-container에 적용 (모든 flex-items 일괄 적용)

align-self - flex-item에 적용 (원하는 하나의 flex-item만 원하는대로 정렬 가능)

flex-direction : `column`

👀 flex-items의 너비가 flex-container를 꽉 채우는 이유는 무엇일까?
교차축인 align-itmes의 기본 값이 stretch 이므로

❗️ 바뀐 값들

justify-content (주축) - 세로
align-items (교차축) - 가로
flex-basis - 높이 결정
flex-grow
flex-shrink
min-height
➡️ 바뀐 메인 축 기준으로 모든 flexbox 속성 바뀜

메타요소 viewport

모바일 장치의 크기 기준으로 미디어 쿼리가 동작될 수 있게 한다.

💡 viewport
웹 페이지가 사용자에게 표시되는 영역을 의미

width=device-width // 모바일 장치의 너비에 맞춤
initial-scale=1.0 // 사용자가 축소할 수 있는 최소 비율
minimum-scale=1.0 // 사용자가 확대할 수 있는 최대 비율
user-scalable=no // 사용자가 페이지를 확대/축소할 수 있는지 여부

ex)
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

👀 그렇다면 viewport 메타 요소를 작성하지 않으면 어떻게 될까?

브라우저는 기본적으로 980px너비로 페이지를 렌더링하기 때문에 모바일에서 데스크탑 버전의 웹 사이트를 볼 때 페이지의 레이아웃이 깨지지 않도록 전체 사이트를 축소하여 화면에 표시한다.

➡️ 우리가 작성한 미디어쿼리가 제대로 동작되지 않는다.

8/13 (화)

각 아이템에 공통된 색 지정

예제 중 세개의 카드에 각각 다른 색을 세개 지정해서 각 카드의 color, box-shadow, background-color 에 사용할 수 있으므로 자유도가 높다.

1. 변수 사용

:root {
	--point-color: #f60;
}

color: var(--point-color); // 사용 시

전역적으로 사용하는 변수
➡️ 각각 색 지정하는 게 아니라 변수에 색을 한번만 지정하고 변수를 가져다 씀

2. 클래스로 묶기

✔️ before --> 각각 필요한 색 다 따로 지정

.hotdog {
  color: #ff6600;
}
.burger {
  color: #17a651;
}
.pizza {
  color: #0075ff;
}

.card-tag.hotdog {
  background-color: #ff6600;
}
.card-tag.burger {
  background-color: #17a651;
}
.card-tag.pizza {
  background-color: #0075ff;
}

✔️ after

✔️ html
<section class="card type_orange">


✔️ css

:root {
	--point-color: #f60;
}

.card.type_orange {
	--point-color: orange; // 변수를 오렌지 색으로
}
.card h1 {
	color: var(--point-color); // 오렌지색 h1
}

.card.type_green {
	--point-color: green; // 변수를 초록색으로
}
.card h1 {
	color: var(--point-color); // 초록색 h1
}

.card.type_blue {
	--point-color: blue; // 변수를 파란색으로
}
.card h1 {
	color: var(--point-color); // 파란색 h1
}

➡️ 같은 변수지만 각 지역 별로 다른 색을 할당한다.

⭐️⭐️ 각 아이템마다 통일된 색 적용하는 법 (지역 변수) ⭐️⭐️

클래스로 같은 색이 필요한 곳을 묶음

각 클래스마다 변수를 재정의

각 색을 지역 변수 개념으로 사용

컨텐츠 width

max-content - 모든 문장 다 보이게
min-content - 각 어절에서 가장 작은 단어 기준
fit-contnet - 문장에 딱 맞게 핏하게 (넘쳐흐르지 않게 컨테이너 기준 줄바꿈)
➡️ 콘텐츠에 맞추되 가용공간을 초과하지 않는다.

글자가 넘칠 때

글자가 박스를 넘쳤을 때는 띄어쓰기를 기준으로 줄 바꿈된다. 하지만 띄어쓰기도 하고 줄 바꿈도 원하지 않으면 어떻게 하면 좋을까? ➡️ white-space: nowrap

그렇다면 글자가 넘쳤을 때 전부 표시하려고 하지 않고 말줄임표로 표시하고 싶다면?

max-width: fit-content; // 핫도그랑 피자
width: auto; // 햄버거
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; // 말줄임표

기존의 fit-content로는 말줄임표 구현이 힘들다.
➡️ width: auto
띄어쓰기 관계없이 무조건 한줄로 나오게 강제
➡️white-space: norwap
넘쳐흐른 텍스트를 숨김 처리
➡️ overflow: hidden
잘린 부분 기준으로 말줄임표
➡️ text-overflow: ellipsis
❗️text-overflow는 한줄만 가능

+_+) 그러면 본문이 5줄만 나오게 하려면 어떻게 해야할까?
이 때는 5줄만 보이도록 임의로 높이를 조절한다.

overflow:hidden // 5줄 넘으면 안보이도록 자름

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6; // 줄 제한!
// 적용 안될 수도 있으니 밑의 코드도 넣으면 좋다

line-height: 1.4;
height: 1.4 곱하기 5줄에 해당하는 px;
➡️ height: cal( 1.4em * 6);

➡️ 폰트 사이즈가 달라지더라도 내가 원하는 6줄만 출력하도록 함

vender-Prefix

vender: 브라우저 제조사

일부 실험적인 CSS 속성 또는 값은 벤더 프리픽스와 함께 사용해야만 적용된다. 실험적인 속성 또는 값이란 아직 완전히 표준화되지 않은 기능을 의미한다.

브라우저 제조사들은 이러한 속성을 조건부로 공개하여 개발자들이 테스트하고 피드백을 제공할 수 있게 하는데 vender-prifix는 해당 속성 사용 시 주의가 필요하다는 것을 명시적으로 나타낸다.

➡️ 향후 브라우저 업데이트에 따라 이 속성이나 값의 사용법 또는 효과가 변경될 수 있음을 의미한다.

폰트 사이즈

❗️ em - 현재 지정된 폰트 사이즈의 배수
폰트 사이즈가 달라졌을 때 같이 동기화 되어 높이가 달라지는 것들을 만들 때 em 사용

font-size: 12px;
1em ➡️ 12px;

💡 1 vs 1em

parent {
	font-size: 10px;
	line-height: 1; // 상댓값
}

child {
	font-size: 20px; // line-height: 20px
}

➡️ 자식으로 넘어간 다음 그 폰트 사이즈에서 계산됨

parent {
	font-size: 10px;
	line-height: 1em; // 절댓값
}

child {
	font-size: 20px; // line-height: 10px
}

➡️ em은 단위이므로 현재 폰트 사이즈의 배수로 계산 된 다음 넘어가므로 위험하다.

폰트 설정 - 글씨체

각 언어별 글씨체를 변수에 설정해두고 쓰고 싶을 때 변수의 형태로 꺼내 쓴다.
➡️ font-family: var(--font-fo);

✔️ before

/* Typgraphy */
:root { 
	font-family: 'arial';
}

✔️ after

/* Variables */
:root {
  --point-color: #f60;

  --font-en: arial, sans-serif;
  --font-ko: "Noto Sans KR", sans-serif;

  --line-clamp: 8; /* 줄 제한 */
}

폰트 설정 - 줄 바꿈

영어는 어절 기준으로 띄어쓰기를 진행하고 줄 바꿈이 진행된다.

반면 한국어는 내가 정해놓은 width 에서 적힐만큼 적히고 줄바꿈이 진행되기 때문에 읽기 불편한 경우가 생길 수 있다.
ex)안녕하세
요

➡️ word-break: keep-all를 사용하면 한국어도 어절대로 줄 바꿈이 진행된다.

/* Typography */
:root {
  font-family: var(--font-en);
  word-break: keep-all; // 한국어의 어절이 그대로
  overflow-wrap: break-word; 
  /* word-wrap */
}

line height

한줄당 높이 설정을 의미하고 기본값은 line-height: normal이다.

❗️지정된 font-family에 따라 다르다!
❗️font-family에 따라 달라지는 요소가 많아 미리 폰트를 지정하고 나머지 스타일링을 지정해야한다.

💡 line-height를 직접 지정하는 케이스

내부 텍스트 세로 중앙 정렬 (고정 px로 지정)
❗️ 무조건 한 줄 일때만 !!!
✔️ height = line-heihgt 로 동일하면 가운데 정렬됨

일반적인 문단의 경우 (상대적 숫자로만 지정)

font-size는 변경 되었는데 line-height는 고정이 되어버리므로 유지보수 차원에서 불리하다.

❗️ font-size의 변화에 유연하게 대응 하는 line-height를 설정해야한다.
❗️ 고정 px이 아닌 그냥 상대적 숫자 값 ex) 1.4, 1.6

레이아웃 이동

웹 페이지를 로드하거나 콘텐츠가 동적으로 추가될 때, 화면의 요소들이 갑자기 이동하는 경험을 해본 적이 있을 것이다.

이러한 갑작스러운 레이아웃 이동은 사용자가 페이지를 이용할 때 불편함을 느끼게 할 수 있다.

💡 해결 방법

1. 고정 크기 설정

동적으로 로드되는 이미지나 비디오 같은 요소들이 페이지의 다른 콘텐츠를 밀어내지 않도록, 이러한 요소들에 대해 미리 공간을 확보해 두는 것

	<img src="icon.png" width="200" height="200">

❗️ 하지만 고정된 width와 height를 설정하는 방법은 반응형 웹 디자인에서 적합하지 않다. --> aspect-ratio

2. `aspect-ratio` 속성 활용

특히 반응형 웹에서, img 요소에 aspect-ratio 속성을 사용하는 것이 매우 유용하다. 이 속성은 요소의 너비와 높이의 비율을 지정하여, 콘텐츠가 로드되기 전에도 안정적인 레이아웃을 유지할 수 있게 도와준다.

	<style>
 	 .responsive-image {
  	  aspect-ratio: 16 / 9; /* 원본 이미지의 비율을 미리 명시 */
	  }
	</style>
	<img class="responsive-image" src="example.jpg">

8/14 (수)

Position에 대한 내용 따로 정리 - Position 내용 정리

`100%` vs `100vh`

부모가 auto이면 100%를 사용할 수 없음

height: 100%는 부모의 높이를 기준으로 가득 채운다.
➡️ 부모의 높이가 없다면 height: 100% 속성을 사용할 수 없다.

하지만 유지보수의 측면에서 내용은 계속 추가가 되고 그 에 따라 높이가 늘어나게 되도록 height: auto라는 기본 값으로 그대로 두는 경우가 많다.

이런 경우에 부모의 높이가 설정이 안되어있을 때 height: 100%처럼 높이를 가득 채우고 싶을 때는 어떻게 해야할까?
➡️ height: 100vh
➡️ 뷰포트를 기준으로 꽉 채움
(비슷하게 vw도 너비 개념에서 사용 가능)

그러면 height를 부모 요소의 전체를 사용하는 것이 아니라 적당히 비율로써 사용하고 싶으면 어떻게 해야할까?

💡 aspect-ratio
반응형에 적합한 속성으로 미리 크기를 정해놔서 안의 요소의 로딩이 느려져도 밑의 컨텐츠를 그리는데에 문제 없다.

aspect-ratio: 24 / 9 -> 24:9 로 크기 설정

이미지 크기 초기화

img {
	**max-width: 100%**
    vertical-align: unset; // 이미지 밑의 빈공간 삭제
}

이미지가 최대 커질 수 있는 크기를 컨테이닝 블록 기준으로 제한을 건 것이다.

➡️ 이미지가 엄청 커지는 것을 막을 수 있다.

마크업을 백그라운드 처럼 사용

aspect-ratio: 24 / 9 - 부모 요소가 19:9 비율인데 실제 사진은 19:9의 비율이아니다.
width: 100% height: 100% - 억지로 부모(비율)에게 맞춰 주면 사진이 찌그러진다.
object-fit: cover - 찌그러졌던 사진이 원래의 이미지가 있던 비율 그대로 나올 수 있고 부모 요소의 비율로 cover(일부를 자름) 된다.

💡object-fit
img 요소에 지정된 너비와 높이의 공간에 이미지를 채우려고 할 때 어쩔 수 없이 본래 이미지의 가로 세로 비율이 깨지는데 이걸 해결하기 위한 속성

++) 이미지와 비디오 = object

8/15 (목)

휴강 ㅎㅎ

8/16 (금)

primav

이전 포스트

실습 - FOOD

다음 포스트

멋사 4주차

멋사

8/12 (월)

복습 ( `flexbox` )

복습 ( `min-width` )

flex 단축 속성

justify-content

align-items

flex-direction : `column`

메타요소 viewport

8/13 (화)

각 아이템에 공통된 색 지정

1. 변수 사용

2. 클래스로 묶기

컨텐츠 width

글자가 넘칠 때

vender-Prefix

폰트 사이즈

폰트 설정 - 글씨체

폰트 설정 - 줄 바꿈

line height

레이아웃 이동

1. 고정 크기 설정

2. `aspect-ratio` 속성 활용

8/14 (수)

`100%` vs `100vh`

이미지 크기 초기화

마크업을 백그라운드 처럼 사용

8/15 (목)

8/16 (금)

실습 - FOOD

과제 - Incredible

0개의 댓글

멋사 4주차

멋사

8/12 (월)

복습 ( flexbox )

복습 ( min-width )

flex 단축 속성

justify-content

align-items

flex-direction : column

메타요소 viewport

8/13 (화)

각 아이템에 공통된 색 지정

1. 변수 사용

2. 클래스로 묶기

컨텐츠 width

글자가 넘칠 때

vender-Prefix

폰트 사이즈

폰트 설정 - 글씨체

폰트 설정 - 줄 바꿈

line height

레이아웃 이동

1. 고정 크기 설정

2. aspect-ratio 속성 활용

8/14 (수)

100% vs 100vh

이미지 크기 초기화

마크업을 백그라운드 처럼 사용

8/15 (목)

8/16 (금)

실습 - FOOD

과제 - Incredible

0개의 댓글

복습 ( `flexbox` )

복습 ( `min-width` )

flex-direction : `column`

2. `aspect-ratio` 속성 활용

`100%` vs `100vh`