멋사 3주차

primav·2024년 8월 6일

CSS html 멋사

멋사

목록 보기

7/29

8/5 월

`layout_wrapper`

❗️ wrapper는 양 옆에 padding이 들어가고 그 가운데에 위치하는 부분을 묶는다. (전체 화면 묶는 것 x)
❗️ 같은 너비를 가지고 같이 위치 이동을 하는 것을 묶는다.

❗️ wrapper 를 각 클래스의 안에 넣을 수도 있음!!
❗️ 헤더와 콘텐츠의 저 박스 부분은 같은 너비를 가지고 같이 이동해야 하므로 wrapper라는 같은 클래스로 처리할 수 있다.

❗️ 최소한의 태그를 이용해서 코드 작성하기
(너무 많은 태그를 적으면서 스타일링을 하면 길을 잃는다)

크게 세 덩어리로 페이지를 나눈다.
같은 너비를 가지고 같이 위치를 이동하는 부분을 wrapper 로 묶는다.
Container를 사용하여 Header 부분안의 내용을 표시한다.

❗️ wrapper : layout을 위한 클래스로 디자인 보다는 레이아웃에 사용할 것이다.
❗️ Container 클래스를 작성한 이유 border과 background-image를 표시하기 위해서 사용한다고 생각이 된다.

✔️ 레이아웃을 위한 박스

✔️ 이 안의 요소들은 컴포넌트로 따로 코드 작성

✔️ 레이아웃을 위한 박스 1

✔️ 레이아웃을 위한 박스 2

하지만! 1의 사진 처럼 각각 다른 클래스에서 원하는 만큼만 저렇게 wrapper로 감쌀 수는 없다.

만약 wrapper 안에 header content footer을 전부 넣어서 wrapper로 전체를 감쌌다면

➡️ 내가 처음에 작성한 before 코드
➡️ wrapper를 하는 의미가 없다.

✔️ Before

 <body>
    <div class="wrapper">
    	<div class="laboratory">
        	<header class="laboratory-header"> </header>
        	<main class="laboratory-content"> </main>
            <footer class="laboratory-footer"> </footer>
        </div>
    </div>
 </body>

그래서 사진과 같이 각각 다른 클래스를 포함하고 원하는 크기만큼의 wrapper를 지정하려면 밑의 사진과 같이 각 클래스 안에서 .wrapper를 따로따로 넣어서 사용해야한다.

➡️ after 코드

✔️ After

<body>
  <header class="laboratory-header">
 		<div class="wrapper">
        <section class="continer"></section>
    	</div>
 	</header>
  <main class="laboratory-content">
 		<div class="wrapper"></div>
 	</main>
  <footer class="laboratory-footer">
 	</footer>
  </div>
</body>

.wrapper의 스타일링은 한번만 지정하면 각 클래스 안에서 똑같이 사용하여 한번에 스타일링이 가능하다.

✔️ 목적성을 부여하기 위해 이름에 통일성 부여 (layout_wrapper)

인라인 요소 정렬

인라인 요소의 정렬은 vertical-align 속성으로 조절할 수 있다. 기본값은 baseline에 의해 정렬되므로 텍스트일때는 baseline 즉 글자의 아래이고 이미지일 때는 텍스트가 없으므로 텍스트의 baseline에 맞춘다.

vertical-align=top 을 이용하면 baseline 과 상관없이 위로 정렬이 되는 걸 볼 수 있다.

가상 요소 (`pseudo element`) ::

가상 클래스 :
가상 요소 ::

실제 마크업에는 존재하지 않는데 css파일에서 임의로 넣어줄 수 있음 (가상으로)

::after - 지정 요소 뒤에 사용
::before - 지정 요소 전에 사용
ex)

