PHP 에서는 다른 파일을 import 하려면 <?php include(); ?> 를 쓰면 되지만 HTML 에서는 AJAX 나 JQUERY 를 이용합니다. 여기서는 jQuery 를 이용한 방법을 소개합니다.

 

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript">

    $(document).ready( function() {

        $("#loaded").load("파일이름");

    });

</script>

<div id="loaded"></div>

 

파일 이름에는 import 하고 싶은 파일을 적어주기만 하면 됩니다.

블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요

novalidate 속성은 폼 제출 시 유효성 검사를 무효화 시키고자 할 때 유용합니다.


이 속성은 유효성 검사를 해야 하는 폼에서 폼 요소를 전송시킬 때 필드의 값들의 입력여부를 검증하지 않고, 전송시킬 수 있습니다.


아래 예제에서 required 속성은 필수 항목으로 지정하였는데, novalidate 를 전체에 지정했기 때문에 핑수항목을 지정한 모든 필드를 무효화시켜 버릴 것입니다.


ex.1)

<form action="form.php" method="post" novalidate>
E-mail: <input type="email" name="email" required />
Password: <input type="password" name="pass" required/>
<input type="submit" name="전송" value="전송"/>
</form>



블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요

css 에서 브라우저의 호환성을 높이기 위해서는 접두어를 붙여야 합니다. 크롬, 파이어폭스, IE, 엣지 브라우저 등 브라우저 마다 지원되는 속성이 다르고, 접두어를 반복해서 쓰는 것이 번거롭고, 성가신 부분이 많습니다.


예를 들어 다음과 같은 코드를 작성한다면 상당히 귀찮아지지요.


 <style>

  .box:hover{

    -moz-transform:rotate(2deg); // 사파리, 크롬, 안드로이드, iOs, webkit 엔진 등

    -webkit-transform:rotate(2deg); // 파이어폭스, 모질라 브라우저 엔진

    -ms-transform:rotate(2deg); // IE

    -o-transform:rotate(2deg); // 오페라

    transform:rotate(2deg);

  }

 </style>


그래서 똑같은 코드를 반복해서 쓰지 않고, 한줄로 요약해서 쓸 수 있다면 편하지 않을까요? http://leaverou.github.io/prefixfree/ 에서 제공하는 스크립트를 이용한다면 접두어를 굳이 붙이지 않아도 됩니다.


 <script src="prefixfree.dynamic-dom.min.js"></script>

 <style>

    .box:hover{

        transform:rotate(2deg);

    }

 </style>


간편하죠?


스크립트는 아래 링크에서 다운로드 받거나 홈페이지 http://leaverou.github.io/prefixfree/ 에서 다운로드 받을 수 있습니다.



다운로드:  prefixfree.dynamic-dom.min.js



블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요

보통은 form 속성에 method, action, enctype 속성을 지정해서 폼을 전송하는게 일반적이지만 HTML5 에서는 submit 속성에 formmethod, formaction, formenctype 를 이용하여 폼을 전송할 수 있게 되었습니다.


아래는 일반적인 폼 전송 예입니다.


 <form method="POST" action="send.php" enctype="multipart/form-data" >

 <input type="file" name="user">

 <input type="submit" value="전송">
 </form>


위의 폼 전송 방식을 HTML5 로 작성하면 다음과 같을 것입니다.


 <form>

 <input type="file" name="user">

 <input type="submit" formenctype="multipart/form-data" formmethod="POST" formaction="send.php" value="전송">
 </form>


다음은 HTML5 를 사용하여 돌아가기 버튼를 구현해 보겠습니다. 돌아가기 버튼을 요청하면 입력 값을 검증하지 않게 할 수 있습니다.

여기서 주목해야 할 부분은 formnovalidate 속성입니다. 이 속성을 지정하면 입력 값을 검증하지 않게 됩니다.


 <form>

 <input type="file" name="user">


  <!-- 전송 버튼 -->

 <input type="submit" formenctype="multipart/form-data" formmethod="POST" formaction="send.php" value="전송">

  <!-- 돌아가기 버튼 -->

 <input type="submit" formmethod="GET" formaction="list.phpformnovalidate value="돌아가기">

 </form>



블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요

HTML5 에서 사용할 수 있는 keygen 요소는 공개키 암호 방식의 키를 생성하여 폼을 전송할 수 있습니다. 폼 전송시 비밀 키와 공개 키가 동시에 생성되어 비밀 키는 클라이언트 측에, 공개 키는 서버 측에 전송됩니다.


 <keygen name="user">



ex.1)

 <form method="POST" action=""> 

 <keygen name="user">  


 <input type="submit" value="전송"> 
 </form> 
  
 <?php 
 print_r
($_POST); 

 
/* 
 출력: 
 Array 
 ( 
    [user] => MIICQDCCASgwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwgg

    EKAoIBAQDQ9EksHcc6pgHaSOyHj8WZu2JhomrjoD+7C6JHQXp6HMjITB

    xQ4hLkDWqEmspexG+nroWHVswf4abtCl8+5SdJH4soh8zNUnI8MdkI

    AYjRL/qWJKjo0pn/qubMQLa1L8WVy4KvqHG9pAsmz14vm4H+B4U....

 ) 
 */ 
 
?>

 

블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요

HTML5 에서 multiple 이라는 요소가 추가되었습니다. 이 부분은 이전에 설명된 부분이지만 추가적인 설명을 해보겠습니다.


이것을 이용하면 자바스크립트를 사용하지 않고도 드래그로 파일을 여러 개 선택하여 한번에 파일을 전송할 수 있게 됩니다.


name 요소에 upfile[] 를 사용한 점에 주목해야 합니다. 형식은 다음과 같습니다.


 <input type="file" name="upfile[]" multiple>


ex.1)

 <form enctype="multipart/form-data" action="" method="POST"> 
 <input type="file" name="upfile[]" value="" multiple > 
 <input type="submit" value="전송" /> 
 </form> 

 <?php 
 print_r
($_FILES); 
 /* 
 출력: 
 Array 
 ( 
    [upfile] => Array 
        ( 
            [name] => Array 
                ( 
                    [0] => logo_Image.jpg 
                    [1] => urlshort.zip 
                ) 

            [type] => Array 
                ( 
                    [0] => image/jpeg 
                    [1] => application/x-zip-compressed 
                ) 

            [tmp_name] => Array 
                ( 
                    [0] => C:\Windows\Temp\php1E58.tmp 
                    [1] => C:\Windows\Temp\php1E59.tmp 
                ) 

            [error] => Array 
                ( 
                    [0] => 0 
                    [1] => 0 
                ) 

            [size] => Array 
                ( 
                    [0] => 22150 
                    [1] => 1065 
                ) 

        ) 

 ) 
 */ 
 ?>


multiple 요소에 mime-type 요소를 같이 사용할 수 있습니다. 예를 들면 이미지만 업로드 허용하던지 아니면 zip 파일만 업로드하게 할 수 있습니다. 형식은 다음과 같습니다.


 <input type="file" name="upfile[]" value="" multiple  accept="image/*">

ex.2)

 <form enctype="multipart/form-data" action="" method="POST"> 
 <input type="file" name="upfile[]" value="" multiple  accept="image/*"

 <input type="submit" value="전송" /> 
 </form> 


관련 글: [HTML5] FileAPI 를 이용한 다중 파일 업로드 구현


블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요

HTML5 에는 기존 폼 요소보다 유용한 폼 요소 기능을 제공합니다. HTML 를 제작하기에 알아두면 아주 유용한 폼 요소 속성을 설명합니다.


search 요소

브라우저에 따라 모양이 달라진다는 점 말고는 text 를 지정한 것과 차이는 없습니다.


ex.1)

 <input type="search"  name="user" >


tel 요소

text 와 큰 차이는 없지만 브라우저에 따라 모양이 달리지고, 특히 스마트폰에서는 특별한 UI 가 나타납니다.


ex.2)

 <input type="tel" name="user">



url 요소

정확한 URL의 문자열을 검증합니다.


ex.3)

 <input type="url" name="user">


email 요소

정확한 이메일 형식의 문자열을 검증합니다.


ex.4)

 <input type="email" name="user">


datetime, date, month, week, time, datetime-local 요소

브라우저에 따라 달력이 표시되거나 정확한 날짜 형식을 검증합니다. 


min 과 max 속성을 사용하여 값의 범위를 지정할 수 있습니다. 

