부트스트랩 홈페이지제작 -3(html 기본 내용)

안녕하세요!

오늘은 부트스트랩 홈페이지제작 세번쨰 포스팅으로 

마지막 html기본 내용에 대해서 소개해드릴려합니다. 

앞서 두개의 포스팅으로 부트스트랩 홈페이지제작 중에 html관련부분을 

수정하고 제작하는 과정을 설명 드렸습니다! 

그리고 오늘 마지막 포스팅으로 html에 대해서 소개 해드릴려 합니다. 

그치만 아시다시피 html 파일만으로는 웹사이트 제작이란것이 불가능합니다. 

내부 시스템이나 백엔드 개발은 당연히 하셔야 하고 css나 js 까지 하셔야 가능합니다. 

하지만 그거 다 배우고 만들수는 없으니 간단하게 테마 구매또는 무료다운을 하고 

백엔드의 경우엔 외주를 주고 간단히 html만을 건드리는 것에 대한 과정을 말씀드리고 있습니다. 

그중에 마지막으로는 html기초중의 기초인것 같은 이작업을 하면서 배운것들에 대해서 말씀드릴려합니다!

일단 깔끔하게 index의 내용만으로 소개를 해드릴려합니다!

구매하신 코드마다 내용이 다를수있지만 개인적인 생각이지만 

대부분 틀은 비슷하지 않겠나라는 생각이 듭니다. 

저는 부트스트랩 테마를 구매를 해서 이용을 했기때문에 아마 다 이렇게 나오지않을까란 생각이 듭니다 .

일단 인덱스 또는 어떤 파일을 열어도 위와 같은 내용이 있을껍니다. 

하나도 손을 대지 않은 부분인데  느낌이 css연결 한다는 그런 내용인듯합니다. 

그래서 수정을 하거나 css에대해서 많이 알지 못하다면 건들지 않는것이 가장 깔끔하다라는 생각이듭니다. 

인제 건드는 부분인데 ㅇ여기서 보자면 <div class= "###"> 이렇게 되는게 있을껍니다. 

처음에는 아무것도 모르고 이름만 바꾸다가 든생각인데 

div class 라는 것 자체가 하나의 공간을 만듭니다. 이 공간이 들어가기 위해선 

section이라는 코드가 필요하고요.  section으로 나눠진 공간을 div class로 다시 나누는 거라는 생각이 듭니다. 

그럼 다시 드는 생각이 div class가 왜 여러개 있을까란 생각을 가지게 되는데 section에서 생겨난 공간에서

div class 공간들이 방을 꾸민다고 생각하시면 편할듯 합니다.

그리고 <a class = "###" href = " ###.html"> 

href 뒤에 ###.html 즉 이거 클릭하면 어느 html 페이지를 열까 라는 그런거더라고요. 

그래서 웹이 넘어가는 부분은 이부분을 수정해주시면 됩니다. 

그리고 이부분을 클리했을때 페이지 연결을 하고 싶으면 이 코드를 활용하면 되고요. 

다만, css부분으 건드려야 하는것이 이런건데 class가 규정을 해두는것이 css 입니다. 

(아마도요..) 그러다보니 어떤 클래스에서는 위의 코드를 사용해버리면 

다른부분에서 문제가 생겨나기도 합니다. 이러부분을 고쳐나가야 하는게 큰 문제더라고요. 

그래서 최대한 css안거드는 방법으로 구현시킬수있는 방법을 생각해내야 하는것이 핵심인듯합니다. 

자세히 들여다보면 쉬운게 img src = "img/logo.png" 이렇게 되어있는데 

간단합니다. 이미지 폴더에 있는 logo 라는 이미지 파일을 보여달라는 내용입니다. 

그러면 로고 바꾸고 싶으면 이 이미지와 동일한 크기의 png파일로 준비를 하면 되죠.

그리고 <ul class = "###" > 이런코드가 있습니다. 

이건 예상가는건데 전반적인 구조? 디자인? 이런부분을 뜻하는것 같더라고요 

<ul class ....> </ul> 사이의 부분을 이렇게 바꿔줘라 라는 느낌인듯합니다. 

내부 코드를 보더라도 별반 다를게 없는데 웹에서 보면 다른곳과는 다릅니다. 

웹을 통해서 보면 이런식으로 보이게 됩니다. 

거의 위에서 정말 작업을 하면서 했던 내용들의 대부분이 다 설명을 한듯합니다. 

어떻게 활용했냐에 따라 다르게 반응을 하는듯합니다. 

여기서는 순서를 한번 볼려합니다 <div class =" imageWrapper"> 안에 <img src ....> 가 나오고 <div class ...></div> 가 있고 

마지막으로 </div>로 닫히게 됩니다. 

이미지 안에 어떠한 마스크(?) 를 널고 버튼을 넣고 버튼의 이름은 판매하기 누르면 sell.html로 넘어가라 라는것 같습니다.

class이름도 왠만하면 어떤 내용과 유사한 이름을 사용하고 masking 이란것도 포토샵이나 일러를 해봤다면 클리핑 마스크 라는것처럼 

위에 올린다라는 그런 느낌이 있습니다. 

마찬가지로 웹을 통해서는 이렇게 보이게 됩니다. 

처음에 웹제작을 해볼려 할때 정말 자바 코드 조금 배운거 

html코드 단어를 보면 대충 느낌온다는 정도? 하지만 드림위버 어떤거 하나 적을줄 모르지만 

누구나 html 코드를 전체적인걸 한번 보시면 대충 감이 오실껍니다. 이런분야로 관심이 있으신분들은 

없으시더라고 하나씩 배워나가기엔 어렵지 않겠다란 생각이 들었습니다. 

하지만 이런방법은 워낙에 기초가 없기때문에 많이 오류가 납니다. 

정말 고치고 싶은부분이 잘 안맞을때가 많습니다. 

그래서 다른방법 생각하고 또 고치고 할때가 많아서 시간이 많이 걸릴껍니다. 

하지만 전체적인 구조파악을 빨리 해버리면 누구나 시간만 있으면 작업을 할수있지 않을까란 

생각이 들더군요.

아! 참고로 작업을 할떄 맥이신분들은 xcode는 쓰지 마세요 

atom이라고 있는데 어떤거와 연결되어있는지 보여줘서 엄청 편하더군요 

xcode는 html 수정할때 쓰는건 아닌듯 합니다.