부트스트랩 콤포넌트

게시글

radio,checkbox 텍스트 명을 클릭해도 선택되게 처리 하는 방법

라디오버튼과 체크박스 버튼에서 조그마한 라디오,체크버튼을 클릭하기가 불편해 텍스트를 클릭했을대 체크될수 있게 처리하는 방법으로 아래와 같이 적용한다 radio,checkbox에서 id와 lable 내에 for 속성을 동일하게 맞춰주면된다 라디오버튼1 라디오버튼2 체크박스

html5 문서의 기본폼을 잘설명해 놓은 주소입니다

blog.tommyzip.co.kr

TOMMYZIP 블로그에 올라온 'HTML5 태그 및 기본 구조' 글입니다. HTML5 문서가 어떻게 구성되는지와 새로 도입된 의미 있는 태그들을 한 편에 정리했습니다. WHATWG 설립부터 W3C가 표준 권한을 넘기기까지의 HTML5 표준화 흐름을 짚고, header·footer·nav·main·section·article·aside 같은 구조 요소의 용도를 설명합니다. audio·video·canvas 등 멀티미디어 요소, 확장된 input 타입과 datalist 같은 폼 요소, 용도가 바뀌거나 삭제된 요소도 다룹니다. HTML 문서의 기본 뼈대를 익히려는 웹 퍼블리싱 입문자에게 유용합니다.

게시글

라디오버튼 선택된 value값 호출

val() 함수를 통해서 value값을 호출할수 있다 $("input[name=이름]:checked").val();// -> 2

게시글

반응형 웹에서 기본 구조

반응형 웹 기본 템플릿 :root { --main-color: #333; --nav-bg: #444; --dropdown-bg: #555; --text-color: #fff; --link-color: #333; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: sans-serif; line-height: 1.6; } a { text-decoration: none; color: inherit; } header { background: var(--main-color); color: var(--text-color); } .site-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; } .site-logo { font-size: 20px; } .menu-toggle { display: none; font-size: 24px; background: none; border: none; color: var(--text-color); cursor: pointer; } nav.main-nav { display: flex; justify-content: center; background: var(--nav-bg); } .nav-item { position: relative; } .main-nav > .nav-item > a { display: block; padding: 15px 20px; color: var(--text-color); } .dropdown { display: none; position: absolute; background: var(--dropdown-bg); min-width: 120px; z-index: 10; } .nav-item:hover .dropdown { display: block; } .dropdown a { display: block; padding: 10px; color: var(--text-color); } .layout { display: flex; gap: 20px; max-width: 1200px; margin: auto; padding: 20px; } aside.sidebar { width: 250px; } .sidebar ul { list-style: none; } .sidebar li { margin-bottom: 5px; } .sidebar a { display: block; padding: 10px; background: #eee; color: var(--link-color); } main.main-content { flex: 1; } footer.site-footer { background: #f0f0f0; text-align: center; padding: 20px; margin-top: 40px; font-size: 14px; color: #666; } /* 모바일 우선 스타일 */ @media (max-width: 768px) { .menu-toggle { display: block; } nav.main-nav { flex-direction: column; display: none; } nav.main-nav.show { display: flex; } .main-nav > .nav-item > a { padding: 12px 16px; border-top: 1px solid #555; } .dropdown { position: static; } .nav-item:hover .dropdown { display: none; } .nav-item .dropdown { display: none; flex-direction: column; } .nav-item.show .dropdown { display: flex; } .layout { flex-direction: column; } aside.sidebar { width: 100%; } .sidebar ul { display: flex; flex-direction: row; gap: 10px; flex-wrap: wrap; } .sidebar li { margin-bottom: 0; } .sidebar a { white-space: nowrap; } } /* PC에서 우측 정렬되는 본문 내 텍스트 */ .main-content .page-message { text-align: left; margin-top: 20px; } 로고 ☰ 회사소개. 인사말 오시는길 제품소개. 제품A 제품B 고객센터 공지사항 자주묻는질문 회사소개 인사말 오시는길 안녕하세요 ⓒ 2025 나의 웹사이트. 모든 권리 보유. function toggleMenu() { document.getElementById("mainNav").classList.toggle("show"); } function toggleDropdown(event) { if (window.innerWidth

소스코드 테마 SytaxHiglighter 설치

makingrobot.tistory.com

이 글은 로봇 개발자가 운영하는 기술 블로그 MakingRobot에 실린 글로, 티스토리 블로그에 SyntaxHighlighter를 설치해 프로그래밍 코드를 보기 좋게 표시하는 방법을 설명합니다. 2018년 9월에 작성되었습니다. SyntaxHighlighter 3.0.83 버전을 내려받아 scripts·styles 폴더의 파일을 블로그 스킨에 업로드하고, HTML head 태그에 스크립트 코드를 넣은 뒤, 글을 쓸 때 형식으로 코드를 감싸는 순서로 안내합니다. 블로그에서는 Arduino, Python, ROS, Linux 등도 다룹니다. 티스토리에서 소스코드를 색상 구분된 형태로 게시하려는 개발 블로거에게 참고가 됩니다.

게시글

호환성 보기생략하는 메타태그

IE버전에서 주소창 우쯕 끝에 호환성 보기 버튼이 생기는 경우가 있는데 이때 해당 버튼을 제거하기위해서 아래의 메타태그를 입력하면된다

게시글

input type=text 태그만 별도로 스타일 지정하는 방법

input{display:none;} 이렇게 css선언하게 되면 모든 input 태그는 비노출이된다 text,password,checkbox,radio등등 모두 비노출되는 식이다 그러나 input=text만 별도로 적용하고자 하는경우가 있는데 이때 사용하는 방법이다 input { expression(this.type == "text" ? "none" : font-size:13px) } expression를 통해서 this.type == "text"구분하여 별도록 스타일을 지정할수 있다

tocplus 채팅

tocplus.co.kr

홈페이지 제작시에 채팅창이 필요한 경우가 있습니다 상담을 위해서건 커뮤니케이션을 위해서건 실시간 의사소통은 큰장점이 있기 때문입니다. 그렇다면 채팅창을 개발하는건 쉬운 일 일까요? 그렇지 않습니다 채팅창은 난이도가 있어 비용과 시간이 생각보다 많이 듭니다. 이러한 문제점을 해결하기 위해 무료로 채팅창을 제공해주는 사이트가 있습니다 바로 톡플러스 입니다 홈페이지에 원하는 곳에 간단한 코드 추가로 쉽게 채팅창을 장착할수 있습니다.