비주얼 스튜디오 코드 (visual studio code) _ 실시간 확인하기
코딩을 하다보면 내가 내가한 코딩이 제대로 브라우저 상에 노출이 되는지 확인을해야할때가 있다. 그때마다 파일을 찾아서 들어가서 브라우저에서 확인 하는 방법도 있겠지만 더 편하게 실시간으로 확인할수있는 방법이있다. 바로 비주얼 스튜디오 코드의 확장 탭에서 Live Server 팩을 다운받아서 활용하는 방법이다. 라이브 서버를 설치해놓으면 단축키인 Alt + L + O 를 통해 바로바로 브라우저에서 확인할수있다. 별거 아닌것 같지만 정말 유용한 확장 팩이라서 자주자주 사용하게 된다.
색상 이름 알고싶다면? color-picker
그래픽이나, 웹디자인을 하다보면 컬러가 정말 중요하다 디자인은 훌륭하더라도 질감이나 색상이 어울리지 않는다면 말짱 도루묵이기 때문이다. 그래서 컬러를 신중하게 선택하게 되는데 색상을 나타낼수있는 방법은 여러가지가 있다. 색상이름, RGB값, 육각값 등으로 나낼수있는데 내가 선택한 색상의 값들을 확인할수있는 사이트가 있다. 사실 주로 이용하거나 하는 사이트는 아니지만 어쩌다 한번은 방문하게 되는 color-picker 사이트라 공유해보려고한다. Color Picker by WebFX – Free HTML Color Chooser This sample text has a font color of #c93200 Text here Background Color: www.webfx.com color-picker
무료강의 부스트코스 (boostcourse)
웹사이트 제작에 관심이 있어서 웹퍼블리셔를 차례대로 공부하고 좀더 공부를 하고싶어서 웹서칭을 하는중 우연히 알게된 사이트가 있다. 부스트코스라는 사이트인데 이곳은 네이버 커넥트에서 운영하는 비영리sw 온라인 플랫폼이다. 부스트코스 먼저는 누구나 쉽게 접할수있도록 무료로 제공되고있고, 전문가들의 코칭을 받을수도있는 좋은 기회가있다. 물론 전문가들의 리뷰를 받는것은 유료이지만 혼자서 잘못된 방법으로 코딩실력을 쌓는것보다는 유료로 리뷰를 받는것이 더 낫다고생각되고, 사실 그렇다고 비싼편도 아니다.. 이러면 또.. 부스트 코스 매니져냐고 하겠지.. 왜 좋다고 이야기를 해주면 그쪽 사람아닌지부터 의심을 하는지.. ( 나는 좋다고 이야기를 한것뿐인데 돈받고 홍보하는거 아니냐고 ㅋㅋㅋㅋㅋㅋㅋ 요즘 블로그 포스팅하는 ..
코딩할때 필요한 Character Entity Reference chart
코딩하다보면 코드를 표현하거나 특수기호를 표현하고싶을 때 브라우저에 노출이 어려운 경우가 있다. 이럴경우에는 특수기호를 맞춰서 표현을 해주어야하는데.. 참 어렵기도하지.. 그래서 자주 들어가는 w3사이트의 character entity reference chart 를 소개하려고한다. Character Entity Reference chart 로 이동하기 Character Entity Reference Chart dev.w3.org html태그를 표현할때 꺽쇠나, 공백기호 등을 표현할때 자주 이용하는 페이지이며 즐겨찾기해놓으면 쉽게 찾아 들어갈수있어 좋은것같다 ( 즐겨찾기 안해놓고 검색해서 들어가면 찾기가 어려움.... ) Character Entity Reference chart 첫번째 열은 기호를 두번..
인터넷 code editor : Code pen
웹사이트를 제작하다보면 순간순가 괜찮은 코드들이 생각날때가 있다!. 그런데 내손에 노트북이 들려있지않다면 어떻게 할것같은가? 나는 실제로 코드 관련된 생각들을 많이 하다보니까 순간순간 아 이러면 괜찮겠다 하고 생각날때가 많은데 너무 운이 좋게도 내손에 pc가 들려있지않을때가 많았다. 그럴때, 종이에다가도 적어보고 핸드폰 메모장에도 적어보지만 한계가있거나,, 작성하다가 까먹어버렸다 그래도 요즘엔 모바일 버전 코드 편집기도 나와있지만 사실 개인적으로 메모장이랑 다른게 없다느껴졌는데 그럴때 자주이용하는 편집기가있다. 코드펜이라는 에디터인데 프로그램을 다운 받지않아도 웹사이트에서 코딩을 할수있다는게 가장큰 장점인것같다. HTML - CSS - 자바스크립트 란이 분리가 되어있어서 보기쉽게 편집할수도있고 편집하면 ..
저작권 걱정 없는 무료디자인 툴 [ 미리캔버스 ]
요즘 세상 좋아졌다고 느끼는 것중 하나가, 이미지를 편집하거나 수정하거나 하려면 포토샵이나 그림판을 활용해서 했었는데 간단한 포스터 편집등도 모바일로 가능하더니 이제는 무료로 진행할수있는곳이 생겼다. 지금도 고퀄컨텐츠를 만들고, 프로젝트 작업하려하면 포토샵과 일러스트를 사용하지만 간단하게 홍보컨텐츠나 교육자료를 만들때는 미리캔버스라는 곳을 이용하는데 정말 좋은것 같아서 공유한다. 미리캔버스는 사용하는 방법도 아주쉽다. 미리캔버스 홈페이지에 접속해서 바로시작하기를 누르면 아래와 같은 창이 확인되는데 왼쪽에서 내가 원하는 디자인을 선택해서 문구나 이미지간격등을 조정하면 된다. 참쉽다. 상업용도로도 이용할수있게 제공하다보니 길을 걷다가도 간판이나 홍보지를 봤을때 미리캔버스를 이용한것같은 느낌이 드는 컨텐츠들이..
② 웹사이트 만들기 HTML <head>와 <body>
지난시간 html문서작성의 기본이 되는 태그에 대해서 알아봤다. 오늘은 작성하는 영역에 대해서 알아보려한다. 우리가 PC또는 모바일을 통해 웹사이트에 접속을 하게되면 많은 정보들을 눈으로 확인할수있다. 하지만 포털사이트에 어떤 특정 단어를 검색하면 관련된 사이트가 노출이 되는데, 검색만으로 어떻게 이런것들이 가능할까? 웹문서에 입력된 정보들을 통해서 가능하다. 지난 시간 html웹문서 작성시 기본서식에대해 이야기하였는데 기억할것이다. 그문서중 태그안에 태그와 태그로 나누어진것을 확인하였다. 태그안에도 많은 태그들을 작성할수있고, 태그에도 많은 태그들을 작성할수있다. 그러나 다른점을 이야기해보면 영역은 주로 웹사이트의 정보들을 담고있어 웹브라우저상에는 대부분 노출이 되지않으며, 영역은 브라우저상에 노출 되..
