홈페이지를 만들기 위해서는 HTML과 CSS는 거의 필수라고 할 수 있습니다. 물론 100% 그렇지는 않지만 자신이 마음에 들도록 꾸미고 바꾸려면 기초는 알아두는 게 좋거든요.
![]()
HTML/CSS 입문예 중심 저자 황재호 출판인포앤북 출시 2020.11.25.
제가 왜 갑자기 이런 책을 읽었냐면 워드프레스 때문이었어요. 워드프레스 메인 화면을 장식하다 보면 css나 HTML을 만지지 않으면 안 되는 경우가 많았어요. 하지만 내용을 전혀 모르기 때문에 매일 듣고 질문하고 도움을 받는 것이 매우 힘들었습니다.도대체 어떤 것 때문에 필요한 걸까요? 제가 샘플 워프 하나 보여드릴게요.
![]()
요즘에는 웹 에디터가 있기 때문에 이렇게 쓸 수 있습니다. 글자크기나 리스트 등을 할 수 있도록 버튼이 들어가 있습니다. 사실 이 웹 에디터가 없으면 HTML을 이용해서 글을 쓰면 이렇게 화면에 출력이 됩니다.
사실 에디터가 아닌 HTML 에디터에서 보면 이렇게 적혀있어요. <H2>라는 태그와 <ol>, <li>라는 태그를 사용했습니다. 기본적으로 구글의 seo를 목표로 하고 있다면 태그를 이용하여 예쁘게 글을 쓰는 것이 도움이 됩니다.하지만 네이버 블로그에 익숙한 저는 구글 방식으로 글을 쓰는데 조금 시간이 걸렸습니다. 그 이유는 html나 css를 잘 몰라서 적응하지 못했기 때문입니다.이런 게 태그구나, 화면에 출력하라고 언어로 명령하는 절차구나라는 걸 나중에 알게 됐고 이해한 후에는 좀 더 잘 다룰 수 있게 됐어요. 지금도 정말 초보이긴 한데요.
![]()
그럴 때 만난 게 이 책인데 완전! 초보자도 쉽게 따라할 수 있는 예제 중심의 설명으로 되어 있습니다. 그리고 html처럼 필요했던 css까지 있어서 좋습니다. css도 제가 전혀 다루지 못해서 매일 아는 사람에게 물어봐서 만들던 기억이 납니다.하지만 이 책에서 공부를 하나씩 하다 보니 조금씩 이해할 수 있었습니다. 물론 제가 자유롭게 쓰려면 아직 많은 공부가 필요하지만요.사실 css 부분은 제가 잘 다루지 못해서 워드프레스 뉴스페이퍼(NEWSPAPER)라는 주제를 사용해서 편집기를 이용하고 있는데 그 편집기를 다루는 것도 CSS를 알면 더 쉬워질 뻔 했어요.편집기 사용법조차도 초보자인 저에게는 너무 어렵습니다.뉴스 페이퍼 에디터진짜 초보라서 Margin이 뭔지도 모르고 간격을 어떻게 벌리고 편집하지? 하고 이것저것 만져보고 알았거든요. 책을 먼저 읽었으면 편집도 되게 쉽게 느껴졌을 텐데.나는 정말 컴퓨터와 관련이 없는 학과를 나와서 상식도 없어서 워드프레스를 만드는데 너무 고생했어요. 저처럼 초보자분들은 이 책으로 하나하나 따라하시면 조금씩 익숙해질 거예요.제가 요즘 워드프레스 관련 책을 한 권 두고 공부하고 있는데 이 책도 그룹이나 스터디 그룹에도 좋을 것 같아요. 그 이유는 아까 말씀드린 것처럼 예제 위주로 되어 있기 때문입니다.저자 정보와 홈페이지그리고 책으로 공부하는 것의 가장 큰 단점인 피드백 부분입니다. 코딩스쿨이라는 저자의 홈페이지에서 저자와 메신저로 1:1 질문을 할 수 있습니다! 이건 좀 큰 장점인 것 같아요.기본적으로 초보자들이 쉽게 볼 수 있도록 각 줄마다 이게 무슨 뜻인지 설명되어 있어서 좋아요. 앞에 어떤 강좌를 봤는데 어느 정도 기본이 있다고 생각해서 강의를 진행하고 따라가지 못했던 기억이 납니다.그런데 한 줄 이게 무슨 뜻인지 다 알려줘서 그게 좋더라고요.설명을 마치고 이해했는지 다시 생각해 보도록 이런 연습 문제가 있습니다.이렇게 이론만 연습 문제로 풀면 지루하고 재미가 없기 때문에 실질적으로 풀 수 있는 예제 문제까지 함께 포함되어 있습니다.마지막으로는 반응형 웹사이트 제작에 대해 설명하고 있습니다. 반응형 웹사이트란 컴퓨터로 보면 그 화면에 맞게 진행되고 모바일, 휴대폰으로 접속할 경우 기기를 인식하고 그 크기에 맞게 잘 변경해주는 것입니다.모바일로 PC버전을 보면 화면이 너무 작아서 안 보이잖아요? 그런데 자동으로 모바일을 인식해서 그 크기를 맞춰주는 거예요.이 부분은 보면서 진작 알아둘 걸 그랬다는 아쉬움이 있었어요. 구글 SEO 중에 중요한 게 백링크라는 게 있거든요.백링크 작업을 할 때 아무래도 텍스트에 붙여야 하는데 어떤 사이트는 링크를 달아도 색깔이 변하지 않아서 링크인지 모르게 해놨거든요. 그럼 당연히 클릭률이 떨어지겠죠? 그럴 때 이런 기능을 이용해서 색칠했으면 좋았을 것 같아요. 이제라도 알았으니 해야죠~HTML과 CSS를 어느 정도 능숙하게 사용하면 파이썬이나 자바스크립트를 공부하고 싶습니다. 물론 먼 이야기라고 생각하기 때문에 더 이상 말하기는 조금 부끄럽네요.내가 초보다! 독학하고 싶어! 근데 질문하면 대답해줄 사람 있으면 좋겠다! 이런 조건들이 모두 부합한다면 이 책을 추천합니다.언젠가 구글 상위 노출로 인해 돈을 받는 그날을 위해~ 화이팅!!내가 초보다! 독학하고 싶어! 근데 질문하면 대답해줄 사람 있으면 좋겠다! 이런 조건들이 모두 부합한다면 이 책을 추천합니다.언젠가 구글 상위 노출로 인해 돈을 받는 그날을 위해~ 화이팅!!