'coding/html + css' 카테고리의 글 목록 (2 Page)

[CSS] overflow 스크롤은 없지만 이미지는 넘치게 하고 싶을 때

overflow를 사용해서 스크롤은 생기지 않지만 이미지는 넘어가게 만들어보겠습니다. 1. 예시 이미지 ① 스크롤은 없지만 이미지는 넘치는 화면 글로 설명하면 이해가 어려울 것 같아 예시 이미지를 가져와봤습니다. 표시된 부분이 가로 사이즈고 밖으로 나온 이미지가 넘친 모습입니다. 보통은 이런 상황에 가로 스크롤바가 생기지만 가로 스크롤바가 생기지 않는 것이 오늘의 최종 목표입니다. - ② 스크롤바 보통은 위의 이미지처럼 아래에 넘친 만큼 스크롤바가 나타납니다. 2. overflow body{ overflow-x:hidden; } ① overflow-x:hidden overflow-x에 hidden값을 주어서 스크롤을 나오지 않게 만들어줍니다. 여기서 중요한 것은 어디에 속성을 넣는가인데 해당 태그에 넣는..

coding/html + css · 2023. 7. 20. 07:30

[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

폰트어썸 아이콘 깨져서 나올 때 해결 방법 (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

[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] 글자(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

coding/html + css 101