안녕하세요

요섹마입니다.


이번 포스팅은 블로그 사이트맵 등록하는법을 알아보겠습니다.

네이버 웹마스터도구 사이트 최적화가 잘될수록 사이트 노출이 잘 된다는 미신(?)이 있는데

저는 미신을 맹신하는 사람이므로 무조건 지켜줘야한다고 생각해서...ㅋㅋㅋ


실제로 블로그 최적화 되있을땐 관리 안해도 투데이 1000 넘게 나오던 시절이 있었는데 지금은 200~300대로 완전 떡락해버렸네요....

그때는 공부하느라 관리도 하나도 안하고있었는데...


어쨋든 본론으로 돌아와서 사이트 최적화 하는 방법인 사이트맵 등록 방법에 대해서 하는김에 정보 공유도 할 겸 스샷 대충 찍어서 포스팅합니다...쿄쿄



사실 원래 처음 만들때 사이트맵을 제출 했었는데....

블로그 유입경로를 보니 구글 외에 검색 노출이 너무 폭락하고있어서....

왜 그런지 한번 계속 알아보던 도중....

아주 띠꺼운 부분을 발견했습니다.



띠용....

나쁘지않아요라니...





너무 오래되서그런지 사이트맵이 없다네요 -_-;

빠르게 바로잡아줍시다 쿄쿄




↑클릭시 해당 페이지로 이동합니다↑






접속 후 Site URL 옆 네모박스에 사이트 주소를 써주고

밑에 선택부분을 위 이미지와 같이 입력 후 Create Sitemap 버튼을 눌러줍니다





입력하면 위와 같은 화면이 나오면서 사이트맵을 정리해주기 시작합니다.

오지게 오래걸립니다.

현재 게시물 114개 기준 1시간쯤 걸린거같습니다.







다됬으면 다운을 받아줍니다.

XML sitemap 파일을 받아주면 됩니다.







이제 사이트맵을 업로드해줍시다.

그냥 분류고 나발이고 비공개로 파일 첨부해서 글 하나 써줍시다..


그리고 게시물로 이동해서




링크 주소 복사를 클릭합니다.


그리고 네이버 웹마스터도구로 가서 요청->사이트맵제출 로 이동합니다.





그리고 방금 복사한 링크주소를 앞에 https://블로그주소.com/ 부분을 지우고 확인을 누릅니다.


끝.



이제 잘 들어갔나 확인해봅시다.


현황->사이트최적화 로 이동합니다.



최고라네요


사이트 최적화가 잘 되어야 노출이 잘된다는 미신(?)도 있는만큼

블로그든 홈페이지든 항상 사이트 최적화가 잘 되어 있는지를 잘 봐줘야 할꺼같습니다.

다음 포스팅은 왠지 순서가 바뀐거같은데....

네이버 웹마스터도구 등록방법에대해서 포스팅하겠습니다



이제 진짜 끝!

저작자표시 비영리 변경금지

안녕하세요

요섹마입니다.

이번 포스팅은 파이썬을 설치하는방법에대해 알아보려고합니다.




우선 파이썬 홈페이지에 접속해서 다운받아줍니다.


↑이미지 클릭 시 다운로드 페이지로 이동합니다.↑



접속해서



다운로드를 클릭하여 다운받아줍니다.





인스톨파일을 다 받았으면 이제 본격적으로 설치를 해줘야죠



그냥 위에꺼 누르면 알아서 설치가 시작됩니다


뭐 다음 이런거 누를필요도 없어요 그냥 쭉 설치되고 끝났다고 나와요


절대 중간,마지막 스샷 못찍은거 맞아요




이렇게하면 설치 끝입니다.

참쉽죠?




설치 완료 후 실행하면 도스창....이뜹니다...

기왕 설치한거 아무거나 써보세요...

1+1같은거 쓰면 2라고 바로바로 계산해주고 합니다.

어려운 계산도 그냥 쓰면 바로바로 해줘요.

사실 계산기써도 되는데

그래도 좀 신기하잖아요.

나만그런가.....


암튼 이번 포스팅은 여기서 마치고


다음 포스팅은 다른 에디터 프로그램(비쥬얼스튜디오 코드) 에서 파이썬을 실행하고 작성하는법에대해 알아보고,


파이썬 사용법은 그 다음포스팅부터 진행하도록 하겠습니다.....

저작자표시 비영리 변경금지

안녕하세요 요섹마 입니다.

이번 포스팅은 자바스크립트로 팝업창 만드는 방법을 알아보겠습니다.




우선 팝업창 링크를 걸어줄 <a>태그를 만들어줍니다



<a href="" target="_blank">팝업</a>



버튼은 알아서 예쁘게 만들어주시고

