coding 265
[VS code] lorem ipsum 단어 수 조절하기
lorem ipsum 단어 수를 조절하는 방법이 있다고 하네요. 같이 해봅시다~! 1. lorem ipsum 단어 수 조절하기 ① lorem ipsum 써보기 로렘 입숨을 그냥 쓰면 위의 이미지와 같이 랜덤으로 나오게 됩니다. 오늘은 이 로렘 입숨 글자를 단어 단위로 조절해 보겠습니다. 로렘 입숨이 뭐야? 하신다면 아래 버튼을 클릭해 주세요. lorem ipsum 사용하기 ② 단어 수 적기 알면 생각보다 간단합니다. lorem + Tab으로 사용했던 로렘 입숨글자를 [lorem + 숫자 + Tab]으로 숫자를 끼워줍니다. 여기서 숫자는 단어 단위로 원하는 길이를 내가 직접 조절할 수 있습니다. ③ lorem ipsum 단어 수 세어 보기 여러분이 세기 귀찮으실 것 같아서 제가 숫자를 적어두었습니다. 위에..
![[VS code] lorem ipsum 단어 수 조절하기](https://i1.daumcdn.net/thumb/C100x100/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fbt7KaX%2Fbtr2NvXRLMb%2FAAAAAAAAAAAAAAAAAAAAAFRCj6quxDeWvx0mEPj-76P5kji11nuvq2Qjm_NwyTNC%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DOidY3qxCIW3olOXuXy6cid68g3Q%253D)
[CSS] 글자(text)에 테두리 넣기
CSS를 이용해서 글자에 테두리를 넣어보겠습니다. 1. text-shadow p{text-shadow: 2px 0 #fff;} ① text-shadow 위의 이미지를 보시면 오른쪽으로 흰색 그림자가 살짝 나와있죠? 한 번에 처리하는 css는 없어서 이렇게 text-shadow를 이용해서 테두리를 만들어줍니다. text-shadow: x좌표 y좌표 블러(생략가능) 색 순서로 써줍니다. 2. 중첩 p{text-shadow: 2px 0 #fff, 0 2px #fff, -2px 0 #fff, 0 -2px #fff;} ① text-shadow 중첩 다른 방향은 어떻게 넣느냐 ,(콤마)를 이용해서 중첩을 할 수 있습니다. -(마이너스)값도 이용해서 오른쪽, 아래, 왼쪽, 위 순서대로 text-shadow를 넣어주었..
![[CSS] 글자(text)에 테두리 넣기](https://i1.daumcdn.net/thumb/C100x100/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FdMZa9u%2FbtrUHSA2L5m%2FAAAAAAAAAAAAAAAAAAAAAInADDqwldbzW-6R8cBIX3iG8xdLDkyKrAiPTYxlypeW%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DUChUcmn5ZykguHISUPmGiJNI1Uo%253D)
[CSS] 동작 천천히 만드는 애니메이션
CSS hover 기능을 쓸 때 너무 딱딱 끊기는 느낌을 바꾸고 싶었던 적 있으신가요? 자연스럽게 천천히 동작하는 애니메이션으로 구현하고 싶을 때 사용해 봅시다! 1. 준비 ① button 만들기 일단 애니메이션을 적용할 버튼을 만들어줍니다. 꼭 버튼이 아니어도 됩니다. 디자인은 각자 마음에 들게 만들어주시고 hover를 이용해 opacity를 조절해 주세요. button:hover{ opacity:0.5; /* 투명도 조절 */ cursor:pointer; /* 마우스 올렸을 때 손모양 마우스 */ } hover에는 opacity와 cursor만 넣었습니다. 2. transition button:hover{ opacity:0.5; /* 투명도 조절 */ cursor:pointer; /* 마우스 올렸을 ..
![[CSS] 동작 천천히 만드는 애니메이션](https://i1.daumcdn.net/thumb/C100x100/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fm8ux5%2FbtrUA99yCgF%2FAAAAAAAAAAAAAAAAAAAAAKGxLJ7JEWEwHJE5l0LdKu2DD9-_WaYXT8pzt8sjKazO%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DmC8YFnQA77s3atxtzDHGXQbRTDE%253D)
[우분투] 가상 환경 구축
우분투 가상 환경 구축을 해보겠습니다. 우분투 설치 우분투 설치전이신 분들은 위의 버튼을 클릭해 설치를 먼저 진행해주세요. 1. 가상 환경 설정 ① VMware 실행 새로운 가상 환경을 만들기 위해 설치해둔 VMware를 실행해주세요. ② Create VMware가 실행되면 Create a New Virtual Machine 버튼을 클릭해 새로운 가상 환경(Virtual Machine)을 만들어 줍시다. ③ 체크 후 Next 맨 아래 I will install the operating system later.를 선택해줍니다. 나중에 운영체제를 설치한다는 옵션인데 실제 환경이랑 최대한 비슷하게 만들려고 선택합니다. ④ 운영 체제 선택 우분투는 리눅스(Linux)기반 운영체제를 사용하니 리눅스를 선택합니다...
![[우분투] 가상 환경 구축](https://i1.daumcdn.net/thumb/C100x100/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FwKKTa%2FbtrOvbGVp4t%2FAAAAAAAAAAAAAAAAAAAAACOE2B9SfWVFHroRYksHLV5mREhat7LgpCVoFdAuch6D%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DHAsQT4YyJ%252BgvSFzyl4eymQjGvWQ%253D)
[우분투] VMware 설치하기
VMware를 설치해보겠습니다. 1. 우분투, VMware 다운로드 https://ubuntu.com/download/desktop Download Ubuntu Desktop | Download | Ubuntu Ubuntu is an open source software operating system that runs from the desktop, to the cloud, to all your internet connected things. ubuntu.com ① 우분투 다운로드 위의 링크로 접속하여 Ubuntu 22.04.1 LTS를 다운로드합니다. 오른쪽에 있는 Download 버튼을 클릭해주세요. 조금 시간이 걸리니 기다리는 동안 VMware를 설치해봅시다. https://www.vmware.co..
![[우분투] VMware 설치하기](https://i1.daumcdn.net/thumb/C100x100/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fm3bQd%2FbtrOtb7Kwhr%2FAAAAAAAAAAAAAAAAAAAAAEHmQOSe5qpXYTYwPPVCAs_N_NCX-DwezKMpcSvQl55z%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3D%252BwQ1%252FQTQzSfQ7lQFen56vF4Rbas%253D)