728x90 반응형 SMALL Website26 [Website] 컴포넌트 (Component) (2) 컴포넌트 (Component) Dropdowns 버튼이나 링크 등에 드롭다운 메뉴를 추가할 수 있다. 사용자가 상위 요소를 클릭하면 드롭다운 메뉴가 표시되어 다양한 옵션을 선택할 수 있다. Modals 사용자에게 추가 정보를 제공하거나 입력을 받기 위해 현재 페이지 위에 오버레이 형태로 표시되는 대화 상자이다. 모달은 경고 메시지, 로그인 폼, 이미지 뷰어 등 다양한 용도로 사용할 수 있다. Carousels 이미지, 텍스트, 동영상 등의 콘텐츠를 슬라이드 형식으로 표시하는 반응형 슬라이더이다. 사용자는 이전 / 다음 버튼이나 인디케이터를 통해 슬라이드를 전환할 수 있다. Tooltips 사용자가 특정 요소에 마우스를 올렸을 때 추가 정보를 표시하는 작은 팝업 상자이다. 도움말이나 설명 텍스트를 제공하기.. 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] 그림자 (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] 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. [Website] CSS (Cascading Style Sheets) (2) 셀렉터 (Selectors) 선택자란 말 그대로 선택을 해주는 요소이다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 된다. 전체 셀렉터 (Universal Selector) HTML 문서 내의 모든 요소를 선택한다. html 요소를 포함한 모든 요소가 선택된다 (head 요소도 포함). Heading paragraph 1 paragraph 2 paragraph 3 태그 셀렉터 (Type Selector) 지정된 태그명을 가지는 요소를 선택한다. Heading paragraph 1 paragraph 2 paragraph 3 ID 셀렉터 (ID Selector) ID 속성 값을 지정하여 일치하는 요소를 선택한다. ID 속성 값은 중복될 수 없는 유일한 값이다. Heading paragraph.. 2023. 5. 26. [Website] CSS (Cascading Style Sheets) (1) CSS (Cascading Style Sheets) 종속형 시트 또는 캐스케이딩 스타일 시트는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어로, HTML과 XHTML 문서의 외관을 통합적으로 관리하는 데 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이고, 레이아웃과 스타일을 정의할 때의 자유도가 높다. 기본 파일명은 style.css이다. 웹 페이지의 가독성과 유지 보수성이 향상된다. 인라인 스타일 (Inline style) 인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법이다. 이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있다. 인라인 스타일 내부 스타일 (Internal style) 내부 스타일을 이용하는 방법은 HTM.. 2023. 5. 25. [Website] HTML 태그 (3) 동영상 및 오디오 src 속성으로 동영상 파일 경로 지정 src 속성으로 오디오 파일 경로 지정 controls 재생, 일시정지 등의 컨트롤러 표시 폼 사용자의 입력을 받는 폼 생성 사용자의 입력을 받는 다양한 유형의 입력 요소 생성 (ex: 텍스트, 체크박스, 라디오 버튼 등) 입력 요소에 대한 설명 텍스트 제공 버튼 생성 (ex: 제출 버튼) Form Account Name Email Password User Info Location Seoul Busan Gender Male Female Interests Movies Art Sports Game 2023. 5. 25. [Website] HTML 태그 (2) 하이퍼링크 하이퍼링크는 다른 문서로 이동하기 위해서 클릭할 수 있는 요소, 텍스트 또는 이미지이다. : 다른 페이지나 웹 사이트로 이동할 수 있는 링크 (anchor) 생성 href 속성을 사용하여 이동할 URL 지정 Links Link to Google 이미지 이미지를 삽입하는 태그 src 이미지 파일의 경로 지정 alt 이미지가 로드되지 않을 경우 대체 텍스트 제공 이미지 2023. 5. 25. 이전 1 2 3 다음 728x90 반응형 LIST
