본문 바로가기

IT875

css display 속성 - inline, block, inline-block, none css display 속성은 요소가 공간을 어떻게 차지할 것 인지를 나타내며 inline, block, inline-block, none을 사용할 수 있습니다. 각각의 속성 값에 따라서 width, height, padding, margin의 적용 여부가 달라집니다. lnline 특징 span { background-color: aqua; width: 500px; height: 500px; padding: 10px; margin: 10px; } inline은 다른 요소를 밀어내지 않고 콘텐츠의 크기만큼 공간을 차지합니다. width, height는 적용이 되지 않고 padding은 적용이 되지만 공간을 차지하지 않고 margin은 좌우만 적용이 되고 상하는 적용이 되지 않습니다. 참고로 span은 기본적.. 2023. 3. 23.
css 마진(margin) 속성 css 마진(margin) 속성은 콘텐츠 각 요소의 테두리 간의 간격을 의미합니다. 마진 속성을 사용해서 각 요소의 테두리를 기준으로 상하좌우 간격을 조절할 수 있습니다. 단일 값으로 적용하기 apply to all four sizes button { margin: 10px; } 상하좌우 동일하게 적용이 됩니다. 수직 수평 적용하기 vertical | horizontal button { margin: 5px 10px; } 첫 번째 값은 상단 하단에 두 번째 값은 좌측 우측에 적용이 됩니다. 상단 좌우 하단 적용하기 top | horizontal | bottom button { margin: 1px 2px 2px; } 첫 번째 값은 상단에 두 번째 값은 좌측 우측에 세 번째 값은 하단에 적용됩니다. 상하좌.. 2023. 3. 22.
css 패딩(padding) 속성 css 패딩(padding) 속성은 콘텐츠와 테두리 사이의 공간을 의미합니다. 패딩 속성을 사용해서 공간의 상하좌우 크기를 조절할 수 있습니다. 단일 값으로 적용하기 apply to all four sides button { padding: 10px; } 상하좌우 동일하게 적용이 됩니다. 수직 수평 적용하기 vertical | horizontal button { padding: 5px 10px; } 첫 번째 값은 상단 하단에 두 번째 값은 좌측 우측에 적용이 됩니다. 상단 좌우 하단 적용하기 top | horizontal | bottom button { padding: 1px 2px 2px; } 첫 번째 값은 상단에 두 번째 값은 좌측 우측에 세 번째 값은 하단에 적용이 됩니다. 상하좌우 각각 적용하기 .. 2023. 3. 22.
css 박스 모델: 테두리에 효과 주기 css 박스 모델은 브라우저 안에 모든 요소를 박스 형태로 구분합니다. 요소의 테두리에 효과를 주기 위해서는 border 속성을 사용해서 테두리의 굵기, 색깔, 스타일을 변경할 수 있습니다. 콘텐츠 기준으로 적용 #one { background-color: red; border-width: 5px; border-color: black; border-style: solid; } 테두리는 기본적으로 콘텐츠를 기준으로 적용이 돼서 기존의 사이즈에 테두리 두께까지 추가가 됩니다. ex) 300*300 -> 310*310 테두리 기준으로 적용 #two { background-color: blue; border-width: 5px; border-color: black; border-style: solid; box-.. 2023. 3. 21.
css 박스 모델: 가로와 세로 - width, height css 박스 모델은 브라우저 안에 모든 요소를 박스 형태로 구분합니다. 요소에 가로 넓이와 세로 높이를 조절하기 위해서는 width, height 속성을 사용해야 됩니다. 사용법 Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita accusantium, laudantium vitae doloribus, ea qui eius nemo odio consequatur illo iste maiores rerum animi architecto quas repellendus dolore voluptas dolorum. 2023. 3. 21.
파일의 내용을 정렬하기 - 리눅스 sort 명령어 리눅스 sort 명령어는 파일의 내용을 정렬하는 기능입니다. 문자는 기본적으로 알파벳 순서로 정렬이 되고 소문자가 먼저 나옵니다. 숫자는 기본적으로 각각의 자리수 비교를 해서 정렬하기 때문에 크기를 비교하기 위해서는 -n 옵션을 사용해야 됩니다. 문자 정렬 user@user-virtual-machine:~$ sort alphabet.txt a A b B c C user@user-virtual-machine:~$ sort -r alphabet.txt C c B b A a user@user-virtual-machine:~$ cat animal.txt lion lion tiger tiger bear bear user@user-virtual-machine:~$ sort -u animal.txt bear lion.. 2023. 3. 21.
파일의 줄 수, 단어 수, 바이트 수 - 리눅스 wc 명령어 리눅스 wc 명령어는 파일의 줄 수, 단어 수, 바이트 수를 확인할 수 있습니다. 옵션 없이 사용하면 줄 수, 단어 수, 바이트 수 순서로 화면에 출력이 되고 헷갈릴 수 있기 때문에 주로 옵션을 사용해서 확인을 합니다. 옵션 없이 사용 user@user-virtual-machine:~$ wc movie.txt 16 42 245 movie.txt 줄 수 확인 user@user-virtual-machine:~$ wc -l movie.txt 16 movie.txt 단어 수 확인 user@user-virtual-machine:~$ wc -w movie.txt 42 movie.txt 바이트 수 확인 user@user-virtual-machine:~$ wc -c movie.txt 245 movie.txt 문자 수 .. 2023. 3. 20.
파일 내용의 시작과 끝 출력 - 리눅스 head, tail 명령어 Linux 운영 체제에서는 다양한 명령어를 제공하여 파일의 내용을 조작하고 처리할 수 있습니다. 이 중에서도 head와 tail 명령어는 파일의 내용을 보여주는데 자주 사용되는 명령어입니다. head와 tail 명령어에 대해 자세히 알아보도록 하겠습니다. head 명령어 head 명령어는 파일의 시작 부분을 보여주는 명령어입니다. 주로 큰 파일에서 처음 몇 줄을 확인하고 싶을 때 사용됩니다. 기본적인 사용법은 다음과 같습니다. head [옵션] [파일명] 옵션을 사용하여 보여줄 줄의 수, 파일의 형식 등을 조정할 수 있습니다. 예를 들어, head -n 10 file.txt 명령어는 file.txt 파일의 처음 10줄을 출력합니다. tail 명령어 tail 명령어는 파일의 끝 부분을 보여주는 명령어입니다.. 2023. 3. 20.

티스토리툴바