[CSS] flex-direction

flex-direction flexbox 레이아웃에서 flex아이템들이 배치되는 주축(main axis)의 방향을 설정하는 속성입니다. row 기본적인 flex container의 주축이 가로방향입니다. 가로로 왼쪽에서 오른쪽으로 배치됩니다. row-reverse main-axis는 가로 방향이지만, flex 아이템은 오른쪽에서 왼쪽으로 배치됩니다. column main-axis를 세로 방향으로 바꿉니다. flex 아이템은 위에서 아래로 배치됩니다. column-reverse 세로 방향으로 아래에서 위로 배치됩니다.

• format_list_bulleted 코딩/HTML,CSS
• · 2023. 6. 5.
• textsms

[CSS] flex-basis

flex-basis Flexbox 레이아웃에서 요소의 초기 크기를 정의하는 속성입니다. 이 속성은 'flex' 컨테이너 내에서 요소의 기본 크기를 지정할 때 사용됩니다. 길이 단위를 px, % 또는 'auto'로 지정할 수 있습니다. 길이 단위를 사용하면 요소 크기를 특정 값으로 지정할 수 있으며, 'auto'를 사용하면 요소의 크기가 내용에 따라 자동으로 결정됩니다. 부모 요소의 가로 축에서 추가적인 공간이 있다면, 'flex-grow'와 'flex-shrink' 속성에 따라 크기가 조절됩니다.

• format_list_bulleted 코딩/HTML,CSS
• · 2023. 6. 4.
• textsms

[CSS] flex-shrink

flex-shrink 레이아웃에서 요소의 크기가 축소될 때 얼마나 줄어들지를 결정하는 속성 요소의 크기가 레이아웃의 크기보다 커서 레이아웃을 넘어설 때, flex-shrink를 사용하면 주어진 비율에 맞게 크기가 조절됩니다. 위의 그림에서는 요소의 크기가 레이아웃의 범위를 벗어납니다. flex-shrink: 1; 을 모든 요소에 적용하면 같은 비율로 레이아웃 범위에 맞는 크기로 축소됩니다. 각 요소들의 크기를 조정하지 일일이 조정하지 않아도 간편하게 맞출 수 있습니다. flex-shrink의 기본 값은 0이며, 숫자가 커질 수록 줄어드는 크기가 더 큽니다. 만약 비율을 다르게 하고자 한다면 각각 요소에 따로 flex-shrink를 사용해야 합니다.

• format_list_bulleted 코딩/HTML,CSS
• · 2023. 6. 3.
• textsms

[CSS] Flex & flex-grow

Flex CSS의 'Flex'는 유연한 박스 모델을 생성하기 위해 사용되는 레이아웃 속성입니다. HTML의 여려 박스들을 쉽게 정리하기 위해 사용합니다. class container 안에 있는 모든 박스에 flex를 적용하는 코드입니다. flex-grow flexbox 레이아웃에서 유연한 크기 조절을 위해 사용되는 속성 중 하나 입니다. 이 속성은 자식 요소에 적용되며, 남은 공간을 얼마나 차지할지를 결정합니다. flex-grow 속성값은 양의 정수입니다. 값이 클수록 해당 요소가 남은 공간을 많이 차지하게 됩니다. 'flex-grow: 0;'이면 해당 요소는 남은 공간을 차지하지 않고 초기의 크기를 유지합니다. flex-grow를 사용한 예시 입니다. flex-grow 속성 값이 1이기 때문에 사용 가..

• format_list_bulleted 코딩/HTML,CSS
• · 2023. 6. 2.
• textsms

백준[2566] - 최댓값

문제: 9 × 9 격자판에 자연수 또는 0이 주어질 때, 이들 중 최댓값을 찾고 그 최댓값이 몇 행 몇 열에 위치한 수인지 구하는 프로그램을 작성하시오. Mul = [] #격자 MulMax = []#행의 최댓값 for i in range(9): #격자 채우기 N = list(map(int, input().split())) Mul.append(N) for a in range(9): #MulMax 채우기 MulMax.append(max(Mul[a])) col = MulMax.index(max(MulMax)) row = Mul[col].index(max(Mul[col])) print(max(MulMax)) print(col+1, row+1) 아이디어 - 각 행의 최댓값을 모아놓은 리스트(MulMax)의 최댓값..

• format_list_bulleted 코딩/Python
• · 2023. 5. 23.
• textsms

Clean up

useEffect()에서 parameter로 넣은 함수의 return 함수 function Hello() { function byFn() { console.log("bye :("); } function hiFn() { console.log("created :)"); return byFn; } useEffect(hiFn, []); return Hello; } function App() { const [showing, setShowing] = useState(false); const onClick = () => setShowing((prev) => !prev); return ( {showing ? : null} {showing ? "Hide" : "Show"} ); } hiFn안에 byFn을 return해서..

• format_list_bulleted 코딩/React
• · 2023. 5. 23.
• textsms