구석진 개미집

시작하며 Ubuntu 16.04에서 타임존을 간단하게 설정할 수 있는 방법을 소개합니다. 현재 설정된 시간 확인 date 위의 명령어를 사용하여 실행하면 아래와 같이 결과가 출력 됩니다. 현재 위치하고 있는 시간과 다르고, 요구사항과 다를 경우 시간을 수정해야할 필요가 있습니다. 원하는 시간으로 바꾸기 sudo dpkg-reconfigure tzdata 해당 명령어를 입력하면 아래와 같이 쉽게 설정이 가능합니다. 저는 한국/서울로 변경할 필요가 있어 수정해보겠습니다. 다시 현재 시간이 잘 바뀌었는지 확인해보면 잘 바뀌어 있는 것을 확인할 수 있습니다. 마치며 시간을 바꿀 수 있는 방법은 많이 있지만, 제가 사용하는 방법 중에는 가장 편리한 것 같습니다.

코딩할 때, 누락된 태그를 일정한 영역에 넣기 위해서 첫줄에 썼다가, 다시 마지막 부분을 찾아서 또 쓰고 하면 적지 않게 스트레스 받을 수 있습니다. Bracket에는 해당 기능이 있습니다만,Phpstorm에도 이런 기능이 있는지 찾아보았습니다.(아마도 Webstorm 도 같은 intellij 계열이니 같을 것으로 생각됩니다.) 단축키를 검색해보니 CTRL + ALT + T 라고 하네요.뭔가 용어가 영어다보니 유추하는 것이 쉽지 않네요. ^^; 아무튼,묶고 싶은 tag 영역을 블록 설정하고나서 해당 단축키를 누르면 아래와 같은 이미지가 나옵니다. 저는 php if 문으로 묶고 싶기 때문에, 첫번째 항목을 선택해보았습니다. 이렇게 블록 설정한 끝 단에 각각 묶이는 것을 확인할 수 있었습니다. 앞으로는 조금..

앞서 작성한 포스트에서 AddThis 스크립트 오류문제에 대해서 말씀을 드렸었습니다. 어느 순간부터 오류가 발생하였지만, 해결방법을 도저히 찾지 못하던 중에 임시 방편을 찾았습니다. 일단 AddThis Help팀의 메일 답변에 대해서 공유하겠습니다. AddThis Help팀에 문의한 내역 먼저 AddThis 팀에서 작성한 FAQ를 보면서 모든 방법을 시도해보았지만 결국 해결되지 않았다라는 점을 어필하였습니다. 그랬더니 아래와 같이 답변이 왔습니다. AddThis 팀의 첫 번째 답변 태그 뒤에 삽입해서 실행하지 잘 된다는 답변입니다. 저도 똑같이 따라해보았지만, 이상하게 되지 않더군요. 그래서 상세한 증상에 대해서 작성한 다음에 보냈습니다. 즉, AddThis 스크립트를 다시 삽입하여 저장한 다음에 페이지..

블로그 주인만 아는 여러가지 스크립트, 그 중 한가지에 문제가 생겼습니다. 바로 본문 게시글 추천이랄지, Social Sharing 과 추천 부분을 손쉽게 삽입하고 관리할 수 있는 AddThis 스크립니다. 고급 기능은 유료로 제공되지만, 무료 기능들도 강력합니다. 그래서 항상 감사한 마음으로 사용하면서 언젠가 블로그가 활성화 되면 유료를 구입해서 사용해야겠다고 마음먹었답니다. 그런데 언제부터인가 작동을 안하더군요. HTML과 CSS를 편집한 적이 없는데도 말이죠. 몇 시간을 투자하며 코드를 수정해보고, 기능들을 삭제해보고 다시 넣어보고 위치를 바꾸어보았는데도 작동을 하지 않습니다. 단, HTML을 수정하고 저장하고 나서 딱 한번만 작동 하더군요. 그 뒤로 새로고침을 하면 다시 작동하지 않습니다. 그래서..

