HTML과 CSS 코드예시] 스타일 적용으로 웹페이지 꾸미기

Color Scripter로   https://colorscripter.com/   에서 적용하여 삽입하였습니다.

스타일을 적용하지 않은 예시

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
    <title>스타일 없는 웹 페이지</title>
</head>
<body>
<h3>CSS 스타일 맛보기</h3>
<hr>
<p>나는 <span>웹 프로그래밍</span>을 좋아합니다.</p>
</body>
</html>
 
cs

 

 css스타일을 적용한 예시

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <title>스타일 없는 웹 페이지</title>
    <style>
        /*CSS 스타일 시트 작성*/
        body{background-color: mistyrose;}
        h3 {color : purple;}
        hr {border : 5px solid yellowgreen;}
        span{color: blue;font-size : 20px;}
    </style>
</head>
<body>
<h3>CSS 스타일 맛보기</h3>
<hr>
<p>나는 <span>웹 프로그래밍</span>을 좋아합니다.</p>
</body>
</html>
 
 
 
cs

 

 

위의 코드가 칼라로 들어갈 수있게 한 것은

Color Scripter로   https://colorscripter.com/   에서 적용하여 삽입하였습니다.

               

 

 

 

 

 

 

 

 

 

 

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

 

홈페이지에 오디오 삽입 방법

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <title>오디오 삽입</title>
</head>
<body>
<h3>오디오 삽입입</h3>
<hr>
페이지 로드 즉시 음악이 연주됩니다.
<br>
<audio src = "media/EmbraceableYou.mp3" controls autoplay loop>
브라우저가 audio 태그를 지원하지 않습니다.
</audio>
</body>
</html>
 
 
 
 
cs

오늘은 홈페이지에 오디오 삽입하는 코드를 알아 보았습니다.

 

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

HTML은 무엇인가?
HTML은 Hyper Text Markup Language의 약자로 웹 문서의 콘텐츠를 기술하는 언어이다.
(간단히 말해서... 웹 문서 작성하는 언어라고 보면 된다.)

•HTML 작성툴
html은 나모웹에디터, 드림위버, 에디트플러스 등 편하게 작성할 수 있는 툴이 있고 그 외에 메모장으도 작성할 수 있다. 메모장으로 작성할 경우 저장 시 확장자를 *.html로 파일이름을 작성, 파일형식은 모든파일, 인코딩은 UTF-8로 설정한 후 저장하면 된다.

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

 

CSS 강좌 /선택자 / 전체 선택자(Universal Selector)


전체 선택자(Universal Selector)는 모든 HTML 요소를 선택합니다. 별표(*)로 나타냅니다.

예를 들어
* {
  color: blue;
}

는 모든 요소의 색을 파란색으로 만듭니다.

다른 선택자와 같이 사용할 때는 생략할 수 있습니다. 즉,
*.abc { color: blue; }
.abc { color: blue; }

는 같은 결과를 만듭니다.

예제

