오늘 한 일
CSS공부와 Sprint - query selector, 계산기
CSS는 단순 스타일링 뿐만 아니라 콘텐츠의 배치와 위치(레이아웃 디자인) 등 더 나은 사용자 경험(UX)를 위해 꼭 알아야 한다.
정리한 내용
CSS의 사용목적
1. 스타일링
2. 콘텐츠의 배치와 위치 (레이아웃 디자인)
3. 텍스트를 강조하거나 밑줄을 치는 등, 최소한의 타이포그래피 (Typography)
-> 더 나은 사용자 경험(UX, User experience)을 제공
background 속성과 background-color 속성의 차이점
-> 둘 다 색을 지정할 수 있지만 background-color는 색만 지정할 수 있고 background는 이미지 등 다양한 것들을 지정할 수 있다.
단위
em : 부모 요소의 글꼴 크기
rem : 루트 요소의 글꼴 크기
HTML 태그에 CSS 속성을 직접 추가하지 않는다.
font-family -> Google Fonts 서비스 https://fonts.google.com/
절대 단위 : px, pt 등
상대 단위 : %, em, rem, ch, vw, vh 등
inline 태그인 span에는 width, height 속성이 적용되지 않음
display: inline-block; -> inline 박스처럼 다른 요소의 옆으로 붙으면서, 자체적으로 고유의 크기를 가짐
즉 너비, 높이 지정 가능해짐
margin에는 음수값을 지정해 다른 엘리먼트와의 간격을 줄어들게 할 수 있음.
overflow: auto; -> 콘텐츠가 넘치는 경우 스크롤을 생성
overflow: hidden; -> 넘치는 콘텐츠의 내용을 숨김
overflow-x와 overflow-y 속성으로 스크롤 방향 지정
레이아웃 디자인을 할 때 여백을 고려해서 디자인해야한다.
box-sizing : border-box;
-> 모든 요소( * )에 위 속성을 추가하면 여백과 테두리를 포함한 크기로 계산을 함.
디자인하기 유리
스프린트 (Sprint) - 프로토타입을 계속해서 만들고, 잘 동작하는 지 검증하는 과정
계산기는 나이트메어과제까지 거의 다 마무리되어간다.
역시 하나씩 해결해나가는게 재미있긴하다.
아직 CSS는 좀 어렵다!
