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

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

css-tricks.com

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

태그,스타일지원테스트

caniuse.com

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

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

게시글

일반적으로 사용하는 클래스명

​클래스명을 자기 마음대로 정의하여 사용할수 있다 그러나 표준처럼 사용하는 명을 따라주면 다른 사람이 접근했을때 또는 내가 다른 사람의 소스를 보았을때 많은 도움이되므로 될수 있으면 묵시적으로 합의된 표준은 지켜주는것이 좋다 GNB ( Global Navigation Bar ) 사이트 최상위 전체 공통네비게이션. 메인메뉴, 대분류 메뉴, 전체 사이트에서 사용되는 공통메뉴바 LNB ( Local Navigation Bar ) 현재 서비스 영역(Local)만 해당되는 네비게이션. 서브메뉴, 중분류 메뉴, 각 서브분류 별 사용되는 메뉴바 SNB ( Side Navigation Bar ) 메인메뉴, 서브메뉴를 제외한 나머지 사이드메뉴, 기타메뉴바 FNB ( Foot Navigation Bar ) 하단메뉴, 하단로고, 주소, 카피라이팅 영역​

웹디자인CSS 소스

wsss.tistory.com

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

게시글

css파일에서 css파일 include(import)하기

html 페이지에서 css파일을 불러오는 방법은 이렇게 하면 style.css,style_add.css 파일 2개를 모두 불러올수 있다 그런데 style.css 안에서 style_add.css를 불러오고 싶을때가 있다 이때 import(include)하는 방법인다 style.css 파일에 추가해주면된다 @import "style_add.css"; import를 지원하지 않는 브라우저가 있어서 확인이 필요하다

HEX CODE

www.color-name.com

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

게시글

text 내에 안내문구 넣는 placeholder 태그

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: red; opacity: 1; /* Firefox */ } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: red; } ::-ms-input-placeholder { /* Microsoft Edge */ color: red; }