1. body class="container"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>class test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
</head>
<!-- body에 class element를 적용한 경우 -->
<body class="container">
    <div>
        <h1>h1 Bootstrap heading(36px)</h1>
        <h2>h1 Bootstrap heading(30px)</h2>
        <h3>h1 Bootstrap heading(24px)</h3>
        <h4>h1 Bootstrap heading(18px)</h4>
        <h5>h1 Bootstrap heading(14px)</h5>
        <h6>h1 Bootstrap heading(12px)</h6>
    </div>
</body>
</html>
 cs

 

 

 

2. div class="container"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>class test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
</head>
<body>
<!--div에 class element를 적용한 경우 -->
    <div class="container">
        <h1>h1 Bootstrap heading(36px)</h1>
        <h2>h1 Bootstrap heading(30px)</h2>
        <h3>h1 Bootstrap heading(24px)</h3>
        <h4>h1 Bootstrap heading(18px)</h4>
        <h5>h1 Bootstrap heading(14px)</h5>
        <h6>h1 Bootstrap heading(12px)</h6>
    </div>
</body>
</html>
 cs

 

 

부트스트랩 적용시 class 요소를 body에 붙여도, div에 붙여도 둘 다 정상적으로 동작하는 것을 확인할 수 있다. 

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

'FrontEnd > CSS & HTML' 카테고리의 다른 글

HTML :: 하이퍼링크로 팝업창 열기  (0) 2016.05.12
HTML :: <pre>  (0) 2016.04.02
HTML :: select optgroup  (0) 2016.03.10
HTML :: id vs name  (0) 2016.03.01

원래 프로젝트는 자바스크립트로 버튼 클릭시 함수로 window.open() 을 걸어 팝업창을 띄웠었는데

오늘은 하이퍼링크를 이용한 팝업창 띄우기를 도전해봤다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>        
    <head></head>
    <body>
    <table>
        <tr>
            <td align=right colspan=7>
                <a href="MemberServlet.do">[전체목록]</a>ㅣ
                
                <!-- 회원가입 링크를 새 창(팝업창)으로 열기 -->-->
                <a href="memberInsert_form.html"
                    onclick="window.name='MemberServlet.do';window.open(this.href, 'insert',
                    'width=450,height=320,resizable=no,scrollbars=no,status=no');return false;">[회원가입]</a>
            </td>
        </tr>
    </table>
    </body>
</html>
 cs

 

href에 링크로 연결될 페이지를 입력하고 onclick에는 원래 버튼을 누르면 연결될

자바스크립트 함수 안에 들어있던 소스를 그대로 붙여넣었다.

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

'FrontEnd > CSS & HTML' 카테고리의 다른 글

CSS : 부트스트랩(Bootstrap) 사용시 class container 요소의 위치 차이 비교  (0) 2016.10.14
HTML :: <pre>  (0) 2016.04.02
HTML :: select optgroup  (0) 2016.03.10
HTML :: id vs name  (0) 2016.03.01

<pre> ~ </pre>

 

Line break, 강제적 줄바꿈

일반적으로 html에서는 키보드의 enter, tab, space 등을 무조건 공백 하나로만 취급함

그러나 <pre> 태그 안의 문자열들에 대해서는 원하는 곳에 배치 가능

공백이나 문장 구조를 쉽게 표현 가능

다른 태그를 안에 사용하면 안 됨

여러 줄의 코드를 그대로 출력하고자 할 때 블록 형태로 사용됨

 





<pre> 태그 쓰지 않았을 때




<pre> 태그 썼을 때

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

'FrontEnd > CSS & HTML' 카테고리의 다른 글

CSS : 부트스트랩(Bootstrap) 사용시 class container 요소의 위치 차이 비교  (0) 2016.10.14
HTML :: 하이퍼링크로 팝업창 열기  (0) 2016.05.12
HTML :: select optgroup  (0) 2016.03.10
HTML :: id vs name  (0) 2016.03.01

 

 

 

 

 select element 중 optgroup이라는 엘리먼트가 있는데,

label이라는 카테고리 값을 주고 그 안에 부수적인 옵션 값을 넣을 수 있다.

 

 

웹으로는 이렇게 나온다.

카테고리인 스포츠는 선택할 수 없다.

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

'FrontEnd > CSS & HTML' 카테고리의 다른 글

CSS : 부트스트랩(Bootstrap) 사용시 class container 요소의 위치 차이 비교  (0) 2016.10.14
HTML :: 하이퍼링크로 팝업창 열기  (0) 2016.05.12
HTML :: <pre>  (0) 2016.04.02
HTML :: id vs name  (0) 2016.03.01

둘 다 element 식별용으로 사용되며, 특별한 경우가 아니면 보통은 id와 name을 동일하게 설정한다.

 

 

1. id

document.all.id.value

id.value

document.getElemnetById("폼id").value

 

중복으로 사용이 불가하다.

자바스크립트에서 다룰려고 지정하는 값.

id로 설정된 값은 서버 쪽의 파라미터로 넘어가지 않기 때문에 서버 쪽에서는 접근이 불가능하다.

 

 

2. Name

document.폼객체명.폼원소명.value

document.getElementsByName("name");

 

페이지 안에서 중복되어 사용할 수 있다. 그렇기 때문에 getElementsByName()으로 메소드도 중복을 허용한다.

action에 해당하는 페이지로 전달을 하는 파라미터로 쓰인다.

get/post 방식으로 값을 전달하고 싶은 태그에 사용한다(서블릿을 통하여 HttpServletRequest로 전달)

form 객체들 (ex. input, radiobox, checkbox)에 전송되는 파라미터의 key 값으로 사용된다.

request.getParameter(name)으로 값을 가져온다.

 

같은 name이 여러개일 경우에는 배열의 형태로 가져올 수 있다.

 

 

* input 태그 지정시에는 id와 name 두가지 모두 사용 가능

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

'FrontEnd > CSS & HTML' 카테고리의 다른 글

CSS : 부트스트랩(Bootstrap) 사용시 class container 요소의 위치 차이 비교  (0) 2016.10.14
HTML :: 하이퍼링크로 팝업창 열기  (0) 2016.05.12
HTML :: <pre>  (0) 2016.04.02
HTML :: select optgroup  (0) 2016.03.10

+ Recent posts

티스토리툴바