웹 개발 썸네일형 리스트형 [IT] ATOM 편집기 추천 패키지 모음 아톰은 깃허브에서 만든 에디터다. 주로 웹 편집기로 많이 쓰는 듯 하고, 나도 그렇다. HTML, CSS, JavaScript를 사용하기에 가볍고 강력하다. 또 깃허브의 명성에 걸맞게 다양한 오픈 소스 패키지(플러그인)을 제공한다. 그 중 가장 대중적으로 널리 쓰이는 패키지를 몇 개 추천하려고 한다. 1. emmet 웹 개발에 있어 emmet은 빼먹을 수도 없고 빼먹어서도 안 된다. 처음에 html을 배울 때 emmet을 몰랐다. 그래서 한참을 일일이 여는 태그와 닫는 태그를 모두 타이핑 했다. emmet을 안 순간 신세계가 펼쳐졌다. 막연했던 생산성이라는 개념을 체감했다. 2. file-icons 각 파일의 확장자를 시각적으로 구분해준다. 사실 그냥 예쁘다. 각 언어의 로고를 아이콘으로 사용해서 좋다... 더보기 [웹] HTML/CSS #11 :: 반응형 vs 적응형 직접 페이지를 만들어보기 전에 우선 반응형 웹 디자인에 대해 알고 갈 필요가 있다. 모바일, 태블릿, 데스크탑 등 다양한 디바이스가 넘쳐나는 요즘 반응형은 필수다. 웹에 조금이라도 관심이 있다면, 그리고 없어도 우연히 한 번 쯤은 반응형이란 말을 들어봤을 것이다. 그럼 반응형은 대체 뭐에 반응하는 걸까? 눈치가 있다면 '아, 웹사이트에 접속하는 디바이스에 반응하는구나'라고 생각할 수 있다. 안타깝게도 반은 맞고 반은 틀렸다. 보다 정확히는, '접속하는 디바이스의 화면 크기'에 반응한다. 그게 그 말 아닌가 싶기도 하지만 굳이 깊게 들어간 이유가 있다. 바로 적응형이라는 개념 때문이다. 둘 다 다양한 디바이스에서 제대로 웹페이지를 보여주기 위한 기술이다. 그럼 반응형과 적응형, 영어로는 Responsive.. 더보기 [웹] 비전공생도 쉽게 코딩 공부할 수 있는 코드카데미 HTML/CSS는 잠시 쉬고, 오늘은 공부하기 좋은 웹사이트 하나를 추천 겸 소개하려고 한다. Codecademy다. 너무도 정직한 코드를 배우는 학원이라는 네이밍이다. 유투브나 MOOC, 각종 책과 출판사에서 제공하는 무료 강의 등 공부할 수 있는 소스가 너무나 많은 세상이다. 그 중에서도 코딩 기초를 배우기에는 가장 편리한 소스라고 생각한다. 직접 타이핑을 하고 바로 코드 검사를 해주는 웹 어플리케이션으로 학습하기 때문이다. 코드카데미에서 다양한 언어들을 '무료로' 배울 수 있다. 무료라는 점도 좋지만, 인터페이스가 좋아 깔끔한 학습을 경험할 수 있다. 최근에 리뉴얼을 하면서 유료 코스도 생겼는데 그건 안 해봐서 잘 모르겠다. 특정 카테고리에 대해 필요한 부분만 심화해서 배우는 것 같다. 기본 무료 .. 더보기 [웹] HTML/CSS #3 :: 시작하기-웹 에디터 HTML과 CSS를 하기 위해 무엇부터 해야할까. 우선 에디터가 필요하다. 우리말로는 편집기다. 사실 아마 윈도우를 사용하는 사람 대부분은 에디터를 사용해봤을 것이다. 가장 대중적인 에디터는 메모장. 여러분이 아는 바로 그 메모장이다. 물론 웹 개발자들에게 대중적인 에디터는 아니다. 웹 개발자들은 좀 더 편한 에디터를 쓴다. 메모장으로 충분히 훌륭한 코딩이 가능하지만 다른 에디터를 쓰는 이유는? 편하니깐. 다른 툴을 쓴다고 실력이 떨어지고 메모장을 쓴다고 실력이 좋은 건 아니다. 그냥 다른 툴들이 작업시간을 훨씬 줄여주는 여러 기능을 갖고있을 뿐이다. 만약 웹 에디터로 코딩을 할 수 있지만 메모장으로 못하는 사람이 있다면 실력이 떨어진다고 볼 수 있긴 하다. 하지만 실력이 좋은 개발자라고 메모장을 쓰진 .. 더보기 [웹] HTML/CSS #2 :: CSS란? CSS는 Cascading Style Sheet의 약자다. Cascading은 사전을 찾아보면 '폭포같은, 연속적인, 계속되는'으로 나온다. 스타일 시트는 말 그대로 스타일을 꾸미는 시트다. 벽에 시트지를 붙여서 꾸미는 것처럼, HTML에 꾸미는 시트를 붙이는 파일 형식이다. 앞에 Cascading이란 붙은 이유는 웹 브라우저의 특성 때문. 웹 브라우저는 CSS 파일을 위에서부터 아래로 읽는다. CSS를 열어보면 HTML의 이 내용은 이렇게 꾸미고, 저 내용은 저렇게 꾸미라는 코드가 들어있다. 예를 들어 "이미지는 가로는 160 픽셀, 텍스트는 폰트 굵기는 300, 색깔은 빨간색, 배경은 초록색으로 해라"라는 식이다. 실제로 거의 모든 웹사이트에서 이런 명령어들은 상당히 많고, 개중에 겹칠 수도 있다. .. 더보기 이전 1 다음
