오늘은 스킨의 전체적인 구조를 한번 살펴보고 원하는 디자인을 어디에 삽입해야 하는지 알아보려고 합니다.
저같은 경우 이 복잡한 문제를 쉽게 해결할 수 있도록 구글의 Chrome 브라우저를 사용해보았습니다.
제가 개인적으로 너무나 좋아하는 브라우저입니다.
크롬 브라우저에 내 티스토리 블로그를 띄워놓고, 오른쪽 상단의 [옵션] - [도구 더보기] - [개발자 도구] 를 클릭해줍니다. (Windows 환경에서는 F12 단축키를 이용할 수도 있습니다.)
우측 패널에 html 구조가 나타나는게 보이시나요?
복잡한 스크립트의 왼쪽 화살표를 눌러주며 상세한 내용을 닫아보겠습니다.
어느 html 스크립트를 봐도 <head>와<body>로 이루어진 여기까지의 구조는 거의 동일하다고 보시면 됩니다.
저는 여기서 본문을 보고싶기 때문에 <body>를 다시 열어보겠습니다.
그리고마우스를 스크립트에 가져가서 조금씩 이동하다보면 왼쪽 뷰어에서 스크립트에 해당하는 부분이 하이라이트 되는 것을 볼 수 있습니다. 이런식으로 어느부분에 디자인을 추가할지 결정할 수 있습니다. 저는 헤드라인 바로 아래 멋진 제목칸을 하나 추가해보도록 하겠습니다.
Chrome 개발자도구로 확인해보니 저같은 경우 <div id=“cMain”>…</div> 의 가장 윗 부분에 추가하면 될 것 같습니다.
이제 삽입할 위치를 정했으니 추가할 디자인을 골라야겠죠?
저는 여기에 멋진 제목을 넣기 위해서 Bootstrap의 Jumbotron을 추가해보겠습니다.
우선 <head>…</head> 안에 Bootstrap을 사용하기 위한 CDN을 추가해야합니다.
Bootstrap 홈페이지(https://getbootstrap.com/)에서 CDN 태그들을 복사해옵니다.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin=“anonymous"> 
그리고 아까 찾은 위치에 Jumbotron 코드를 나름대로 수정해서 삽입하면 끝입니다.
Ctrl+F (Mac 에서는 command+F) 로 위치를 찾고 복사 붙여넣기!
※ 아래 링크에서 다양한 코드를 찾아볼 수 있습니다.
(https://getbootstrap.com/docs/4.0/components/jumbotron/)
<div class="container">
<div class="jumbotron">
<h1>Gunliver Bootstrap</h1>
<p>또또로의 데이트 연구소에 오신 것을 환영합니다</p>
</div>
</div> 
저는 <div id=“cMain”>…</div> 를 찾았었기 때문에 "cMain"을 검색해서 위치를 찾은 후 삽입해주었습니다.
바로 여기에 붙여넣고 이제 화면에 잘 나오는지 확인해 보겠습니다!
오늘은 크롬을 이용해 html 구조를 읽는 방법과 디자인을 추가하는 방법을 알아보았습니다.
다음 시간에는 bootstrap을 이용해 조금 더 다양한 디자인을 추가해보도록 하겠습니다.
'IT노트 > 기타' 카테고리의 다른 글
| [Open DART] 주린이 개발자의 재무제표 데이터 긁어오기 (0) | 2021.02.18 |
|---|---|
| [안드로이드] MainActivity 관찰하기 (0) | 2020.09.14 |
| Kotlin 배우기 (0) | 2020.09.08 |
| [소프트웨어] Composition vs Aggregation (0) | 2020.04.29 |
| 티스토리 스킨 파헤치기 - 1탄 (3) | 2018.08.08 |