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

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

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









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




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




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






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

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

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





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

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






다음 화면입니다.


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

사용자명 : 아이디

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

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

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


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



다음화면입니다.

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



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

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

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

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


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

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


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



끝입니다.

로그인을 누르면



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

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


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

'코딩 > 워드프레스' 카테고리의 다른 글

워드프레스 설치하는법  (4) 2018.11.07
  1. 홍길동 2018.11.08 12:57 신고

    좋은 정보 감사합니다!!

    요섹마님 블로그 포스팅좀 자주 해주세요~~!

  2. 호원이 2018.11.08 22:48 신고

    해보고싶은데..봐도 어렵네요ㅠ


안녕하세요

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


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




우선 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' 카테고리의 다른 글

제이쿼리로 드롭다운메뉴 만들기  (0) 2018.08.10
jQuery로 이미지 슬라이드 만들기  (0) 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
jQuery로 이미지 슬라이드 만들기  (0) 2018.08.06
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 b, u, i, br 태그  (0) 2018.05.20
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
HTML h1~h6 태그  (0) 2018.05.19

+ Recent posts

티스토리 툴바