728x90 반응형 SMALL Programming/Website35 [Website] 컴포넌트 (Component) (2) 컴포넌트 (Component) Dropdowns 버튼이나 링크 등에 드롭다운 메뉴를 추가할 수 있다. 사용자가 상위 요소를 클릭하면 드롭다운 메뉴가 표시되어 다양한 옵션을 선택할 수 있다. Modals 사용자에게 추가 정보를 제공하거나 입력을 받기 위해 현재 페이지 위에 오버레이 형태로 표시되는 대화 상자이다. 모달은 경고 메시지, 로그인 폼, 이미지 뷰어 등 다양한 용도로 사용할 수 있다. Carousels 이미지, 텍스트, 동영상 등의 콘텐츠를 슬라이드 형식으로 표시하는 반응형 슬라이더이다. 사용자는 이전 / 다음 버튼이나 인디케이터를 통해 슬라이드를 전환할 수 있다. Tooltips 사용자가 특정 요소에 마우스를 올렸을 때 추가 정보를 표시하는 작은 팝업 상자이다. 도움말이나 설명 텍스트를 제공하기.. 2023. 6. 5. [Website] 컴포넌트 (Component) (1) 컴포넌트 (Component) 부트스트랩 컴포넌트는 웹 페이지의 디자인과 기능을 향상시키는 데 도움이 되는 미리 만들어진 요소들이다. Buttons 다양한 스타일, 크기 및 상태를 가진 버튼을 만들 수 있다. Navbar 웹 페이지의 상단에 탐색 링크를 배치하는 반응형 네비게이션 헤더이다. 부트스트랩의 Navbar는 브랜드 로고 및 탐색 링크, 검색 폼, 드롭다운 메뉴 등을 지원한다. Alerts Alerts 컴포넌트는 사용자에게 피드백을 제공하는 데 사용되는 스타일이 있는 경고 메시지이다. 간단한 경고부터 닫기 버튼이 있는 경고 메시지까지 다양한 유형의 알림을 만들 수 있다. Cards 이미지, 텍스트, 링크 등의 콘텐츠를 그룹화하는 유연한 컨테이너이다. 카드는 블로그 게시물, 프로필 정보, 이미지 갤.. 2023. 6. 5. [Website] 레이아웃 / 그리드 시스템 레이아웃 (Layout) 레이아웃 (layout)이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미한다. 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소이다. wrap : 모든 레이아웃을 감싸고 있는 레이아웃 header : 기본적으로 웹 사이트 로고나 메인 메뉴가 들어가는 레이아웃 container : sidebar 레이아웃과 content 레이아웃을 감싸는 레이아웃 sidebar : 서브 메뉴를 표시하는 레이아웃 content : 페이지의 내용을 표시하는 레이아웃 footer : 저작권 글이나 기타 메뉴가 들어가는 레이아웃 컨테이너 (Container) 컨테이너는 웹 페이지의 콘텐츠를 감싸 주는 역할을 한다. 부트스트랩에서는 레이아웃을 구성하는 데 필요.. 2023. 6. 5. [Website] 부트스트랩 (Bootstrap) 부트스트랩 (Bootstrap) 부트스트랩은 웹 개발자들이 빠르게 반응형 웹사이트를 만들 수 있도록 도와주는 오픈 소스 프레임워크이다. 부트스트랩 5는 HTML, CSS, JavaScript를 사용하여 제공되며 다양한 레이아웃, 그리드 시스템, 컴포넌트 등을 제공하여 웹 개발을 손쉽게 만들어 준다. jQuery 제거 : 부트스트랩 5에서는 jQuery를 사용하지 않는다. 대신, Vanilla JavaScript로 작성된 코드로 대체되어 더 가볍고 빠른 웹사이트를 제공한다. 사용자 정의 및 확장성 : 부트스트랩 5는 사용자 정의가 더욱 쉽도록 설계되었다. 개발자들은 SCSS 변수를 활용하여 기본 스타일을 쉽게 변경할 수 있으며, 더 많은 유틸리티 클래스를 통해 디자인을 빠르게 조정할 수 있다. 개선된 그리.. 2023. 6. 1. [Website] Columns / TextBox / Flexbox Columns / TextBox / Flexbox 컬럼 (Column) 컬럼을 사용하면 긴 텍스트를 더 쉽게 읽을 수 있는 형식으로 나눌 수 있다. 기사, 블로그 글 등의 콘텐츠를 여러 개의 컬럼으로 분할하여 가독성을 높이고, 모던한 디자인을 구현할 수 있다. CSS의 column-count와 column-gap 속성을 사용하여 컬럼의 개수와 간격을 조절할 수 있다. 텍스트 박스 (Text Box) 텍스트 박스는 사용자 입력을 받기 위한 공간을 제공한다. CSS를 사용하여 텍스트 박스의 모양, 크기, 테두리, 그리고 배경색 등을 조절할 수 있다. 또한, resize와 outline 속성을 사용하여 텍스트 박스의 크기 조절 가능 여부와 외곽선 스타일을 설정할 수 있다. 플렉스박스 (Flexbox) 플렉스박.. 2023. 5. 26. [Website] 트랜지션 (Transition) 트랜지션 (Transition) CSS 트랜지션과 애니메이션은 웹 페이지에서 요소의 스타일 변경에 부드러운 효과를 적용하는 데 사용된다. 트랜지션은 요 소의 두 가지 상태 간의 스타일 변경을 부드럽게 처리하는 반면, 애니메이션은 여러 키 프레임에 따라 요소의 스타일을 변경할 수 있게 해준다. 이 두 기능은 웹 페이지에 독특한 효과와 동적인 요소를 추가하는 데 도움이 된다. html 2023. 5. 26. [Website] 그림자 (Shadows) 그림자 (Shadows) 그림자는 웹 페이지에서 요소에 깊이와 입체감을 추가하는 데 사용되는 CSS 효과이다. 그림자는 주로 text-shadow와 box-shadow 두 가지 유형으로 사용된다. text-shadow는 텍스트에 그림자를 적용하고, box-shadow는 요소의 경 계 상자에 그림자를 적용한다. html Hello World Hello World Hello World 1 This is a card 2023. 5. 26. [Website] 그레디언트 (Gradients) 그레디언트 (Gradients) 그레디언트는 둘 이상의 색상 사이의 점진적 전환으로 구성된 특수 유형인 데이터 유형으로 표현된다. 선형, 방사형 및 원추형의 세 가지 그레디언트 유형을 선택할 수 있다. 또한, 함수를 사용하여 반복 그레디언트을 만들 수도 있다. html Rounded Corners Rounded Corners Rounded Corners This div uses an image border Welcome Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mi metus, imperdiet eu vehicula ut, pulvinar vitae mauris. Nunc fringilla accumsan enim, id vestib.. 2023. 5. 26. [Website] 가상 클래스 (Pseudo Classes) 가상 클래스 (Pseudo Classes) 가상 클래스 (Pseudo Classes)는 웹 페이지 요소의 특정 상태에 따라 스타일을 적용하는 CSS 기능이다. 가상 클래스는 요 소 이름 뒤에 콜론(:)을 사용하여 표시하며, 가상 클래스에 따라 다양한 상태에 스타일을 적용할 수 있다. 예를 들어, :hover, :active, :focus, :first-child, :last-child, :nth-child() 등의 가상 클래스를 사용할 수 있다. html Pseudo click List Item List Item List Item List Item List Item List Item List Item List Item css a:hover { color: red; font-weight: bold; } ... 2023. 5. 26. [Website] CSS 위치 지정 및 배경 위치 (Position) CSS에서 위치 지정은 웹 페이지의 요소들을 원하는 위치에 배치하는 데 사용되는 기능이다. position 속성을 사용하여 위치를 지정할 수 있으며, static, relative, absolute, fixed, sticky와 같은 값을 가질 수 있다. 또한 top, bottom, left, right 속성을 사용하여 위치를 더 정확하게 조절할 수 있다. 배경 (Background) 배경 스타일은 웹 페이지의 요소에 배경 색상, 이미지, 반복, 위치 등을 적용하는 데 사용되는 CSS 기능이다. background-color, background-image, background-repeat, background-position 등의 속성을 사 용하여 배경 스타일을 정의할 수 있다... 2023. 5. 26. 이전 1 2 3 4 다음 728x90 반응형 LIST
