CSS 기초

CSS를 작성해서 간단한 UI를 만드는 일은 개발자의 기본적인 소양입니다.

콘텐츠를 적당한 위치에 배치하는 레이아웃 디자인은 디자이너가 아니라도 개발자라면 꼭 할 수 있어야 합니다.

id와 class의 차이점

id	class
# 으로 선택	. 으로 선택
한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소가 많음
특정 요소에 이름을 붙이는데 사용	스타일의 분류(classification)에 사용

 

box-sizing: border-box;
해주는 이유
margin, padding 때문에 사이즈가 변경되는걸 막기위해

Reset css
브라우저 사용을 초기화해주는 방법
*{
Box-sizing: border-box;
Margin: 0;
Padding: 0;
}

Body {
padding: 0;
background-color: white;
}

Flex-direction은 부모에서 줘야함
Min-height: 100vh — 뷰포트하이트
우리가 보이는 전체의 화면을 잡는것

Rem- 루트를 기준으로 단위가 설정되는것. em과의 차이점은 rem 은 오직 html 태그의 글자 크기만 참조한다. 다른 모든 태그의 글자 크기는 신경쓰지 않는다.
Em- 단위가 적용된 엘리먼트의 글자 크기에 비례한다.
Px- 브라우저에서 표현하는 픽셀(Pixel) 이라고 부르는 길이 측정의 단위는 본디 Reading distance라고 부르는 눈과 모니터와의 적정 거리에서 생겨났다.
반응형이 대세가 되면서 rem, vh을 쓸 수 있어야하게 됨!

내부를 정렬하기 위해서는 클래스 안에서도 다시 display:flex를 해주어야함

.Icon:hover{
Background-color: black;
cursor: grab; — 손바닥 모양으로 바뀜

Flex 기본값
grow: 아이템이 늘어나서 여백을 채우는 늘어나는 비율에 대한 속성

Shrink: 공간이 부족할 때 각 아이템의 사이즈를 얼마까지 줄일 것인지 속성

Basis: 아이템의 기본 크기

Flex-basis: 아이템의 기본 크기. 정의하지 않으면 컨텐츠 크기만큼.

안쪽 박스 수직/수평 정렬을 정하는 속성 이름을 알고 있나요?
수직 정렬 : align-items
수평 정렬: justify-content

mdn에서 확인

Id: container처럼 하나밖에 없는 스타일인 경우
class: 자주 사용되는 스타일에 적용( 여러개 사용가능 )

와이어 프레임: 화면 단위의 레이아웃을 설계하는 작업
목업: 실제품을 만들어보기 전, 실물과 비슷하게 시제품을 제작하는 작업
* 목업은 고정적. 디자이너의 영역

프로토타입: 처음부터 종료까지 핵심 동작이 기능하게 구현된 앱
* 목업에 비해 동적임. 버튼
클릭이나 드롭다운, 팝업 같은 이벤트 구현. 더 깊고 견고하게 만들 수 있지만 단순하게 처음부터 종료까지어떻게 작동을 하는지 핵심 흐름에 대해서 동작을 볼 수있게끔 만들어진 앱. 개발자의 영역에 가까움
프로토타입을 만들 수 있는 툴도 많음
예) 제플린, 피그마, 인비전

하드 코딩: 데이터 코드 내부에 직접 입력하는 것

 

flexbox 게임

https://flexboxfroggy.com/#ko

Flexbox Froggy

https://heropy.blog/2018/11/24/css-flexible-box/

CSS Flex(Flexible Box) 완벽 가이드

css 선택자 이해

https://www.nextree.co.kr/p8468/

CSS: 선택자(Selector) 이해

브랜치

https://backlog.com/git-tutorial/kr/stepup/stepup1_1.html

누구나 쉽게 이해할 수 있는 Git 입문~버전 관리를 완벽하게 이용해보자~ | Backlog

https://flukeout.github.io/

CSS Diner