step 속성을 이용하면 값의 간격을 지정할 수 있습니다.


 datetime-local : 2009-09-09T09:00Z 형식. UTC 라면 Z가 붙습니다.

 week : 2009-W36 형식. 2009년 36번째 주라는 뜻

 date: 달력이 표시됩니다.


ex.5)

 <input type="date" name="user" min="2009-09-10" max="2009-09-15">

 <input type="week" name="user">



number 요소

숫자가 입력되었는지 검증합니다.


ex.6)

 <input type="number" name="user" min="2" max="10" step="2">


range 요소

슬라이더로 숫자의 범위를 지정할 수 있습니다. min 과 max 를 생략하면 0에서 100 사이의 범위의 값을 지정합니다.


ex.7)

 <input type="range" name="user" min="2" max="100">



color 요소

#ffffff 형식의 문자열을 검증하며, 색상을 선택할 수 있는 창이 표시됩니다.


ex.8)

 <input type="color" name="user">



file 요소

이 요소는 이전부터 있었으며 1개 이상의 파일을 선택할 수 있는 기능이 추가되었습니다.

다중 선택을 위해서는 multiple 을 사용하며, mime-type 을 제한하기 위해서는 accept 요소를 사용합니다.


ex.9)

 <input type="file" name="user" multiple accept="image/*">


블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요

[HTML] editarea 웹에디터

HTML 2015. 1. 12. 09:00

editarea 는 코드 구문과 HTML 편집 위지윅 에디터의 혼합입니다.


위지윅의 단점은 웹에서 라인과 PHP 코드 분석을 할 수 없다는 점인데, 이러한 문제를 잘 살려준 에디터로 최상의 스크립트라고 생각합니다.


관련글 : [HTML] nicEditor 위지윅 웹에디터

            [HTML] 코드 구문 형광펜, SyntaxHighlighte 스크립트


다운로드:  editarea_0_8_2.zip






블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요

CSS의 기초를 쉽게 배울 수 있는 곳입니다.





출처: http://ko.learnlayout.com/



블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요


1. CSS

  • HTML 문서와 XML 문서에 스타일(글꼴, 간격, 색상)을 첨부하여 문서 내의 데이터를 다양한 모습으로 표현할 수 있게 하는 표현 중심 언어
  • 웹을 통해 전송되는 XML 데이터가 사용자에게 어떻게 보여질 것인지를 나타내는 스타일시트를 만들때사용하는 언어

   ☞  XML문서를 출력하는 방법을 정의하는 문서

  • 장점 : HTML처럼 간단하고, 배우기 쉽고, 사용하기 쉽다
  • 단점 : XML을 지원하는데 한계가 있다.
  • 1996 12 7 CSS1 W3C 권고안으로 채택되고, 네스케이프와 익스플로러에서 지원함으로서 HTML 문서에서 CSS1을 사용할 수 있게 되었다.
  • 1998 5 12 CSS2 W3C 권고안으로 채택되면서 HTML 문서와 XML 문서를 모두 지원할 수 있게 되었다.
  • W3C CSS2 권고안 사이트 : http://www.w3.org/TR/REC-CSS2/
  • CSS2 권고안의 한글 번역 사이트 : http://trio.co.kr/

 

2. CSS 맛보기

BOOK2.XML

<?xml version="1.0" encoding="euc-kr"?>

<?xml-stylesheet type="text/css" href="book2.css"?>

<book>

<author>김홍경</author>

<title> 몸은 내가 고친다</title>

</book>

BOOK2.CSS

      title {

               font-style:italic;

               font-size:16pt; }

      author {

               font-style:italic;

         font-size:16pt }

c1.XML

<?xml version="1.0" encoding="euc-kr"?>

<?xml-stylesheet type="text/css" href="c1.css" ?>

<!DOCTYPE member SYSTEM "c1.dtd">

<booklist>                        

  <book>

    <title>JSP And Servlet</title>

    <author>Mincheol Shin</author>

  </book>

</booklist>

c1.css

book {        display:block;  }

title {     font-family:fantasy;

             font-size:14pt;

             color:blue;             

             display:block;     }

author {  font-family:fantasy;

              font-size:14pt;

              color:green;

             display:block; }

c1.dtd

<?xml version="1.0" encoding="euc-kr"?>

<!ELEMENT booklist (book*)>

        <!ELEMENT book (title, author)>

                <!ELEMENT title (#PCDATA)>

                <!ELEMENT author (#PCDATA)>


  • Well-Formed XML 문서와 유효한 XML 문서는 브라우저에서 트리모양으로 디스플레이 된다.
  • XML 문서와  HTML 문서는 사용 목적이 다르다.
    • XML 문서 : 데이터를 구조화시켜 보관 또는 전달
    • HTML 문서 : 사용자에게 보여주기 위해 사용
  • XML 문서를 CSS XSLT문서와 결합하여 HTML 문서처럼 다양한 모습으로 표현 할 수 있다.

3. 외부 스타일 시트 문서를 참조하는 구문

  • <?xml ~>와 같은 선언문 다음에 위치
  • <?xml-stylesheet type="text/css" href="css 문서 파일명"?>
    • type="text/css" : 외부 문서의 유형은 css문서
    • href="css 문서 파일명" : 외부 문서의 파일명을 적용
    • href="http://웹서버주소/경로명/~.css" : 특정웹서버에 있는 외부 스타일시트 문서를 적용

4. 외부 스타일 시트 문서를 참조하는 구문


선택자 {

               선언

            속성:속성값;

            }

o    선택자 : 규칙이 적용될 요소의 이름

o    선언

§  {}안의 영역에 기술

§  선택자를 화면에 표현할 방식을 결정하는 문장

§  속성:속성값 형식으로 선언

§  font-style : italic

주의사항

o    선언 블록에   이상의 선언이 있을 경우 구분자로 세미콜론(;) 사용

o    세미콜론을 사용하지 않으면 해당 선언 블록 안의 속성 정의는 전부 무효

o    css 선언에 문제가 있을 경우라도  브라우저의 기본 값으로 해당 문자 데이터를   있다.

선택자에 사용될 수 있는 표현

선택자

설명

*

모든 엘리먼트가 대상이 된다.

엘리먼트

엘리먼트가 대상이 된다.

엘리먼트1 엘리먼트2

엘리먼트1의 자손인 엘리먼트2가 대상이 된다.

엘리먼트1 > 엘리먼트2

엘리먼트1의 자식인 엘리먼트가2가 대상이 된다.

엘리먼트[속성]

지정된 속성을 갖는 엘리먼트가 대상이 된다.

엘리먼트[속성="속성값"]

지정된 속성값을 갖는 엘리먼트가 대상이 된다.

 

5. css의 기본 문법

  • 영문 대소문자에 관련된 문제
    • xml 문서의 대소문자 차이로만 구분할  있는 요소 이름의 경우에는 css 적용하기는 힘들다.
  • xml 문서 내부의 css 지정

<?xml version="1.0" encoding="euc-kr"?>

<?xml-stylesheet type="text/css>

<book style=font-style:italic;  font-size:16> 내 몸은 내가 고친다

</book>

  • 다른 스타일 시트 불러오기
    • 다른 css 파일을 불러와서 포함시키는 것이 가능
    • @import url(스타일시트의 파일명)
  • css내에서의 적용 우선 순위
  1. 상위 요소에 지정한 속성이 하위 요소에 적용되는 상속성이 있다
  2. xml 문서 내에서 style속성이 지정되었다면 최우선으로 적용
  3. 문맥 선택자를 우선 적용
  4. 일반 선택자에 선언된 속성값을 적용
  5. 가장 가까운 조상 선택자에 선언된 속성값이 적용
  6. 조상 선택자에서도 선언되지 않은 속성은 브라우저 자체에 설정된 값을 사용
  • 동일 우선 순위의 경우는 나중 뒤에 선언한 것이 우선한다.
  • css 파일을 불러온 경우에는 호출된 파일의 내용이 호출한 파일의 처음에있는 것처럼 해석된다., 현재 불러들인 파일의 css내용이 우선시 된다.

books.xml

<?xml version="1.0" encoding="euc-kr"?>

<?xml-stylesheet type="text/css" href="books.css"?>

<books>

   <book>

      <author>김홍경</author>

      <title>내 몸은 내가 고친다</title>

   </book>

   <book>

      <author>김용옥</author>

      <title>철학강의</title>

   </book>

</books>

books.css

book {  font-size:13pt }

 

book title /* 문맥선택자 */

{        font-style:italic;  }

 

title     /* 일반 선택자 */

{        display: block;

        font-size:18pt;

        font-style:normal;

}

 

6. display 속성

  • 엘리먼트의 출력 여부 및 엘리먼트의 앞과 뒤에 줄바꿈을 지정하기 위해 사용디는 속성
  • display : 속성값;
  • 적용 가능한 속성값

속성값

설명

block

, 뒤의 엘리먼트에 대해 줄바꿈을 사용한다.

inline

, 뒤의 엘리먼트에 대해 줄바꿈을 사용하지 않는다.

list-item

block과 동일한 기능에 목록 표시가 추가된다.

none

지정한 엘리먼트를 출력하지 않는다.

list-style-type

순서 없는 리스트 : disc - , circle - , square -

순서 있는 리스트 : decimal, lower-roman, upper-roman,lower-alpha, upper-alpha

  • 1) 교재 177~178페이지
  • 2)

