22.04.27~28 TIL

22.04.27~28 / Today I Learned

◎ 학습 전

※ 오늘 나의 학습 목표는 무엇인가요?

• HTML

  • HTML의 기본 구조와 문법을 설명할 수 있다.
  • HTML이 마크업 언어라는 것을 설명할 수 있다.
  • 자주 사용되는 HTML 요소를 활용할 수 있다.
    • div, span, ul, ol, li, input, id, class 등
  • 시맨틱 태그에 대해 설명할 수 있다.
  • 웹 문서의 구조와 내용을 HTML로 작성할 수 있다.

• CSS

  • CSS를 왜 사용하는지 설명할 수 있다.
  • CSS의 기본 문법과 구조를 설명할 수 있다.
  • HTML에 CSS를 적용하는 방법에 대해 이해할 수 있다.
    • 직접 HTML 안에 CSS를 정의하는 것을 권장하지 않는 이유를 설명할 수 있다.
  • id 및 class와 관련된 selector 규칙을 이해할 수 있다.
  • CSS를 이용해 텍스트를 꾸밀 수 있다.
  • CSS에서 쓰이는 두 가지 단위를 설명할 수 있다.
    • 각 단위가 어떤 경우에 적합한지 설명할 수 있다.
  • CSS Box Model을 이해할 수 있다.
    • width, height
    • margin, padding, border
    • 박스 크기를 측정하는 두 가지 기준의 차이를 이해할 수 있다.
  • MDN 또는 W3C School 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 활용할 수 있다.

• Flex 이용

  • 다양한 CSS 셀렉터 규칙을 이해할 수 있다.
  • 레이아웃을 위한 HTML을 만들 수 있다.
  • 다음의 속성들에 대한 이해를 바탕으로 Flexbox를 이용해 레이아웃을 만들 수 있다.
  • 방향: flex-direction, 얼마나 늘릴 것인가?: flex-grow, 얼마만큼의 크기를 갖는가?: flex-basis, 수평 정렬: justify-content, 수직 정렬: align-items

• 웹 앱 화면 설계하기

  • 만들고 싶은 앱의 와이어프레임을 그려볼 수 있다.
  • 와이어프레임만 보고 HTML로 코딩할 수 있다.
  • div 태그 또는 section, header 등의 시맨틱 태그로 영역을 구분하는 이유를 이해할 수 있다.
  • HTML 문서에서 언제 id 혹은 class를 사용해야 하는지 이해할 수 있다.

※ 오늘 학습할 내용 중에 이미 알고 있는 내용은 무엇인가요?

• 기본적으로 HTML과 CSS는 많이 다루어보아서 잘 알고 있다.
• 직접 기획안을 주고 똑같이 레이아웃을 구현하라고 하면, 상당한 어려움을 겪을 것 같다.
• 실질적으로 많이 사용되는 부분은 알고 있고 (Class 할당하여 CSS를 줌)
  코드를 간단하게 작성할 수 있는 Skill, 사용되는 용어 들을 모른다.

※ 학습 전략

• 부트캠프 첫주차니까 천천히하자.
• 모르는 부분은 나중에 찾아볼 수 있도록 알아보자.
• 용어들은 이해를 하고 모를 때 찾아보자.

◎ 학습 후

※ 오늘 학습 내용 중 새롭게 배운 내용은 무엇인가요?

• CSS Selector로 나타낼 수 있는 종류가 상당히 많았음(2번째 div 적용, 짝수번 째 div 적용 등등)
• 부모 요소에 display:flex; 를 적용했을 때, 자식 요소에서 사용하는 CSS에는 flex: grow(팽창비율), shrink(수축), basis(기본 크기); 등의 요소가 있음 (정비례한 크기를 잡기 위해서는 basis를 0으로 해놓으면 됨)
• 와이어 프레임 만드는 것을 직접 해보기

※ 오늘 학습한 내용 중 아직 이해되지 않은 불확실한 내용은 무엇인가요?

• flex 부분에서 수축하는 수치가 무엇을 의미하는지 잘 모르겠다.

※ 이해되지 않은, 불확실한 내용을 보완하기 위해서 나는 무엇을 할 수 있을까요?

• 직접 예시를 만들어서 해보자.

※ 나의 오늘 학습 만족도는 몇 점인가요?

• 학습 태도 60점
  • 나름 집중할 때는 집중하고, 쉴 때는 쉰듯
  • 더 이해할 수 있는 부분이 있는데도 "내가 아는부분이니까" 라고 생각하면서 넘겼던 것이 아쉬움
• 이해도 70점 : 충분히 더 노력해서 더 많이 알 수 있었지만, "이정도만 알아도 괜찮아~" 라고 생각함
• 학습 만족도 50점
  • 아무리 시작이라고해도 너무 무작정 쉬고, 더 알수 있는 부분도 그냥 지나치는 것 같다.
  • 이후에도 같은 학습태도를 보이면 매우 치명적일 것이다. 내가 큰 틀을 알고있다고 해도, 모르는 부분에는 집중해서 알아보자

◎ 생각 정리

아는 것을 배운다는 생각에 조금 지루했던 것 같다. 시작부터 Spring, Database가 아니라서 그런지도 모르겠다. 여기서도 분명히 도움 될 수 있는 부분이 있다. 그리고 큰 틀에서 보았을 때, 이러한 것들을 하나씩 배워가며 전반적인 이해도를 키워나갈 수 있다. 나의 첫번째 결심은 풀스택 개발자였던 것을 잊지말자. 더 많은 것을 배우고 특정 분야에는 전문성을 갖추어, 누군가에게 필요한 사람이 되어보자.

• 해야할 일 : flex 부분에서 수축하는 수치 예제 만들고 테스트

◎ 오늘 배운내용들 정리

• HTML (HyperText Markup Language)
  • 웹페이지를 구성하는 마크업 언어(태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지)
  • 자주 사용되는 태그: div, span, ul, ol, li, input 등 필요할 떄 찾아서 쓰자 / 일반 페이지 들어가서 개발자 도구로 열어봐도 찾을 수 있다.
  • 시멘틱 테그(Semantic Tag) : 의미를 가진 태그 (html 가독성이 좋아짐, 검색엔진최적화 ...
• CSS
  • HTML 에서 만든 뼈대를 꾸며주는 역할
  • 기본적으로 내가 필요할 때, 찾아다가 쓰자. (구글링, 이전 프로젝트)
  • block vs. inline,
    • block : 줄바꿈이 되는 박스, width를 가질 수 있음 ex) div, h1~h6 ...
    • inline : 옆으로 붙는 박스, width를 가질 수 없음 ex) span, button
    • inline-block : 옆으로 붙는 박스, width를 가질 수 있음 [display: inline-block; 을 적용해서 사용]
• display : flex ;
  • 해당 링크에서 참고 (FLEXBOX FROGGY)
• 와이어프레임
  • 해당 페이지를 만들고 싶을 때, 일단 큰것부터 쪼개고, 나머지 것을 적당히 쪼개나간다.
  • 해당 태그마다 id(유일성 있음), class(여러개 지정 가능) 부여하여 CSS를 적용 (value를 정할 때, 다른 사람도 알아보기 쉽게 정하자)
  • 와이어프레임을 작성할 수 있는 툴을 이용하여 Layout을 작업하고, 이를 기반으로 작업할 수 있다. (oven 사용)
    • 툴 사용시 장점: 만들고자 하는 것을 시각화 할 수 있음, CSS 적용시 어떤 것들을 적용해야 하는지 생각할 수 있음
    • 툴 사용시 단점: 시간이 많이 들어간다;;