CSS Flex_240430

Sseul·2024년 4월 30일

TIL

목록 보기

11/17

🎉 오늘 한 일

☑️ 팀내 과제 CSS Flex익히기(section3,5)
☑️ 개인과제 재재출
☑️ 튜터님께 aysn await 함수 설명듣기
☑️ 19시 git 심화 특강
□ 생활코딩 JS 완강

💡 새로 알게 된 것

CSS Flex 기본 원리

CSS 사용시 Flex 또는 Grid 방법을 쓰게 되는데 그래도 가장 많이 쓰는건 Flex이기에 이부분에 대해 알아보려 합니다.

1) 먼저 Flex레이아웃 만들기 위해 HTML구조를 아래와 같이 작성한다.

ex) 부모요소 - leaf(나뭇잎)
자식요소 - waterdrop(물방울)

<div class="leaf">
	<div class="waterdrop">물방울1</div>
	<div class="waterdrop">물방울2</div>
	<div class="waterdrop">물방울3</div>
    <div class="waterdrop">물방울4</div>
</div>

2) 나뭇잎(leaf)에 적용하는 속성은 flex를 적용해준다. 여기부턴 CSS

.leaf {
	display: flex;
}

❓ 여기서 알아야 할 것

예를들어 나뭇잎 안에 물방울들이 가로로 나열 되어있다고 해봅시다.
기준이 되는 정렬 축을 메인축이라 합니다. (가로축)
메인 축의 반대는 교차축이라 합니다. (세로축)

3) 나뭇잎의 방향을 결정해준다.

물방울들이 배치되는 축의 방향을 결정하는 방법이 있습니다.
즉, 나뭇잎 방향이 가로로 할지 세로로 할지 정해주는 것입니다.

➊ flex-direction속성 값을 row으로 적용하면 ?
.leaf {
	flex-direction: row;
}
물방울들이 가로방향👉으로 배치됩니다.(기본값)
➋ flex-direction속성 값을 column으로 적용하면 ?
.leaf {
	flex-direction: column;
}
물방울들이 세로방향👇으로 배치됩니다.

4) 나뭇잎 방향에 따라 물방울들을 정렬해준다.

➊ 메인축 방향 정렬(justify-content)
메인축(가로축) 방향을 따라 물방울들을 정렬합니다.
.leaf {
	justify-content: center;
}
center 값을 적용시 나뭇잎 중앙에 위치하도록 정렬됩니다.
➋ 수직축 방향 정렬(align-items)
수직축(세로축) 방향을 따라 물방울들을 정렬합니다.
.leaf {
	align-items: center;
}
center 값 사용하면 나뭇잎 수직 가운데에 위치하도록 정렬됩니다.

😳 여기서 햇갈릴만한 점 😳
기본적으로 flex-direction이 row로 설정됩니다. 만약 따로 설정하지 않는다면?
justify-content가 가로축으로 기준이되어
align-items가 세로방향으로 정렬해줍니다.

만약 flex-direction을 cloumn으로 바꾸면?
메인축이 교차축 방향으로 바뀝니다.
즉, 가로축이 수직으로 축이 변경된다는 것
그럼 justify-content가 수직축으로 기준이 되어 align-items 가로방향으로 정렬해줍니다.

🤔 하루 돌아보기

개인 과제 해설 강의를 보며 다시한번 수정하고 제출하고, 피드백한 내용을 보았다.
전 팀원분이 async await 함수 궁금해해서 같이 찾아가서 설명도 들었는데 넘 쉽게 설명해주셔서 단번에 이해가 되었다. 물론 표현하기까지는 지금은 어려운 단계이지만 ..! 아직 조금씩은 이해하고 나아가는 중인것 같다.
지금 팀원분께서 CSS 공부를 제대로 하고자 가이드 영상도 찍어주시고 그거 보고 그대로 따라하는데 꽤 도움이 많이 된다.
이렇게 도와주시는 분들이 많으니 더더욱 열심히 해야겠다는 생각밖에 안든다.
아직 자바스크립트 문법은 내 머릿속에 혼돈의 상태인데 팀프로젝트 하면서 하나씩 정립해가면 되지 않을까 싶다^^