<?xml version="1.0" encoding="euc-kr"?>

 

<booklist>

        <book id="b1" kind="소설">

             <title>마지막 춤은 나와함께</title>

             <author>은 희경</author>

             <publisher>가람기획</publisher>

             <price>9000</price>

        </book>

</booklist>



 

7. 글씨체 관련 속성

속성명

설명

font-family

o    사용된 특정 글씨체나 일반적인 글씨체 등을 선언한다.

o    글씨체가 없는 시스템을 위해 왼쪽에서 오른쪽으로 중요도 순서대로 글씨체를 하나 이상 지정 가능

font-style

o    문자 스타일을 고른다.

o    가능한 값은 italic, oblique, normal 등이다.

font-size

o    글씨체의 크기를 지정한다.

o    가능한 값

§  절대크기 : xx-small, x-small, medium, x-large, xx-large

§  상대크기 : larger, smaller

§  길이

§  퍼센트값

font-weight

o    글씨체의 굵기를 지정한다.

o    가능한 값 : normal, bold, lighter, 100~900까지의 숫자 등이다.

font-variant

o    일반 글꼴과 소형 대문자 글꼴 사이를 전환할 경우에 사용

o    주로 내부의 모든 블록 및 인라인 요소들에 사용되어진다.


1) font-family 속성

    • font-family : "글꼴"
    • font-family : "글꼴1 글꼴2"  : 시스템에 글꼴1이 없을 경우 글꼴2를 사용
    • 1) 교재 181페이지
    • 2)

<?xml version="1.0" encoding="euc-kr"?>

<booklist>

        <book id="b1" kind="computer">

                 <title>XML Bible</title>

                 <author>채 규태</author>

                 <publisher>Freelec</publisher>

                 <price>25000</price>

        </book>

</booklist>




2) font-size 속성

    • 브라우저에 따른 절대크기 지정


    • 상대적인 크기 지정



    • 구체적인 크기 지정

    • 1) 교재 182~183페이지
    • 2)

<?xml version="1.0" encoding="euc-kr"?>

<booklist>

        <book id="b1" kind="computer">

                <title>XML 활용</title>

                <author>이 규미</author>

                <publisher>Freelec</publisher>

                <price>30000</price>

        </book>

</booklist>




3) font-style 속성

    • font-style : normal | italic | oblique ;
    • italic, oblique : 기울어진 글자 스타일을 지정할 때 사용
    • 1) 교재 184페이지
    • 2)

<?xml version="1.0" encoding="euc-kr"?>

<booklist>

        <book id="b1" kind="computer">

                <title>고급 XML</title>

                <author>신 민철</author>

                <publisher>Freelec</publisher>

                <price>25000</price>

        </book>

</booklist>




4) font-weight 속성

    • 폰트의 굵기를 설정하기 위해 사용

속성값

설명

normal

보통굵기(절대)

bold

굵게 표시(절대)

bolder

부모요소보다 조금 더 굵게 표시(상대)

lighter

부모요소보다 조금 더 가늘 게 표시

100~900사이의 100단위 값

100으로 갈수록 가늘고, 900으로 갈수록 굵다.  기본 400

    • 1) 교재 184페이지
    • 2)

<?xml version="1.0" encoding="euc-kr"?>

<booklist>

        <book id="b1" kind="computer">

             <title>XML 따라하기</title>

             <author>채 규태</author>

             <publisher>Freelec</publisher>

             <price>30000</price>

        </book>

</booklist>




4) font-variant 속성

    • small-caps : 영문을 모두 대문자로 바꿔서 표시
    • normal : 기본값으로 아무런 변경이 없다.
    • 1) 교재 184페이지

8. 폰트 색상과 배경 색상 관련 속성


1) color 속성

    • 글자의 색상을 지정하기 위한 속성
    • )
      • color : blue;
      • color : #0000ff;  -> RGB로 표현 가능
      • color : rgb(0,0,255);
      • color : rgb(0%, 0%, 100%);
    • 1) 교재 185~186페이지
    • 2)

<?xml version="1.0" encoding="euc-kr"?>

<booklist>

        <book id="b1" kind="computer">

                 <title>XML 완성</title>

                 <author>신 민철</author>

                 <publisher>Freelec</publisher>

                 <price>30000</price>

        </book>

</booklist>




2) background-color 속성

    • 바탕 색을 지정하기 위한 속성
    • 1) 교재 186~188페이지
    • 2)

<?xml version="1.0" encoding="euc-kr"?>

<booklist>

    <book id="b1" kind="소설">

    <title>그 많던 싱아는 누가 다 먹었을까?</title>

     <author>박 완서</author>

     <publisher>웅진닷컴</publisher>

     <price>7000</price>

  </book>

</booklist>




3) 배경 이미지 속성

    • 바탕 배경을 지정하기 위한 속성

속성명

설명

background-image

배경 이미지를 지정

background-image : url("파일명") ;

background-repeat

특정 엘리먼트에 배경 이미지를 반복적으로 지정할 때 사용

repeat

이미지를 상하좌우 모든 방향으로 반복

repeat-x

이미지를 오른쪽에서 왼쪽으로 반복

repeat-y

이미지를 위에서 아래로 반복

no-repeat

이미지를 반복시키지 않음

background-attachment

배경 이미지를 고정할 것인가, 스크롤 할 것인가를 선택

속성값을 지정하지 않으면 기본값으로 scroll이 적용

background-attachment : fixed | scroll ;

background-position

배경 이미지의 위치를 지정

50% 60%

percentage(e.g, 50%, 60%)

왼쪽으로 50%, 위로부터 60%에 위치

왼쪽 값만 지정하면 위쪽값은 자동으로 50%

50, 60

length(50, 60)

왼쪽으로 50픽셀, 위로부터 60픽셀에 위치

top, center, bottom

위쪽, 가운데, 아래쪽 중의 한 곳에 위치

left, center, right

왼쪽 가운데, 오른쪽 중의 한 곳에 위치

    • 1) 교재 187~192페이지
    • 2)

<?xml version="1.0" encoding="euc-kr"?>

<booklist>

  <book id="b1" kind="소설">

     <title>독일인의 사랑</title>

     <author>막스 뮐러</author>

     <publisher>소담출판사</publisher>

     <price>4500</price>

  </book>

</booklist>



 

9. 텍스트 관련 속성 (193~197페이지)

속성명

설명

text-decoration

텍스트에 효과를 줄 경우 사용

text-transform

텍스트를 대소문자로 변환할 때에 사용

text-align

텍스트의 수평 정렬을 지정할 경우 사용

text-indent

첫째 줄에 들여쓰기를 지정할 경우 사용


1) text-decoration 속성

    • 텍스트에 밑줄이나 깜박임 등 특정 효과를 설정 할 경우 사용

속성

설명

none

효과를 지정하지 않을 경우 사용

underline

밑줄 효과를 지정

overline

윗줄 효과를 지정

line-through

중간줄 효과를 지정

blink

깜박임 효과를 지정

    • 1)

<?xml version="1.0" encoding="euc-kr"?>

<booklist>

<book id="b1" kind="소설">

     <title>사랑의 기술</title>

     <author>에리히 프롬</author>

     <publisher>소담출판사</publisher>

     <price>5000</price>

</book>

</booklist>




2) text-transform 속성

    • 대소문자로 변환

속성

설명

capitalize

첫글자를 대문자로 바꾼다.

uppercase

모든 글자를 대문자로 바꾼다.

lowercase

모든 글자를 소문자로 바꾼다.

    • 1)

<?xml version="1.0" encoding="euc-kr"?>

<booklist>

