잉고래의 잇다이어리

ATOM, Sublime 그리고 Visual Studio Code 티스토리 블로그를 운영하다 보면 블로그 스킨 변경을 위해서 혹은 글 작성을 위해서 HTML 편집기를 자주 사용한다. 기존에는 티스토리 웹페이지 에디터 상에서 바로 고치거나 메모장 같은 걸로 간략히 고치고는 했는데, 아시다시피~ 작업능률은 영 꽝이다. 이번에 티스토리 스킨을 HTML코드 수정해 나가면서 VSCode를 써봤는데 꽤나 아니 대단히 쓸만하다. 이런거 없이 예전에는 어떻게 살았나 싶을 정도니 말이다. 그래서 말인데 이 참에 쓸만한 무료 HTML 편집기 3종을 소개한다. 3가지로 딱 집어서 말한건 어디까지나 내 개인 취향이다. 다른 분들은 어떻게 느낄지 모르겠지만 정말 괜찮다고 평판이 자자한 녀석들이니 믿고 써보도 괜찮다. 아톰(At..

CSS의 색상지정 방법을 알아보자 시작 전에 참고로 이 글은 이전 CSS 학습 글에 이어진다. 이전 글은 학습목차를 참조하도록 하자. 다시 돌아와서 CSS 요소의 색상을 변경하고자 하는 경우, 색상 지정 방법에는 3가지가 있다. 미리 정해진 color의 이름을 속성 값으로 넣거나 RGB 혹은 16진수 값을 속성 값으로 입력하는 것이다. color 이름 - 예) "red" RGB 값 - 예) "rgb(255, 0, 0)" HEX 값 - 예) "#ff0000" color 이름 Red, Green, Blue, Orange, Yellow, Cyan, Black 처럼 정해진 색상 이름을 color 속성 값으로 지정하는 방법이다. 참고로 color 이름은 대소 문자를 구분하지 않는다. 무슨 말이냐면 "Red"와 "..

아이들 동심 파괴 장난감 디자이너 혹시 좋아하는 애니메이션 캐릭터 있나요? 전 미키 마우스를 좋아합니다. 어렸을적 휘파람 불며 나오던 애니메이션이 떠올라 가장 친근감이 들거든요. 그런데 이런 제가 좋아하는 미키마우스 장난감을 아주 처참하게 해부하는 한 사람이 있습니다. 바로 Jason Freeny라는 뉴욕 브루클린의 디자이너입니다. 이 사람 손을 거치면 미키 마우스는 물론이고 우리집에 굴러다니는 레고에서 부터 날씬한 바비 인형까지 그 어떤것도 Freeny의 칼을 비켜갈 수 없습니다. 어째 좀 섬뜩하네요. 해부학 장난감은 어떻게 만들까? 귀엽고 깜찍한 장난감이 어떻게 섬뜩한 해부학 장난감으로 탈바꿈될까요? Freeny가 소개한 만드는 과정은 대략 이렇습니다. 일단 구입한 장난감을 잘라내어 모델링 점토 또는..

좀 변한듯 이효리 근황 사진을 보다가 좀 놀람. 처음에는 누군지 모르겠더라. 자주 보는 사람은 그 사람에 대한 인상이란게 딱 정해져 있는데, 내가 이효리에 대해 갖고 있는 인상은 털털하고 시원시원한 선한 타입이었다. 그런데 최근에 뉴욕에서 찍은 사진을 보면 완전 다름. 뭐랄까? 흠... 좀 날카롭고 강해보인다. 무서워... 화장 메이크업이 달라져서 그런지 나이나 다른 이유로 얼굴형이 변해서 그런지 몰라도 털털하던 모습이 뉴욕가니 완전 다른 사람이다. 처음엔 누군지 몰랐다니깐 정말. 소길댁의 변신은 자유 뭐 이효리가 어떻게 변해가던지, 무엇을 어떻게 스타일링을 하던지 그게 나와 무슨 상관이 있겠는가. 본인이 열심히 활동을 하는데 박수 쳐주지는 못할망정 외모가지고 뭐라뭐라 하는게 참 말도 안되는거 나도 안다..

CSS를 쓰는 3가지 사용법 브라우저는 CSS 즉 스타일 시트를 읽으면 스타일 시트의 정보에 따라 HTML 문서의 서식을 지정한다. 쉽게 말해 스타일에 따라 HTML을 예쁘게 꾸며주는거다. 그러려면 HTML에 스타일을 넣어줘야 하는데, 넣는 곳에 따라서 외부 스타일 시트, 내부 스타일 시트, 인라인 스타일 이렇게 3가지 방법이 있다. 스타일 시트를 HTML에 삽입하는 세 가지 방법을 알아보자. 참고로 이 포스팅은 CSS에 대한 지난 글에 이어지는 글이다. 순서대로 읽어보면 이해하기 편하다. CSS 소개 : CSS는 왜 Cascading Style Sheet일까? CSS가 생겨난 이유 : CSS가 없던 시절의 문제 CSS 문법 소개 : CSS 기초 문법 2가지 구문만 알면 오케이~ CSS의 선택자 1편 :..

CSS 선택자의 다양한 모습들 다시한번 복습하자면 CSS에서 선택자는 스타일을 적용 할 요소를 선택하는 데 사용되는 패턴이다. 지난 '기본적인 CSS 선택자 3가지' 글에서, 선택자는 요소 이름(Element Name), ID, 클래스(Class)와 같은 3가지 기본적 요소들로 선택될 수 있다고 하였다. 하지만 이 외에도 정말 다양한 선택자 정보들로 요소들을 선택 할 수 있는데, 이번 시간에는 그것들이 뭔지 알아보자. 참고로 선택자는 지원하는 CSS 레벨에 따라서 차이가 있다. 참고로 이 포스팅은 아래의 이전 글들에 이어지는 글이다. CSS 소개 : CSS는 왜 Cascading Style Sheet일까? CSS가 생겨난 이유 : CSS가 없던 시절의 문제 CSS 문법 소개 : CSS 기초 문법 2가지 ..