[02] form, input, label, textarea, select, div, span, css, id, class, style, img

|


- 2015.03.10 웹보안

 

 

1. form tag


[기본]

 

<body>
 <form>
  <input type="text" name="search" />
  <input type="submit" />
 </form>
</body>

 


[form get 방식]


<body>
 <form method="get">
  <input type="text" name="search" />
  <input type="submit" />
 </form>
</body>

=> 주소에 입력해서 값을 보냄

 

 


[form post 방식]


<body>
 <form method="post">
  <input type="text" name="search" />
  <input type="submit" />
 </form>
</body>

=> 비밀스럽게 보냄

 

 

 


2. form - input type


<body>
 <form>
  <input type="text" name="search" /><br />
  <input type="password" name="password" /><br />
  <input type="file" name="file" /><br />
  <input type="submit" />
 </form>
</body>


아래 처럼 다양한 것을 확인해볼 수 있다.


<body>
 <form>
  <input type="text" /><br />
  <input type="botton" /><br />
  <input type="checkbox" /><br />
  <input type="file" /><br />
  <input type="hidden" /><br />
  <input type="image" /><br />
  <input type="password" /><br />
  <input type="radio" /><br />
  <input type="reset" /><br />
  <input type="submit" />
 </form>
</body>

 


3. form - label


<body>
 <form>
  <label>이름</label>
  <input type="text" /><br />
 </form>
</body>


보통은 아래처럼 많이 사용한다.


<body>
 <form>
  <label for="name">이름</label>
  <input id="name" type="text" /><br />
 </form>
</body>

 

 

 


4.textarea


<body>
 <form>

 <textarea>

      show me the money.

 </textarea>

</body>

 

 

 

 

5. select

 

<select multiple="multiple">
   <optgroup label="HTML 5">
      <option>김밥</option>
      <option>떡볶이</option>
      <option>순대</option>
      <option>오뎅</option>
   </optgroup>
   <optgroup label="CSS 3">
      <option>Animation</option>
      <option>3D Transform</option>
   </optgroup>
</select>

 

- optgroup 선택옵션을 묶을 때 사용

- select 에 multiple이라는 옵션을 주면 여러게 고를수 있다.
- 스마트폰에서 좀 더 정확히 볼 수 있다)

 

 

 

 

6. div && span

 

<body>

   <div>Lorem ipsum</div>
   <div>Lorem ipsum</div>
   <div>Lorem ipsum</div>

   <span>Lorem ipsum</span>
   <span>Lorem ipsum</span>
   <span>Lorem ipsum</span>

</body>

 

- div, span : 공간 분할태그

- div : block방식 (하나씩 차례대로 다음줄에 출력)
- span : inline방식 (한줄안에 차례대로 출력)

 

*
h1 태그 - 블락 방식
p 태그 - 블락방식
a, i 태그 -인라인 방식

 

 

 

 

7. CSS Basic


<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        h1 {                            // 스타일 시트
            color: red;
            background-color: orange;
        }
        p{
            background-color: blue;
        }
    </style>
</head>
<body>
    <p>Hi Hello</p>
    <h1>CSS3 Selector Basic</h1>
    <p>The end</p>
</body>
</html>

 


* Tip


태그 자리에 * 를 줘서 태그를 주면 body 뿐 아니라 전체 모든 태그에 영향을 줌 ~ 까지만 알고 있기
ex)
        * {
            color: red;
        }


다중 속성 부여


        body, p, h1, h2, h3, h4, h5, h6 {
            margin: 0; padding: 0;     // 박스 속성
        }

 

 

 


8. id 와 CSS 연동


<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        /* id 속성값으로 header를 가지는 태그의 스타일을 지정*/
        #header {
            width: 800px;
            margin: 0 auto;
            background: red;
        }


        #wrap {
            width: 800px;
            margin: 0 auto;
            overflow: hidden;
        }


        #aside {
            width: 200px;
            float: left;
            background: blue;
        }


        #content {
            width: 600px;
            float: left;
            background: green;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>Header</h1>
    </div>
    <div id="wrap">
        <div id="aside">
            <h1>Aside</h1>
        </div>
        <div id="content">
            <h1>Content</h1>
        </div>
    </div>
</body>
</html>

 

 

 


9. class 속성 값으로 style 주기


1) Basic


<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
       /* class 속성값으로 select를 가지는 태그의 color 속성에 red 키워드로 적용*/
       .select { color: red; }
    </style>
</head>
<body>
    <ul>
        <li class="select">Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li class="select">Lorem ipsum</li>
        <li>Lorem ipsum</li>
    </ul>
</body>
</html>

 

 


2) 여러 class 의 속성을 가져다 사용


<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
       /* class 속성값으로 item을 가지는 태그의 color 속성에 red 키워드로 적용*/
       .item { color: red; }


       /* class 속성값으로 header를 가지는 태그의 background-color 속성에 blue 키워드로 적용*/
       .header { background-color: blue; }
    </style>
</head>
<body>
    <h1 class="item header">Lorem ipsum</h1>
</body>
</html>

 

 


3) 특정 태그 및 클래스에 style 적용


<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
       /* li 태그 중 class 속성값으로 select를 가지는 태그의 color 속성에 red 키워드를 적용*/
       li.select { color: red; }
    </style>
</head>
<body>
    <h1 class="select">Lorem ipsum</h1>
    <ul>
        <li class="select">Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
    </ul>
</body>
</html>

 

 


4) style 과 태그의 속성을 일치시키자.


<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        /* input 태그 중에서 type 속성값을 text로 가지는 태그의 background 속성 적용*/
        input[type=text] {background: red; }
    </style>
</head>
<body>
    <form>
        <input />                     // type을 지정하지 않으면 기본 text가 되지만 css 적용안됨
        <input type="text" />
    </form>
</body>
</html>

 

 


5) 스타일 속성 세분화 - img 확장자


<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        /* img 태그 중에서 src 속성값이 png로 끝나는 태그의 border 속성에 3px solid red 속성 적용*/
        img[src$=png] { border: 3px solid red; }
     
        /* img 태그 중에서 src 속성값이 png로 끝나는 태그의 border 속성에 3px solid red 속성 적용*/
        img[src$=jpg] { border: 3px solid green; }


        /* img 태그 중에서 src 속성값이 png로 끝나는 태그의 border 속성에 3px solid red 속성 적용*/
        img[src$=gif] { border: 3px solid blue; }
    </style>
</head>
<body>
    <img src="jajq.png" width="200" height="250" />
    <img src="node.jpg" width="200" height="250" />
    <img src="ux.gif" width="200" height="250" />
</body>
</html>

 

 


* Tip - 확장자 말고도 다양한 옵션이 있음


        img[src$=jpg] { border: 3px solid green; }   // 특정 값으로 끝남
        img[src^=jpg] { border: 3px solid green; }   // 특정 값으로 시작
        img[src~=jpg] { border: 3px solid green; }   // 특정 값을 단어로 포함
        img[src*=jpg] { border: 3px solid green; }   // 특정 값을 포함

 

 

 

And