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

게시글

반응형 웹에서 기본 구조

반응형 웹 기본 템플릿 :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

부트스트랩 콤포넌트

getbootstrap.kr

부트스트랩(Bootstrap) v5.0 한국어 번역 문서 중 '체크박스와 라디오버튼' 페이지입니다. 체크 계열 폼 입력 요소를 브라우저와 기기에 관계없이 일관된 모양으로 만드는 방법을 설명합니다. 기본 체크박스와 불확정 상태, 비활성화 옵션, 라디오버튼, 토글 스위치, 인라인·수직 배치와 라벨 없는 형태, 체크박스와 라디오를 버튼처럼 보이게 하는 토글 버튼, 커스터마이징용 Sass 변수를 예제 코드와 함께 다룹니다. 부트스트랩으로 폼 화면을 만드는 웹 퍼블리셔와 프론트엔드 개발자에게 유용합니다.

태그,스타일지원테스트

caniuse.com

브라우저별 지원하는 기능을 확인할 수 있는 https://caniuse.com 소개합니다. HTML에는 수많은 태그와 속성이 있고, CSS역시 수많은 스타일이 있습니다. 물론 많다 하여도 개발자들은 거짐 다 외워서 사용하고 모르는 경우는 검색해서 사용합니다. 그런데 가장 큰 문제는 기능이 많아 내가 모르고 있는 기능이 있다는 것이 아닙니다. 내가 알고 있는 기능이 모든 브라우저 환경에서 정상작동 되는지 파악하는 문제입니다. 웹표준을 지켜서 모든 환경에서 정상작동 되게 할수 있지만 이또한 한계가 있습니다. 이유는 브라우저마다 지원하는 부분이 조금씩 다르고 사용방법도 다른 경우가 있기 때문입니다. 이해는 됩니다. 기술이 계속 발전하면서 과거에 없던 기능들이 추가되는 것, 개발회사마다 조금씩 다를 수 밖에 없다는 점 이해 합니다. 그러기 때문에 개발하는 사람 입장에서는 어디까지 지원하고 또 무엇이 다른지를 알고 있어야만 합니다. 최신기술이 나오면 모든 사람들이 동시에 최신 기술을 사용하면 좋겠지만 현실은 그렇지 않습니다. 최신기술이 나오고 정착되려면 짧게는 몇 개월에서 길게는 몇 년이 걸리기도 합니다. 그러기에 개발자들은 이모든 것을 환경을 고려해 개발할 수밖에 없습니다. 그래서 소개하는 사이트가 바로 https://caniuse.com 입니다. Can I yse _______ ? 라는 부분에 내가 사용하고자 하는 태그나 CSS등을 입력하면 브라우저 별 사용가능 여부가 나와집니다. 너무 좋은 것은 같은 브라우저라 해도 버전 별로 지원여부가 다를 수 있는데 이 또한 자세히 나와진다는 것입니다. 물론 개발에 익숙한 사람이라면 자신이 지금까지 사용하던 기능이 어느 버전까지 지원하는지 알고 있겠지만 새로운 기능을 사용하고자 할 때에는 파악하기가 어렵습니다. 이때 https://caniuse.com 를 활용하면 검색만으로 지원가능 브라우저 및 버전을 쉽게 파악할 수 있습니다. 내가 사용 하고자 하는 기능이 어느 버전까지 지원하는지 한눈에 파악하길 원하시는 분이라면 https://caniuse.com 를 추천해드립니다.

[ PHP 강좌 ] #1. 라라벨(Laravel) 기본 개념 및 구조 - YouTube

www.youtube.com

유튜브 채널 '코딩아비의 개발일지'의 PHP 강좌 첫 영상 '[ PHP 강좌 ] #1. 라라벨(Laravel) 기본 개념 및 구조'다. 여러 편으로 이어지는 재생목록의 1편으로, PHP 웹 프레임워크 라라벨을 처음 배우는 사람을 위한 입문 강의다. 1편에서는 라라벨이 어떤 프레임워크인지 기본 개념과 프로젝트 구조를 설명하며, 등록자 메모에 따르면 이 강좌 시리즈는 라라벨로 게시판을 만드는 과정으로 이어진다. PHP 기본 문법을 익힌 뒤 라라벨로 실제 웹 서비스나 게시판을 만들어 보고 싶은 백엔드 개발 입문자에게 유용하다.