<book id="b1" kind="computer">

     <title>inside XML</title>

     <author>Steven Holzner</author>

     <publisher>New Riders</publisher>

     <price>50000</price>

</book>

</booklist>




3) text-align 속성

    • 대소문자로 변환

속성

설명

left

왼쪽 정렬

right

오른쪽 정렬

center

가운데 정렬


4) text-indent 속성

    • 문단의 첫째 줄을 들여쓰기 할 경우에 사용
    • text-indent : 길이 | 퍼센트
    • 길이로 px, pt, cm, in등으로 표현
      • 음수로 지정시 내어쓰기의 효과
    • 퍼센트로 값 표현
    • 1)

<?xml version="1.0" encoding="euc-kr"?>

<booklist>

  <book id="b1" kind="소설">

     <title>밑줄긋는 남자</title>

     <author>카롤린 봉그랑</author>

     <publisher>열린책들</publisher>

     <price>7500</price>

  </book>

</booklist>




5) letter-spacing 속성

    • 텍스트 문자 사이의 간격을 지정
    • letter-spacing : .5em;

6) vertical-align 속성

    • 윗첨자와 아래첨자를 표시하는데 사용

속성

설명

sub

아래로 표시

super

윗첨자로 표시

baseline

기본값

    • 위첨자나 아래첨자의 경우 글꼴 크기가 작아지는 것이 아니기에, font-size 속성을 이용해서 크기를 조절해야 한다.
    • 1)

<?xml version="1.0" encoding="euc-kr"?>

<main>

<test>보통 텍스트<super>윗첨자</super></test>

<test>보통 텍스트<sub>아래첨자</sub></test>

</main>




7) line-height 속성

    • 텍스트의 행 높이를 지정
    • line-height : 2em

10. 보더(Border) 관련 속성 (193~197페이지)


속성명

설명

border-style

테두리의 스타일을 지정한다.

border-width

테두리의 너비를 지정한다.

border-color

테두리의 색상을 지정한다.


1) border-style 속성

    • 텍스트의 스타일을 지정
    • 속성이 지정되지 않으면 테두리선은 나타나지 않는다.

    • 1)

<?xml version="1.0" encoding="euc-kr"?>

<booklist>

<book id="b1" kind="수필">

     <title>시인을 찾아서</title>

     <author>신 경림</author>

     <publisher>우리교육</publisher>

     <price>8000</price>

</book>

</booklist>




2) border-width 속성

    • 테두리선의 너비를 지정할 경우 사용

속성

설명

thin

얇은 폭 지정

medium

중간 폭 지정(기본값)

thick

두꺼운 폭 지정

길이

폭 길이를 직접 지정(음수 사용 불가)

    • 1)

<?xml version="1.0" encoding="euc-kr"?>

<booklist>

<book id="b1" kind="수필">

     <title>시인을 찾아서</title>

     <author>신 경림</author>

     <publisher>우리교육</publisher>

     <price>9500</price>

</book>

</booklist>




3) border-color 속성

    • 1)

<?xml version="1.0" encoding="euc-kr"?>

<booklist>

  <book id="b1" kind="수필">

     <title>그대 아직도 꿈꾸고 있는가?</title>

     <author>박 완서</author>

     <publisher>세계사</publisher>

     <price>9500</price>

  </book>

</booklist>




4) 테두리의 너비, 스타일, 색상을 한번에 지정하기

    • Background  : 상자의 배경색 지정
    • Color : 텍스트색 지정
    • Border-color : 선의 색상
    • Border-top-color : 선의 위쪽 색상
    • Border-right-color : 선의 오른쪽 색상
    • Border-bottom-color : 선의 아래쪽 색상
    • Border-left-color : 선의 왼쪽 색상
    • border-left, border-right, border-top, border-bottom : width-속성값  style-속성값  color-속성값
    • 1)

<?xml version="1.0" encoding="euc-kr"?>

<booklist>

  <book id="b1" kind="소설">

     <title>토지</title>

     <author>박 경리</author>

     <publisher>나남</publisher>

     <price>9500</price>

  </book>

</booklist>



 

5) 여백 관련 속성

    • 브라우저 상하좌우에서 데이터와 떨어진 공간을 지정
    • margin : 속성값    => 상하좌우의 여백을 한번에 저장
    • margin-위치(left, right, top, bottom) : 속성값  => 주어진 위치의 여백을 지정
    • 길이로 값을 사용 : pt, em, ex등으로 사용
    • em : 현재 폰트 높이의 단위
    • ex : 현재 폰트의 소문자 x의 높이에 대한 상대 높이
    • 1)

<?xml version="1.0" encoding="euc-kr"?>

<booklist>

  <book id="b1" kind="소설">

     <title>타인에게 말걸기</title>

     <author>은 희경</author>

     <publisher>문학동네</publisher>

     <price>7000</price>

  </book>

</booklist>




6) 패딩 관련 속성

    • 문자와 문자의 간격을 지정하기 위해 사용
    • padding : 속성값    => 상하좌우의 패딩을 한번에 저장
    • padding-위치(left, right, top, bottom) : 속성값  => 주어진 위치의 패딩을 지정
    • 길이로 값을 사용 : pt, em, ex등으로 사용
    • 1)

<?xml version="1.0" encoding="euc-kr"?>

<booklist>

  <book id="b1" kind="소설">

     <title>토지</title>

     <author>박 경리</author>

     <publisher>나남</publisher>

     <price>9500</price>

  </book>

</booklist>



 

11. 리스트 관련 속성

    • display : list-item으로 속성 선언을 먼저하고, list 속성을 선언한다.
    • list-item의 모양이나 형식을 변경하기 위해 적용할 수 있는 속성

속성명

설명

list-style-type

목록 구분 기호나 문자를 지정

list-style-image

목록 구분 기호나 문자를 이미지로 지정

list-style-position

목록 구분 기호나 문자의 위치를 지정


1) list-style-type 속성

    • 목록 구분 기호나 문자를 지정

속성

설명

disc

square

decimal

1,2,3,4

lower-roman

i, ii, iii, iv

upper-roman

I, II, III, IV

lower-alpha

a, b, c, d .....

upper-alpha

A, B, C, D .....

    • 1)

<?xml version="1.0" encoding="euc-kr"?>

<booklist>

  <book id="b1" kind="소설">

     <title>길 없는 길</title>

     <author>최 인호</author>

     <publisher>여백</publisher>

     <price>9000</price>

  </book>

</booklist>




2) list-style-image 속성

    • 목록에 사용되는 기호나 문자 대신해서 이미지를 사용
    • list-style-image : url (이미지  파일 경로)
    • 이미지를 못 찾으면 ●(기본값)으로  출력
    • 1)

<?xml version="1.0" encoding="euc-kr"?>

<booklist>

  <book id="b1" kind="소설">

     <title>더불어 숲1,2</title>

     <author>신 영복</author>

     <publisher>중앙MB</publisher>

     <price>7000</price>  

  </book>

</booklist>



 

3) list-style-position 속성

    • 목록에 사용되는 기호나 문자 대신해서 이미지를 사용
    • list-style-position : inside | outside

속성

설명

 inside

기호부분이 데이터의 같은 라인에서 나온다.

outside

기호부분이 데이터보다 앞에 나오게 한다.

    • 1)

<?xml version="1.0" encoding="euc-kr"?>

<booklist>

  <book id="b1" kind="소설">

     <title>아홉살 인생</title>

     <author>위기철</author>

     <publisher>청년사</publisher>

     <price>6400</price>  

   </book>

</booklist>



    • 3)

list.xml

<?xml version="1.0" encoding="euc-kr"?>

<?xml-stylesheet type="text/css" href="list.css"?>

<list>

<item1>항목 1-1</item1>

<item1>항목 1-2</item1>

<item2>항목 2-1</item2>

<item2>항목 2-2</item2>

<item3>항목 3-1</item3>

<item3>항목 3-2</item3>

</list>

list.css

item1 {

  display:list-item;

  list-style-type:disc;

  list-style-position: inside;}

 

item2 {

  display:list-item;

  list-style-type:circle;

  list-style-position: inside;}

 

item3 {

  display:list-item;

  list-style-type:square;

  list-style-position: inside; }


출처: http://xmljang.com.ne.kr/


블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요

제가 소개해 드릴 위지윅 웹에디터는 초경량 nicEditor 로 설치가 쉽고 사용이 간편한 도구입니다. 일반적인 편집기 외 실시간 파일 업로드 기능을 제공하는데 단지 아래 코드만 삽입하면 모든 설치가 마무리 됩니다.

 <script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>


