웹 개발자 Bootcamp 정리 (with VS Code)

• https://samsungu.udemy.com/ 으로 드가면 들을 수 있음.

• https://samsungu.udemy.com/course/the-web-developer-bootcamp/learn/lecture/22553936?start=93#overview

• 고수들도 HTML Boilerplate 쓴다.. 나한테 맞는거 하나 만들어 두는게 좋을 것 같다.

• CSS: 형용사(Adjectives) / JS: 동사(Verbs) / HTML: 명사(Nouns)

• MDN: 개발자들이 만든 비공식 스펙 사이트.

• lorem*10 하고 탭 누르면 더미 문장을 넣을 수 있다.

• ! 치고 탭 누르면 VS Code에서 제공하는 기본 boilerplate를 제공해준다.

• Ctrl + Shift + P 누르고 Formatter 누르면 자동 포멧팅 도구 사용 가능. (설정 바꿔서 저장할 때 적용되게 할 수도 있음)

• ol / ul (Ordered List / Unordered List)

• Alt + Shift + Down -> 그 줄 복사해서 아래로 내림

  • Alt + Down -> 그 줄을 내림

• HTML Entity: < 같은 것을 이야기 함.

• Emmet : div > ul > li 같이 써놓고 emmet 쓰면 자동으로 그 구조를 만들어 준다.

• CSS: Cascading Style Sheets

  • MDN도 잘 되어 있다.
  • Cascading은 ID / class / specifity 등의 순서대로 속성이 중첩되어 적용된다는 의미
  • ID (백의 자리), class(십의 자리), 특정성(일의 자리)의 순서로 강력한 컨셉이라고 생각하면 됨.
    • ID로 선택한 경우 이 항목에 color와 같은 것을 먹이면 :active 와 같은 pseudo class 역시 무시되어 버린다. (더 강한 속성이기 때문)
    • 따라서 이 경우 #ID의 #ID:active 까지 설정 해야 정상적으로 속성을 적용할 수 있다.

• Selector { property: value; }

• Inherit 기능이 내제되어 있지만, 모든 속성이 Inherit인 것은 아니다.

  • 강제로 Inherit 적용하고 싶으면 color: inherit 등으로 적용해서 사용

• pseudo

  • pseudo class
    • :active, :checked, :first, :first-child, :hover, :not(), :nth-child(), :nth-of-type()
    • 실제 class는 아닌데 마치 존재하는 class인 것처럼 행동함
  • pseudo element
    • ::after, ::before, ::first-letter, ::first-line, ::selection
    • 콜론(:)이 하나여도 크롬에서 인식이 되긴 하지만 원래는 두개짜리임. 두개짜리는 실제 값이 있는 것처럼 행동하므로 element임

• padding

• Box Model

  • Box-Sizing: Border-Box
    • 테두리를 포함하는 Box Model.
  • Margin
  • Padding
    • top, right, bottom, left 의 순서임.
    • top, right + left, down 순서도 가능
    • top + bottom, right + left 순서도 가능

• Display Property

  • Inline - 한 줄에 정렬
    • 이 경우 width 같은 것들은 무시 됨.
    • Padding / Margin 도 자신의 줄 안에서만 적용 됨.
  • Block - 다른 줄에 정렬
  • Inline-Block - 이 경우 블록의 특성을 가지면서 한 줄에 차례로 들어온다. (그러나 Flex가 있어서 굳이 이젠 써야하나...? 개인적 생각.)

• CSS Units

  • Relative
    • EM, REM, VH, VW, %, ...
  • Absolute
    • PX, PT, CM, IN, MM
  • EM
    • 1em은 부모의 Font-Size와 동일함
    • 기본 폰트 사이즈는 1em이 될 것 (미설정 시 부모 값을 상속)
    • h1, h2 시리즈를 이 속성으로 묶어두면 좋을 것.
  • REM
    • 중첩된 ul / li를 쓰게 되면 급격한 Font 사이즈 증가 / 감소를 겪게 됨
    • REM은 root HTML element의 Font size를 가져와서 크기를 정해줌.

• Position

  • Static: top 같은게 있어도 움직이지 않음
  • Relative: top 같은게 있으면 상대적으로 움직임
  • Absolute: 공간을 차지하지 않으면서 Relative가 있는 부모 위치를 상대 좌표로 하여 이동 (어렵..)
  • Fixed: 스크롤 되어도 이동하지 않음. Container 위치에 고정.
  • Sticky: 처음엔 다른 속성처럼 이동하다가 스크롤 내려가면 고정.

• Transition