안녕하세요
오랜만에 포스팅을 하게 되었네요...
자 오늘은 기본적인 페이지를 만들어 볼 껀데요!
그 전에는 지루하고 이게 뭐야 하셨던 분들도 계셨을 텐데 이번에는 재미있게
진행해보도록 할께요!!
왜냐하면! 오늘은 진짜 페이지를 만들어 볼꺼 거든요!!
이번 포스팅은 여러번 나눠서 진행할께요!!
다들 Brackets나 Atom을 실행해 주세요~
화면이 뜨셨나요??
이제 진행해 보도록 할께요!! 오늘 부터는 소스도 밑에 같이 첨부하겠습니다!!
우선은 기본적인 HTML Templet을 작성해 주세요.
그 후에는 영역지정을 해 주는것이 좋겠죠??
기본적으로 헤더부분 섹션부분 푸터부분을 지정해 주는 것이 좋은 데요.
header 부분에는 페이지 이름이나 로고 정도가 들어가거나 아니면 메뉴가 들어가도 좋겠죠??
또 로그인 부분과 로그아웃 부분!!
그리고 section 부분에는 기본적인 글이던가 사진이라던가 내용이 들어가면 되겠고
footer 부분에는 SNS 연동이나 페이지 로고 또는 연락처 등등을 게시하면 되겠죠??
자 이제 영역을 분리해 볼께요!!
1 2 3 4 5 6 7 8 9 10 11 12 | <!doctype html> <html> <head> <meta charset="UTF-8"> <title>기본적인 페이지 만들기</title> </head> <body> <header>헤더부분</header> <section>섹션부분</section> <footer>푸터부분</footer> </body> </html> | cs |
자 이런식으로 구분을 지으셨다면 결과가 이렇게 나오셨을 겁니다.
여기서 div랑 뭐가 다르냐라는 말이 나오실텐데 그냥 이런 영역이다 라는 것을 구분짓게 하기 위해
작성한 것이고 저 부분안에 새로운 영역을 지정해서 진행하게 될 겁니다!!
아!! 선이 생겨서 의아해 하시는 분이 있는데 저는 정확한 구분을 짓기 위해서 style에 border라는 css를 적용 시킨 것이랍니다.
내부 css의 style에
header, section, footer { border: 1px solid; } 식으로 입력하시면 됩니다.
이렇게 영역 부분을 나누셨다면 이제 헤더 부분에 내용을 채워봐야겠죠??
이번 포스팅은 앞서 말하고 제목에서도 그렇듯이 헤더영역만 진행하겠습니다.
일단은 저작권 문제가 있기 때문에 구글에 돌아다니는 로고와 임의의 페이지명을 설정해서
진행해 보도록 하겠습니다.
우선은 어떤 식으로 꾸며야 할 지 정해놓고 진행하면 편하겠죠??
저같은 경우에는 임의로 별을 쏘다라는 로고명으로 진행하겠습니다.
여기서 제가 정해놓고 진행하라고 한 부분은 좋은 사이트가 있어 그곳에서 진행하시면 됩니다.
http://ovenapp.io 로 접속해서 카카오 아이디로 회원가입하신 후 어떤식으로 꾸밀지 정해 주시고!!
그 후에 헤더부분을 여러분에 맞게 꾸며주시면 되겠습니다!!
일단은 헤더 부분의 html을 확인해 보도록 하겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <body> <header> <p class="logout">logout</p> <br> <p class="login">login</p> <div> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTvR4xtDJflOk_62U8WriJaDb7LR7RXRWVtsK6r77VWvXvzcxRm"> </div> <p>별을 쏘다</p> </header> <section>섹션부분</section> <footer>푸터부분</footer> </body> | cs |
이런식으로 입력하게 되면 기본적으로 로고 부분과 사이트 이름이 설정이 되게 되는데요.
결과를 한번 확인해 볼까요??
이런 식으로 결과가 나오게 되는데요. 로고가 가운데 위치하고 사이트 이름까지 가운데로 위치해 있는 걸
볼 수 있는데요. 이렇게 되기 위해서는 스타일이 필요하겠죠?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <style> html, body, p { margin: 0; padding: 0; } header { text-align: center; } .login { float: right; } .logout { float: right } header div { width: 80%; margin-left: 10%; } header img { width: 100px; height: 100px; border-radius: 50% } p { font-family: monospace; font-size: 15px; } section { background-color: orange; height: 500px; } footer { background-color: yellow; height: 50px; } </style> | cs |
이렇게 내부 스타일로 적용해 주시고 실시간 미리보기를 눌러 주시면 저와같은 화면이 뜨게 됩니다.
어느정도 감이 잡히셨나요??
스타일 부분은 꾸미는 것이기 때문에 원하는 스타일을 넣다보면 줄이 길어지게 됩니다...
걱정하지 마시고!! 이쁘게 꾸며보세요!!
이상으로 포스팅을 마치겠습니다!!
궁금하신 점이나 잘못된 점이 있으면 가차없이 댓글을 달아 주세요!!
언제나 환영입니다!!
감사합니다!
'HTML5 > HTML Start' 카테고리의 다른 글
| 6. 기본적인 페이지 만들기 (footer) (0) | 2017.04.04 |
|---|---|
| 5. 기본적인 페이지 만들기 (section) (0) | 2017.03.31 |
| 3. CSS 적용 및 CSS 파일 활용법 (0) | 2017.03.31 |
| 2. tag 사용 실습 및 응용 (0) | 2017.03.30 |
| 1. HTML 기본 작성법 및 기본 tag (0) | 2017.03.30 |
