Flex

align-items

cross-axis 방향으로 정렬하는 속성
여러줄일 때, 줄간의 간격은 유지하면서 center로 옮겨준다.
align-items: stretch(기본값), center, flex-start, flex-end;


<align-items : center;를 적용했을 때>

<align-items : flex-start;를 적용했을 때>

align-content

cross-axis 방향으로 정렬하는 속성
여러줄일 때, 줄간의 간격은 무시하고 옮길 수 있다
<align-content : center;를 적용했을 때>

<align-content : flex-start;를 적용했을 때>

flex-basis

자식요소에 사용한다. flex item 들의 크기를 특정한다. width, height 와 다른점은 axis 방향에 따라 달라진다는 것 그리고 내부의 컨텐츠에 따른 유연한 크기이다. 기본값은 auto이다. auto 일때는 width, height 값을 사용한다.
만약 flex-basis 값이 적용되어 있다면 width, height 값은 무시됩니다.

flex-grow

자식요소에 사용한다. flex-basis의 값에서 더 늘어나도 되는지 지정하는 값으로, 할당된 값에 따라 자신을 감싸는 컨테이너의 공간을 할당하도록 한다. 쉽게 말해서 커질 때, 커지는 비율을 나타낸다.

flex-shrink

자식요소에 사용한다. flex-grow에 반대되는 개념으로 flex-basis의 값에서 더 줄어들어도 되는지 지정하는 값이다. 크기를 고정하거나 줄이는 역할을 한다. 쉽게 말해서 줄어들 때, 줄어드는 비율을 나타낸다.

flex 속성

flex-grow, flex-shrink, flex-basis를 축약하여 한 번에 나타내는 속성.

/* flex: flex-grow, flex-shrink, flex-basis */
flex :1; /* flex-grow:1; flex-shrink:1; flex-basis:0; */
flex :1 1 300px; /* flex-grow:1; flex-shrink:1; flex-basis:300px; */

---

Grid

Grid란?

display: grid; 로 grid container와 item을 설정한다. (container에게 주는 값)

• 그리드 컨테이너 : 그리드의 가장 바깥영역
• 그리드 아이템 : 그리드 컨테이너의 자식 요소들
• 그리드 트랙 : 그리드의 행(row) 또는 열(column)
• 그리드 셀 : 그리드의 한 칸 (개념적인 정의)
• 그리드 라인 : 그리드 셀을 구분하는 선
• 그리드 넘버 : 그리드 라인의 각 번호
• 그리드 갭 : 그리드 셀 사이의 간격
• 그리드 에어리어 : 그리드 셀의 집합

grid에만 있는 단위 :fr(fraction)
grid의 특징 : container의 영역을 꽉꽉 채우려고 한다.

grid가 flex보다 늦게 나왔지만, IE10,11에서 flex보다 에러 이슈가 적다고 보고된다.

grid-row, grid-column

• grid-template-columns : 열의 넓이를 설정한다.
• grid-template-rows : 행의 높이를 설정한다.
• repeat(적용할 트랙의 개수,반복할 수치)

/* 열이 3개가 있는데 각각을 100px씩 주겠다 */
grid-template-columns: 100px 100px 100px; 
/* 열이 3개가 있는데 1:1:1의 비율을 가지고 있다.*/
grid-template-columns:  1fr 1fr 1fr; 
/* repaet함수를 이용, 3개의 열, 각각 ifr씩 */
grid-template-columns: repeat(3,1fr);

gap

/* row-gap, column-gap */
gap: 20px 50px;

✔ IE에서는 gap의 대체 속성이 없어서 IE에서의 사용을 고려한다면 처음부터 gap을 사용하지 말아야 한다.

각 셀의 영역 지정

• 각 item에게 주는 속성이다.

 /* 라인 1부터 시작해서 라인 3까지 병합 */
 grid-column-start: 1;
grid-column-end: 3; 
/* 라인 1부터 시작해서 라인 3까지 병합 */
grid-column: 1/3 
/* grid라인 1부터 시작해서, 2칸 차지할거야.*/
grid-column: 1/ span 2;
/*세로로, 라인 1부터 라인 3까지 병합*/
grid-row-start: 1;
grid-row-end: 3; 
/*세로로,라인 1부터 라인 3까지 병합 */
/* grid-row: 1/3; */
/*세로로, 라인 1부터 2칸 차지할거야*/
grid-row: 1/ span 2;

실습

---

그외 알게된 것

