📦 CSS

Fluid Layout(유동형 레이아웃) 현재 뷰포트 width (또는 height)에 적응하도록 웹페이지를 설정하려면 다음을 사용 레이아웃에 % (또는 vh / vw) 단위를 사용하여 뷰포트에 적응해야 하는 요소에 대해 px 대신에 사용 width 대신 max-width를 사용 Responsive Units 대부분의 길이에 대해 px 대신 rem 단위를 사용 전체 레이아웃을 자동으로 축소 (또는 확대)하는 것을 쉽게 만들기 위해 Flexbile Images 기본적으로 뷰포트를 변경할 때 이미지는 자동으로 크기가 조정되지 않으므로 이를 수정 이미지 차원에 대해 항상 %를 사용하고 max-width 속성과 함께 사용 Media Queries 특정한 뷰포트 너비(breakpoints)에서 CSS 스타일을 변..

1단계 #pond { display: flex; justify-content: flex-end; } 2단계 #pond { display: flex; justify-content: flex-end; } 3단계 #pond { display: flex; justify-content: space-around; } 4단계 #pond { display: flex; justify-content: space-between; } 5단계 #pond { display: flex; align-items: flex-end; } 6단계 #pond { display: flex; justify-content: center; align-items: center; } 7단계 #pond { display: flex; justify-con..

사용 방식: img 속성은 HTML 이미지 요소()에 직접 적용됩니다. 이 속성은 이미지 파일의 경로를 지정하여 해당 이미지를 표시합니다. background-image 속성은 CSS 스타일 시트에서 요소의 배경에 이미지를 적용하는 데 사용됩니다. 이 속성은 요소의 내용과 겹쳐서 배경 이미지를 표시합니다. 적용 대상: img 속성은 주로 단일 이미지를 표시하기 위해 사용됩니다. HTML에서 요소를 사용하여 이미지를 삽입하고, src 속성을 사용하여 이미지 파일의 경로를 지정합니다. background-image 속성은 요소의 배경에 이미지를 적용하는 데 사용됩니다. 이 속성은 텍스트나 다른 내용과 겹쳐서 배경 이미지를 표시할 수 있습니다. 이미지 크기 조절: img 속성은 이미지의 원본 크기를 유지하거나..