바로 스크립트로 넘어가겠습니다.






<script langauge="javascript">
function popup(){
var url="test2.html";
var option="width=200, height=300, top=200"
window.open(url, "", option);
}
</script>



스크립트를 선언하고

저는 편의상 popup라는 이름으로 함수를 만들었습니다.


그리고 변수를 선언해줍니다


var url 은 팝업의 경로 주소를 나타냅니다.

테스트용이므로 그냥 테스트파일 아무렇게나 만들어서 주소 입력해주면 됩니다.


var option 안의 내용은 넓이 높이 및 위치를 나타냅니다.


window.open는 새 윈도우를 (위에 선언한 경로, "", 위에 선언한 옵션)의 형태로 열겠다는 뜻입니다.



스크립트를 다 쓰고난 후에

처음 만들었던 a태그에 경로를 지정해줍니다.



<a href="javascript:popup()" target="_blank">팝업</a>


자바스크립트 내에서 경로를 지정해놓았으니 그냥 javascript:함수명() 을 경로로 지정해주면 됩니다.



이렇게 해서 실행을 시키면


이렇게 화면이 출력이 되고


팝업버튼을 클릭할 경우


팝업창이 출력이 됩니다.





참쉽죠?


근데 쓸 일이 사실 썩 그리 많은 편은 아닌 기능이라....

그냥 복사해두셨다가 필요할때마다 복붙하는게 편할것같아요 ㅋㅋ



이거랑 상관없어도 코딩 관련 질문 댓글로 남겨주시면 그걸로 다음 포스팅 진행해보도록 하겠습니다


음...더 쓸 말이 없으니 이만 포스팅을 마쳐보도록 하겠습니다



안녕하세요 프로백수 요섹마입니다. 

(사실 이제 취업함 승진도함)

이번 포스팅은 코딩에대한 지식이 없어도 간단하게 홈페이지를 만들수있는 워드프레스를 설치하는방법에대해 알아보려고합니다.









우선 워드프레스 사이트에 접속해서 워드프레스를 다운받아줍니다.




↑이미지 링크로 다운로드페이지로 이동합니다.




파일을 다운받고 압축을 푼 후에 워드프레스 폴더안에 파일들을 FTP를 하여 호스팅서버에 올려줍니다.






저는 파일질라를 이용했습니다.

모든 파일을 선택 후 www폴더로 드래그&드롭으로 옮겨줍니다.

파일 업로드가 완료된 후에 이제 본인의 호스팅서버에 접속하시면 됩니다.





접속하면 다음과 같은 화면이 나옵니다.

