써치킴의 우당탕탕 개발 블로그

플렉스 1차원 레이아웃을 만드는 개념 display : flex; 를 사용하면 일반적으로 수평정렬할 수 있다. display Flex 개념을 사용하려면 Flex Container를 만들어야 하고, Flex Container를 만들려면 그 요소에 display : flex가 들어있어야 한다. flex-direction row, row-reverse는 수평 관련, column, column-revers는 수직 관련

요소의 display가 변경됨 position 속성의 값으로 absolute, fixed가 지정된 요소는, display 속성이 block으로 변경됨.

요소 쌓임 순서(Stack order) 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정 요소에 position 속성의 값이 있는 경우 위에 쌓임.(기본값 static 제외) 1번과 조건이 같은 경우, z-index 속성의 숫자 값이 높을수록 위에 쌓임. 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일수록 위에 쌓임. z-index auto = 0으로 보면 된다.

position 요소를 배치하려면 기준을 정하고 위치값을 설정해야한다. absolute : 위치 상 부모 요소를 기준으로 하기 때문에 형제 요소와 상호작용이 무너진다. top, bottom, left, right 따라서, position을 통해 기준을 정해면 top, bottom, left, right를 통해 위치값을 설정한다!

background-color background-image 되도록이면 따옴표("")를 붙이는게 좋음 background-repeat repeat : 기본값은 반복이다. repeat-x : 왼쪽에서 오른쪽으로 이미지를 수평 반복 repeat-y : 위에서 아래로 이미지를 수직 반복 background-position 기본값 : 왼쪽 상단 background-size cover : 요소의 가로와 세로 너비 중 더 넓은 너비에 맞춰서 표출 contain : 요소의 가로와 세러 너비 중 더 짧은 너비에 맞춰서 표출 background-attachment

color text-align text-decoration text-indent

font-style italic : 기울어진 글자 oblique보다 italic을 많이 사용 font-weight font-size line-height 숫자(배수)로 쓰는것을 권장 line-height : 2를 사용하면 font-size의 두 배 높이를 가진다. 이처럼 배수를 사용하면 font-size를 변경해도 지속적으로 2배라는 크기를 유지할 수 있는 장점이 있다. font-family 글꼴 후보를 여러개 명시(제한 X) 가정 먼저 명시된 글꼴1 사용을 시도하고 사용할 수 없는 환경이면 그 다음 글꼴을 시도 마지막에 필수로 글꼴계열 작성 후보 중 글꼴을 사용할 수 없으면 글꼴계열 중 임의의 폰트를 사용 글꼴 계열

opacity 1 : 완전한 불투명 0 : 완전한 투명

display flex : 수평 정렬에 용이(하나의 축만 사용) grid : 행과 열 축을 사용 none : 요소가 존재하지만 화면에 보이지 않음

overflow