html: 레이아웃 구조
↓↓↓ 차례대로 먼저 보고 오기 ↓↓↓
서당개 웹 튜토리얼 시작! Let's Start!
'서당개 웹 공부' 튜토리얼 소개 서당개 웹공부 프롤로그 프롤로그 튜토리얼 소개 (링크트리 스타일 랜딩페이지 만들기) 누구에게 도움이 될까? 긴~ 서론 '랜딩페이지 제작 판매'를 하는 것이 올
liis.tistory.com
서당개 웹 튜토리얼 00. 무료 소스 코드 편집기: vscode
웹사이트 제작하기 위한 소스 코드 편집기: 비주얼 스튜디오 코드(Visual Studio Code, VSCode) 서당개 웹 튜토리얼 시작! Let's Start! '서당개 웹 공부' 튜토리얼 소개 서당개 웹공부 프롤로그 프롤로그 튜
liis.tistory.com
서당개 웹 튜토리얼 01. 웹 퍼블리싱 전 기초 작업 (와이어프레임과 초기 세팅)
웹 제작 기초 작업: 와이어프레임 작성하고 초기 세팅하기 서당개 웹 튜토리얼 시작! Let's Start! '서당개 웹 공부' 튜토리얼 소개 서당개 웹공부 프롤로그 프롤로그 튜토리얼 소개 (링크트리 스타
liis.tistory.com
웹을 만들기 전 초기 세팅까지 완료했다면, 이제는 전체적인 틀을 만들어 보려고 한다. 이전에 작성한 와이어프레임을 보면서 어떤 태그를 사용해서 어떻게 구조를 짤 것인지 생각해보자!
- 레이아웃 구상하기
- html 코딩하기
01. 레이아웃 구상하기
이전에 간단하게 작성한 와이어프레임을 보고 각각 어떤 태그를 사용하고 구성할 것인지 생각해본다. (→ 와이어프레임)
PC와 모바일 화면으로 인한 좌우 너비만 같고 전체적인 레이아웃 구조는 같게 디자인을 해서 위와 같은 구조는 다소 쉽게 짤 수 있다.
- 타이틀: 타이틀 있는 부분은 보통 <header>라는 태그를 사용하고 보통 웹사이트의 이름(타이틀)을 작성한다.
- 프로필 이미지: 원형 이미지 또는 일반 텍스트를 넣을 예정이다. <div>태그를 사용하여 프로필 영역을 잡아준다.
- 링크 버튼/공유 버튼: 버튼이라고 해서 <btn> 태그만 사용하지는 않는다. 버튼을 만드는 방법은 정말 다양한데 나는 <a>태그를 활용하여 하이퍼링크, 즉 버튼을 클릭하면 해당 '주소'로 이동하는 식의 버튼을 만들 예정이다. 공유 버튼 같은 경우 구글에서 제공하는 아이콘 이미지와 단순 텍스트로 만들 예정이다.
- 카피라이트: 보통 <footer> 태그를 활용하여 웹사이트의 하단이라는 것을 명시하고 그 안에 <p>태그를 활용하여 단순 텍스트로 카피라이트를 적어줄 예정이다.
- 팝업창: 링크 버튼을 클릭했을 때 나오는 팝업창 또한 <div> 태그를 이용하여 어두운 배경이미지와 팝업창을 구성할 것이다. 클릭했을 때 나타나는 기능은 제이쿼리를 이용하기 때문에 제이쿼리 시간에 함께 만들어보기로.
※ 전체 코드는 맨 아래에~
※ 직접 손으로 일일이 타이핑치시는 것을 추천! 더 빨리 는다!
※ 이전 단계를 마치고 아래 튜토리얼을 진행하기~!
02. html 코딩하기
타이틀: header
<body>
<header>
<h1>life is like this</h1>
</header>
</body>*지금부터 작성하는 내용은 <body> 태그 안에 쓴다.
①<header>: <header>는 앞서 말한 것처럼 웹사이트의 가장 위 부분의 영역을 지정하는 태그이다. 보통 사이트 이름, 상단 메뉴 등을 넣게 된다.
②<h1>: <h1> 안에는 웹사이트 이름을 넣어준다. <h> 태그는 숫자 1~6을 붙여서 중요도를 나눈다. 가장 중요한 내용일 수록 작은 숫자의 <h> 태그를 사용한다. 보통은 제목, 소제목 등을 넣게 된다.
프로필 영역-1: 텍스트
<body>
<div>
<h2>디지털노마드로 살기 위한 기록<br>
#말하는대로 #바라는대로 #원하는대로</h2>
</div>
</body>①<div>: <div> 태그로 프로필 영역을 잡아주고,
②<h2>: <h2> 태그 안에 텍스트로 프로필을 작성해준다. 텍스트가 길어서 줄바꿈을 하고 싶다면 줄 바꾸고 싶은 부분에 <br>태그만 넣어주면 된다.
프로필 영역-2: 이미지
<body>
<div>
<img src="./img/프로필이미지파일명.jpg" alt="이미지이름">
</div>
</body>③<div>: <div>로 프로필 이미지가 들어갈 영역을 잡아주고,
④<img> 그안에 이미지를 넣을 수 있는 <img> 태그를 넣어준다. <img> 태그는 'sorce'라는 뜻의 'src'로 이미지 경로를 넣어서 사용한다. 이전 포스팅에 설명했듯이(→ 폴더 정리) 'img'라는 이름의 폴더에 있는 이미지를 넣고 싶을 때 위와 같이 적어주면 된다. 프로필이미지파일명과 확장자(jpg, png, gif....등)을 바르게 써줘야 일명 엑스바가 나오지 않고 이미지가 잘 나타난다.
위 경로는 여러 폴더 중 'img'라는 이름의 폴더 안에 있는 '프로필이미지파일명'의 jpg 파일을 이미지로 쓰겠다라는 뜻이다.
alt는 생략하기도 하지만, 시각 장애와 같이 웹을 사용하기 어려움을 겪는 분들에게 이 이미지가 어떤 것인지 음성 등의 설명 지원을 위해서 적어줘야한다. (법으로 정해진 나라도 있다.)
링크 버튼
<body>
<div>
<h3><a href="https://liis.tistory.com/" target="_blank">→ blog: recording</a></h3>
<h3><a href="https://liis.tistory.com/49" target="_blank">2021 goal !</a></h3>
<h3><a href="https://liis.tistory.com/53" target="_blank">e-book: challenging !</a></h3>
<h3><a href="https://instagram.com/by.liis" target="_blank">instagram: @by.liis</a></h3>
<h3><a href="#">kakao emoticon: ...</a></h3>
</div>
</body>①<div>: 와이어프레임을 보면 링크 버튼들이 총 5개가 있다. 이렇게 쭉 리스트가 있을 경우 <ul>태그로 전체 리스트 영역을 잡고, <li>라는 리스트 태그를 사용하지만, 나는 이번에 일반 텍스트 태그를 사용했다. 링크 버튼들의 전체 영역은 <div>로 잡는다.
②<h3>: 각 링크 버튼들은 <h3> 태그를 사용한다. 앞서 말한 것처럼 중요도에 따라 <h> 태그의 숫자들이 달라지는데 사이트제목, 프로필 다음으로 중요하다고 생각해서 '3'이라는 숫자를 달았다.
③<a>: 다음으로 각 링크로 이동할 수 있는 <a> 태그를 <h3> 태그 안에 각각 넣어준다. 여기서 꼭 <h3> 태그 없이 <a>태그만 사용해도 버튼을 만들 수 있지만 여러 태그를 사용하면 css, 제이쿼리를 적용하기 용이해진다. <a> 태그 안에는 텍스트로 간단하게 '버튼 이름'을 텍스트로 적어준다.
href: <a> 태그에서 하이퍼링크, 'href'에 버튼을 클릭했을 때 이동하려는 경로, 주소를 넣어준다. 나는 블로그에 썼던 글과 SNS 주소를 넣어줬다.
target: 'target' 값에는 '_blank'를 넣어줬는데, 새창에서 해당 주소를 열겠다라는 뜻이다. (기본값은 '_self'다. 새창말고 현재창에서 해당 링크를 열겠다는 뜻이다.)
④맨 마지막 링크버튼의 <a> 태그를 보면 href="#"가 있다. 이건 클릭은 되지만 연결된 주소는 없다는 뜻이다. 비어있는 링크같은 경우에는 #을 쓴다. 마지막 링크 버튼은 클릭했을 때 '팝업창'이 나오기 때문에 연결된 주소가 없다.
공유 버튼
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div>
<span class="material-icons">link</span>
<p>copy link</p>
</div>
</body>①구글아이콘: 공유버튼에는 '구글 아이콘' 이미지를 넣으려고 처음부터 생각을 했다. 구글에서 다양한 아이콘을 제공하고 있는데 그걸 빌려 쓰는 개념이다. <head> 안에 위 링크를 넣어주면 기본 세팅이 된다. 구체적인 세팅은 추후에도 튜토리얼로 포스팅하겠지만 아래 링크를 참고하면 자세한 적용방법을 알 수 있을 것이다.
②<div>: 역시 <div> 태그로 공유 버튼의 영역을 잡고,
③<span>: 구글 아이콘이 편리한 이유는 <span class="material-icons"></span> 태그 사이에 아이콘 이름만 넣어주면 이미지(아이콘)을 불러와 자동으로 바꿔준다는 것이다. 나는 'link'라는 이미지를 선택하였고, 구글 아이콘 사이트에서 원하는 이미지를 찾아서 이름만 <span> 태그 사이에 넣어주면 된다.
④<p>: <p>태그는 텍스트를 넣는 일반적인 태그로, 나는 여기서 유저들이 어떤 버튼인지 알 수 있도록 버튼 이름을 넣어주었다.
카피라이트: footer
<body>
<footer>
<p>Copyright (c) 2021. liis. All Rights Reserved</p>
</footer>
</body>①<footer>: 상단 영역은 <header>, 하단 영역은 <footer>로 지정한다. 그냥 단순 <div> 태그로 할 수도 있지만 퍼블리싱하는 사람 입장에서도 어느 영역인지 직관적으로 알아볼 수 있기 위해서 이러한 태그를 사용한다.
②<p>: <footer> 영역 안에 카피라이트를 넣기 위해서 일반 텍스트를 넣는 <p> 태그를 사용했다. 카피라이트는 다양한 방식으로 작성할 수 있는데, 나는 위와 같은 형식으로 썼고, 연도와 이름을 수정하여 사용하면 된다.
팝업창
<body>
<div>
<div>
<h4>...절찬리에 판매하고 싶...</h4>
<p>카카오 이모티콘 출시하게 되면<br>제작 과정을 공유하고 싶어요!</p>
<p>Please cheer for me!</p>
</div>
</div>
</body>팝업창은 링크 버튼을 클릭했을 때, 연결된 주소가 없어서 대체용으로 나오게 되는 창이다. 앞서 링크 버튼 5개 중 맨 마지막 링크 버튼이 그러하다.
팝업창의 경우, w3school에서 'Modal' 기능을 가지고 왔기 때문에 위와 같은 레이아웃이 만들어졌다. (→ w3school - Modal) 추후 제이쿼리 시간에 팝업창 기능에 대한 튜토리얼을 공유할 예정이다. 일단 레이아웃만 잡아놓자!
①<div>: 팝업창 전체 영역을 잡아주고,
②<div>: 팝업창 내용의 전체 영역을 잡아주고,
③<h4>: 팝업창의 제목
④<p>: 팝업창의 텍스트, 줄바꿈을 위한 <br> 태그
⑤<p>: 닫기 버튼 텍스트
전체 html 정리
위와 같이 영역별로 나눈 태그를 모아보면 html에는 아래와 같이 레이아웃을 만들 수 있게 된다. (프로필 영역은 '텍스트' 버전으로 넣었다.)
<head>
<!--구글 아이콘 불러오기-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<!--타이틀:헤더 영역-->
<header>
<h1>life is like this</h1>
</header>
<!--프로필 영역-->
<div>
<h2>디지털노마드로 살기 위한 기록<br>
#말하는대로 #바라는대로 #원하는대로</h2>
</div>
<!--링크 버튼-->
<div>
<h3><a href="https://liis.tistory.com/" target="_blank">→ blog: recording</a></h3>
<h3><a href="https://liis.tistory.com/49" target="_blank">2021 goal !</a></h3>
<h3><a href="https://liis.tistory.com/53" target="_blank">e-book: challenging !</a></h3>
<h3><a href="https://instagram.com/by.liis" target="_blank">instagram: @by.liis</a></h3>
<h3><a href="#">kakao emoticon: ...</a></h3>
</div>
<!--공유 버튼-->
<div>
<span class="material-icons">link</span>
<p>copy link</p>
</div>
<!--카피라이트:푸터 영역-->
<footer>
<p>Copyright (c) 2021. liis. All Rights Reserved</p>
</footer>
<!--팝업창-->
<div>
<div>
<h4>...절찬리에 판매하고 싶...</h4>
<p>카카오 이모티콘 출시하게 되면<br>제작 과정을 공유하고 싶어요!</p>
<p>Please cheer for me!</p>
</div>
</div>
</body>이렇게 보면 레이아웃 구조 짜는 것이 어려운 것은 아니지만, CSS나 제이쿼리 적용하다보면 태그를 많이 수정하게 되기도 한다. 최종 정리한 레이아웃은 위와 같다. 이제 다음 튜토리얼에서는 CSS를 하나하나 적용하는 방법을 배워볼 것이다.
미리 샘플로 만들어놓은 웹 페이지를 보면서 컬러나 이미지는 어떻게 꾸밀지 미리 생각해오자~!
by.liis (life is like this)
'web tutorial > web publishing' 카테고리의 다른 글
| 서당개 웹 튜토리얼 01. 웹 퍼블리싱 전 기초 작업 (와이어프레임과 초기 세팅) (0) | 2021.08.19 |
|---|---|
| 서당개 웹 튜토리얼 00. 무료 소스 코드 편집기: vscode (0) | 2021.07.12 |
| 서당개 웹 튜토리얼 시작! Let's Start! (2) | 2021.06.21 |
| Web Publishing: 구글 머티리얼 아이콘 활용하기 (0) | 2020.08.18 |
| Web Publishing: '가운데 정렬'하는 방법 3가지 (0) | 2020.08.13 |