웹사이트를 공유하는 법과 획기적으로 빠르게 만드는 방법

크게 두 가지로 나눌 수 있습니다 

1. 내 컴퓨터 자체를 서버로 만들거나

2. 외부서버를 이용하는 방법! 추천방법! > 웹호스팅 or 클라우드 서버

 

 그리고 구글에 free html tempelete이라고 치면 엄청 많이나온다 여기서 저작권을 잘 확인하고

index.html로 제목 수정 후 비주얼 스튜디오로 고치면 간편하다

 

그리고 netfliy.com 을 이용해 서버를 호스팅 할 수 있다 일단 무료라서 좋다!

굳이 안의 index 파일을 index.html로 수정 안하는게 좋다 확장자명이 생략된 템플릿이 많기 때문이다

 

조코딩님의 유튜브를 보고 공부해보자 웹디자인 뿐만아니라 여러가지 배울점이 많아 보인다

 

우리 머리의 용량엔 한계가 있다 그러므로 모르는 코드를 검색할 땐 구글에 검색한다 

ex) css center 이런것들?

개발자 도구를 이용해서 마진과 패딩값을 주는 것이 매우 바람직하다 단축키 f12기억해두시길!

박스 형태의 위치 옵션을 보면 수치를 더블클릭하면 값을 직접 바꿔 줄 수 있다 바꿔주면서 비주얼 스튜디오에서 수정해도 좋다! 더블클릭후 위아래 방향키로 움직일 수도 있다

 

그리고

<style> 두번째 칸에서 h1 {폰트사이즈 크기도 똑같이 입력해주고 수치나 방향키 등으로 수정 할 수 있다

이제 구글 글자를 각각 다른 색으로 바꿔줘야한다

htmltagwrap 플러그인을 다운 받는다 쉽게 박스로 나눠 줄 수 있음

alt+w를 누르면 하나씩 감싸지는데 이때 p태그를 인라인 요소를 가진 span 태그로 바꿔준다

 

h1 span:nth-child() 그리고 이렇게 스타일을 준다 가로안에 순서대로 적는거 알죠?

 

개발자 도구에서 스타일 입력란에 컬러를 입력해주고 아무색이나 선택한다 그러면 컬러 옆에 네모박스가 뜨는데 그걸 눌러주고 스포이드를 눌러서 구글에 맨앞글자를 찍어주면 컬러값을 알 수 있다

 

그리고 css요소를 직접 입력해 만드는 것도 좋지만 이러한 요소들을 미리 만들어 놓은 사이트를 참고할 필요도 있어보인다!

 

bootstrap이라는 사이트를 방문해보자! 혹은 codepen

 

docs 에서 많은 css 파일들이 있는 것을 확인 할 수 있다 왼쪽 위 검색창에 input을 입력해서 가져와보자!

 

그리고 사이트와 비주얼 스튜디오를 연결해야하는데 스타일링크를 해놓은 것위에 홈페이지 gettiong start를 누르고 맨위엘 눌러서 코드를 복사한후에 스타일 css 링크위에 복사해준다

 

그리고 사이트와 연결을 해뒀으니 사이트에서 center를 검색해서 class에 넣어주기만 하면 저절로 센터로 움직인다

이렇게 연결만 해놓고 태그 걸어놓는게 엄청나게 많다

 

검색기능 구현해보기

www.google.com/search?q=hello

구글에서 이렇게 검색을 해보면 서치 큐 다음에 검색어가 보인다 뒤에 것들은 별로 쓸모없어보인다

원리를 살펴보니

 

<form action="https://www.google.com/search" method="GET"> 폼 박스안에 이렇게 써준다 서치까지 써준다

그리고 메쓰호드 겟 그리고 인풋뒹에 name="q"라고 적어주면 검색기능이 활성화 된다