본문 바로가기

HTML／CSS91

[HTML/CSS] Bootstrap의 Toast 기능 사용하기 안녕하세요. 이번 시간에는 Bootstrap에 있는 토스트(Toast) 기능을 사용해보겠습니다. 1. 토스트(Toast) 기능이란? 토스트(Toast) 기능은 사용자에게 메시지나 알림을 간단하게 표시하는 기능입니다. 일반적으로 페이지의 상단이나 하단에서 작은 팝업 창으로 나타나며, 일시적인 정보나 알림을 표시하는 데 사용됩니다. 2. Bootstrap 불러오기 이 예제에서는 CDN으로 Bootstrap을 불러오겠습니다. 3. 전체 코드 토스트 보여주기 Bootstrap 시간 정보 안녕하세요. 토스트 메시지. 4. 실행 결과 2024. 4. 8.
[HTML/CSS] 레이아웃 만들기 안녕하세요 이번 게시글에서는 기본 레이아웃을 만들어보겠습니다. Header, Sidebar, Content, Footer 가 있는 기본 레이아웃입니다. 1. Header 로고와 페이지 이동을 위한 소메뉴를 배치했습니다. 2. Sidebar 페이지 이동을 위한 소메뉴를 배치했습니다. 3. Content 원하는 콘텐츠를 추가할 수 있습니다. 4. Footer 기본적인 footer ui로 구성했습니다. 우선 시연영상입니다. 다음은 전체 코드 입니다. Logo 메뉴1 메뉴2 메뉴3 홈 자유게시판 마이페이지 설정 콘텐츠 © 2023 Stickcode™. All Rights Reserved. About Privacy Policy Licensing Contact 2024. 3. 16.
[HTML/CSS] Bootstrap으로 아코디언 만들기 이번 시간에는 Bootstrap으로 아코디언을 만들어보겠습니다. 1. 아코디언이란? 아코디언(Accordion)은 웹 디자인에서 자주 사용되는 UI 패턴 중 하나입니다. 아코디언은 섹션을 축소 및 확장할 수 있는 상호작용 컴포넌트로, 사용자가 특정 섹션을 선택하면 해당 섹션이 펼쳐지고, 다른 섹션들은 축소됩니다. 2. Bootstrap 불러오기 이 예제에서는 CDN으로 Bootstrap을 불러오겠습니다. 3. 전체 코드 자주하는 질문 인공지능과 머신러닝의 차이는 무엇인가요? 인공지능은 인간의 지능적인 특성을 컴퓨터 시스템에 구현하는 더 큰 개념이며, 머신러닝은 그 중에서도 데이터 학습을 강조하는 특별한 기술이라고 볼 수 있습니다. 즉, 모든 머신러닝은 인공지능이지만, 모든 인공지능이 머신러닝은 아닙니다... 2024. 3. 12.
[HTML/CSS] CTA 만들기 안녕하세요 이번 게시글에서는 HTML, CSS를 활용해서 CTA를 만들어보겠습니다. CTA란 Call to action의 약자로 유저의 즉각적인 반응을 유도하거나 즉각적인 판매를 장려하기 위한 마케팅 용어입니다. 보통 메인 페이지에 서비스를 설명할 수 있는 페이지로 이동하게끔 하는 버튼을 놓거나 사진을 배치하는 편입니다. 우선 구현하려고하는 CTA 예시입니다. 다음은 전체 코드입니다. Mother earth hosts your travel The state of Utah in the United States is home to lots of beautiful National Parks, Bryce National Canyon Park ranks as three of the most magnificent .. 2024. 3. 7.
[HTML/CSS] Bootstrap으로 네비게이션 드로어 만들기 이번 시간에는 Bootstrap으로 웹페이지에서 네비게이션 드로어를 만드는 예제를 진행하겠습니다. 1. 준비 Bootstrap은 프론트엔드 툴킷으로, 프론트엔드를 빠르고 예쁘게 만드는데 유용합니다. 이 예제에서는 CDN 링크로 Bootstrap을 사용해보겠습니다. 아래의 CDN 링크를 HTML 스틱코드 네비게이션 바 테스트 네비게이션 바 홈 링크 서랍 정보 1 정보 2 다른 것들 Search 3. 실행 결과 2024. 2. 24.
[HTML/CSS] 슬라이드쇼 만들기 안녕하세요 오늘은 흔히 볼수 있는 광고 이미지와 같은 HTML과 CSS, 자바스크립트를 사용하여 간단한 자동 이미지 슬라이드쇼를 구현해보겠습니다. 코드입니다. DOCTYPE html> /* CSS 스타일을 내장시키는 태그입니다. */ .Slidesbackground { margin: 0; padding: 0; /* .Slidesbackground 클래스에 대한 스타일을 정의합니다. 여백(margin)과 내부 여백(padding)을 0으로 설정합니다. */ } .slideshow-image { border-radius: 3%; width: 100%; height: 100%; overflow: hidden; /* .slideshow-image 클래스에 대한 스타일을 정의합니다. 이미지의 모서리를 둥글게 하고.. 2024. 2. 16.
[HTML/CSS] 탭 메뉴 만들기 안녕하세요 이번 게시글에서는 탭 메뉴를 만들어 탭 클릭시 하단의 내용이 보여지는 예제입니다. 우선 시연영상입니다. 다음은 전체 코드입니다. 탭1 탭2 탭3 탭1 탭1의 내용을 넣어주세요 탭2 탭2의 내용을 넣어주세요 탭3 탭3의 내용을 넣어주세요 2024. 2. 7.
[HTML/CSS] 세로 드롭다운 메뉴 안녕하세요 오늘은 HTML/CSS/JavaScript 를 활용하여 새로 드롭다운 메뉴를 만들어 볼게요. 우선 사용할 HTML 태그는 table, tr, td 태그입니다. 태그: 목적: 웹 페이지에 테이블을 만들 때 사용합니다. 태그는 테이블의 시작과 끝을 나타내며, 테이블의 전체적인 구조를 정의합니다. 자식 요소: (테이블 행), (테이블 헤더 셀), (테이블 데이터 셀), , , 등을 자식 요소로 포함할 수 있습니다. 태그 (Table Row): 목적: 테이블의 개별 행을 나타냅니다. 각 태그는 테이블의 한 행을 대표하며, 하나 이상의 또는 요소를 포함할 수 있습니다. 자식 요소: 주로 (테이블 데이터 셀) 또는 (테이블 헤더 셀) 태그를 자식 요소로 가집니다. 배치: 태그 내에 순차적으로 배치되어 테.. 2024. 2. 6.
[HTML/CSS] 버튼 클릭시 나오는 모달창 구현하기 안녕하세요 이번 게시글에서는 버튼을 클릭했을때 나오는 모달창을 구현해보겠습니다. 우선, 시연영상입니다. 전체 코드입니다. modal.html stickcode 모달창 띄우기 버튼 × 모달창 내용! modalscript.js const btn = document.getElementById("popupBtn"); // 모달을 띄우는 버튼 요소 가져오기 const modal = document.getElementById("modalWrap"); // 모달 창 요소 가져오기 const closeBtn = document.getElementById("closeBtn"); // 모달을 닫는 버튼(X) 요소 가져오기 btn.onclick = function () { modal.style.display = "block.. 2024. 1. 29.

티스토리툴바