[TIL] 2022.01.16

Next Plan

JAVA 복습을 마쳤고 이제 학기중에 하다가 바빠서 잠시 중단했던 웹 프론트엔드 공부를 다시 시작하기로 계획하였다.
공부에 참고할 강좌: Build Responsive Real-World Websites with HTML and CSS

---

오늘 한 일

• HTML, CSS 기초 복습 (HTML, CSS fundamentals)

---

배운 것

• pseudo-class

a:hover { ... }
a:active { ... }

• CSS selector 우선순위: !important (쓰지않는것이 좋음) > inline style (HTML 내 style 속성) > ID(#) selector > Class(.) or Pseudo-class(:) selector > element selector (p, div 등) > universal selector (*)
• CSS Inheritance
• CSS Box model
• 작업 전 모든 요소들의 기본 margin, padding을 0으로 만들어 놓고 시작하기 위한 Global reset (universal selector 사용)

* {
  margin: 0;
  padding: 0;
}

• collapsing margins: 두 요소의 margin 중 큰 margin이 작은 margin을 덮는다
  (ex. margin-bottom 15px을 갖는 한 요소 밑에 margin-top 100px을 갖는 다른 요소가 있다면 두 요소 사이에는 115px이 아닌 100px의 간격이 생긴다)
• Block level boxes: 가로 간격을 모두 차지함. line-break 발생. box model 모두 적용됨
• Inline boxes: contents 크기만큼만 차지함. line-break 발생 X, width, height, 세로 padding/margin 적용안됨
  (a, img, strong, em, button, etc.)
• Inline-block boxes: contents 크기만큼만 차지함. line-break 발생 X, 그러나 box model 모두 적용됨

display: inline / block
display: inline-block

• Absolute Positioning : position relative로 설정된 첫 번째 parent element를 기준으로 절대 위치에 element를 위치시킴

position: relative;	/* 기준이 될 첫 번째 부모 position */

.el {
  position: absolute;
  top: 100px;
  left: 100px;
}

• Pseudo-elements (::)

h1::first-letter { ... }
h1::first-line { ... }

h1::after {
  content: "CONTENT";
  ...
}
h1::before {
  content: "CONTENT";
  ...
}

---

내일 할 일

• 웹 프론트엔드 공부
  Layouts: Floats, Flexbox, and CSS Grid Fundamentals