TEMPLATEWISE 파워포인트

www.templateswise.com

TEMPLATEWISE 의 홈페이지입니다. https://www.templateswise.com 파워포인트로 발표자료를 준비하다 보면 디자인에 많이 신경이 쓰이는 게 사실입니다. 아무리 대충 준비한다고 해도 어느 정도는 예뻐야 마음이 놓이니까요. 그렇게 디자인 고르다 보면 시간이 또 훌쩍 지나가는데요. 여기 파워포인트 템플릿을 굉장히 많이 소개해 주는 곳을 소개 드립니다. TEMPLATEWISE 라는 곳입니다. 이 사이트의 전반적인 디자인 컨셉은 '심플함'입니다. 일관성 있고 모던한 느낌의 스타일들을 제공해 주고 있습니다. 상업적인 이용도 가능합니다. 회원가입 필요도 없고요. 다만 출처는 꼭 표시해 주길 이 사이트에서는 바라고 있습니다. 어떤 조사에서는 템플릿 제공 업체들 중에서도 상위 15위 중 하나로 추천하고 있을 정도네요. 주제 별로 다양한 템플릿이 있습니다. 큰 분류를 보면 교육, 돈, 경제, 음식, 자연, 컴퓨터, 비즈니스 등이 있네요. 또한 다이어그램이나 차트, 혹은 인포그래픽도 사용하기 편하게 유용한 리소스들을 함께 구분해서 제공해 주고 있습니다. 자료의 풍성함을 위해서라면 이런 기능들도 함께 활용하면 좋을 것 같습니다.

게시글

폼입력시 필수 입력사항을 간단하게 제작하는 방법입니다

폼 양식을 작성할때 아이디,이메일,이름 작성할때 입력되지 않은경우 아이디를 입력하세요 이메일을 입력하세요 이름을 입력하세요 라는 필수 입력사항을 만들때 사용하는 방법입니다 if 문으로 value값의 유무를 통해서 작업할수 있지만 그렇게 하지 않고 입력양식에 요소를 추가 하여 처리 하는 방법입니다 writeSubmit(form) 함수를 활용합니다 입력하는 곳에는 이렇게 s_required itemname="아이디" 요소를 추가 하면 됩니다

웹디자인CSS 소스

wsss.tistory.com

CSS를 통한 디자인 소스가 제공되는 사이트 입니다. 단순 디자인을 넘어 애니매이션 소스도 같이 제공됩니다 예전에는 플래시로 애니매이션을 만들었다면 지금은 CSS, HTML5, 자바스크립트 등을 통해 애니매이션을 제작 하는 추세입니다 그런 면에서 볼때 아주 도움을 주는 사이트 입니다 아래는 실행 화면입니다 https://wsss.tistory.com/55

구글에서 제공하는 크롬 확장프로그램...

developer.chrome.com

Chrome for Developers에서 제공하는 크롬 확장 프로그램(Chrome Extensions) 개발 문서의 시작 페이지입니다. 구글이 운영하는 공식 문서로, 확장 프로그램을 처음 만드는 방법부터 배포까지 필요한 자료를 모아 두었습니다. 첫 확장 프로그램 만들기 가이드와 동작 원리 설명, API·권한·매니페스트 레퍼런스, 샘플 코드를 제공하며, 사이드 패널과 테마, 탭·북마크·다운로드 관리, 콘텐츠 스크립트 같은 기능별 문서와 Chrome 웹 스토어 게시 가이드로 이어집니다. 크롬 확장 프로그램을 개발하거나 API 사용법을 찾는 웹 개발자에게 유용합니다.