HTML|CSS 6

[BootStrap] 부트스트랩 버튼 가운데 정렬하기 / div 가운데 정렬

BootStrap을 이용한 html 에서 버튼 가운데로 만들기 BootStrap 부트스트랩을 이용해서 Modal 구현 도중, Modal 의 footer 버튼을 가운데로 정렬 하고 싶었다. 부트스트랩의 모달에서는 닫기 등 기본 버튼의 배치가 우측 하단으로 되어있어서 이부분을 수정하려고 한다. 기본 우측으로 정렬되어있는 코드 닫기 아이디 찾기 구글링 후, 그저 class에 text-center를 추가해주면 된다고 했다. 따라했다. class에 text-center를 추가한 코드 닫기 아이디 찾기 변함이 없다. 더 찾아보니, text-center를 class에 적용 했을 때 바뀌지 않는다면 style로 속성을 줘서 정렬 가능하다고 한다. style="text-align : center"를 추가하라고 한다. 추..

HTML|CSS 2023.06.01

[Bootstrap] collapse 메뉴바 / sidebar 열고닫고 구현하기 | 메뉴바 아코디언

메뉴바에 메뉴 열고닫고 하기 냅다 코드부터 갈깁니다. Bootstrap 라이브러리를 이용중이라면, HTML 코드만을 이용해서 아코디언 메뉴바, 사이드바를 구현 할 수 있습니다. 의류정보 ↳ 상의 ↳ 하의 ↳ 신발 결과 한번씩 클릭 할 때 마다 열리고 닫히기를 반복합니다.(Toggle 수행) 포인트 아코디언 collapse 를 사용하기 위해서 메인 메뉴(클릭하면 하위 태그들이 열리는 부분)에 반드시 들어가야 하는 코드는 아래와 같습니다. data-bs-toggle="collapse" data-bs-target="#cloth-collapse" 하위 태그들에 반드시 들어가야 하는 코드는 아래와 같습니다. class="collapse" id = "cloth-collapse" 위의 코드들에서는 반드시 data-b..

HTML|CSS 2023.03.15

[CSS | BootStrap] BootStrap Button box-shadow / 부트스트랩 반짝이는 버튼 만들기

Bootstrap 저장버튼에 반짝이는 효과를 넣고싶었다. 대부분의 search 결과들은 마우스를 올렸을때(hover)시, 빛나게 하는 효과들이 많은데, 백엔드를 주로 다루는 나로써는 해결하기가 어려웠다. 쉬운듯 어려운 fornt의 세계... 결과 및 코드 See the Pen Glowing Button by Ella (@Ella_develop_floor) on CodePen. 저장 이전 목록 해당 스타일을 적용 시키고 싶은 버튼의 class 속성 안에 glow-button 과 같은 class를 주어서 해당 클래스에만 css를 적용시켜주면 된다. 별도의 source나 다운로드 패키지는 설치하지 않고도 적용이 가능하다. .glow-button { animation: glowing 1500ms infinite..

HTML|CSS 2023.03.08

[HTML] rowspan 테이블 가로로 나누기 / 테이블 셀 나누기 / 테이블 칸 나누기 예제

게시글이 도움이 되었다면 [로그인]이 필요 없는 ❤ 클릭과 게시글의 광고를 클릭 해 주세요:) 테이블 초간단 예제 보통의 테이블은 아래와 같이 만드는게 일반적입니다. See the Pen tableExample by Ella (@Ella_develop_floor) on CodePen. 하지만 제가 구현하고자 하는 테이블은 아래 그림과 같습니다. 이럴 때 코드 See the Pen table by Ella (@Ella_develop_floor) on CodePen. 이렇게 하면 원하는대로 구현 할 수 있다. rowspan = "2" 를 이용하여 나머지 칸들을 합치는것이다. html을 가지고 한 칸을 절반으로 나누는 코드는 구현이 불가능하므로 역으로 이를 이용해, 2개의 칸을 합쳐 1개의 칸으로 만들면 되는..

HTML|CSS 2023.02.06

[HTML/CSS] 라디오버튼 여러개중 한개만 선택 가능하게 하기

라디오박스 넣는법 불가능 를 사용하면 라디오박스(다중 중복 선택 불가능한 체크버튼)을 만들 수 있다. (위의 코드는 BootStrap5 form 에서 응용함) 라디오박스 여러개중에 한개만 선택하게 하는법 바로 선택지들의 name을 통일해주면 여러개의 요소중 1개만 선택 할 수있게됩니다. 아래 예제코드를 보면 name을 똑같이 'yn'으로 설정 해 준것입니다. 불가능 가능 3개 이상도 마찬가지로 가능합니다. 아래의 예제코드는 1번, 2번, 3번중에 한가지를 선택 할 수 있는 라디오버튼의 예시입니다. 모두 name을 'number'라고 설정 해 주었습니다. 1번 2번 3번

HTML|CSS 2022.10.06

[HTML/CSS] 사이드바 세로 메뉴바 Navbar 세로버전 글씨 겹침 해결

Web 개발 프로젝트 도중 좌측 세로 메뉴바를 추가 해야했다. 기본적인 틀을 오픈소스에서 빌려 세로 메뉴바를 추가 해주었다. Home 메뉴 1 메뉴 2 메뉴 3 메뉴 4 메뉴 5 메뉴 6 메뉴 7 메뉴 8 메뉴 9 결과는 아래와 같았다. 기존에 만들어둔 화면과 세로 Navbar(세로 메뉴바)가 겹쳐서 나타났다. 해결을 위한 오답1. 메인화면 스타일에 바디태그가 왼쪽으로 이동하도록 적용해준다. body{ padding-left: 250px; } 결과는 아래와 같았다. 겹쳐진 부분이 모두 하나로 250px 옆으로 이동해버렸다. 해결 완료 해법 div 태그의 style 태그에 padding을 추가해준다. footer 부분도 해결해야 하지만 1차원적으로 해결하고자 하는 부분은 해결!

HTML|CSS 2022.10.05