[css] 멋있는 웹사이트 만들기, 정렬, 협업기술(css변수, property, svg)

오늘 수강한 강의 : 【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프

---

오늘의 강의 정리 📗

멋있는 웹사이트 만들기

CSS 변수

변수의 선언 : "–"로 시작하는 변수명 : 사용하고자 하는 속성

• 일반 속성과 마찬가지로 요소 내부에 선언하면 되나, 보통은 root 의사선택자 안에 적용해서 전역으로 사용

main {
	--main-bg-color : brown;
}
:root {
	--main-ft-color: rgb(255,255,255);
}

변수 사용 : var(“CSS 변수명”, [해당 변수가 없을시 사용할 속성])

main {
	background-color: var(--main-bg-color)
}

CSS 변수의 상속

• 상위 엘리먼트의 변수값은 하위 엘리먼트로 상속됨
• 하위 엘리먼트에 선언된 변수값은 상위 엘리먼트에서는 사용 불가능

CSS 전역 변수 : “:root”, “html”, "body"선택자 사용해 변수 정의

CSS transition : CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것

• 구성요소

선택자 { 
	transition-property: width, opacity;
	transition-duration: 2s, 4s; 
	transition-timing-function: ease, liner;
	transition-delay: 0s, 1s;
}

//ShortCut
선택자 {
	transition : property duration timing-function dlay
}

• property : 트랜지션의 대상이 되는 CSS 프로퍼티를 지정

/* 프로퍼티 종류 */
// Box model 
width height max-width max-height min-width min-height padding margin border-color border-width border-spacing 
// Background 
background-color background-position 
// 좌표 
top left right bottom 
// 텍스트 
color font-size font-weight letter-spacing line-height text-indent text-shadow vertical-align word-spacing 
// 기타 
opacity outline-color outline-offset outline-width visibility z-index

- cf) 레이아웃에 영향을 주는 트랜지션 효과는 가능한 피해야 함

• duration : 트랜지션에 일어나는 지속시간(duration)을 초 단위(s) 또는 밀리 초 단위(ms)로 지정
  • 프로퍼티값을 지정하지 않을 경우 기본값 0s이 적용되어 어떠한 트랜지션 효과도 볼 수 없음
• timing function : 트랜지션 효과의 변화 흐름, 시간에 따른 변화 속도와 같은 일종의 변화의 리듬을 지정

프로퍼티값	효과	그래프
ease	기본값. 느리게 시작하여 점점 빨라졌다가 느리지면서 종료한다.
linear	시작부터 종료까지 등속 운동을 한다.
ease-in	느리게 시작한 후 일정한 속도에 다다르면 그 상태로 등속 운동한다.
ease-out	일정한 속도의 등속으로 시작해서 점점 느려지면서 종료한다.
ease-in-out	ease와 비슷하게 느리게 시작하여 느리지면서 종료한다.

• delay : 프로퍼티의 값이 변화하여도 즉시 트랜지션이 실행되지 않고, 일정 시간 대기한 후 트랜지션이 실행되도록 지정

SVG(Scalable Vector Graphics) : 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어

• 장점 :
  • 웹사이트 로딩 속도가 빠름
  • 어떤 크기에서든 재활용이 가능(Future Proof)
  • SEO 친화적
  • CSS로 디자인 수정이 가능
• 단점 : 너무 복잡한 SVG의 경우엔 비효율적일 수 있음.

웹사이트에 양식 추가

HTML FORM 요소

---

오늘의 멘토링 🥸

• Q1 : [Y군] ‘백엔드 개발자 포지션을 맡고 있더라도, 어드민 페이지 정도는 스스로 만들 수 있는 수준의 프론트 엔드 개발 능력을 갖춰야 한다’ 라고 알고 있다
  • A : 정확히 말하면 "하면 좋다"이다.
• Q2 : [B군]알고리즘 문제를 풀때 테스트 케이스 작성 요령이 궁금합니다.
  • A : 인계값을 확인한다. 입력값 범위 검사를 얼마나 세심하게 했는지 중요하다. 중복값이 있을 때를 테스트 해본다던가 하는 방식이 있을 것 같다.
• Q3 : [K군]1. 주변 사례들을 보면 몽고DB를 주로 노드JS 기반 프레임워크와 엮어서 쓰던데, 스프링+몽고db 조합과 비교해서 node.js +몽고db 조합이 더 나은 점이 있을까요? (주로 스타트업이라 몽고db 사용률이 높다고 추측은 하고 있지만, 멘토님 의견을 들어보고 싶습니다~!)