'coding' 카테고리의 글 목록 (3 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

[SCSS] Live SASS 익스텐션 설치 방법

vs code에서 Live SASS 익스텐션을 설치해 보겠습니다. 1. Live SASS 익스텐션 ① Live SASS Compiler란? SASS 혹은 SCSS를 사용하려면 CSS로 반드시 컴파일을 해줘야 하는데요. 이때 cmd를 이용해 명령어로 컴파일을 해줍니다. 컴파일 방법 자세한 컴파일 방법은 위의 버튼에서 확인해 주세요. 그런데 vs code에서는 익스텐션으로 자동으로 컴파일이 가능하다는 사실! 오늘은 vs code에서 그 익스텐션을 이용해 자동으로 컴파일하는 방법을 알아보겠습니다. 나는 대체 그동안 왜 이 기능을 안 썼는가... 2. Live SASS 익스텐션 설치 ① live sass compiler 검색 vs code 가장 왼쪽에 세로로 된 메뉴가 있습니다. 그중 가장 아래 버튼을 클릭하면..

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

coding 265