노인과바다의 개발로그 노인과바다의 개발로그

flex에는 flex container와 flex item이 있다. flex container로만 작업하다보면 item들을 넣을 때 컨테이너를 3분할 4분할 이런식으로 균등하게 나누어야 경우가 매우 많다. 이 때 아이템에 css width 요소만 써서 하다보면 전체 레이아웃이 변할때 박스의 변화가 예측하기 어렵게 된다. 해결법은 다음과 같다. flex속성 flex 속성은 세가지 요소로 이루어져 있다. flex-basis flex-grow flex-shrink 유연한 박스의 기본 영역 flex-basis flex-basis는 Flex 아이템의 기본 크기를 설정(flex-direction이 row일 때는 너비, column일 때는 높이). 기본값 auto: 해당 아이템의 width를 사용 .item { fl..

1. 여러 요소를 동시에 선택하여 적용. .a, .b, .c{} 이런 식으로 쉼표가 있을 때는 각각의 항목을 or로 적용한다. 즉 나열한 모든 클래스 혹은 id, 태그에 적용되고, 각 클래스는 따로 사용이 가능하다. ( 이렇게 단독으로 사용 가능 ) .a .b .c{} 공백으로 연결해서 사용하면 뒤에나온 선택자가 하위 개체로 지정된다. 즉, A요소 내부의 B요소 내부에 있는 C요소에만 적용이 된다는 뜻. .a.b.c{} 공백 없이 연결해서 지정하면 class="a b c"처럼 모든 속성을 한번에 적용 시키는 요소에만 지정한 설정이 적용된다. 2. 특정요소 앞, 뒤에 가상 요소를 삽입 ::after = p::after = p요소 뒤에 가상 요소 삽입. ::before = p::before = p요소 앞에 ..

구분선의 위치를 옮길 때 transform: translateY()를 사용함 여기서 -선을 늘리고 싶을 때에는 부모 .info의 넓이를 100%로 주면됨