[TIL] #7. CSS 적용해보기

2022.5.4. (수)

1. 오늘의 소감

• 여러모로 현타도 오고, 자극도 받는 하루.
• 오늘 수업에서는 이틀동안 만든 계산기 목업을 자랑하는 시간을 가졌다. 난 맥 계산기와 갤럭시 계산기의 기본형을 충실히 구현하는 정도로만 CSS를 작성했다. 동기분들의 계산기 디자인이 엄청났다. 박스쉐도우를 활용해 뉴모피즘 디자인을 구현하신 분도 계셨고, 계산기에 타이머를 넣는다던가, 다크 모드를 구현한다던가... 심지어 음성인식 기능을 넣으신 분도 계셨다…
• 다른 분들의 발표를 들으면서 내가 적용해보고 싶은 내용들을 꼽아보자면. 1) CSS 에 변수 넣기, 2) fontawesome 사이트에서 아이콘 적용해보기. 특히 CSS 변수는 이런게 있다는 것을 알고 있었는데, 미리 공부해놓지 않아 정작 필요할 때 사용할 생각을 못했다. ...한 번 적용해봐야겠다…

2. 학습한 키워드

• space-between 과 space-around 구분하기, flex-grow, flex-basis, css 변수, 폰트어썸(fontawesome.com) 적용하기

3. 키워드를 바탕으로 학습 내용 설명해보기

• flexbox는 반응형 페이지를 만들 때 활용하기 아주 좋다. container의 크기에 따라 유동적으로 배치가 바뀌기 때문이다.
• 콘테이너 박스에 padding 값이 있을 때, justify-content 와 align-items 의 속성값 중 space-between 과 space-around를 자주 헷갈리는 것 같다.
  • space-between : 양 끝의 여백 없이 item 들 사이 간격이 같게
  • space-around : 각 item이 가진 좌우 여백을 동일하게, 양 끝 여백보다 사이 여백이 더 넓음.
  → 주의) 콘테이너 박스에 padding 속성이 들어간 것일 수 있기 때문에 양 끝 여백만 보고 판단하면 안된다.
• 폰트어썸 적용하는 방법
  • 가입을 한다.
  • 가입을 하면 알려주는 Kit’s code 를 내 html 에 붙여 넣는다. script 태그니까 body 맨 마지막에.
  • 가능하면 무료인 아이콘을 클릭해 해당 코드를 붙여 넣는다.
• flex-grow 로만 비율을 줬을 대 픽셀이 딱 안 맞는 경우가 있다. 그럴 때는 그냥 flex-basis를 %값으로 줘버리자. 예를 들어, 2 : 1 : 1 비율로 줘야한다면 flex-basis를 50%; 25%; 25%; 각각 주는 방식으로.
• CSS 도 변수를 사용할 수 있다.
• 정의하기

:root {
	--main-bg-color : #ffccde;
}

• 사용하기

div {
	backgound-color : var(--main-bg-color);
}

• 일반적으로 :root 선택자 블럭 안에 정의한다. 변수 사용 범위에 따라 선택자를 넣어주면 된다.
• CSS 변수명은 대소문자를 구분한다.
• CSS 변수는 IE 지원 안된다