태그,스타일지원테스트

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 주소를 참고 하시면 더많은 정보를 확인 하실 수 있습니다.

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

code.tutsplus.com

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

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

blog.tommyzip.co.kr

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

페이지스피드 인사이트

pagespeed.web.dev

홈페이지의 속도를 측정할수 있는 페이지스피드 인사이트 입니다 사용방법은 간단합니다 접속후 테스트하고자 하는 주소를 입력하고 분석을 클릭하면됩니다 측정결과는 위와 같이 나와지면 하단 부분에 점검할 사항들이 나와져 체크하여 개선하면 됩니다 모바일뿐 아니라 PC버전도 확인할 수 있습니다 홈페이지를 개설하여 운영할때 웹문서에 검색되게 하는 것은 그 무엇보다도 중요합니다 웹문서에 검색이 잘될수록 홈페이지 방문자가 증가 하기 때문입니다 웹문서에 검색이 잘되게 하려면 SEO에 맞춰 홈페이지를 작업해야 합니다 페이지스피드인사이트는 홈페이지의 어느 부분이 개선해야 SEO에 부합 되는지를 알려주기때문에 홈페이지 개선에 아주 큰 도움을 줍니다

웹디자인CSS 소스

wsss.tistory.com

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

핑덤

tools.pingdom.com

홈페이지의 속도를 테스트 할수 있는 핑덤 https://tools.pingdom.com 를 소개합니다. 핑덤은 URL창에 홈페이지 주소만 입력하면 해당 홈페이지의 속도를 분석해 주는 사이트 입니다. 사이트를 운영하는 사람이라면 사이트 속도가 느린 경우 속도 개선을 위해 많은 고민을 할 것입니다. 사실 속도는 가장 중요하기 때문에 느리다면 그 자체가 아주 큰 핸디캡이 되기 때문입니다. 사이트의 콘텐츠도 중요하고 사이트을 알리는 마케팅도 중요하지만 가장 기본이 되고 중요한 것은 속도입니다. 속도가 느리면 처음에는 방문할지 몰라도 재방문을 하지는 않습니다. 누가 느린 속도로 인해 스트레스를 받아가면 재방문 하겠습니까? 그러기에 속도에 관한 문제는 쉽게 생각해서는 안됩니다. 속도 개선을 위해 0부터 100까지 다 점검을 하며 하나씩 속도를 향상시키는 것도 좋겠지만 문제가 되는 부분을 전략적으로 공략하여 적은 비용과 노력으로 개선하는 것이 훨씬 효과적일 것입니다.. 그런 면에서 핑덤은 홈페이지의 취약점을 찾아 주기 때문에 아주 좋은 사이트라 할 수 있습니다. 외국사이트이긴 하나 속도 테스트를 위한 메뉴는 굉장히 단순해 언어에 대한 장벽은 없습니다. 그냥 URL이라는 부분에 테스트 하고자 하는 주소를 입력하면 그걸로 끝입니다. 입력한 주소에 따라 다르겠지만 20초 정도 지나면 사이트 분석결과를 알려줍니다. 분석한 결과를 바탕으로 취약점을 개선한다면 아주 훌륭한 홈페이지를 만드실 수 있을 것입니다.

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

css-tricks.com

The Shapes of CSS는 웹 개발 매체 CSS-Tricks에 실린 글로, 이미지 파일 없이 CSS만으로 다양한 도형을 그리는 방법을 모아 소개합니다. 각 도형은 border, border-radius, ::before·::after 가상 요소, transform 같은 속성을 조합해 만들어집니다. 정사각형·원·타원 같은 기본 도형부터 방향별 삼각형, 오각형·육각형·팔각형, 여러 형태의 별, 하트, 무한대 기호, 다이아몬드, 말풍선, 음양, 팩맨, 자물쇠 등 40여 가지 예제가 정리되어 있고, 도형마다 참고한 출처가 표기되어 있습니다. 아이콘이나 장식 요소를 가벼운 CSS 코드로 구현하려는 웹 퍼블리셔와 프론트엔드 개발자, CSS 속성 활용법을 익히려는 학습자에게 참고가 됩니다.

HEX CODE

www.color-name.com

HEX CODE라고 아시나요? 가끔 보이는 232f3e처럼 RGB 모드를 코드로 표현하는 방식입니다. 이 HEX CODE랑 색상 이름을 상호 검색할 수 있게 도와주는 사이트가 있습니다. https://www.color-name.com/ 여기입니다. 디자인 하시는 분들에게는 굉장히 유용한 사이트인데요. 특히 그 엄청난 수의 색상 이름들을 보다 보면 '와, 이 색을 이렇게 표현하는구나.'라는 생각마저 듭니다. 그 많은 색상 이름은 과연 누가 정하는 걸까요. 순간 궁금해지는데요. 어디 디자인국제협회 같은 데에서 정하는 걸까요? 찾아봐도 잘 모르겠네요. 하나의 색상을 찾으면 그와 유사한 다른 색상도 알려주고 보색이나 반대색도 알려줍니다. 그 색상으로 만든 백그라운드나 패턴 다운로드도 지원해 주고 있어요. 해당 색상으로 적당한 인테리어 예상도도 엄청 좋은데요. 괜히 어설프게 시도하지 말고 여기서 직접 컨셉을 잡아보면서 우리 집을 꾸며봐도 무척 좋을 것 같네요. 자기 생일과 관련된 색깔도 알려주고요. 아무튼 기능이 이것저것 많아서 살펴보다 보면 시간 가는 줄 모를 것 같아요.