냐울당 햄버거 메뉴

coding/html + css 100

[css] flex 줄 바꿈

display:flex 상태에서 아이템 줄 바꿈을 해봅시다. 1. 제목 ul{ height:100vh; /*li 가운데 정렬*/ display:flex; /* display flex로 설정 */ flex-direction: row; /* 가로 정렬 (행) */ justify-content: center; /* flex-derction 방향 가운데 정렬*/ align-items:center; /* justify와 수직축 방향 가운데 정렬 */ background:#E4DCCF; } ① flex 정렬 여기 flex로 정렬한 아이템 6개가 있습니다. (더 자세한 코드는 아래에 첨부되어 있습니다.) - ② 아이템이 넘칠 때 가로 사이즈가아이템의 전체 사이즈보다 작을 때 flex로 설정하면 이렇게 옆으로 삐져나오..

coding/html + css · 2023. 7. 17. 07:30
[css] flex 줄 바꿈

폰트어썸 아이콘 깨져서 나올 때 해결 방법 (Font Awesome)

폰트어썸 아이콘이 깨져서 나올 때 해결 방법을 알아봅시다. 1. 폰트 어썸 https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com ① 폰트 어썸 아이콘 폰트 어썸에서는 아이콘을 html 코드로 가져와 사용이 가능한 사이트입니다. 코드로 되어있기 때문에 css 적용도 가능하다는 장점이 있죠. - ② 폰트 어썸 사용법 폰트 어썸이 처음이시라면 아래 버튼을 눌러 자세한 사용방법을 확인해 주세요. 폰트어썸 사용하기 2. 폰트 어..

coding/html + css · 2023. 7. 13. 07:30
폰트어썸 아이콘 깨져서 나올 때 해결 방법 (Font Awesome)

[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
[CSS] 짝수 태그만 색 바꾸기 (nth-child)

[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] 글자(text)에 테두리 넣기

[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] 동작 천천히 만드는 애니메이션
위쪽 화살표
도움이 되었다면 공감(하트)과 댓글을 부탁드려요.

티스토리툴바