Float 자식이 부모로부터 떠오르다. 즉! margin을 없애다. 📘 The Code Magazine Blog Challenges Flexbox CSS Grid .main-header { background-color: #f2f4f3; /* padding: 20px; padding-left: 40px; padding-right: 40px; */ padding: 20px 40px; margin-bottom: 60px; /*height: 80px;*/ } /* SMALLER ELEMENTS */ h1 { color: #dc0073; font-size: 26px; text-transform: uppercase; font-style: italic; } 아직 float 속성을 입력하기 전 화면이다. float ..

Layout 레이아웃은 텍스트, 이미지 및 기타 콘텐츠에 배치되고 웹페이지에 정리되는 방식이다. 레이아웃은 페이지에 시각적 구조를 배치하여 콘텐츠를 배치한다. 레이아웃을 만든다는 것은 페이지 요소를 단순히 배치하는 대신 시각적 구조로 구성하는 것을 의미한다. 페이지 레이아웃(page layout) 과 구성 요소 레이아웃(component layout) 웹 페이지 내부의 큰 콘텐츠, 웹사이트는 요소를 배치하는 시점까지이다. 더 확대한 그림은 구성 요소 자체가 더 작은 콘텐츠로 구성 요소 레이아웃으로 되어 있다. CSS 빌드하는 3가지 방법 Float Layouts 레이아웃을 구푹하는 오래된 방법, float css를 사용 flexbox, CSS Grid같은 최신 기술로 대체되고 있다. 오래된 웹사이트에서는..

Card 일반적인 콘텐츠 홀더이자 콘텐츠 컨테이너로 조합해서 활용할 수 있다. 종종 그리드 시스템과 카드 그리드를 만드는데 쓰인다. 제목, 부제, 상단 이미지를 추가할 수 있는옵션이 있다. 또 다른 컴포넌트인 list group을 추가할 수 있다. card를 사용해서 깔끔한 그리드를 만들고 콘텐츠를 표시할 수 있다. https://getbootstrap.com/docs/5.2/components/card/ Cards Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. getbootstrap.com Carousel 사진 갤러리나 이미지 탐색의 슬라이더를 만드는데 쓰인다...

Border 테두리를 넣고 빼거나 모깎기를 하거나 디스플레이 속성을 변경하거나 여백을 추가할 때 편리하다. 이러한 유틸리티들은 요소에 클래스만 추가해 사용할 수 있다. 사방에 테두리를 만들려면 그냥 border을 추가하면 된다. border-top은 위쪽 border-bottom은 아래쪽 등 부트스트랩에서 테두리의 굵기를 조절할 수 없음으로 실제로 지정해야한다. 디폴트는 1px 또는 2px이다. 삭제 옵션을 통해 테두리의 일부, 위, 오르쪽 테두리를 없앨 수 있다. border-0-을 넣으면 모든 테두리를 없앨 수 있다. 테두리 색상또한 변경할 수 있다.(border-primary 등) 테두리 모깍기도 가능하다. 원을 만들때 유용하다. (사각형을 깎아서 원을 만든다.) Utilities Lorem ips..

SVG(Scalable Vector Graphics) 예술적인 웹사이트나 애니메이션 및 게임들을 만들 때 사용할 수 있는 훌륭한 도구 크기 조정 가능한 백터 그래픽이다. 복붙할 수 있고 앱처럼 텍스트도 가능하다. svg는 텍스트 색상 처럼 변경할 수 있다. 아이콘을 사용할 때 통상적으로 사용하는 요소나 컴포넌트는 입력그룹이다. 입력 그룹은 라벨, 텍스트, 버튼, 드롭다운 등으로 그룹화한것이다. Icons Delete Icons Delete 무료로 사용할 수 있는아이콘이다. 아이콘 라이브러리와 툴도 있다. https://icons.getbootstrap.com/ Bootstrap Icons Official open source SVG icon library for Bootstrap icons.getboot..

navbar 그리드 시스템을 제외하면 가장 대표적인 부트스트랩 컴포넌트인 내비게이션 바 navbar-brand 제목 같은 걸 생성할 때 쓰는 class. nav만 생성하면 된다. div로 대신할 수 있지만 nav 클래스를 넣은 nav가 더 낫다. navbar-light와 narbar-dark 중 선택해야 한다. 배경색도 골라야한다. Navbar Navbar h1클래스를 사용해 크기를 키울 수 있지만 앵커 태그로 두었다. navbar-dark를 사용하니 텍스트의 색상이 변경되었다. navbar-light와 nav-dark는 배경색을 바꾸는 게 아니라 내비게이션 바의 문자를 바꾼다. 앵커 태그인 navbar-brand 안에 이미지를 삽입하고 링크 여러개를 추가하면 된다. (내비게이션에서 흔한 일이다.) Na..

Forms form에는 다양한 컴포너트 form-control 태그 자체에 들어있다. 이메일 주소나 비밀번호를 입력하는 텍스트형 입력창이 있을 때 class에 form-control을 적용하면 더 보기 좋은 입력 형태를 만들 수 있다. form-gro up form-froup은 태그를 비롯해 다양한 태그를 그룹화할 때 쓰는 클래스이다. 기본적으로 여백을 준다. 그룹화할 때 사용한다. Forms Email placeholder가 이상하게 보이지만 form-control을 이용해서 어떤 요소이든 간에 화면의 너비를 차지하게 만들었다. 그리드를 사용해 더 나은 레이아웃인 한줄에 여러개의 입력창을 배치시킬 수 있다. Forms Email Password Password 창도 추가 했다. 이메일 주소나 비밀번호를..