다음카카오 소식에 늘 귀를 기울여왔습니다. 여러 제품들이 출시되거나 업데이트가 있다면 곧바로 소식을 받을 수 있기 때문입니다. 종종 회사의 정책과 사용자를 만족시키기 위한 행보도 볼 수 있어서 좋습니다. 이번에는 OVEN이라는 프로토타이핑 툴 BETA OPEN 소식을 접했습니다. OVEN에 대한 설명에서도 알 수 있지만 개발자, 기획자, 디자이너, 그리고 아이디어를 주체할 수 없는 꿈이 있는 사람들에게는 희소식이 아닐 수 없는 훌륭한 툴입니다. '도대체 어떤 툴이길래?' 라는 생각이 들 수 있겠습니다. PPT로 고생하신 분들이라면 한번 꼭 알아보시기를 추천해드립니다. 그럼 어떤 툴인지 살펴보겠습니다. 이번에 BETA버전으로 출시한 'OVEN' 예시화면(다음카카오) 시작화면 로그인하고 처음 시작되는 화면인..

최근에 HTML5/CSS3를 공부하면서 부트스트렙을 접하게 되었고, 거의 빠져 있다 싶을 정도로 알아보고 있습니다. 이미 개발 환경이 만들어진 상태에서 사이트를 구축할 수 있기 때문에 평소 제작하던 시간을 1/2로 단축할 수 있습니다. 그리고 반응형 기능이 적용되어 있기 때문에 별도 모바일 사이트를 제작할 필요도 없습니다. 여러 가지 템플릿을 알아보고 공부하던 중에 무료로 부트스트렙 템플릿을 제공해 주는 곳이 있어서 공유합니다. 무료 부트스트렙 템플릿 사이트 1. Start Bootstrap - http://startbootstrap.com/ 여러가지 어드민 페이지와 원페이지 템플릿을 제공하고 있습니다. 무료 템플릿에 더해서 프리미엄(유료)템플릿도 제공하고 있습니다. 2. Bootstrap Zero - ..

HTML을 처음 작성할 때 어떤 순서로 작성해야 하는지 고민하게 되는 경우가 많습니다. 그렇기 때문에 정해진 순서와 문법을 알게 된다면 HTML문서를 작성하는데 도움이 될 것입니다. 그럼 작성 순서는 어떻게 될까요? W3G의 표준에 따르면 아래와 같습니다. 위의 순서에 있는 사항들에 대한 자세한 설명은 새로운 글을 통해서 차근차근 설명해나가겠습니다. 내용이 마음에 드신다면 공감(♡)을 눌러주세요. 로그인 하지 않으셔도 가능합니다. 감사합니다!

HTML 문서의 기본 구조를 살펴보기 전에 HTML의 구성요소를 먼저 살펴보는 것이 도움이 될 것 같습니다. HTML의 구성요소는 요소(Element), 태그(Tag), 속성(Attribute), 변수(Arguments) 입니다. 하나씩 살펴보겠습니다. 요소(Element, 엘리먼트) 보이는 내용 HTML에서는 꼭 필요한 것이 바로 요소입니다. HTML문서는 완전한 HTML요소로 구성되어 있기 때문입니다. 즉 HTML에서 시작태그와 종료태그 또는 시작과 종료의 구분이 없는 태그를 포함한 모든 명령어 및 영역을 의미합니다. 태그(Tag) 보이는 내용 태그는 꺽쇠괄호()로 둘러싸인 키워드입니다. 그 중 시작을 알리는 태그와 종료를 알리는 태그(일부 태그에서는 종료를 알리는 태그가 없는 경우도 있습니다) 두 ..

Notepad++를 처음 설치하고 실행하다 보면 한글이 깨지는 문제가 발생합니다. 안녕하세요! Hello!위와 같이 코딩을 한 후 결과를 살펴보겠습니다. >>결과 보기결과 보기

Notepad++를 간단하게 사용하는 방법을 함께 살펴보겠습니다. ^^ 먼저 Notepad++를 실행합니다. 1. 실행부터 HTML로 언어 변경까지 실행하면 위와 같이 기본 창과 함께 실행됩니다. 그리고 html 개발환경이 잘 구축되었는지 확인해보기 위해서 태그를 사용해보겠습니다. 그냥 검정색 글씨로만 출력되는 것을 보니, Nomal Text상태인 것 같네요. 그럼 HTML코딩을 위해서 언어환경을 바꿔볼까요? 메뉴에서 [언어]-[H]-[HTML]를 선택합니다. HTML로 선택하면, 위와 같이 스타일이 변경된 것을 확인할 수 있습니다. 2. 앞으로 만들게 될 새 문서에 자동으로 HTML 스타일 적용되도록 환경설정하기 HTML스타일로 변경했다고 해서, 새 문서에도 자동으로 적용되는 것은 아닙니다. 그렇기 때..

