검색결과 리스트
글
크롬으로 티스토리 블로그 구조 파악하기
티스토리 블로그의 가장 큰 매력은 바로 자신만의 디자인을 가진 블로그를 만들 수 있다는 점이 있지요. 저 또한 이런 매력때문에 제 블로그를 티스토리에 차리게 되었기도 하지요. 그러나 이제 갓 블로그를 시작하는 초보 분들이라면 이러한 티스토리의 장접이 단점이 되는 경우가 발생합니다. 기본적으로 HTML과 CSS의 동작 방식을 이해하고 이를 수정할 줄 알아야 멋진 블로그를 만들 수 있기 때문이기도 하지요.
인터넷을 검색하며 어떻게든 스킨을 이것 저것 수정해 나가면 코드의 구성을 어느정도 까지는 이해하실 수 있는 단계에 도달하실 것입니다. 하지만 초보자에게 있어 이러한 소스의 수정도 한계가 있는법!
이번에 소개해드리는 것은 크롬의 기능을 활용하여 블로그의 디자인을 보면서 해당 디자인이 코드로 어떤 방식으로 구현했는지를 확인할 수 있는 방법입니다.
보시는 화면은 제가 티스토리를 처음 시작할 때 처음으로 작성한 글입니다.
자신이 원하는 화면을 선택하신 후 오른쪽 버튼을 클릭하신 후 '요소 검사'를 클릭합니다.
그렇게 하면 다음과 같은 화면을 보실 수 있습니다.
위쪽의 회면은 자신의 블로그이고요 아랫쪽 왼쪽 부분은 skin.html, 아랫쪽 오른쪽 부분은 style.css 파일입니다.
skin.html에서 자신이 원하는 영역을 클릭하면 위쪽 화면에서 선택한 부분이 어느 영역인지를 표시해 주며
왼쪽 윗부분에서는 해당 부분의 명칭과 픽셀 크기를 나타냅니다.
그리고 style.css에서는 선택한 부분이 적용된 코드 부분을 함께 볼 수 있습니다.
위의 방법을 사용하여 자신의 코드를 수정해서 멋진 사이트를 만들어 보도록 합니다!
'공대생의 팁' 카테고리의 다른 글
데이터베이스 ER 다이어그램 작성 프로그램 - yED (0) | 2014.10.07 |
---|---|
fedora 20 에서 virtualbox 설치가 안될 때 (1) | 2014.10.05 |
fedora 바탕화면에 파이어폭스 바로가기 추가하기 (0) | 2014.09.29 |
fedora 20에 Adobe Flash Player 설치하기 (0) | 2014.09.21 |
[윈도7] 환경변수 path 삭제시 복구하는 방법 (9) | 2014.09.15 |
설정
트랙백
댓글
글
fedora 바탕화면에 파이어폭스 바로가기 추가하기
평소 우분투에만 익숙한 상황에서 막무가내로 페도라를 접하니 불편한 점이 한 두가지가 아니군요. 페도라 자체도 상당히 큰 매력을 가지고 있는 운영체제 입니다만 같은 리눅스인 우분투에 비하면 사용자 수가 턱없이 적다보니 문제점에 관한 자세한 피드백을 얻기 힘든 점도 참으로 안타까운 점 중 하나이지요. 특히 페도라의 바탕화면은 초기 설정부터 쓰지 않는 것으로 되어있기 때문에 바탕화면을 제대로 쓰기 위해서는 gnome-tweak-tool을 설치해서 바탕화면을 쓸 수 있게 해줘야 한다는 것이지요.
이번 포스팅에서는 바탕화면 사용을 해금시킨 이후에서 부터 진행하며 바탕화면에 바로가기를 등록하는 것을 목표로 하겠습니다.
1.우선 Super키(Windows 키)를 누른 후 왼쪽 즐겨찾기 메뉴에서 파일을 실행하거나 검색창에 'file'을 입력하신 후 창을 엽니다.
2. 다음과 같이 파일 창을 연 후 장치에서 '컴퓨터'를 선택합니다.
3. /usr/share/applications 폴더로 이동하면 설치된 프로그램 목록을 확인하실 수 있습니다.
4. 바탕화면에 바로가기를 설정하고자 하는 프로그램을 선택하신 후 오른쪽 마우스 클릭 후 '다른 위치로 복사'를 클릭합니다. 그 다음 바탕화면 폴더로 이동하신 후 선택(S) 버튼을 누릅니다.
5. 다음과 같아 바탕화면에 Firefox와 Google Chrome의 바로가기 아이콘이 생성된 것을 확인하실 수 있습니다.
'공대생의 팁' 카테고리의 다른 글
데이터베이스 ER 다이어그램 작성 프로그램 - yED (0) | 2014.10.07 |
---|---|
fedora 20 에서 virtualbox 설치가 안될 때 (1) | 2014.10.05 |
크롬으로 티스토리 블로그 구조 파악하기 (0) | 2014.10.01 |
fedora 20에 Adobe Flash Player 설치하기 (0) | 2014.09.21 |
[윈도7] 환경변수 path 삭제시 복구하는 방법 (9) | 2014.09.15 |
설정
트랙백
댓글
글
안드로이드 SDK 업데이트 후 이클립스에서 실행이 안될 때(Android ADT 재설치)
모처럼 안드로이드 SDK Manager를 실행시켜 업그레이드를 시켜준 후 이클립스를 실행시켰더니 다음과 같이 빨간 줄들이 난무하면서 실행이 되지를 않는군요.
지금까지 열심히 만들어왔던 애플리케이션 프로젝트가 이렇게 갑작스럽게 실행조차 되지 않는다면 상당히 당황스러울 것이라 생각합니다. 보통 일반적으로는 이클립스를 업데이트 하는 것 만으로 해결이 되는 경우가 많습니다.
이클립스를 업데이트 하는 방법은 다음과 같습니다.
Menu->Help->Check for Updates
그런데 종종 이렇게 이클립스를 업데이트 시켰음에도 불구하고 위의 화면과 같이 계속 먹통을 일으키는 경우가 발생합니다. 이 경우 이클립스에 설치되었던 Android ADT를 완전히 삭제한 후 다시 설치해야 합니다.
1. 메뉴에서 Help->Install New Software... 를 실행합니다.
2. 다음과 같은 화면이 나왔을 경우 오른쪽 윗 부분의 Add를 클릭합니다.
3. Name은 자신이 원하는 대로 작성하셔도 됩니다.
Location에는 다음과 같은 주소를 입력합니다.
https://dl-ssl.google.com/android/eclipse/
입력을 마친 후 OK 버튼을 클릭합니다.
4. 정상적으로 수행되었을 경우 위와 같이 Developer Tools 메뉴가 나타납니다.
확인후 위의 그림과 같이 빨간색으로 표시한 'already installed'를 클릭합니다.
5. 현재 이클립스에 설치된 소프트웨어들의 목록이 나타납니다.
Id 부분에서 안드로이드와 관련된 소프트웨어를 모두 선택하신 후 Uninstall을 클릭합니다.
6. 목록들을 다시 한 번 확인한 후 Finish를 눌러 모두 삭제해줍니다.
7. Yes를 누른 후 이클립스를 다시 실행합니다.
8. 다시 이클립스를 실행한 후 Help->Install New Software를 클릭한 후 위에서 수행하였던 Add버튼을 누른 후 안드로이드 ADT를 다시 설치합니다.
설치를 완료하면 아래와 같이 프로그램이 정상적으로 수행되고 있음을 확인하실 수 있습니다.