그냥 바로 Let`s go! 를 눌러줍시다.






다음 화면입니다.


데이터베이스이름 : 아이디

사용자명 : 아이디

암호 : 아무거나 비밀번호 입력

데이터베이스 호스트 : 그냥 냅두시면 됩니다.

테이블 접두어 : 그냥 냅두시면 됩니다.


모두 입력 후에 저장하기를 눌러줍니다.



다음화면입니다.

설치 실행하기 버튼 눌러주시면 됩니다



사이트 제목은 타이틀로 보이는 사이트의 제목입니다.

모든 내용은 언제든 검색 가능합니다.

사용자명은 워드프레스 어드민에서 사용할 아이디입니다.

암호는 어드민 비밀번호입니다.


메일주소 그냥 쓰라니까 써줍시다.

검색엔진 접근여부는 체크가 풀려있는 상태로 냅두시면 됩니다.


입력 후 워드프레스 설치하기 버튼을 눌러줍시다.



끝입니다.

로그인을 누르면



다음과 같은 어드민 로그인 페이지가 나옵니다.

이렇게 되면 설치 완료입니다.


언제가될진 모르겠지만 다음 포스팅은 워드프레스 스킨적용과 커스텀에대해 다뤄보도록 하겠습니다.!


안녕하세요

이번 포스팅은 제이쿼리를 사용해서 드롭다운메뉴가 부드럽게 움직이도록 만들어보려고 합니다.


↑드롭다운메뉴가 뭔지 모르시는분은 이거 보시면 아마 바로 아~하실듯




우선 HTML부터 써봅시다



   <header>

      <div class="container">

        <ul class="nav">

          

          <li><a href="">메뉴1</a>

            <ul class="sub sub1">

              <li><a href="#">메뉴1-1</a></li>

              <li><a href="#">메뉴1-2</a></li>

              <li><a href="#">메뉴1-3</a></li>

            </ul>

          </li>

          

          <li><a href="">메뉴2</a>

            <ul class="sub sub2">

              <li><a href="#">메뉴2-1</a></li>

              <li><a href="#">메뉴2-2</a></li>

              <li><a href="#">메뉴2-3</a></li>

            </ul>

          </li>

          

          <li><a href="">메뉴3</a>

            <ul class="sub sub3">

              <li><a href="#">메뉴3-1</a></li>

              <li><a href="#">메뉴3-2</a></li>

              <li><a href="#">메뉴3-3</a></li>

            </ul>

          </li>

          

          <li><a href="">메뉴4</a>

            <ul class="sub sub4">

              <li><a href="#">메뉴4-1</a></li>

              <li><a href="#">메뉴4-2</a></li>

              <li><a href="#">메뉴4-3</a></li>

            </ul>

          </li>

          

        </ul>

      </div>

    </header>




원래 저렇게 안쓰는데 보기 편하시라고 덩어리별로 쪼개놔봤습니다.


ul과 li를 이해하고 계신분들이라면 그냥 보셔도 알거라 생각하고 설명 패스하겠습니다.








다음은 css


* {margin: 0;padding: 0;}

li {list-style: none}

a{text-decoration: none}

header {

  width: 100%;

  height: 50px;

  background-color: skyblue;

}

.container {

  width: 1200px;

  height: 50px;

  margin: 0 auto;

  position: relative;

}

.nav {

  float: left;

  width: 100%;

  overflow: hidden;

}

.nav>li {

  float: left;

  width: 25%;

  box-sizing: border-box;

}

.nav>li>a {

  display: block;

  width: 100%;

  text-align: center;

  line-height: 3.4;

  color: #fcfcfc;

  font-size: 15px;

}

.nav>li>a:hover{

  background-color: #3DB7CC;

}

.sub {

  width: 300px;

  margin: 0 auto;

  position: absolute;

  top: 50px;

  left: 0;

  z-index: 1;

  display: none;

}

.sub2 {

  left: 300px;

}

.sub3 {

  left: 600px;

}

.sub4 {

  left: 900px;

}

.sub>li {

  width: 300px;

  height: 50px;

  border-bottom: 1px solid #000;

  color: #fff;

  background-color: #FFD8D8;

  box-sizing: border-box;

}

.sub>li:last-child {

  border: 0;

}

.sub>li>a:hover {

  background-color: #FFA7A7;

  color: #fff;

}

.sub>li>a {

  display: block;

  width: 100%;

  text-align: center;

  line-height: 3.4;

  font-size: 15px;

  font-weight: 500;

}




크기는 제 마음대로 메뉴당 넓이 300 높이 50으로 맞췄습니다.

물론 색깔도 제맘대로입니다


그대로 복붙하셔서 크기 바꾸실때에는 


.sub의 top값, .sub2, sub3, sub4의 left값, .nav>li>a과 .sub>li>a의 line-height값만 수정해주시면 됩니다.


선 빼고싶은분들은 border 빼시면되고.....이런건 설명 안해드려도되겠죠???




이제 기본 와꾸는 잡혔습니다.


이제 기다리고 기다리던 제이쿼리 입니다.



$(".nav li").hover(function() {

        $(this).children("ul").stop().slideToggle(500)

      })



짧으니까 주석 없이 설명으로 쓰겠습니다.


.nav li에 마우스를 올렸을때 실행되는 함수{


이것에 마우스를 올리면 자녀속성인 ul가 튀어나와라(0.5초에걸쳐서)


}


라는 뜻입니다.


중간에 들어간 stop()는 써도되고 안써도 됩니다.

저게 들어가면 올렸다가 마우스를 바로떼면 바로 다시 사라지고,

저게 안들어가면 일단 마우스를 올리면 무조건 메뉴 전체가 나왔다가 다시 사라집니다.


제 설명이 이해가 안되시면 직접 한번 지워서 실행시켜보시면 바로 아실겁니다.






 



'코딩 > jQuery' 카테고리의 다른 글

jQuery로 이미지 슬라이드 만들기  (1) 2018.08.06

jQuery로 이미지 자동 슬라이드 만들기!


우선 이미지들을 올려줍시다.


 <div id="slide" val="1" mx="3">

<li id="img1"><img src="img/1.jpg" alt=""/></li>

<li id="img2"><img src="img/2.jpg" alt=""/></li>

<li id="img3"><img src="img/3.jpg" alt=""/></li>

</div>


id는 마음대로 설정하셔도 상관없습니다.


다음은 css값을 수정해줍시다.


    #slide{

      position:relative;

      width: 500px;

    }

    #slide li{

      position:absolute;

      top:0;

      left:0;

      display:none;

      -webkit-display:block;

    }

    #slide img{

      width:500px;

      height: 300px;

    } 


#slide li에 -webkit-display:block;를 따로 준 이유는 크롬에는 li를썼을때 이미지에서도 옆에 쩜이 찍혀버려서....굳이 필요없는태그 한줄 넣어봤습니다.

li대신 div태그를 쓰면 안써도 상관없습니다.


그리고 슬라이드 이미지에 크기값을 조정해줬습니다.




그리고 이제 스크립트를 선언해줍시다.



<script type="text/javascript"> 

imgslide(); //페이지가 로딩될때 함수를 실행합니다

function imgslide(){

  $val = $("#slide").attr("val"); //현재 이미지 번호를 가져옵니다

  $mx = $("#slide").attr("mx"); //총 이미지 개수를 가져옵니다

$("#img"+$val).hide(); //현재 이미지를 사라지게 합니다.

if( $val == $mx ){ $val = 1; } //현재이미지가 마지막 번호라면 1번으로 되돌립니다.

else{ $val++; } //마지막 번호가 아니라면 카운트를 증가시켜줍니다

$("#img"+$val).fadeIn(500); //변경된 번호의 이미지영역을 나타나게 합니다.괄호 안에 숫자는 페이드인 되는 시간을 나타냅니다.

$("#slide").attr('val',$val); //변경된 이미지영역의 번호를 부여합니다.

setTimeout('imgslide()',1000); //1초 뒤에 다시 함수를 호출합니다.(숫자값 1000당 1초)

}

</script>


주석으로 설명을 달아놨으니 자세한 설명은 생략합니다...ㅋㅋㅋ


이렇게하면 자동으로 이미지가 넘어가는 슬라이드를 만들 수 있습니다.

슬라이드가 아니어도 베너라던가...팝업이라던가...뭐 이런걸로 응용 할 수도 있겠지요

굳이 저 내용 다 외울 필요도 없어요.

그냥 이런 코드들 몇개 갖다놓고 필요한곳에 복붙하시면 됩니다.

다음 포스팅은 언제가 될지 모르겠지만 이 슬라이드에 버튼 기능을 추가해 볼까합니다.


이상으로 jQuery로 이미지 슬라이드 만들기 포스팅을 마칩니다.



'코딩 > jQuery' 카테고리의 다른 글

제이쿼리로 드롭다운메뉴 만들기  (0) 2018.08.10
b(굵게), u(밑줄), i(기울임), br(줄바꿈) 태그에 대해서 알아봅시다!


차례대로 얘네입니다.

<br>태그는 줄을 바꿀때 사용합니다.

직접 한번 보시죠

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<b>b 안녕하세요! 요섹마입니다.</b><br>

<u>u 안녕하세요! 요섹마입니다.</u><br>

<i>i 안녕하세요! 요섹마입니다.</i>

</body>

</html>


각 태그 사이에 문장을 입력하면 적용되고,

문장 끝마다 br태그를 사용해줬습니다.



이렇게 입력 시



b 안녕하세요! 요섹마입니다.
u 안녕하세요! 요섹마입니다.

i 안녕하세요! 요섹마입니다. 


이렇게 나옵니다.

br태그를 뒤에 붙여줬기때문에 줄이 바뀌었습니다.


h1~h6태그를 제외한 나머지 문장태그는 br태그를 사용해서 줄을 바꿔줘야합니다.

안그러면


b 안녕하세요! 요섹마입니다. u 안녕하세요! 요섹마입니다. i 안녕하세요! 요섹마입니다. 


이런식으로 나와버립니다.

문장의 줄을 바꿀때는 꼭 br태그를 사용해줍시다.

'코딩 > HTML' 카테고리의 다른 글

HTML h1~h6 태그  (0) 2018.05.19


h1~h6 태그에 대해서 알아봅시다!

h1~h6 태그는 각 섹션의 제목을 입력할 때 사용합니다.
각 숫자는 제목의 등급을 나타내고 h1이 가장 상위 제목, h6이 가장 하위 제목이고,
기본적으로 Bold효과가 들어갑니다.
그리고 h1~h6태그는 br태그를 사용하지 않아도 태그 선언을 종료하는 시점에서 자동으로 줄이 바뀝니다.

예를들어

<!DOCTYPE html>

<html>
<body>
<h1>안녕하세요 요섹마입니다.</h1>
<h2>안녕하세요 요섹마입니다.</h2>
<h3>안녕하세요 요섹마입니다.</h3>
<h4>안녕하세요 요섹마입니다.</h4>
<h5>안녕하세요 요섹마입니다.</h5>
<h6>안녕하세요 요섹마입니다.</h6>
</body>
</html>


이렇게 입력 시



이런식으로 화면에 출력이 됩니다.




'코딩 > HTML' 카테고리의 다른 글

HTML b, u, i, br 태그  (0) 2018.05.20

+ Recent posts

티스토리툴바