'코딩' 태그의 글 목록 (2 Page)

[CSS] 짝수 태그만 색 바꾸기 (nth-child)

nth-child를 이용해 짝수 태그만 선택해서 색을 바꿔보겠습니다. 1. 짝수 태그만 선택하기 ① 기본 구조 만들기 짝수 태그를 선택하려면 태그가 여러 개 있어야 하겠죠. 원하시는 만큼 태그를 만들어주세요. 저는 태그를 이용해 만들었어요. 예시로 작성한 거라 똑같이 만들 필요는 없지만 궁금하신 분들을 위해아래쪽에 코드를 첨부해 두겠습니다. /* 짝수번째 li 색 변경 홀수는 odd */ li:nth-child(even){ background:#7D9D9C; color:#E4DCCF; } ② even 태그 중 짝수 태그만 선택하고 싶다면 li:nth-child(even)으로 짝수 태그만 선택 가능합니다. 기존 태그와 색을 반대로 넣어주었습니다. even은 짝수를 뜻하는 영어단어입니다. 영어를 잘하면 코딩..

coding/html + css · 2023. 3. 10. 07:30

[VS code] lorem ipsum 단어 수 조절하기

lorem ipsum 단어 수를 조절하는 방법이 있다고 하네요. 같이 해봅시다~! 1. lorem ipsum 단어 수 조절하기 ① lorem ipsum 써보기 로렘 입숨을 그냥 쓰면 위의 이미지와 같이 랜덤으로 나오게 됩니다. 오늘은 이 로렘 입숨 글자를 단어 단위로 조절해 보겠습니다. 로렘 입숨이 뭐야? 하신다면 아래 버튼을 클릭해 주세요. lorem ipsum 사용하기 ② 단어 수 적기 알면 생각보다 간단합니다. lorem + Tab으로 사용했던 로렘 입숨글자를 [lorem + 숫자 + Tab]으로 숫자를 끼워줍니다. 여기서 숫자는 단어 단위로 원하는 길이를 내가 직접 조절할 수 있습니다. ③ lorem ipsum 단어 수 세어 보기 여러분이 세기 귀찮으실 것 같아서 제가 숫자를 적어두었습니다. 위에..

coding/editor · 2023. 3. 9. 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

[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

[Github] 깃허브 클론 하는 법 - 연동하기

깃허브 클론 하는 법을 알아보겠습니다. 쉽게 말해 내 컴퓨터와 깃허브를 연동해보겠습니다. 1. 소스트리 소스트리를 이용한 깃허브 클론 하는 법 https://www.sourcetreeapp.com/ Sourcetree | Free Git GUI for Mac and Windows A Git GUI that offers a visual representation of your repositories. Sourcetree is a free Git client for Windows and Mac. www.sourcetreeapp.com ① 소스트리 다운로드 소스트리를 이용해 깃허브 클론을 진행할 것이기 때문에 위의 주소에 접속해 소스트리를 다운로드하여주세요. ② 깃허브 주소 복사 깃허브에서 자신의 저장소로 들..

coding/개발 팁 · 2022. 7. 27. 07:30

코딩 121