다운로드:  nicEdit.zip


nicEditors.allTextareas() 를 호출하면 페이지의 모든 텍스트 영역을 에디터로 대체하게  됩니다. NicEditors는 대체 텍스트 영역의 크기에 에디터 윈도우의 크기와 일치합니다.

아래는 실제 적용한 예입니다. 테스트 가능합니다.

First Textarea

Second Textarea

 

Third Textarea


관련글 : [HTML] editarea 웹에디터

            [HTML] 코드 구문 형광펜, SyntaxHighlighte 스크립트


출처: http://nicedit.com/


블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요

  • 김종관 2014.10.10 09:25  댓글주소  수정/삭제  댓글쓰기

    질문드립니다.
    글과 이미지를 저장 하고자 합니다
    jquery로 넘길때 어떻게 넘겨야 하는지
    date를 뭐뭐 작성 해야 하는지 궁금 합니다..

    • Favicon of https://blog.habonyphp.com BlogIcon 하보니 2014.10.11 16:29 신고  댓글주소  수정/삭제

      질문을 이제서야 확인하네요.
      폼요소의 이름이 'content'이면 $_POST['content']로 받아서 처리하면 될것 같구요. 참고로 폼요소는 정해져 있지 않습니다.

      이미지는 imgur.com에 저장됩니다. 그러므로 폼요소 'content'에 imgur.com의 이미지 경로가 포함되어 있다면 fopen이나 curl 과 같은 함수로 서버에 따로 저장하는 방법도 있습니다.

[HTML] 프레임 태그

HTML 2014. 7. 14. 09:00

(1) 프레임 나누기 기본 형식

  • 프레임을 나눌 때는 프레임을 나누는 역할을 하는 최초의 HTML 문서가 있어야 한다.
  • 이 때 최초의 HTML 문서의 파일명이 보통 메인 파일이 "index.html(html)"로 된다.
  • 프레임을 나누는 태그는 일반 HTML 문서의 <BODY>~</BODY> 태그 대신 사용된다.
  • 프레임은   <FRAMESET COLS=~>는 좌우로 나누는 태그
  • <FRAMSET ROWS=~>는 상하로 나누는 태그

(2) 좌우 프레임 나누기

   <FRAMESET COLS="X%,Y% border="0">

          <FRAME SRC="A.HTML">

          <FRAME SRC="B.HTML">

   </FRAMESET>

 <FRAMESET COLS="X%,Y%">

  • 창을 좌우로 나눈다. 「창1」이 X% 만큼, 「창2」가 Y% 만큼의 크기가 된다.
  • ★ 항상 X%+Y%=100%가 되게한다.

 < FRAMESET SRC="A.HTML>,<FRAME SRC="B.HTML">

  • 「창1,「창2」에 A.HTML, B.HTML 문서가 나타난다.
  • 태그가 나타나는 순서에 의해 문서의 위치가 「창1」인지 「창2」인지가 결정된다.

 </FRAMESET>

  • 프레임 끝을 표시한다

(3) 상하 프레임 나누기

 <FRAMESET ROWS = "X%,Y% border="0">

          <FRAME SRC="A.HTML">

          <FRAME SRC="B.HTML">

</FRAMESET>

 

(4) 프레임 나누기 속성

 frameset 태그 속성 ( <frameset rows="30%,70%" /cols="20%, * "frameborder="0/1"> ) 

 rows="가로화면비율%"

 화면을 가로로 나누는 명령어

 cols="세로화면비율%"

 화면을 세로로 나누는 명령어

 frameborder=0 혹은 1

 프레임 구분선을 나타낼땐 1, 그렇지 않을땐 0 을 설정

 framespacing="수치"

 프레임 간의 간격을 조정

 frame태그 속성( <frame src="웹페이지주소" scrolling="auto/yes/no" marginwidth="수치" arginwidth="수치"> )

 name="문자열"

 프레임 이름을 지정, target 링크할 경우 필요함 

 noresize

 프레임 경계를 마우스로 조절을 못하게 함

 scrolling="auto/yes/no"

 스크롤바를 생기게 할지 정하는 명령어.

  auto : 자동, yes : 스크롤  생김, no : 스크롤 안 생김

 marginwidth="수치"

 프레임 좌우경계선과 그 안에 내용과의 여백조정

 marginheight="수치"

 프레임 상하경계선과 그 안에 내용과의 여백조정

 <frame src="불러올 웹페이지">

 나누어진 화면에 불러올 웹페이지 지정

(5) 프레임 나누기 예

프레임이있는 페이지 소스

결과

<frameset cols="30%,70%">
      <frame src="left.htm" name="left">
      <frame src="right.htm" name="right">
</frameset>

left.htm

right.htm

cols 는 세로로 나눔을 뜻합니다. 30%, 70% 의 비율로 나눠주었군요. 위에쓴 left.htm 이라는 문서가 화면의 왼쪽 30%비율을 차지합니다.

<frameset rows="50%,50%">
      <frame src="top.htm" name="top">
      <frame src="bottom.htm" name="bottom">
</frameset>

top.htm

bottom.htm

rows는 가로로 나누는 것이군요. 50%, 50% 의 비율이구요, 위쪽에 쓴 top.htm 이 문서의 위쪽에 옵니다.

<frameset rows="20%,30%,50%">
      <frame src="top.htm" name="top">
      <frame src="middle.htm" name="middle">
      <frame src="bottom.htm" name="bottom">
</frameset>

top.htm

middle.htm

bottom.htm

rows는 가로로 나누는 것이군요. 50%, 50% 의 비율이구요, 위쪽에쓴 top.htm 이 문서의 위쪽에 옵니다.


<frameset rows=
"20%,*">
      <frame src="top.htm" name="top">

         <frameset cols="*.2*">
            <frame src="middle.htm" name="middle">
            <frame src="bottom.htm" name="bottom">

         </frameset>
</frameset>

top.htm

mid
dle
.htm

bottom.htm

먼저 위-아래를 나눕니다. 20%옆에 *은 나머지비율을 뜻합니다. 밑쪽에 위치할 문서가 또 분할되었군요. 다시한번 framset 을써주고 세로로 나눕니다. 2*  *의 두배를 뜻합니다.

<frameset rows="20%,*,20%">
      <frame src="top.htm" name="top">

          <frameset cols="*.2*">
              <frame src="left.htm" name="left">
              <frame src="right.htm" name="right">
         </frameset>

      <frame src="bottom.htm" name="bottom">
</frameset>

top.htm

left
.htm

right.htm

bottom.htm

먼저 가로로 세단계를 나눕니다. 맨 위와 맨 아래를 각각20%로 설정했군요. 가운데 들어갈 문서를 세로로 나눠주었습니다. 가운데 자리에 framset 을써서 세로로 나눕니다. "*,2*" 는 오른쪽 면적이 왼쪽의 2배가 됩니다.

<frameset cols="50%,*" rows="50%,*">
      <frame src="1.htm" name="1">
      <frame src="2.htm" name="2">
      <frame src="3.htm" name="3">
      <frame src="4.htm" name="4">
</frameset>

1

2

3

4

무작정 frame 태그를 이용하여 4개로 쭉 나눠주면 이와같은 모양이 됩니다.

 

출처: http://xmljang.com.ne.kr/html

