본문 바로가기

분류 전체보기1013

리눅스 표준 입력의 리다이렉션(redirection) 리눅스 리다이렉션 기능을 사용하면 키보드로 입력받아야 하는 내용을 파일의 내용으로 입력받을 수 있습니다. 사용법 user@user-virtual-machine:~$ cat hello world user@user-virtual-machine:~$ cat greeting.txt hello hi user@user-virtual-machine:~$ cat < greeting.txt hello hi cat 명령어를 사용할 때 파일명을 사용하지 않으면 키보드로 입력을 받을 수 있습니다. 2023. 3. 27.
리눅스 표준 출력의 리다이렉션(redirection) 리다이렉션 기능은 화면에 출력 되는 내용을 파일에 출력을 할 수 있습니다. 파일에 출력을 하면 명령어의 출력 결과가 파일에 저장이 되면서 생성이 됩니다. 사용법 user@user-virtual-machine:~$ echo "hello" > greeting.txt user@user-virtual-machine:~$ cat greeting.txt hello user@user-virtual-machine:~$ echo "hi" > greeting.txt user@user-virtual-machine:~$ cat greeting.txt hi >를 사용하면 파일이 없을 때 생성되면서 내용이 저장되지만 파일이 있을 때는 내용을 덮어쓰게 됩니다. user@user-virtual-machine:~$ echo "hell.. 2023. 3. 27.
flex-basis, flex-grow, flex-shrink 속성 flex-basis 속성은 주축의 방향을 기준으로 요소들의 크기를 조절할 수 있습니다. flex-grow 속성은 남은 공간이 있을 때 요소들을 비율에 따라 크기를 조절할 수 있습니다. flex-shrink 속성은 요소들이 전체 사이즈를 넘어가는 사이즈를 가질 때 비율에 따라 크기를 줄일 수 있습니다. flex-basis 주축이 row라서 가로크기가 조절됩니다. 주축이 column라서 세로크기가 조절됩니다. flex-grow flex-grow를 전체 요소에 적용해서 비율이 동일하게 적용됩니다. 하나의 요소에 개별적으로 적용할 수 있습니다. flex-shrink 전체 사이즈와 요소들의 사이즈가 작거나 동일하다면 작동하지 않습니다. 요소들의 사이즈가 더 커야 요소를 선택해서 줄일 수 있습니다. flex 적용 .. 2023. 3. 27.
align-content & align-self 속성 align-content와 align-self 속성은 flex-wrap 속성을 사용했을 때 교차 축의 방향에 따라서 행 간격이나 열 간격을 조절할 수 있습니다. align-content 속성은 모든 요소들의 간격을, align-self 속성은 요소들 각각의 간격을 정렬 시킬 수 있습니다. flex-direction이 row면 주축이 좌측에서 우측 교차축이 상단에서 하단이고 flex-direction이 column이면 주축이 상단에서 하단 교차축이 좌측에서 우측입니다. 적용 전 align content 적용 align self 적용 2023. 3. 26.
css align-items 속성 css align-items 속성은 교차 축을 기준으로 요소들이 정렬됩니다. 교차 축은 주축의 방향에 따라서 결정이 되며 기본적으로 주축은 좌측에서 우측 방향 교차 축은 상단에서 하단 방향으로 설정되어 있습니다. 교차 축 상단에서 하단 기준 flex-direction 속성의 값이 row 이므로 주축은 좌측에서 우측이고 교차 축은 상단에서 하단입니다. align-items 속성은 교차축을 기준으로 작동하며 flex-start 값은 시작점으로 정렬해주는 기능이기 때문에 상단에 위치하게 됩니다. flex-direction 속성의 값이 row 이므로 주축은 좌측에서 우측이고 교차 축은 상단에서 하단입니다. align-items 속성은 교차축을 기준으로 작동하며 flex-end 값은 끝점으로 정렬해주는 기능이기 .. 2023. 3. 25.
css flex-warp 속성 css flex-wrap 속성은 주축의 방향에 따라서 교차 축을 기준으로 요소들을 정렬하는 방법입니다. 주축의 방향은 flex-direction 속성으로 변경할 수 있습니다. 주축(MAIN AXIS)이 기본적으로 가로방향이고 교차 축(CROSS AXIS)이 세로방향입니다. 주축을 세로 방향으로 변경하면 교차축이 가로 방향으로 되고 주축을 가로 방향으로 변경하면 교차 축이 세로 방향이 됩니다. 주축 가로 방향 교차 축 세로 방향 요소들을 열 방향으로 정렬시켜 줍니다. 주축 세로 방향 교차 축 가로 방향 요소들을 행 방향으로 정렬시켜 줍니다. 마무리 justify-content 값에 따라서 다양하게 정렬할 수 있고 wrap-reverse를 주면 반대방향으로 정렬이 됩니다. 2023. 3. 24.
css justify-content 속성 css justify-content 속성은 flex-direction 속성의 방향을 기준으로 요소들을 정렬 시킬 수 있습니다. row 방향 flex-start 적용 row 방향 flex end 적용 row 방향 center 적용 row 방향 space-between 적용 바깥쪽 여백을 다 없애고 요소사이를 띄웁니다. row 방향 space-around 적용 요소에 똑같은 면적의 여백을 부여합니다. row 방향 space-evenly 적용 요소와 요소사이 요소와 컨테이너 사이의 동일한 크기의 여백을 주는 방법입니다. 마무리 flex-direction 속성에 column을 주면 세로방향으로 똑같이 적용이 됩니다. 2023. 3. 24.
css flex-direction 속성 flex-direction 속성은 부모 요소가 display flex 일 때 자식 요소들을 좌측에서 우측, 우측에서 좌측, 상단에서 하단, 하단에서 상단 4가지 방향으로 위치 시킬 수 있습니다. 방향을 설정하지 않았을 때 기본값은 좌측에서 우측 뱡향입니다. 좌측에서 우측 우측에서 좌측 상단에서 하단 하단에서 상단 2023. 3. 24.

티스토리툴바