211108 프론트엔드 스쿨 6일차

수업 내용 (한재현 강사님)

모든 내용 X
새로 알게된 내용, 헷갈리는 부분, 중요한 부분만 기재함

1. flex 💖보충 예정💖

1분코딩 - flex

2. grid 💖보충 예정💖
1분코딩 - grid

수업 내용 (이호준 강사님)

1. 보강
단순 아이콘은 background-image 사용

2. 실습 - 글자 슬라이드

3. 실습 - 과제(레이아웃 구현 프로젝트 - 1)
float 사용해서 만들기
구조적으로 파헤치기

html

• section마다 heading tag 사용하여 제목 지정
  스크린리더기에만 읽히게 하고 시각적으로는 안보이게 할려면 .sr-only (screen-only) 부여

• a태그 사용 시 herf="#"처럼 그냥 #만 쓰면 페이지가 리프레쉬된다
  그래서 빈 주소일 때는 #none을 써주는 게 낫다

• footer는 구획 단위가 아니라서 heading tag을 아래와 같이 쓴다

❌
<footer>
    <h3></h3>
    <section>
        <h2></h2>
    </section>
</footer>

⭕
<footer>
    <section>
        <h2></h2>
    </section>
</footer>

• copyright은 주로 small 태그를 사용함

css

• 웹 접근성을 고려해서 글자 숨기는 방법

position: absolute;
left: -9999px;

• display: none; 은 스크린 리더기가 읽지 못한다

• 선택자를 쓸 때 .cont-movie .cont-title 와 같이 부모와 자식관계를 명시해주는 게 좋다
  나중에 자식을 재사용할 수 있고 코드 분량이 늘어나면 어디에 있는 요소인지 알아보기 쉽기 때문이다
  
  

오늘의 TIP

spritecow - sprite 이미지 좌표 추출

새로 알게 된 내용

• flex는 사용은 안해도 배우기는 했는데 마치 처음 듣는 내용인냥 낯설다 😥 flex를 사용하는 웹사이트를 뜯어보거나 클론 코딩해보면 이해도가 더 늘 것 같다. 앞으로 수업 시간에 flex를 이용한 과제나 예제도 더 보여주실 거 같으니 조급해지지 말자!

• grid는 정말 난생 처음 봤다. 반갑다... 친해지자...
  
  

내일 진도

• 정글 시네마 영화 목록
• 라이캣 구현
• animation
• perspective
  
  
  
  

스프린트 (임동준 강사님)

19:00~21:00

질문과 답변

1. 오늘 기대하는 점.
   • 액션 플랜 점검.

2. 이전 액션 플랜이 계획대로 잘 진행됐나요? 잘된점이 있다면 어떻게 진행했는지, 잘 안된점이 있다면 어떤 부분이 지키기 어려웠는지 나눠보고 적어볼게요.

   • 계획을 무리하게 짜지 않아서 1~3순위 모두 지킬 수 있었다. 다음 액션플랜도 욕심부리지 않고 내가 할 수 있는 선에서 구성해봐야겠단 생각이 든다.
     1순위: 소요 시간이 예상보다 길어서 지치는 경향이 있었다. 집중해서 빨리 끝낼 수 있는 환경을 구축해봐야겠다.
     2순위: 원래는 온라인으로 천천히 커뮤니케이션 스킬을 늘릴 계획이었는데 오프라인 스터디를 하게 됐다. 이번 기회를 통해서 협업 능력을 쌓아봐야겠다.
     3순위: 수업 중에 힌트를 많이 얻어서 사이트 3개를 금방 결정할 수 있었다.
     
     

3. 가장 피드백 받고 개선하고 싶은 액션 플랜 1가지를 적어보고, 우선 내 생각을 적어볼게요.

   • TIL과 복습하기
     나름 배운 내용을 보기 좋게 정리하고 있는데 잘 하고 있는지 궁금하다.
     TIL 작성하는데 걸리는 시간이 너무 길어서 집중할 수 있는 환경이 필요한데 어떻게 만들면 좋을지 고민이다.
     복습은 TIL 작성하면서 그때 그때 막히는 부분만 실습으로 하고 있는데 부족한 거 같다 클론코딩을 원래 계획보다 일찍 시작해야겠다.
     
     

4. 팀원들의 피드백을 받아 다음 스프린트까지 달성할 수 있도록 액션 플랜을 개선해보아요.
   개인적인 액션과 회고그룹 차원에서의 액션을 1가지 이상씩 만들어볼게요.
   (예시)
   데일리로 회고그룹 채팅채널에 진행 상황 간단히 공유하기.
   수업끝나고 10분만 오늘 진행할 사항들 체크하기.
   다음주 월요일에 자체적으로 중간 점검 가지고 조정하기.

   • 개인차원
     1순위. 쉬는 시간 활용해서 TIL 작성하기
     2순위. 오프라인 스터디 적극적으로 참여하기
     3순위. 카카오 클론코딩하기
     
     
   • 그룹차원
     - 매주 금요일 주말 계획 공유
     - 매주 월요일 주말 계획 회고
     - simple is best !
     - 회고그룹 채널에 올리기. 월, 금 안에 어떠한 시간이나 가능.
     
     

5. 회고에 대한 회고

   • 스스로에 대한 객관적 판단을 내릴 수 있는 시간이라 의미있었다.
     이런 시간이 없었다면 나 자신에게 너무 관대해져서 계획의 50%도 이루지 못했을 것이다.
     팀원들의 피드백을 바탕으로 TIL은 느낀 점 위주로 적고 이론 부분은 가볍게 작성해봐야겠다!
     
     

2주간의 액션플랜

• 1순위. TIL 작성
  쉬는 시간 활용해서 틈틈이 작성하기

• 2순위. 클론코딩
  구역 나눠서 분량과 기간을 정해놓고 할 것
  (카카오, 네이버, 에이비앤비 중 택 1)

• 3순위. 오프라인 스터디 적극 참여
  
  

느낀 점

• 저번주에 설정한 액션플랜 1~3순위 모두 이뤄내서 보람차다. 내가 해냄.
• 스프린트가 짧은 기간동안 진행되다보니 늘어지지 않고 목표 달성에 좀 더 매진할 수 있었다.
• 평소에는 눈앞에 닥친 일부터 후루룩 하는 스타일이라 시야를 넓혀서 생각할 시간이 없는데 회고를 통해서 지금 내 상태나 방향성에 대해 고민해볼 수 있어서 뜻깊었다.
• 팀원들의 TIL 피드백 너무 소중했다!
• 다음 액션 플랜도 무리하지 않고 지킬 수 있는 수준으로 짰으니까 미래의 내가 꼭 계획대로 이뤘으면 좋겠다. 화이팅 너가 짱이야.
  
  
  
  

오프라인 스터디 모집

강사님들이 서로 가르쳐주면서 공부하면 실력이 쑥쑥 오른다고 오프라인 스터디를 추천하셨다.
그 의견에 너무 동의해서 주 1회 함께 수업듣고 복습할 오프라인 스터디를 모집했다.
우리 지역에는 동기들이 없는 거 같아서 걱정했는데 다행히도 한 분이 참여 의사를 밝히셨다!
내일까지 기다려보고 더 없으면 둘이서 진행하기로 했다.
너무 기대된다!
서로 시너지 효과 뿜뿜했으면 좋겠다.