모든 요소의 글자 모양을 기울임꼴로 만드는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      * {
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <h1>대한민국</h1>
    <p>서울특별시</p>
    <ul>
      <li>강남구</li>
      <li>용산구</li>
    </ul>
  </body>
</html>

 

위코드 값의 결과는 다음과 같습ㄴ다.

 


               

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

[JavaScript 강좌 ] 비교 연산자

 

 

  .

 

특정 조건을 만족할 때 특정 액션을 취하도록 코드를 짜는 경우가 많습니다. 특정 조건을 만족하는지는 변수의 값을 비교하여 확인하게 됩니다. 변수의 값이 어떤 값과 같거나 어떤 값보다 크거나 등으로 조건식을 세우게 되죠.

이렇듯 변수의 값을 어떤 값 또는 다른 변수와 비교할 때 사용하는 것이 비교 연산자(Cpmparison Operator)입니다. 비교 연산자는 8가지가 있는데, 각 연산자의 의미를 살펴보도록 하겠습니다.

==

==는 '같다'입니다. 변수 타입과 상관없이 값이 같으면 참입니다. 즉
5 == 5

도 참이고
'5' == 5

도 참입니다.

!=

!=는 '같지 않다'입니다.

===

===는 '엄격하게 같다'입니다. '엄격하게'의 의미는 변수 타입까지 고려한다는 것입니다. 변수의 값 뿐 아니라 변수의 타입까지 같아야 참입니다. 즉
5 === 5

는 참이지만
'5' === 5

는 거짓입니다. 왼쪽 변수는 문자열이고 오른쪽 변수는 숫자이기 때문입니다.

!==

!==는 '엄격하게 같지 않다'입니다. '엄격하게'의 의미는 변수 타입까지 고려한다는 것입니다. 변수의 값 뿐만 아니라 변수 타입까지 달라야 참입니다. 즉
'5' != 5

는 거짓이나
'5' !== 5

는 참입니다.

>

>는 '크다'입니다.

>=

>=는 '크거나 같다'입니다.

<

<는 '작다'입니다.

<=

<=는 '작거나 같다'입니다.

 

               

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

[JavaScript 강좌] 데이터 타입 문자열(String)

 

 

 

 

문자열(String)

 

문자열을 변수의 값으로 사용하려면 작은 따옴표(') 또는 큰 따옴표(")로 감쌉니다.

var jb = '하나님 예수님 성도';

var jb = "하나님 예수님 성도";

 

어떤 것으로 해도 상관 없으나 작은 따옴표로 시작해서 큰 따옴표로 끝나거나 큰 따옴표로 시작해서 작은 따옴표로 끝나면 안됩니다.

 

문자열에 작은 따옴표가 있다면 큰 따옴표로, 큰 따옴표가 있다면 작은 따옴표로 감쌉니다.

var jb = '하나님 "예수님" 성도.';

var jb = "하나님 '예수님' 성도.";

 

만약 작은 따옴표와 큰 따옴표가 같이 있다면 역슬래시를 이용합니다.

var jb = '하나님 "예수님" \'성도\'.';

 

문자열에 역슬래시가 들어가야 한다면 역슬래시를 두번 입력합니다.

var jb = '하나님 \\예수님\\ 성도.';

 

예제

<!doctype html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>JavaScript | String</title>

<script>

var jb1 = '1. 하나님 예수님 성도';

var jb2 = "2. 하나님 예수님 성도";

var jb3 = '3. 하나님 "예수님" 성도.';

var jb4 = "4. 하나님 '예수님' 성도.";

var jb5 = '5. 하나님 "예수님" \'성도\'.';

var jb6 = '6. 하나님 \\예수님\\ 성도.';

</script>

</head>

<body>

<script>

document.write( '<p>' + jb1 + '</p>' );

document.write( '<p>' + jb2 + '</p>' );

document.write( '<p>' + jb3 + '</p>' );

document.write( '<p>' + jb4 + '</p>' );

document.write( '<p>' + jb5 + '</p>' );

document.write( '<p>' + jb6 + '</p>' );

</script>

</body>

</html>

 

 

               

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

[JavaScript 강좌] 구문(Statement) 넣는 방법

 

 

 

자바스크립트는 줄바꿈을 하면 구문(Statement)이 종료된 것으로 봅니다.

var jb1 = '하나님'

var jb2 = '예수님'

 

줄바꿈을 해도 구문이 완성되지 않았다면 다음 줄까지 해석합니다.

var jb1

= '하나님'

 

var jb1 = '하나님'

 

은 같습니다.

 

구문이 종료되었음을 명확히 표시할 때는 세미콜론(;)을 사용합니다.

var jb1 = '하나님';

var jb2 = '예수님';

 

세미콜론 사용은 선택사항이지만, 한 줄에 여러 구문을 쓸 때는 구문과 구문 사이에 꼭 세미콜론을 넣어야 합니다.

var jb1 = '하나님'; var jb2 = '예수님'

 

구문 구분을 위한 세미콜론을 꼭 넣어야 하는 경우는 많지 않지만, 가독성과 에러 방지를 위해 구문 끝에 항상 넣는 게 좋습니다.

 

               

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

 

[HTML 강좌] 파비콘 만들고 적용하기

 

 

파비콘(Favicon)

홈페이지에 방문하면 페이지 제목 옆에 작은 이미지가 있는 경우가 있습니다.

이를 파비콘(Favicon)이라고 합니다. (Favicon은 'favorites icon'의 약자입니다.)

 

홈페이지에 파비콘(Favicon)을 적용하려면 두가지 작업을 해야 합니다.
•파비콘 이미지 만들기
•HTML 문서에 코드 넣기

파비콘(Favicon) 만들기

파비콘은 16x16 크기의 이미지 파일로 확장자는 ico입니다. 포토샵이나 Gimp 같은 이미지 편집 소프트웨어로 만들 수도 있고, favicon.cc 같은 온라인 툴을 이용할 수도 있습니다.

 

 

파비콘은 그리 정교한 이미지가 아니므로, 온라인 툴을 사용하는 게 편합니다. 또한 공유되는 파비콘도 많아 원하는 모양을 찾아서 다운로드 받을 수도 있습니다.

HTML 문서에 코드 넣기

파비콘을 적용시키려면 서버에 아이콘 파일을 업로드하고, HTML 문서의 <head>와 </head> 사이에 다음과 같은 코드를 넣습니다.
<link rel="shortcut icon" href="/path/favicon.ico">

경로는 파일 위치에 맞게 수정해야 합니다.

블로그에 파비콘 달기

대부분의 블로그 서비스는 파비콘 기능을 포함하고 있습니다. 관리 메뉴를 잘 찾아보면 찾을 수 있습니다.

예를 들어 티스토리 블로그라면 [기본 정보]의 아이콘에서 설정할 수 있습니다.

               

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,


[CSS 강좌] 워드프레스 테마 만들기

 

animation-duration으로 애니메이션이 시작해서 끝날 때까지의 시간을 정합니다.
•기본값 : 0s
•상속 : No
•애니메이션 : No
•버전 : CSS Level 3

문법
animation-duration: time | initial | inherit
•time : 연기 시키는 시간을 정합니다.
•initial : 기본값으로 설정합니다.
•inherit : 부모 요소의 속성값을 상속받습니다.

시간 단위는 초(second) 또는 1000분의 1초(millisecond)를 사용합니다. 예를 들어 3초는 3s 또는 3000ms입니다.

예제

사각형을 왼쪽에서 오른쪽으로 이동시키는 애니메이션입니다. 첫번째 사각형은 2초, 두번째 사각형은 4초, 세번째 사각형은 6초, 네번째 사각형은 8초의 시간으로 이동합니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS Reference | animation-duration</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: orange;
        position: relative;
        margin-bottom: 10px;
        -webkit-animation-name: jbMove;
        animation-name: jbMove;
      }
      .jbDiv1 {
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
      }
      .jbDiv2 {
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
      }
      .jbDiv3 {
        -webkit-animation-duration: 6s;
        animation-duration: 6s;
      }
      .jbDiv4 {
        -webkit-animation-duration: 8s;
        animation-duration: 8s;
      }
      @-webkit-keyframes jbMove {
        from {
          top: 0px;
          left: 0px;
        }
        to {
          top: 0px;
          left: 590px;
        }
      }
      @keyframes jbMove {
        from {
          top: 0px;
          left: 0px;
        }
        to {
          top: 0px;
          left: 590px;
        }
      }
    </style>
  </head>
  <body>
    <div class="jbDiv1"></div>
    <div class="jbDiv2"></div>
    <div class="jbDiv3"></div>
    <div class="jbDiv4"></div>
  </body>
</html>

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

[워드프레스 강좌] 워드프레스 설치(웹브라우저로 접속하기)

 

웹브라우저로 접속

/home/www에 업로드했다면 itworldkorea.co.kr으로, /home/www/wp에 업로드했다면 itworldkorea.co.kr/wp로 접속합니다.

다음과 같은 화면이 나오면 제대로 접속된 것입니다. [Let's Go!]를 클릭합니다.

 

 

 

만약 영어로 된 워드프레스를 설치했다면 다음처럼 언어를 선택하는 화면이 나옵니다.

 

 

데이터베이스 정보 입력

데이터베이스 정보를 입력합니다.

 

 

테이블 접두어는 변경해도 됩니다. 하지만, 인터넷이나 책에서는 변경하지 않은 접두어를 기준으로 정보를 제공합니다. 따라서 변경을 한다면, 기본 접두어가 wp_였다는 것을 기억해두는 것이 좋습니다.

입력을 마쳤으면 [저장하기]를 클릭합니다. 아무런 문제가 없으면 다음과 같은 화면이 나옵니다.

 

 

[설치 실행하기]를 클릭합니다.

사이트 정보 입력

사이트 제목, 관리자 등 사이트 정보를 입력하고 [워드프레스 설치하기]를 클릭합니다.

 

여기서 입력한 정보는 설치 후에 변경할 수 있습니다.

다음과 같은 화면이 나오면 설치에 성공한 것입니다.

 

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,