블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요

  • 회원가입, 게시판에 글을 작성하기 위한 화면에 사용 되는 것이 폼태그이다.
  • 물론 폼태그 만으로 회원가입이나 게시판을 만들수 있는것은 아니다.
  • 입력양식일 뿐 입력사항에 대한 처리는 ASP, PHP등과 같은 언어를 사용하는 것입니다.
  • HTML 문서에서 사용자가 입력한 사항을 서버로 전달해주는 과정까지가 바로 폼태그의 역할이다.
  • <FORM method="post" action="formtest.php"> 해당폼에 들어갈 입력양식 </form>
    • method 속성
    • method속성은 입력된 내용을 어떠한 방식으로 전달할 것인지를 결정하는 속성

        ① method=get

          사용자들이 html입력양식에 입력한 값들이 환경변수에 저장되어 넘겨진다.

          즉 입력값들이 url에 붙는 인수로 첨가되어 action에 정해준 프로그램으로 그 값을 넘겨주게 되는 것

        ② method=post

          전달방식을 post로 하게 되면 표준입력으로 입력되므로 전달 데이터양에 제한을 받지 않기 때문에 보통 전달할 데이터 양이 많은 경우에 사용합니다.

    • Action 속성
    • action 속성은 입력값들을 어디로 전달할지로 정하는 부분

      즉 action=formtest.php라고 한다면 입력값이 formtest.php로 전달되는 것

  •  input 태그의 속성
    태그
    속성
    설명
    <input>
    name
    입력값에 대한 이름을 결정하는 속성. 
    나중에 프로그램으로 전달할때 변수명이 되므로 입력값마다 각기 다른 name을 정해준다.

    ※ Type 속성 값이 checkbox나 radio일 때는 각각의 name은 같게 하고, value를 다르게 합니다.
    type
    입력필드의 타입을 지정하는 속성.
    value
    입력필드의 기본 값 지정하는 속성.
    size
    입력 필드의 크기를 픽셀로 지정하는 속성. 
    ※ Type 속성값이 text나 password일 때는 입력하는 문자의 수가 된다..
    maxlength
    입력필드에 입력할수 있는 문자의 최대값을 나타내는 속성.
    checked
    Type속성값이 checkbox나 radio일 때 checked속성이 부여되면 해당 입력값이 선택된 상태로 설정.
    src
    Type이 image일 때, 사용될 그림 파일의 경로.
    readonly
    입력필드가 읽기 전용이 되는 속성.
    disabled
    입력필드를 아예 비활성화 하는 속성.
    즉 사용자가 입력할수 없는 상태가 된다.
    tabindex
    속성값으로 숫자 값을 가지며 탭키를 사용해 마우스포커스를 옮길때의 순서를 정해줄수 있는 속성.
  • type 속성 : 입력 필드의 타입을 지정
    속성
    속성값

    설명

    Type
    text

     
    ex) <input type="text" maxLength="20" name="textfield">

    한줄단위의텍스트 입력란 생성해 줍니다. 
    이후에 나올 <textarea>태그는 여러줄을 입력받을 수 있습니다.

    password

     
    ex) <input type="password" maxLength="20" name="pw">

    text와 비슷한 모양을 가지지만 사용자가 입력한 값을 직접 보여주는 것인 아니고 *로 나타내 줍니다. 
    보통 로그인시 비밀번호 입력이나 주민번호 입력등 에 사용됩니다.

    checkbox

     체크1  체크2  체그3
    ex) <input type="checkbox" value="체크1" name="checkbox">체크1  

          <input type="checkbox" value="체크2" name="checkbox">체크2
          <input type="checkbox" value="체크3" name="checkbox">체그3

    말 그대로 체크박스 입니다. 한번에 여러개를 체크해 선택할수도 있습니다. 보통 회원가입시 관심분야 체크나 메일링서비스를 받을것인지 받지 않을것인지 등을 체크할때 사용하게 됩니다. 
    위에서 언급한대로 name속성은 같게 value는 다르게 설정합니다.

    radio

     선택1  선택2  선택3
    ex) <input type="radio" value="선택1" name="radiobutton">선택1
          <input type="radio" value="선택2v name="radiobutton">선택2
          <input type="radio" value="선택3" name="radiobutton">선택3

    체크박스와 마찬가지로 마우스로 클릭해 체크된 입력값을 가지지만..
    체크박스는 여러개를 동시에 선택할수 있는 반면 체크박스는 단하나만 선택할수 있다는 차이점이 있습니다. 
    마찬가지로 name속성은 같게 value는 다르게 설정합니다.

    submit

     
    ex) <input type="submit" value="보내기" name="Submit">

    사용자가 입력양식에 내용을 입력한후 내용을 서버로 전송할때 사용하는 것입니다. value라는 속성값이 버튼의 이름으로 나타납니다. 위의 submit버튼은 value="보내기" 라고 설정되어 있겠죠?

    reset

     
    ex) <input type="reset" value="취소" name="Reset">

    이 버튼을 누르게 되면 폼안의 모든 내용이 초기화 됩니다.
    마찬가지로 value라는 속성값이 버튼의 이름으로 나타납니다.

    image

     
    ex)<input type="image" src="img/icon_training_view.gif" border="0"  name="imageField">

    submit버튼을 대신해 좀더 예쁜 이미지를 쓸수 있도록 해줍니다.

    file

     
    ex)<input type="file" name="file">

    게시판 등에서 파일을 업로드 다운로드 할때 사용하죠?
    파일을 찾아서 첨부하게 되면 폼내용을 전달할때 파일정보도 함께 전달 됩니다.

    hidden

    ex) <input type="hidden" name="tagclub" value="태그클럽">

    단어를 보면 대충 아시겠지만.. 말그대로 실제 브라우저에는 그 입력필드가 보이지는 않습니다. 
    하지만 hidden으로 설정된 input태그의 value값은 폼전달시 서버로 함께 전달이 됩니다.

  • <SELECT> <OPTION>
  •  

    ex) <select name="select">
              <option>직업을 선택하세요</option>
              <option>학생</option>
              <option>직장인</option>
              <option>백수</option>
          </select>

  • SELECT의 속성
  • 태그
    속성
    설명
    <select>
    size
    속성값에 주어진 숫자만큼의 메뉴개수를 한번에 보여주는 속성입니다. 기본값은 물론 위의 예제처럼 1개입니다.
    multiple
    메뉴를 다중선택할수 있게 하는 속성입니다.
  • <TEXTAREA>
    • <textarea>태그는 두줄이상의 텍스트 입력란을 만들어 준다.
    • 속성으로 rows(텍스트 영역의 줄의 수를 설정)과 cols (텍스트 영역의 칼럼의 수를 설정)가 있다.
    • <textarea>~</textarea>에서 ~에 해당하는 텍스트가 있다면 그 내용이 textarea안에 나오게 됩니다. 

       
      ex) <textarea name="textarea" rows="5" cols="40">
                 이곳에 내용이 텍스트에어리어에 나오죠?
             </textarea>
  • <form>태그를 이용한 간단한 회원가입 양식 예제

  • <HTML>
          <HEAD>
                <TITLE>form 사용예제</TITLE>
          </HEAD>
          <BODY bgcolor="#FFFFFF" text="#000000">

     

    회원가입 양식이라지만 폼에서 사용할수 있는 입력양식을 골고루 사용하기 위해<br>
    임의로 간단하게 만든것이니.. 참고만 하시고 직접 다시 짜보세요.<br><br>

    <form method="post" action="formtest.php">
     <input type="hidden" name="subject" value="회원가입양식">
    <table width="500" border="0" cellspacing="0">
      <tr>
       <td>아이디</td>
    <td> 
         <input type="text" name="id" size="20" maxlength="8">
         영문,한글 8자리 이내..
    </td>
      </tr>
    <tr>
       <td>패스워드</td>
    <td> 
         <input type="password" name="pw" size="20" maxlength="8">
         영문 4~8자리미만
    </td>
      </tr>
    <tr>
       <td>이름</td>
    <td> 
         <input type="text" name="Name" size="20">
    </td>
      </tr>
    <tr>
       <td>성별</td>
    <td> 
         <input type="radio" name="sex" value="male" checked>
         남 &nbsp;&nbsp;&nbsp; 
         <input type="radio" name="sex" value="female">여
    </td>
      </tr>
    <tr>
       <td>직업</td>
    <td>
         <select name="select">
              <option>학생</option>
              <option>회사원</option>
              <option>백수</option>
         </select>
    </td>
      </tr>
    <tr>
       <td>관심분야</td>
    <td>
         <input type="checkbox" name="hobby" value="travel">여행      &nbsp;&nbsp;&nbsp; 
         <input type="checkbox" name="hobby" value="sports">스포츠
          &nbsp;&nbsp;&nbsp; 
         <input type="checkbox" name="hobby" value="movie">영화감
         상&nbsp;&nbsp;&nbsp; 
         <input type="checkbox" name="hobby" value="game">게임
    </td>
      </tr>
    <tr>
       <td>자기소개</td>
    <td>
         <textarea name="comment" cols="50" rows="5"></textarea>
    </td>
      </tr>
    <tr align="center">
       <td colspan="2">
         <input type="submit" name="Submit" value="회원가입">
         &nbsp;&nbsp;&nbsp;
         <input type="reset" name="Submit2" value="취소">
    </td>
      </tr>
     </table>
    </form>
          </BODY>
    </HTML>

출처: http://xmljang.com.ne.kr/html



블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요

[HTML]사운드 태그

HTML 2014. 7. 9. 09:00
옵션
설명
<bgsound src="음악주소">
 주로 홈페이지의 배경음악을 넣는 데 사용하는 태그입니다.
