[엘리스 SW트랙 4기] 1주차 - Day4 - CSS & HTML

모르는것, 새로 배운것, 헷갈리는 것 위주로 정리하기.

오늘의 느낀점 : 열심히해야겠다 정말..

1. transform

• 100px의 width인 div를 transform:scale (2,1)과 width = 200px으로 하는것의 차이점은 무엇일까?

  • 결과가 같아보일 수 있지만 사실은 다름.
  • transform은 모든 레이아웃이 그려지고 난 뒤 다시 계산을 하게 되는 것이기 때문에, 잡아서 늘린다의 개념임. 즉, 안의 컨텐츠(텍스트, 이미지)등도 함께 늘어남
  • 즉, 어떤 짓을 하든지간에 다음 element에 영향을 미치지 않는다.
  • 애니메이션에 사용할 수도 있고, 일부러 가리기 위해 사용할 ㅅ도 있고, 태그 사이에 공간을 두고 꾸밀 때 사용할 수도 있음.
  • Q. transform을 사용한 이후 겹치는 문제를 해결하려면 float을 사용하면 될까요?
    A: position과 z-index를 사용하면 됩니다. 참고(클릭)

• CSS property에는 레이아웃에 영향을 주는 속성 (마진, 패딩, 등등..) 이 있고, 레이아웃에 영향을 주지 않는 속성(백그라운드 컬러, 트랜스폼 등등..) 이 있음.

• prefix 접두사 > 2023.03 기준 transform을 위해 붙일 필요 없음.

  • Can I use?

• transform orgin(50%, 50%)

  • transform을 사용할 때 기준(축)이 되는 점을 정한다. 대부분 로테이트때문에 사용하게 되며, 오리진의 디폴트값은 50%,50%임.

• transform 속성 작성 방식

  • 한줄에 쉼표 없이 길게 써도 됨.
  • 그러나, 서순이 코드의 마지막 속성부터 시작함.
  • ex) rotate > translate 와 translate > rotate는 완전 다른 결과값.
  • 보통 변형을 시킨 후, 이동하는 것이 보편적임 ( 원래 위치가 회전의 기준점이 되기 때문)
  • 머릿속으로 계산해보고, 많이 써보는 것이 중요함

• 폰트는 벡터 그래픽임. transform : scale(x,y) 썼을 때 깔끔하게 늘어남. 픽셀로 된 이미지는 깨짐.

2. Transition

• hover 구문 안에 transition을 넣으면, hover는 hover 내부 transition 구문으로 적용되고, 뗐을 때는 hover구문 바깥의 transition으로 적용됨.
• transition-property에 콤마로 여러개 작성가능, 그 이후 hover구문 안에 여러개 작성하면 됨.
• transition-property에 all로 사용해도 되지만, 가능하면 명확하게 써주는 것이 좋음. 웹사이트가 더디게 보일 수 있음.
• transform은 transition보다 비교적 빠르게 변화 가능. transition은 살짝 무거운 편

3. animation

• 이 또한 prefix 현재는 필요 없음.
• overflow : hidden; 으로 속성과 속성값을 넣으면 컨테이너에서 넘치는 부분들을 숨겨줄 수 있음.
• animation-play-state: running(or paused); 움직이다가 호버하면 멈추는 기능으로도 활용 가능.
• animation-name에 여러개의 이름 값 할당 가능. 그러나 같은 속성을 건드리는 것은 중첩해서 사용이 불가하다.
  • 만약 중첩해서 사용하고 싶다면, 요소에 부모 요소를 하나 더 추가해서 두개의 애니메이션이 발현하도록 하기
• 애니메이션 구현 방법 4가지
  • css-transition
  • css-keyframe animation
  • JS web animation API
  • JS requestAnimationFrame
• 1초마다 표시해주는 프레임의 수 = 주사율

4. 미디어쿼리

• screen, print, all...
• @media 구문은 기존 선택자 설정 구문 아래쪽에 있어야함.
• Q: 그러면 항상 미디어쿼리는 CSS 마지막에 쓰게 되는데, 같은 선택자 밑에 미디어 쿼리를 작성해야하나요?
  A: 상황에 따라 다릅니다. 코드 규모에 따라..

5. 그 외..

• 요즘 앱개발할때는 serverless로 firebase같은걸 사용한다는데 웹쪽에서는 백엔드가 반드시 있어야 하는건가요? >> 만드는 입장에서 서버가 없는 것처럼 느껴지는 것이지, 서버가 없다는 것이 아님.

• 요즘 앱개발할때는 serverless로 firebase같은걸 사용한다는데 웹쪽에서는 백엔드가 반드시 있어야 하는건가요? >> 만드는 입장에서 서버가 없는 것처럼 느껴지는 것이지, 서버가 없다는 것이 아님.

• 최적화란..성능 최적화도 있을수 있고, 코드의 재사용성을 높여서 코드의 가독성이나 효율성을 증진시키는 것도 최적화라고 볼수 있음 1.최대한 레이아웃에 영향을 미치지 않는 요소들을 사용한다. 2. 최대한 적게 써서 만든다.

• 요즘은 하드웨어의 사양이 너무 높고 네트워크 환경도 개선이 되어서 웹페이지의 성능 최적화의 문제는 감소하는 추세. 다만 빅데이터를 사용하거나 스트리밍이 요구되는 페이지나 서비스들은 성능 최적화가 필요한 대표적인 예시

• 헷갈리는 CSS 선택자 붙여쓰기, 띄어쓰기

• 띄어쓰는건 하위 상속의 개념, 붙여쓰는건 && 조건의 개념

아래 모든 내용은 엘리스 SW 엔지니어 트랙 4기 강의 내용에서 발췌되었으며, 개인 학습용으로 정리한 내용입니다. 모든 출처는 엘리스에 있습니다.