현재의 웹은 3세대 웹서비스

Front / Back 개발이 독립적으로 분리
SPA(Single Page Application) - 단일의 html 페이지에서 전체 웹 사이트/서비스 구현

Modern Web

• User Interaction 의 중요성 증가 + 웹 서비스의 복장성 증가 + 사용사 수, 데이터 양의 증가
• System Architecture 의 발전 -> Frontend 서버와 Backend 서버의 분리
  - BE: API 서버의 세분화. 데이터 양 증거. "Big Data", 머싱러닝, AI
  • FE: Node.js 와 React 등의 JavaScript 엔진과 프레임워크/라이브러리의 발달로 웹에서 더 복잡한 기능 구현이 가능 -> Node.js 의 발전으로 프론트 개발자가 간단한 백엔드 기능을 직접 구현하는 일도 흔함.

---

[css] box-sizing 은 박스의 크기를

box-sizing 은 박스의 크기를 어떤것을 기준으로 계산할지 정하는 속성입니다.

• content-box : 콘텐트 영역을 기준으로 크기를 정합니다.
• border-box : 테두리를 기준으로 크기를 정합니다.
• initial : 기본값으로 설정합니다.
• inherit : 부모 요소의 속성값을 상속받습니다.

[css] media query

media query 는 단말기의 유형이나 어떤 특성이나 수치(화면 해상도, 뷰포트, 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용!
반응형 웹에 사용됨!
하기 예시 코드와 같이 화면의 min/max size를 이용하여 화면 구성을 다르게 보이게 할 수 있다.

@media (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media (max-width:599px) {
  nav li {
    display: inline;
  }
}

css opacity

HTML 요소를 투명하게 하는 방법!
opacity가 1일 때는 불투명하여 원래 요소와 같이 보이며, 0일 때는 완전히 투명하여 보이지 않습니다. 0과 1사이의 숫자의 경우에는 요소가 반투명해 뒤의 내용을 볼 수 있습니다.

---

오늘 해결이 가장 어려웠던 문제

똑같은 태그에 CSS를 적용하여 margin 설정이 동일한 요소 였는 데 화면에서 표현되었을때 요소들의 사이즈가 달라서 왜인지 몰라 css를 지웠다가 다시 썼다를 반복!!!!

하나는 한글+영어의 요소 였으며 다른 하나는 영어로만 이루어진 요소였는데 같은 폰트임에도 한글과 영어의 폰트의 높이가 달라서 생겼던 문제였다..
해결은 폰트를 다른 것으로 지정하여 해결이 가능했다... 허망하지만 다음번에 당황하지는 않을꺼같다.