Useful site for making website

퍼블리싱할때 알아두면 유용한 사이트

퍼블리싱할때 알아두면 유용한 사이트에 대해 적어보려고 합니다. 가끔씩 유용하게 쓸일이 있었던 사이트들이예요.

01. 크로스브라우징시 참고 사이트
퍼블리싱을 할때, 마지막에는 다양한 브라우저에서 호환성 테스트가 필요합니다. 크롬브라우저에 맞춰서 웹사이트를 잘 만들었는데, 익스플로러에서 열었다가 아주 난리는 나는 경우가 많습니다. 이럴때 활용하기 좋은 사이트입니다. 내가 쓴 코드를 넣어보면 그 코드가 어느 브라우저에서 적용가능한지 알 수 있어요.

예를 들어 CSS 중 ‘display : flex’를 쓰려고 합니다.
그러면 이 사이트에 Can I use “_”? 검색창에 검색할 수 있고, 어느 브라우저에서 쓸수 있는지 확인할 수 있어요. 익스플로러의 경우 6-7까지는 지원하지 않고, 8-11는 일부 지원합니다. ‘ms-flexbox’라고 써주라고 나오네요.

can I use 사이트

 

02. 개발자 도구
개발자 도구의 해당 사이트의 F12 또는 마우스 오른쪽 버튼 ‘검사’버튼을 누르면 나옵니다. 여기서 어떤 코드에서 문제점이 발생했는지 쉽게 찾을 수 있습니다.
elments > styles에서 스타일을 확인하고 적용해 볼 수 있어요. 개발자 도구에서 적용해보고 괜찮다면 복사해 와서 적용시키면 훨씬 편리하게 스타일을 수정할 수 있습니다.
또한 console log에서 코드테스트도 해 볼 수 있어서 편리해요.

03. w3shools
처음 퍼블리싱을 배울때 많이 사용하는 사이트입니다. HTML, CSS, JAVASCRIPT,PHP등등의 코드의 투토리얼을 제공합니다. 원하는 코드를 찾아서 어떻게 사용하는지 확인하고 테스트 해볼 수 있습니다.
example를 제공하기 때문에 그대로 복사해서 사용하기도 아주 편리합니다.

W3SCHOOLS 사이트

 

04. MarkUp 검증 사이트
html 마크업을 잘 작성했는지 검증 해 볼 수 있는 사이트 입니다. 처음에는 가끔 사용했는데 지금은 잘 사용하지 않게 되는 사이트인데 그래도 한번씩 해보면 좋을 듯해 적어봅니다.

마크업 테스트 사이트

 

05. 벤치마킹 사이트
잘 만들어거나 수상을 한 사이트들 모아놓은 사이트들이 많이 있습니다. 요기도 처음에는 참고하면서 사이트의 어떤 기능을 많이 사용하는지 어떤 디자인이 유행인지 찾아보았는데 이제는 잘 안찾아보게 되네요.

지디웹

AWWWARDS

All
Study
story

Start typing and press Enter to search

Shopping Cart

장바구니에 상품이 없습니다.