'coding' 카테고리의 글 목록 (3 Page)

[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를 넣어주었..

coding/html + css · 2022. 12. 30. 07:30

[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; /* 마우스 올렸을 ..

coding/html + css · 2022. 12. 27. 07:30

[우분투] 가상 환경 구축

우분투 가상 환경 구축을 해보겠습니다. 우분투 설치 우분투 설치전이신 분들은 위의 버튼을 클릭해 설치를 먼저 진행해주세요. 1. 가상 환경 설정 ① VMware 실행 새로운 가상 환경을 만들기 위해 설치해둔 VMware를 실행해주세요. ② Create VMware가 실행되면 Create a New Virtual Machine 버튼을 클릭해 새로운 가상 환경(Virtual Machine)을 만들어 줍시다. ③ 체크 후 Next 맨 아래 I will install the operating system later.를 선택해줍니다. 나중에 운영체제를 설치한다는 옵션인데 실제 환경이랑 최대한 비슷하게 만들려고 선택합니다. ④ 운영 체제 선택 우분투는 리눅스(Linux)기반 운영체제를 사용하니 리눅스를 선택합니다...

coding/editor · 2022. 10. 17. 07:30

[우분투] 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..

coding/개발 팁 · 2022. 10. 14. 07:30

[CSS] flex를 이용한 가운데 정렬

flex를 이용해 가운데 정렬을 해보겠습니다. 1. flex display:flex div{ display:flex; } ① display:flex; 먼저 flex를 이용한다는 의미는 display에 flex를 적용한다는 의미입니다. 아마 여러분이 중앙 정렬을 하고 싶은 곳에 위와 같이 display:flex;를 적어도 아무 일도 일어나지 않을 겁니다. 위의 이미지처럼요. flex는 옵션 값을 설정해주어야 가로, 세로 모두 중앙 정렬을 해줄 수 있습니다. 아래에서 같이 옵션 값을 정해봅시다. 2. 옵션 flex 옵션 div{ flex-direction: column; } ① flex-direction direction은 방향이라는 뜻으로 flex-direction옵션은 가로 방향으로 정렬할지 세로 방향으..

coding/html + css · 2022. 8. 1. 07:30

coding 259