• 해당 페이지에 h1이 하나 와야하는 건 맞지만, 그게 꼭 그 페이지에 보이는 가장 큰 글자인 것은 아니다! 예를 들어서, 영화 예매 페이지를 봤을 때, h1을 '영화 예매'로 잡기 쉽지만, 해당 페이지에 회사 정보 같은 것도 있다면, h1은 그것까지 포괄하는 것으로 잡아야 한다!
• 같은 라인의 container라면, heading 태그 숫자도 맞추어 작성하기~
• footer 안에도 section 등이 들어갈 수 있다.
• footer은 구획단위가 아니므로 heading 사용하지 않는다.
• css 작성 시, 유지보수를 위해서라도 부모와 자식을 같이 명시해주는 게 좋다. 자식만 명시할 경우 코드가 길어질수록 어디에 속한 건지 찾기 힘들다.
• 의미없는 줄 긋는 거, border속성으로 해도 되지만, 가상요소 ::after나 ::before 로 구현하는 게 더 깔끔하다.

.cont-movie .nav-movie::before {
    display: block;
    content: '';
    width: 650px;
    height: 2px;
    background-color: #BDBDBD;
    /* 중앙 정렬 하는 방법 */
    margin: 0 auto;
}

• href="#none"을 해두면 링크를 눌러도 페이지가 새로고침 되지 않는다.
• display:none;으로 하면 스크린 리더가 읽지 않는다. 그래서 sreen-reader only 처리할 때는 left:-99999px 등과 같이 그냥 화면 밖으로 보내버림!
• dl안에 dd, dt 이외에 유일하게 들어올 수 있는 태그가 div
• css 작성하는 일반적인 순서:

@charset "utf-8";
/* setting */
/* animaion */
/* reset */
/* util */
/* layout */
/* design */
/* media query */

• 아이콘의 경우, 기업들은 큰 이미지를 split해서 쓴다고 함~
• Heading map https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi
  : 페이지의 html tag 순서를 볼 수 있는 구글 extension

---

앞으로 2주간의 생활 목표

1. 기술 역량 - 매일 TIL 작성

• 수업시간에 다룬 모든 내용을 정리하는 것이 아니라, 새로 알게된 것 위주로 작성
• 작성 후에 디코 방에 링크 올리고, 서로 확인해주고 피드백 주고받기

2. 협업&소통 - 스터디& 회고 그룹
   <스터디>

• 스터디 주제와 진행 방향 정하기

• 스터디를 통해 알게된 내용 정리

  <회고 그룹>

• 각자의 매일의 목표 성취를 위해 피드백 해주고 격려하기

3. 기술 역량 - 예습

• 복습 후 남는 시간& 주말을 이용하여 자바스크립트 공부하기

---

📢 오늘의 회고

그렇게 배우고 싶던 grid를 드디어 배웠다! '어려우면 어떡하지'하고 걱정했던 것과 다르게 크게 어렵지 않고 재밌었다. 역시 가보지 않은 길이 제일 겁나고, 무서운 법이다.👻 두렵더라도 눈 딱 감고 가보는 게 낫다. 확실히 grid를 배우고 나니, 레이아웃을 보는 눈이 달라진 거 같고, 좀 더 연습해보고 싶다.
오늘은 강사님과 함께 코드를 직접 짜보는 시간이 길었다. 공부하면 공부할수록 느끼는 건, html도 얕볼 게 아니라는 거다. semantic하게 짜기 위해서 고려해야할 것이 한두 개가 아니다.🤯
강사님께서 오늘 한 말씀 중에 기억에 남는 게 있다. 웹 퍼블리셔와 FE개발자의 경계가 계속해서 무너지고 있는 지금, FE개발자로서의 입지와 역량에 대해서 계속적으로 생각해봐야 한다고 하셨다. (그럴 맘도 없었지만,) 앞으로도 FE 관련 공부에만 국한하지 않고, 시야를 넓히려고 노력하고 공부에 한계를 두지 말아야겠다. 그치만 일단 이거부터 잘하고 보자..🙄
오프라인 스터디를 만들게 되었다. 안 그래도 부족한 시간을 쪼개서 하는 만큼, 최대한 효율적인 스터디 활동을 하기 위해 노력해야한다.💪
오후 7~9시에 회고 팀원분들과 스프린트 회고 시간을 가졌다. 확실히 지난주보다는 긴장감도 덜하고, 좀 더 자유로운 분위기 속에서 이야기를 나눌 수 있었다. 덕분에 더 자유로운 피드백과 의견이 오갈 수 있었다. 지난 주에 정했던 액션 플랜에는 많은 아쉬움들이 있었고, 이를 수정해서 새로운 목표를 세웠다. 조금 더 현실적이고 욕심을 버린 계획들이다. 헤이해지지 않고 끝까지 달성할 수 있도록, 팀원 분들께 계속적으로 확인받을 수 있는 장치도 마련하였다. 이렇게 2주씩 나의 목표를 수정하며 나아가다 보면 어느새 3개월이 끝나있지 않을까 싶다😀 아 내일도 파이팅이다 가보자고🚀