TIL#2 Modern Web 및 css 정리

jenny87879·2021년 1월 13일
0

TIL

목록 보기
2/8
post-thumbnail

현재의 웹은 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를 지웠다가 다시 썼다를 반복!!!!

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

profile
열심히 공부중인 초보 개발자

0개의 댓글