<object src="음악주소">

 이건 익스플로어 전용태그입니다.

 이 태그를 사용해서 음악을 넣으면 새로운 창 하나가 나오면서 음악이나 무비를 재생하게됩니다.

 지금은 이 태그보단 아래 태그가 더 많이 사용된답니다.

<embed src="음악주소">
embed 태그는 원래 넷스케이프 전용태그인데요, 익스플로어에서도 똑같이 잘 됩니다.

 

bgsound 태그의 속성


옵션
설명
<bgsound src="음악주소">
  URL 주소 / 음악 파일의 위치를 지정해서 적어줍니다.
<bgsound loop=true/ false>
  음악을 계속해서 반복 재생할것인지를 정합니다. true 가 반복재생입니다.
<bgsound autostart=true|false>
  시작할때 자동으로 연주할것인지를 묻습니다. 역시 true 가 자동재생입니다.
<bgsound volume=숫자>
  볼륨 크기를 정해주는 부분입니다.
  • 이 태그는 일단 음악파일을 전체 다운로드를 한 뒤 재생을 시작
  • 용량이 큰 mp3 나 wave 파일은 음악이 나오기까지 무지 오래 걸림
  • 보통은 상대적으로 용량이 적은 mid 파일을 사용.

embed 태그의 속성 


옵션
설명
<embed src="음악주소">
 URL 주소 / 음악 파일의 위치를 지정해서 적어줍니다.
<embed loop=true/false>
 음악을 계속해서 반복 재생할것인지를 정합니다. true 가 반복재생입니다.
<embed hidden=true/false>
 음악조절판을 나타내는지의 여부를 결정합니다. true 가 보이는거겠지욥.
<embedwidth=숫자 height=숫자>
 음악 조절판의 가로 / 세로 크기를 정해줍니다.
  • embed 태그는 bgsound 와는 달리 실시간방식으로 음악을 재생

 

 리얼플레이어 파일 사용법

    <embed src="리얼오디오파일주소" type="audio/x-pn-realaudio-plugin" height="수치" height="수치" controls="제어판 옵션">

    <a href="리얼 음악주소" target="new"> 링크 </a>

    • 이 태그는 일단 음악파일을 전체 다운로드 한뒤 다운로드가 끝나면 재생을 시작. 
          따라서 비교적 용량이 작은 mid 나 wave파일을 주로 사용합니다.


출처: http://xmljang.com.ne.kr/html



블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요

[HTML] 기본태그

HTML 2014. 7. 8. 09:00

▶문서 배경 태그의 사용법

    <body bgcolor="색상"   background="이미지 주소"   text="색상"   link="색상" vlink="색상" alink="색상">

  • <body bgcolor="색상">                  : 윈도우 배경화면색 지정.
  • <body background="이미지 주소">  : 배경을 그림으로할때 쓰는 속성.
  • <body text="색상">                        : 표준 글씨색 지정.
  • <body link="색상">                        : 링크 부분의 색 지정.
  • <body vlink="색상">                      : 검색한 링크 부분의 색 지정.
  • <body alink="색상">                      : 링크된글자를 누르는순간의 색을 지정.

▶<P> 태그의 사용법

  • <P> 내용 </P> : 문단을 나누는 태그입니다.

▶빈칸 사용하기  

  • &nsp; : 빈칸을 만들어 줍니다.(빈공간,글씨의 공란을 대신함.)

▶주석 사용하기

  • 한 줄을 주석으로 사용할 때는 <! 주석> 태그를 이용하고 여러줄을 주석으로 이용하려면 <!-- , //--> 태그를 이용합니다.
  • 주석태그는 브라우져에서는 보이지 않는 태그입니다.

▶<br> 사용하기

  • <br> 태그는 줄을 바꾸고 싶을 때 사용하는 것입니다.
  • 여러줄을 띄우고 싶을 때는 br 의 횟수를 더 많이 해주면 됩니다.

▶문단 정렬하기

  • <p align="정렬형태"> : left 나 right 를 써서 줄 단위로 정렬합니다.
  • <center></center> : 여러문단을 중앙 정렬합니다.

▶선 태그 사용하기

  • <hr size="크기" width="크기" align="정렬형태" style="color:색상;" noshade>
  • 수평선 그리기 태그입니다.
  • size : 픽셀 단위의 선의 두께입니다.
  • width : 선의 수평길이 입니다.
  • align : 길이가 화면보다 작을 때 수평선이 그려질 위치입니다.
  • noshade : 음영 효과 없는 보통의 선 그리기 입니다.
  • style="color:색상;" : 선의 색상을 바꿔줍니다.

▶글자 크기 변경

  • <basefont size="크기"> : 전체 글자 크기를 지정.
  • <font size="크기"> : 일부의 글자 크기를 변경.

▶글자색 변경

  • <font color="색상"> : 글자의 색상 지정.

▶글꼴 변경

  • <font face="글꼴명"> : 글꼴 지정.
  • <font size="크기" color="색상" face="글꼴"> :  글자의 크기와 색상,글꼴을 동시에 바꿈

▶글자 모양 정리

    태그

    관용적 표현(결과)

    <i>내용 <i>
    <em>내용</em>
    <dfn>내용</dfn>
    <var>내용</var>
    <cite>내용</cite>

    이탤릭체 모양

    <b>내용</b>
    <strong>내용</strong>

    진한 모양

    <tt>내용</tt>
    <code>내용</code>
    <samp>내용</samp>
    <kbd>내용</kbd>

    타자체
    courier 체로 표현.

▶입력된 그대로 출력하기

  • <pre>내용</pre> : 화면에 나와 있는 내용을 그대로 출력합니다.

▶그림 삽입하기

    <img src="이미지 파일 경로(주소)" alt="그림 설명"

        align="top | bottom | middle | left | right | texttop | absmiddle | baseline | absbottom | "

            width="가로크기" height="세로크기"   border="이미지 테두리 두께"  hspace="좌우여백" vspace="상하여백">

  • alt ="그림설명"  : 그림의 설명을 삽입합니다.
  • width="가로크기" height="세로크기"  : 그림을 자신이 원하는 크기만큼 조정합니다. 숫자가 높을 수록 커집니다.
  • align="정렬위치" : 그림의 위치 설정하기
    • top | 이미지의 위쪽에 문자가 나타난다.
    • bottom | 이미지의 아래쪽에 문자가 나타난다.
    • middle | 이미지의 중간에 문자가 나타난다.
    • texttop | 이미지와 문자를 정렬할 때 가장 높은 글자를 기준으로 이미지가 정렬
    • absmiddle | 그림의 가운데를 기준으로 정렬
    • baseline | 이미지의 가장 아랫부분을 기준으로 문자를 정렬
    • absbottom | 이미지의 아래쪽에서 현재 문단의 아래쪽을 기준으로 정렬
    • left | 문자를 기준으로 이미지가 왼쪽에 정렬
    • right | 문자를 기준으로 이미지가 오른쪽으로 정렬
  • border="테두리 두께"  : 그림의 경계선을 만듭니다.
  • hspace="크기" : 그림의 좌우 여백을 지정합니다.
  • vspace="크기" : 그림의 상하 여백을 지정합니다


출처: http://xmljang.com.ne.kr/html



블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요

[HTML] 테이블 태그

HTML 2014. 7. 7. 09:00


(1) 기본형 표 만들기


<table border="숫자">

      <caption>  표제목  </caption>

      <tr>

             <th> 셀 제목 </th>

     </tr>

      <tr>

             <td> 셀내용 </td>

     </tr>

</table>

o<tr>  : table row

o<th> : table head

o<td> : table data

(2) 합쳐진 셀의 표 만들기

  • <TH ROWSPAN=(셀갯수)>.....</TH> : 헤더에서 셀갯수의 줄을 합친다.
  • <TH COLSPAN=(셀갯수)>.....</TH> : 헤더에서 셀갯수의 칼럼을 합친다.
  • <TD ROWSPAN=(셀갯수)>.....</TD> : 셀내용에서 셀갯수의 줄을 합친다.
  • <TD COLSPAN=(셀갯수)>.....</TD> : 셀내용에서 셀갯수의 칼럼을 합친다.

(3) 표 크기 조정과 정렬

  • 표 크기 조정

o    <TABLE BORDER=(숫자)   WIDTH=(픽셀수)>.....</TABLE> : 표테두리굵기, 넓이 조정

