오늘은 오전에 그동안 배웠던 HTML과 CSS를 복습하는 영상강의가 있었습니다.
그리고, 기존 강사님께서 어제 완료 하지 못했던 CSS flex 일부 강의하면서 CSS 에서 예정됐던
진도는 완료하였습니다. 그리고, javaScript 강의가 시작되었습니다. 오늘은 개요 정도 알아봤습니다.
HTML과 CSS에 자신이 없다보니 과제가 좀 부담이 됩니다.
겉으로 보이는 것보다 내부의 코드가 좋지 않을게 예상됩니다
요소 하나하나 배웠지만 머리속에서 떠올려가며 만드는 과정은 완전히 다른 일이라고 느껴집니다.
연습이니 열심히 해봐야겠습니다. ^^
결국 많이 만들어 보고 코드 가지고 고민을 해야 실력이 늘테니까요.
오늘 배운 부분 정리해보겠습니다.
flex-container에 사용하는 속성 - 어제 못한 부분
align-item : 교차 축을 기준으로 정렬합니다.
align-content : 컨테이너의 교차 축의 아이템들이 여러 줄일때 사용 가능합니다.
(flex-wrap: wrap) 인 상태에서 사용해야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item {
/*text-align: center;
line-height: 50px;*/
/* item에서 flex 선언을 하면 이 안에서 주축과 교차축에 center를 주면 된다. */
display: flex;
justify-content: center;
align-items: center;
width : 50px;
height : 50px;
background-color: royalblue;
color: white;
}
.container {
display: flex;
justify-content: flex-end;
align-items: center;
width: 600px;
height: 600px;
background-color: gray
}
</style>
</head>
<body>
<div class="container">
<div class="item">A</div>
</div>
</body>
</html>item을 container의 오른쪽 가운데에 위치하게 하는 연습문제입니다.
배운 것으로 간단하게 할 수 있었는데 item안에 글자의 위치를 item의 가운데에 위치하게 하는 부분에서
순간 헷갈렸습니다. item에 display: flex; 하고 주축과 교차축을 조정하면 되는 문제였습니다.
gap 속성은 아이템 사이의 간격을 설정할 때 사용 할 수 있는 속성입니다.
원래는 없었으나 grid에서 사용되던 속성이 flex에도 적용이 된 것 같다고 말씀하셨습니다.
flex-wrap 속성은 한줄에 배치되게 할 것인지, 가능한 영역 내에서 여러 행으로 나누어 표현할 것인지 결정합니다.
보통 flex-direction 과 사용될 일이 많아 아래처럼 씁니다.
flex-direction: row;
flex-wrap: wrap;이 코드는 다음과 같이 줄여서 사용할 수 있습니다.
flex-flow: row wrap;flex-item에 사용하는 속성
첫번째로 flex-basis 가 있습니다.
flex-item의 초기 크기를 설정합니다.
width, height 와 다른 점은 축의 방향에 따라 달라진다는 것과 내부 콘텐츠에 따라 유연한 크기를 가진다는 점입니다.
기본값은 auto 입니다.
flex-basis 값이 적용이 되었다면 row 일 경우 width 값이 무시, column 일 경우 height 값이 무시됩니다.
두번째로 flex-grow 가 있습니다.
아이템이 컨테이너 내부에서 할당할 수 있는 공간의 정도를 지정합니다.
형제 요소인 아이템들이 모두 같은 flex-grow 값을 가지면, 내부에서 동일한 공간을 할당 받습니다.
값을 0 을 줄 경우 늘어나지 않습니다.
flex-grow : 1 -> 자식 요소들이 모두 동일한 크기의 공간을 할당 받습니다.
flex-grow : 2(2이상의 수) -> 특정한 하나의 자식에게만 줄 경우 다른 자식요소 보다 두배(배수로)의
여백 공간을 할당 받습니다. 만약 자식요소들의 컨텐츠 크기가 존재한다면 그 컨텐츠의
넓이에 따라 할당 받는 값이 달라집니다.flex-basis: 0 을 주게 되면 여백 공간이 아니라 전체 공간을 분할 합니다.
세번째로 flex-shrink 가 있습니다.
아이템의 크기를 고정하거나 축소할 때 사용합니다.
값을 0 을 줄 경우 줄어들지 않습니다.
네번째로 align-self 가 있습니다.
부모의 align-items 속성보다 우선해서 적용되어 flex-item 에게 개별적인 align-items 속성을 부여합니다.
기본값은 stretch 입니다. 교차축 기준으로, 부모 컨테이너에 맞게 신축적으로 늘어납니다.
center, flex-start, flex-end, baseline 등의 값을 줄 수 있습니다.
그외 여러 사이트들을 추천 받아서 퀴즈도 풀어보고, 코드도 살펴봤습니다.
추천받은 사이트 들을 정리해 보겠습니다.
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
flex 관련해서 간단한 퀴즈를 풀어보는 사이트입니다. 한 두문제 빼고 그리 어렵지 않게 풀 수 있었습니다.
flexngrid
flex와 grid를 좀 더 쉽게 접하고 학습할 수 있는 웹페이지입니다.
flexngrid.com
flex 와 grid 관련해서 코드와 그에 따른 변화를 확인해볼 수 있는 사이트입니다.
https://imjignesh.com/how-css-perspective-works/
CSS Perspective Explained with Example 3D Transform in CSS
CSS Perspective enables true 3d movements for 3d transformed objects. Explore ways to manipulate and use these 3d techniques using CSS Perspective.
imjignesh.com
마지막으로 CSS perspective 사이트인데 CSS로 3D 효과를 내는 방법과 관련된 사이트입니다.
javaScript 관련해서도 배웠지만 아직 기초부분이라 따로 정리하지 않았습니다.
javaScript는 파이썬과 비슷한 부분들이 있어서 그래도 잘 사용할 수 있지 않을까 합니다.
브라우저에서 독점적인? 지위를 가지고 있고, node.js 로 진화하고, 백엔드까지도 가능해지고 있다고
말씀해주셨습니다. 항상 어지러운 코드라는 느낌을 가지고 있는데 모르는 사이 이렇게 진화했습니다.
오늘은 오전에 복습강의를 듣다 보니 내용이 짧습니다.^^
내일부터 진행되는 javaScript 와 HTML, CSS 과제를 잘 마무리 했으면 좋겠습니다.
내일도 화이팅!^^
'오름캠프(23.12.28 ~ 24.4.18)' 카테고리의 다른 글
| 오름캠프 학습일지(2024/02/05) - 7주차 1일 (1) | 2024.02.05 |
|---|---|
| 오름캠프 학습일지(2024/02/02) - 6주차 5일 (0) | 2024.02.02 |
| 오름캠프 학습일지(2024/01/31) - 6주차 3일 (2) | 2024.01.31 |
| 오름캠프 학습일지(2024/01/30) - 6주차 2일 (1) | 2024.01.30 |
| 오름캠프 학습일지(2024/01/29) - 6주차 1일 (1) | 2024.01.29 |