.main h1::after {
content: 'wow';
background-color: red;

인라인 블록

인라인 블록을 사용하면 요소들 사이에 간격이 생긴다.
이를 해결하기 위해서는 부모 요소에 font-size: 0 을 지정하여 간격을 없애는 트릭이 있다.

`background`

❗️ 배경 이미지를 배경 사이즈에 맞게 조절하고 싶으면

background-size: cover

❗️ 배경 색을 이렇게도 지정할 수 있다!

background-color: currentColor

8/6 화

`flexbox`

하나의 아이템 박스를 flex items들이 공유한다.
부모 관점에서 바로 밑의 자식들의 레이아웃을 조절하는 것이다.

💡 display: inline 대신 display: flex를 사용하는 이유
가용 공간을 여백화 할 수 있다.
➡️ 가용 공간 중 내가 원하는 곳에 개구리를 둘 수 있다.

❗️ 자식 관점 정렬
flex-item들 끼리의 정렬
(가용 공간 = flex-item 에게 주어지는 공간)을 통해 정렬

margin(left, right): 0 auto

❗️ 부모 관점 정렬
flex-container를 기준으로 정렬

justify-content
align-items

⭐️ 부모 기준으로 정렬하여 자식 요소들을 한번에 적용 시킨 다음 자식 요소로 정렬하여 개별적으로 정렬을 조절

<div class="playground">
   <div class="frog"><img src="images/frog.png"></div>
   <div class="frog"><img src="images/frog.png"></div>
   <div class="frog"><img src="images/frog.png"></div>
</div>

div 요소는 블록 요소이므로 한 요소당 한줄의 공간을 전부 차지한다. 그렇다면 인라인 요소로 변환하지 않으면서 이 개구리들을 한줄에 두고 싶으면 어떻게 해야할까?

❗️부모 요소에 display: flex 를 하면 된다.

부모 - flex-container (display: flex)
자식 - flex-items

자식 관점 (flex items)

.frog.last {
	background-color: orangered;
    **margin-left: auto**
}

.frog: nth-child(1) {
    **margin-right: auto**
}
.frog: nth-child(3) {
    **margin-left: auto**
}

.frog {
    **margin: 0 auto**
}

.frog: nth-child(1) {
    **margin-left: auto** // 오른쪽으로 밀기
}
.frog: nth-child(3) {
    **margin-right: auto** //왼쪽으로 밀기
}

그렇다면 자식 요소가 부모 요소보다 넘친다면?

➡️ 넘친다 (overflow)
➡️ 가용 공간 없음!!

부모 관점 (flex-container)

justify-content - main 축 기준
align-items

`justify-content`

.playground {
	display: flex;
    justify-content: center;
}

❗️ 부모와 자식을 각각 정렬하면 자식을 기준으로 정렬한다.
(자식 이기는 부모 없다 ㅎㅎ)

.playground {
	display: flex;
    justify-content: center;
}
.frog {
	margin: left
}

`align-item`

기본 값은 align-item: stretch로 높이에 맞춰 늘어난다.

❗️부모 기준으로 자식들이 위아래로 stretch

하나의 자식 요소를 height: 500px 로 조정한다.
부모 요소의 높이가 그 자식에 맞추어 늘어난다 (stretch)
부모 요소에 맞추어 모든 자식들의 높이가 늘어난다. (stretch)

.playground {
	display: flex;
    height: 500px;
    justify-content: center;
    align-items: flex-start;
}

➡️ 세로로도 가용 공간 생긴다.

.playground {
	display: flex;
    height: 500px;
    justify-content: center;
    align-items: flex-start;
}

.frog.last {
	background-color: orangered;
    margin-top: auto;
}

➡️ 가용 공간 이용하여 자식 요소들 정렬
➡️ 자식이 먼저 정렬되고 그 다음이 부모 정렬
(자식 이기는 부모 없당)

`flex-wrap`

기본값은 flex-wrap: no-wrap으로 넘치면 삐져나간다.
flex-wrap: wrap을 이용하여 넘치는 요소를 감싼다.
➡️ 넘치는 요소가 밑으로 내려감

.playground {
	display: flex;
    height: 500px;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap
}

`gap`

부모 요소에 gap 속성을 이용하면 자식 요소들 사이에 간격을 조정해준다.

❗️요소들마다 margin 줄 필요는 없다.
예전 방식 ) 각 요소들마다 margin-right를 준다.
하지만 이렇게 하면 마지막 요소에는 margin-right:0을 따로 적용해야 하므로 귀찮다.

➡️ 이 문제를 해결하기 위해 gap 속성 사용!!
요소들 사이의 간격만 알아서 조정해줌

.playground {
	gap: 20px;
}

`max-width`

width: auto가 가장 이상적인 속성이다.
하지만 이렇게 하면 창의 크기를 줄이면 가로로 스크롤이 뜬다.
(➡️ 반응형 웹페이지의 이유)

.l_wrapper {
  width: auto;
  max-width: 1200px;
}

width: auto에 의해 부모의 너비에 (창 너비) 맞춰 가득 차려고 시도하지만
max-width: 1200px에 의해 최대 사이즈로 리밋

➡️ 창의 크기가 1200 이하일 때까지는 창에 너비에 맞추어 계속 커지다가 창이 1200을 넘으면 너비가 1200으로 고정(limit)된다.

8/7 수

피그마 특강 - 따로 작성

8/8 목

flex-items에 width를 주면 min-width 값은 신경쓰지 않아도 된다.

❗️ min-width가 width에 동기화 되기 때문

❗️ flex-basis >> width
두개다 지정되어있으면 flex-basis가 우선시 된다.

레이아웃

flex-basis + min-width = width

과제에 대한 리뷰 진행 (따로 작성)
➡️ 과제 - VEAMFLEX

8/9 금

휴강

primav

이전 포스트

실습 - Bucket List

다음 포스트

멋사 3주차

멋사

8/5 월

`layout_wrapper`

인라인 요소 정렬

가상 요소 (`pseudo element`) ::

인라인 블록

`background`

8/6 화

`flexbox`

자식 관점 (flex items)

부모 관점 (flex-container)

`justify-content`

`align-item`

`flex-wrap`

`gap`

`max-width`

8/7 수

8/8 목

레이아웃

8/9 금

실습 - Bucket List

실습 - VEAMFLEX

0개의 댓글

멋사 3주차

멋사

8/5 월

layout_wrapper

인라인 요소 정렬

가상 요소 (pseudo element) ::

인라인 블록

background

8/6 화

flexbox

자식 관점 (flex items)

부모 관점 (flex-container)

justify-content

align-item

flex-wrap

gap

max-width

8/7 수

8/8 목

레이아웃

8/9 금

실습 - Bucket List

실습 - VEAMFLEX

0개의 댓글

`layout_wrapper`

가상 요소 (`pseudo element`) ::

`background`

`flexbox`

`justify-content`

`align-item`

`flex-wrap`

`gap`

`max-width`

실습 - VEAMFLEX