o    <TABLE BORDER=(숫자)   HEIGHT=(픽셀수)>.....</TABLE> : 표테두리굵기, 높이 조정

o    <TABLE BORDER=(숫자) WIDTH=(픽셀수) HEIGHT=(픽셀수)>.....</TABLE> : 표테두리굵기, 넓이, 높이 조정

  • 정렬
    • <TH ALIGN=LEFT>.....</TH> : 헤더 내용을 셀 왼쪽으로 정렬
    • <TH ALIGN=CENTER>.....</TH> : 헤더 내용을 셀 가운데로 정렬
    • <TH ALIGN=RIGHT>.....</TH> : 헤더 내용을 셀 오른쪽으로 정렬
    • <TD ALIGN=LEFT>.....</TD> : 셀 내용을 셀 왼쪽으로 정렬
    • <TD ALIGN=CENTER>.....</TD> : 셀 내용을 셀 가운데로 정렬
    • <TD ALIGN=RIGHT>.....</TD> : 셀 내용을 셀 오른쪽으로 정렬

(4) 테이블의 부가적인 속성

부가적인 속성

기능

border="수치"

표의 테두리 두께를 조정

bordercolor="색상" , "색상코드"

표의 테두리의 색을 지정

WIDTH="수치" , "수치%"

표의 가로넓이를 지정된 수치만큼 정해줍니다.

 백분율 사용가능합니다.

HEIGHT="수치" , "수치%"

표의 세로넓이를 지정된 수치만큼 정해줍니다.

 백분율 사용가능합니다

CELLSPACING="수치"

셀의 구분 선굵기를 조정합니다.

CELLPADDING="수치"

셀의 안쪽여백의 간격을 조정합니다.

bgcolor="색상" , "색상코드"

표의 배경색을 지정해줍니다


(5) 테이블 속성을 이용한 예


table 속성변화

결과

소스 설명

<table border=5>
    <tr>
        <td>border</td>
    </tr>
</table>

border

표의 테두리 두께를 결정합니다.
숫자가 커질수록 두꺼워지며 기본값은 0 입니다.

<table >
    <tr>
        <td>border</td>
    </tr>
</table>

border

border 값을 지정하지 않았을 경우입니다.
기본값이 0 이므로 테두리가 보이지 않져.

<table border=1 cellpadding=5>
    <tr>
        <td>sellpadding/td>
    </tr>
</table>

cellpadding

셀 내부에서 글자와의 거리를 넓힐때 사용합니다.

<table border=1 cellspacing=5>
    <tr>
        <td>cellspacing</td>
    </tr>
</table>

border

셀 사이의 간격을 조절합니다.


(6) <td> 태그의 속성


속성

설명

nowrap

셀의 끝에서 다음줄로 자동으로 내려가는 것을 금지합니다.

width

픽셀값 또는 % 를 적용하여 셀의 가로 넓이를 지정합니다.

height

픽셀값 또는 % 를 적용하여 셀의 세로 높이를 지정합니다.

align

셀 내용의 가로방향 정렬을 나타냅니다.
역시 세가지 정렬방식이 있어여. ( align = center, left ,right )

valign

셀 내용의 세로방향 정렬을 나타냅니다.
정렬방식에는 ( valign = top, middle, bottom, baseline )

bgcolor="black"

<td> 에만 따로 배경색 지정을 할 수 있어여
색상은 이 셀에만 적용이 됩니다.


출처: http://xmljang.com.ne.kr/html

블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요

[HTML] 링크태그

HTML 2014. 7. 4. 09:00

▶ 링크란

  • 웹서핑을 하면서 글자나 그림을 클릭하면 다른 웹페이지나, 그림으로 연결되는 그 부분이 바로 하이퍼링크를 해놓은 부분입니다.
  • 즉, 링크를 클릭하면 다른 장소로 이동할 수 있게 해주는 태그가 하이퍼 링크 태그라고 부릅니다.

▶ <a href="링크 시킬 주소" target="_값" > 글자 </a>

  • 글자를 클릭하면 링크시킬 주소로 연결됩니다.
  • target="_blank"  : 새창으로 주소가 연결되게 하는 속성
  • target="_self"  : 현재 보고 있는 창 주소가 연결되게 하는 속성
  • target="_parent"  : 프레임을 사용할 경우 한 단계 상위 프레임에 문서를 보여줌
  • target="_top"  : 프레임을 사용할 경우 가장 상위 프레임에 문서를 보여줌

▶ <a href="링크 시킬 주소"><img src="그림 주소"></a>

  • 이미지를 삽입하여 링크를 원하는 경우

▶ <a href="mailto:메일주소">운영자에게 메일보내기</a>

  • 메일보내기 링크

▶ <a href="음악주소">제목</a>

  • 제목을 클릭했을때 음악이 나옴

출처: http://xmljang.com.ne.kr/html

블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요

[HTML] HTML의 개념

HTML 2014. 7. 3. 09:00

 HTML(Hypertext Markup Language)

  • 월드와이드웹(WWW)에서 하이퍼텍스트 문서를 만들기 위해 사용되는 기본언어
  • 쉽게말해 인터넷을 통해 볼 수 있는 문서를 만들 때 사용되는 프로그래밍 언어
  • 인터넷에서 접할 수 있는 모든 웹 페이지들은 HTML로 작성됩니다.
  • 태그(TAG) HTML에서 사용하는 명령어입니다
  • 웹 브라우저(익스플러러, 네스케이프등등) HTML로 작성된 문서를 해석하여 화면에 출력하게 됩니다.

 HTML 문서의 특징

  • 태그는 대소문자 구분이 없습니다. , 파일 이름은 소문자로 해주는 것이 좋습니다.
  • HTML 문자열 사이에 있는 하나 이상의 공백은 무시됩니다.
  • 태그가 중복 되지 않도록 주의합니다.
  • HTML 태그를 잘못 사용했다 하더라도 브라우져에서는 에러를 발생시키지 않습니다.

 HTML 문서의 구성

  • <HTML> 태그 : HTML 문서 시작
  • <HEAD> 태그 : 시작을 알리는 태그입니다.
  • <TITLE> 태그 : 문서 제목 정의(브라우저 타이틀바에 표시됨).
  • </TITLE> 태그 : 문서의 제목 끝. *</HEAD> 태그 : 시작을 알리는 태그 끝.
  • <body> 태그 : HTML 문서의 본문 부분
  • </body> 태그 : 본문내용과 태그 끝.
  • </HTML> 태그 : HTML 문서 마무리

 

<html>

       <head>

              <title>문서제목</title>

 

       </head>

       <body>

               이 곳이 본문의 내용

      </body>

  </html>

 

출처: http://xmljang.com.ne.kr/html

 

블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요

코드 구문 형광펜, SyntaxHighlighte 입니다.


이미 아실 분은 아실 만한 스크립트입니다. 설치 방법은 아주 간단합니다. 압축을 먼저 푸시고 index.html 파일을 열어 <pre class="brush: js;"></pre> 사이에 표시할 코드를 삽입하기만 하면 됩니다.


syntaxhighlighter_3.0.83.zip



관련글 : [HTML] nicEditor 위지윅 웹에디터

            [HTML] editarea 웹에디터


출처: http://alexgorbatchev.com/SyntaxHighlighter


블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요

아주 유용한 사이트 하나 소개할까 합니다. 사이트 도메인 이름도 "Layout it"입니다.

http://www.layoutit.com 은 이름 그대로 레이아웃을 구성할 수 있도록 해주는 툴을 제공하고 있습니다.


위지윅 웹에디터처럼 웹에서 레이아웃을 직접 구성하면서 자바스크립트를 넣거나 폼속성 컴포넌트, css 속성 등 다양한 기능으로 초보자도 쉽게 만들 수 있도록 했으며, 미리보기 기능과 자신이 구성한 레이아웃을 서버에 저장하거나 html 파일이나 zip 파일로 다운로드 할 수 있도록 하는 것이 큰 특징입니다.


아래 그림은 편집모드입니다.



다음 그림은 미리보기 했을 때의 화면입니다.



다음 그림은  구성한 레이아웃을 클라이언트로 내려받기 전의 화면입니다.



해당 사이트는 html5로 제작되어 윈도우 익스플로러 9 이하 버전에는 작동하지 않네요. 파이어폭스나 익스플로러 9, 크롬 등의 최신 버전에서 정상 작동합니다.


블로그 이미지

하보니

하보니와 함께하는 phP 초보

Tag CSS

댓글을 달아 주세요