css만 삼각형,네모,원,타원,마르모,별등 각종 도형을 만드는 방법

웹디자인CSS 소스

wsss.tistory.com

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

반드시 기억해야 하는 CSS 선택자 30개

code.tutsplus.com

반드시 기억해야 하는 CSS 선택자 30개는 온라인 튜토리얼 사이트 Envato Tuts+에 실린 글의 한국어 번역본으로, 웹 페이지 요소를 지정할 때 자주 쓰는 CSS 선택자를 정리해 소개합니다. 범용 선택자(*), ID·클래스 선택자, 자식 선택자(X > Y), 속성 선택자(X[attr="value"]), :hover·:nth-child(n) 같은 가상 클래스 등 30가지 선택자를 하나씩 코드 예시와 함께 설명하고, 브라우저 호환성 정보와 데모 링크도 곁들였습니다. HTML·CSS를 막 배우기 시작한 입문자나, 선택자를 정확히 구분해 스타일을 효율적으로 작성하고 싶은 웹 퍼블리셔에게 참고가 됩니다.

게시글

반응형 웹에서 기본 구조

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

w3schools

www.w3schools.com

w3schools을 소개합니다. w3schools 은 다양한 프로그램 소스를 공부할수 있는 사이트 입니다. w3schools의 장점은 소스와 실행되는 결과같은 바로 볼수 있다는 것이 장점입니다. 웹관련 소스가 궁금한 경우 검색하면 잘 나옵니다. 그러나 소스를 적용했을때 잘 되는지에 대해서는 장담하지 못합니다. 열심히 적용해 봤는데 소스가 잘못된경우 또는 버전이 맞지 않아 사용할수 없는 경우가 있기 때문입니다. 물론 올린사람이 의도적으로 틀린 소스를 올리는 것은 아니지만 시간이 흐름에 따라 틀린 소스가 되기도 합니다. 그러다 보니 적용하기전 정상적인 소스인지 먼저 확인 해봐야 하는데 w3schools 에서는 Try it Yourself 를 통해 미리 확인해 볼수 있습니다. 또 다른 장점으로 CSS관련 정보를 많이 얻을수 있다는 것입니다. 개인적으로 CSS관련 부분이 궁금한 경우 자주 활용하는 사이트입니다. 일반적으로 CSS의 특정 기능이 궁금하면 인터넷에 검색하여 정보를 얻습니다. 그러다 보니 체계적인 정보를 얻기보다는 산발적인 정보를 얻게 되는데 w3schools 에서는 체계적으로 관련정보가 잘 정리되어 있습니다. 적용 예시 뿐아니라 연관된 스타일들까지 다양하게 확인해볼수 있습니다. 그러기에 CSS를 공부하기에는 더할나위없이 좋은 사이트입니다. 메뉴구성은 HTML, CSS, AJVASCRIPT, SQL, PYTHON, PHP등으로 구성되어 있어 다양한 서비스를 이용할 수 있습니다 웹관련 프로그램 소스가 궁금하시다면 w3schools를 활용해 보시기 바랍니다. 자세한 정보를 원하신다면 https://www.w3schools.com 주소를 참고 하시면 더많은 정보를 확인 하실 수 있습니다.

태그,스타일지원테스트

caniuse.com

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

게시글

css 라운드 넣는 방법

태그에 라운드 넣는 방법 solid border-radius:20px 해당라운드 수치임 라운드모양을 실선,점선등으로 표기가능하다 자주사용하는 종류 solid:실선 dotted:짧은 점선 dashed:긴 점선

순서도 그리기

app.diagrams.net

아주 편한 순서도 그리기 사이트 기획자나 개발자들은 순서도를 다룰 일들이 많으실 텐데요. 과거 저도 뭔가 기획을 할 때면 우선 순서도를 그리는 게 제일 처음 하는 일들 중 하나였습니다. 주로 파워포인트로 만들곤 했는데요. 간단한 거야 그냥저냥 그리곤 했지만 간혹 복잡한 프로세스를 순서도로 그리다 보면 파워포인트로 그리고 있느니 그냥 펜으로 그리는 게 낫다는 생각이 들기도 합니다. 수정이 여러 번 있으면 정말 머리가 복잡해지죠. 하나하나 사각형을 마름모로 바꾸고, 화살표 옮기고 있다 보면 그게 하루를 잡아먹곤 했습니다. 그래서 추천 드립니다. 혹시 모르시는 분들 계실까 봐서요. https://app.diagrams.net 위 사이트로 접속하셔서 회원가입하시면 순서도를 무료로 그릴 수 있는데요. 이게 엄청 편리한 게 화살표와 사각형 같은 걸 하나의 묶음으로 해 줄 수가 있어서 처음에 그리기도 무척 쉽고 나중에 수정이 생기더라도 확실히 편하고 빠르게 작업이 가능합니다. 순서도를 그리실 일이 별로 없는 분들도 계실 테지만, 기왕이면 순서도는 기본적으로 그릴 줄 아시는 게 무엇이든 설명하기가 굉장히 편하니까, 겸사겸사 위 사이트 통해서 익혀두시는 것도 좋을 거에요.

게시글

단순 텍스트를 이미지로 만드는 방법 (텍스트 이미지 만들기)

단순 텍스트를 이미지로 만드는 방법입니다