×
Crocus
공부한 내용을 정리하는 블로그로 시작한
Crocus는 2014년 1월 14일 부터 시작하여
현재 월 6만명, 총 2,720,221명의 방문자 수를 기록하고 있습니다.
Donation
이제 많은 사용자들이 이용하는 만큼
더 다양한 서비스 개발/제공을 위해 후원금을 모금하고자 합니다.
후원을 해주시는 분들은 Donators 명단에 성명, 후원금을 기입해드리며
Crocus 블로그가 아닌 다른 곳에 정리해둔 저만의 내용을 공유해 드리고자 합니다.
Account
예금주 : 고관우
신한은행 : 110-334-866541
카카오뱅크 : 3333-01-7888060

👉 후원 페이지 바로가기 Donators
익명 : 5000원(Crocus응원합니다.)
busyhuman: 5000원(유용한 지식 감사합니다.)
익명 : 5000원(알고리즘 학습러)
반응형



본 홈페이지 만들기 포스트는 처음부터 시작하여 홈페이지를 제작하는 과정을 포스팅 하는 것이고, 

필자도 포스팅을 함과 동시에 홈페이지 제작을 공부를 하고 있는 내용이므로, 매우 구체적이거나 세부적이지 못합니다.


이 내용들은 Wordpress를 기반으로 모두 제작하고 있음을 사전에 명시합니다.





홈페이지를 제작하는데 헤더에 몇가지 설정을 추천해주고자 한다.




외모 -> 테마 편집기 -> 오른쪽 부분의 테마 헤더를 누르면(스크린샷에는 나타나있지 않습니다.) 다음과 같은 장면을 볼 수 있다.


이제 몇가지 코드를 첨부해보자.


1. UTF-8로 변환해주는 메타 태그를 설정할 수 있다.

<!-- utf-8 변환-->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  


2. 모바일에 최적화 된 화면을 볼 수 있도록 도와준다.

(필자의 홈페이지는 모바일 버전을 없애고 그냥 PC와 동일하게 만들었다.)


<!-- 모바일 pc버전으로 -->

<meta name="viewport" content="width=device-width, initial-scale=1">


3. 모바일에서 입력 항목을 클릭 시 확대 되는 것을 방지하기 위한 메타 태그는 아래와 같이 설정한다. 

<meta name="viewport" content="user-scalable=no;">



4. 모바일, PC에서 가로 스크롤이 없어지게 하는 것은 다음과 같이 설정할 수 있다.

<!-- 가로 스크롤 방지 -->

<body style="overflow-x:hidden; overflow-y:auto;">



반응형