HTML을 코딩할 때, notepad(메모장)을 사용할 수 있습니다. 하지만, 기능이 없기 때문에 불편한 점이 많습니다. 이 점을 보완하기 위해서 시중에는 여러가지 편집기가 있습니다. Editplus, Adobe Edge Code CC, Eclipse 등 많습니다. 그 중 무료이면서 가벼운 Notepad++를 추천합니다. 그럼 Notepad++를 한번 설치해볼까요? 1. Notepad++ 다운받기 먼저, notepad++를 다운받아보겠습니다. 공식 홈페이지(링크)를 통해서 다운받을 수 있습니다. 홈페이지 메인화면입니다. 업데이트도 정기적으로 이루어지고 있는 것을 확인할 수 있습니다. 왼쪽 카테고리 중, download를 클릭합니다. Download 카테고리에 들어갔으면, 최신버전을 선택했는지 확인한 후 ..

1. 먼저 HTML이란 무엇일까요?HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)라는 의미의 웹 페이지를 위한 지배적인 마크업 언어다. HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 수 있다. HTML은 웹 페이지 콘텐츠 안의 꺾쇠 괄호에 둘러싸인 "태그"로 되어있는 HTML 요소 형태로 작성한다. HTML은 웹 브라우저와 같은 HTML 처리 장치의 행동에 영향을 주는 자바스크립트와 본문과 그 밖의 항목의 외관과 배치를 정의하는 C..

Syntaxhighlighter를 사용하면서 밋밋한 테마로, 또는 가독성이 떨어지는 테마로 고민이신가요? 다른 테마로 변경할 수 있는 방법이 있습니다. 친절하게도 총 7개의 테마(Default 포함)가 제공되고 있습니다. 먼저 7가지 종류의 테마를 하나하나씩 보여드리겠습니다. 1. Default 2. Django 3. Eclipse 4. Emacs 5. Fade To Grey 6. Midnight 7. RDark 위와 같이 총 7가지의 테마가 있습니다. 맘에 드시는 테마를 결정하셨나요? 그럼 테마를 적용해보도록 하겠습니다. '티스토리 관리자모드 – html/css 편집'로 들어온 다음에, 위의 빨간색 네모로 표시되어 있는 코드를 찾으세요. 저 같은 경우는 이클립스 테마를 적용했기 때문에 여러분과 다를 수..

이번에는 Syntaxhighlighter를 사용하는 방법에 대해서 살펴보겠습니다. 사용방법은 두 가지 방법이 있습니다. 한 가지는 를 사용하는 방법이고, 다른 한 가지 방법은 3. 와 의 차이점은?검색엔진의 수집하는 봇들이 블로그의 내용을 수집할 때 같은 경우는 코드 내용까지 수집합니다. 하지만 를 사용하면 코드 내용을 수집하지 않습니다. 즉 코드를 사용해야 검색결과에 노출될 터이니, 코드를 공유하는 블로그 같은 경우는 신경이 쓰일 수 밖에 없습니다. 단, 문제점이 있습니다. 를 사용하면 ' < '가 &lt 로 대체되어 표기될 수 있다고 합니다. 를 사용하면 문제는 없습니다. 기회비용을 잘 따져서 사용하면 될 것 같습니다. ^^ 다음 글에서는 테마를 적용해 보는 방법에 대해서 알아보겠습니다. 내용이 마음..

프로그래밍 공부를 하면서, 동시에 블로그에 기록도 하려고 진행 중에 블로그에 소스코드를 보기 좋게 올리는 방법이 있어서 소개합니다. ^^ 먼저 소스코드를 보기 좋게 올릴 수 있도록 해준 홈페이지에 방문합니다. 주소: http://alexgorbatchev.com/SyntaxHighlighter/ SyntaxHighlighter 홈페이지 메인입니다. 오른쪽 상단을 보면 'download' 메뉴에 들어갑니다. 빨간색 네모로 표시해 둔 곳('Click here to download')을 클릭해서 파일을 다운받습니다. 파일은 적당한 곳 아무데나 다운 받으시면 됩니다. 파일명을 변경하셔도 무관합니다. 파일이 저장된 폴더에 들어갑니다. 압축파일 하나가 보일 것입니다. 압축을 해제합니다. 총 파일 수는 105개 입니..