기존의 블로그 모습이다. 이미지와 배경 구분이 잘 안돼서, 보기 조금 불편하다. 그래서 이미지의 테두리를 추가해 배경과 이미지를 잘 구분되도록 만들어보자. 개발자 도구로 이미지가 어떤 태그에 해당하는지 찾아보자. 위 사진처럼 태그에는 class나 id가 없으니, 를 포함하는 상위 태그 중 class나 id가 있는 가장 가까운 태그를 찾으면 사진에 보이는 이다. 그래서 CSS 파일에 의 class를 검새해보니 해당 선택자가 존재하지 않았다. 그리고 왼쪽 사진과 오른쪽 사진에서 의 class가 다른 것처럼, 이미지의 설정을 달리할 때마다 의 class가 달라진다. 그래서 의 CSS를 편집하는 것은 비효율적이다. 그러면 의 상위 태그 중에서 모든 를 포함하는 태그는 어떤 것일까. 상위 태그를 편하게 알 수 있..

* 기존의 스킨을 편집하는 것이어서 스킨이 다를 경우 HTML, CSS 파일이 다르게 구성되어 있을 수 있다. 내가 편집하는 스킨은 티스토리에서 제공하는 Poster 스킨이다. 스크롤을 내리면 상단바가 보이지 않는데, 유튜브 웹사이트처럼 스크롤에 상관없이 항상 보이는 고정된 상단바를 만들어보자. 우선 HTML 파일에서 상단바에 해당하는 태그를 찾아야 한다. 이때 크롬에서 지원하는 개발자 도구를 사용하면 편리하다. 구조를 보고 싶은 페이지(여기선 티스토리 블로그)에서 F12를 누르면 개발자 도구를 사용할 수 있다. Elements 메뉴에 들어간 뒤 아래 사진에 표시한 동그라미 부분을 누르거나 ctrl + shift + c 키를 누르고, 원하는 영역에 마우스를 대면 해당하는 태그를 알 수 있다. 여기선 he..

그렇다면 HTML, CSS 파일은 어디서 수정할 수 있을까? 블로그 관리자 페이지에 들어가서, 왼쪽 메뉴에 있는 '스킨 편집'에 들어가자. 들어가면 오른쪽에서 스킨을 편집할 수 있고, 왼쪽에서 편집한 스킨을 미리 볼 수 있다. 오른쪽에 있는 'html 편집' 버튼을 누르면 이렇게 HTML 파일과 CSS 파일을 편집할 수 있고, 필요한 파일을 업로드할 수 있다. HTML 파일을 살펴보니 같이 처음보는 코드와 처럼 생소한 태그가 있었다. 그래서 우선 이 HTML, CSS 파일을 내 VSCode로 옮긴 다음 크롬으로 열어봤다. 이런 식으로 페이지가 길게 형성되었다. 보아하니 같은 코드는 '글 제목', '블로그 제목' 등 내가 설정한 정보들을 표시하는 것 같고, 하나의 HTML 파일에 홈, 글, 카테고리 등 여..

티스토리의 장점 중 하나는 블로그의 HTML, CSS 파일을 직접 편집할 수 있다는 점이다. 이를 통해 다른 블로그 플랫폼보다 더 자유롭게 원하는대로 디자인할 수 있다. 그래서 HTML, CSS 파일을 편집하면서 블로그를 한번 내 스타일대로 꾸며보려 한다. 지금 내 블로그 모습이다. 아무것도 꾸미지 않은 정말 기본 스킨이다. 우선 상단에 고정된 바를 만들고 싶다. 바에는 다크모드를 키고 끌 수 있는 버튼, 블로그 제목, 내 깃허브 링크를 추가할 것이다. 그리고 글 양쪽 밖에는 배경을 추가할 건데. 우리가 달리는 차에서 밖을 바라볼 때 멀리있는 물체는 천천히 움직여 보이는 것처럼, 스크롤 할 때 글과 배경이 다르게 움직이게 만들 것이다. 일단 이 정도를 목표로 한번 꾸며보자!

웹(Web)하면 가장 먼저 생각나는 것이 인터넷이다. 네이버, 구글 같은 웹페이지에 접속하라면 우리의 노트북, 스마트폰은 인터넷 네트워크에 연결되어 있어야 한다. 그럼 웹, 웹페이지는 뭐고 인터넷은 뭐고 또 무엇일까. 우리는 일상생활에서 웹, 인터넷 등을 무수히 많이 이용하지만, 이런 용어들을 명확히 구별해서 사용하지는 않는다. 따라서 처음엔 이런 개념들이 헷갈리고 완벽히 이해하긴 어렵지만, 처음부터 완벽히 이해할 수는 없다. 각자 자기 나름대로 이해하고 넘어가도록 하자. 인터넷은 1960년대 미국에서 군사용으로 처음 만들어졌다. 컴퓨터간 네트워크, 인터넷은 폭격과 사고로부터 자료를 보호하고 통신을 유지시켰다. 폭격이 하나의 컴퓨터는 파괴할 수 있을지언정 그 안에 들어 있는 각종 군사 기밀은 인터넷을 통..

올해 5월말 개발 공부를 처음 시작해 지금까진 BOJ 문제를 풀며 알고리즘을 공부해왔고, 앞으로 웹 공부도 시작하려 한다. 목표는 궁금한 것을 찾아보며 정리하고, 직접 웹 사이트를 만들어 보는 것이다. 비전공자이기도 하고 웹 공부가 처음이여서 쪼끔은 험난할 것 같다. 아래는 참고한 사이트이다. 개발 로드맵 https://roadmap.sh/frontend 프론트엔드 뿐만 아니라 벡인드 등 다양한 분야의 로드맵이 있다. Developer Roadmaps Community driven roadmaps, articles, guides, quizzes, tips and resources for developers to learn from, identify their career paths, know what t..