본문 바로가기
Coding/Language - JavaSCript

JavaScript - 제1강

by 그냥그렇듯이 2017. 11. 3.
반응형

- HTML -

HTML의 태그

<html> ~ </html> 

 HTML선언

<head> ~ </head> 

 문서 정보

<title> ~ </title>  

 제목

<body> ~ </body>

 문서 본문

<h 레벨> ~ </h 레벨> 

 레벨1부터 6까지 제목을 설정한다. ( 1: 대제목 -> 6: 소제목)

<a href="URL>~</a>

  클릭시 URL로 이동

 <em>~</em>

 문자 이탤릭

 <strong>~</strong>

문자 Bold체 

 <hr>

가로선 표시 

<p> ~ </p> 

단락 설정 

<b> ~ </b>

~ 부분 굵은 글꼴로 표시 

<u> ~ </u> 

~ 부분 밑줄 

<br>

줄바꿈 

<pre> ~ </pre>

브라우저에 따라 모양을 바꾸지 않고 입력 그대로 표시 

 &amp;

& 

 &lt;< 

 &gt;

> 

 &quo;

" 

표

 <table>

<caption> ~ </caption>

<tr>   <td>  /td>    </tr>

</table>

<table> ~ </table> 테이블 선언

<caption> ~ </caption> ~가 표의 제목

<tr> </tr> 행

<td> </td> 셀 

 <table border = "5" width="150">

</table>

 border 테두리의 너비를 픽셀 단위로 지정, default는 테두리 없음임.

width 표 너비를 픽셀 단위로 지정. default는 문자열의 너비

 <table cellspacing="10" cellpadding="15">

 cellspacing 바깥쪽 테두리와 안쪽 테두리의 너비를 픽셀 단위로 지정
cellpadding 셀의 공백을 픽셀 단위로 지정

 <table>

<tr><td rowspan="2"></td></tr>

<tr><td colspan="2"></td></tr>

</table>

rowspan 셀을 세로로 병함

colspan 셀을 가로로 병함 

 프레임

 <html>

<head><title> </title></head>

<frameset row="20%, 80%">

<frame src = "A.html" name="menu>

<frameset cols="20%, 80%">

<frame src ="B.html" name="data">

<frame src ="C.html" name ="mycontents">

</frameset>

<noframes>

<body>

이페이지는 프레임을 사용하고 있습니다.

</body>

<noframes>

<frameset row="20%, 80%">~</frameset>
프레임을 가로로 1:4로 분할한다. 세로일때는 cols를 사용한다.

<frame src="A.html" name='menu">

<a href="0603.html" target="mycontetns">6월 3일 (월)</a>
프레임에 표시할 파일명 0603.html지정, 페이지를 표시할 프레임명mycontents 지정. mycontents 프레임에 0603.html이 표시된다.

 폼 - 데이터를 입력 선택하기 위한 모듈. 서버로 전달됨

 <html>

<title>입력폼</title>

<body>

<form action="http://localhost/cgi-bin/getname.cgi" method="GET"> 이름 <input type="text" name="NM"><br>
<input type ="submit" value="보내기><br>

</form>

</body>

</html>

 <form action="데이터송신처" method="송신방법">~</form>
데이터송신처 - CGI나 서버측 스크립트의 url을 지정한다.
송신방법 - POST 또는 GET으로 지정한다. 

<input type="폼 부품의 종류" value="값">
폼 부품의 종류를 지정하고 송신할 값을 지정

 입력한 데이터 받기

**폼에 입력한 데이터를 전달하는 방법(method)는 GET과  POST가 있다.

POST로 전달된 데이터는 키보드로 입력된 것과 똑같이 STDIN(표준 입력)이라는 방법으로 전달 받는다. 
POST로 전달된 파라미터는 주소창에 표시되지 않는다.
예) http://localhost/jsbook/postname.cgi


GET으로 전달된 데이터는 QUERY_STRING(환경 변수)이라는 웹 서버의 OS가 갖고 있는 변수에 저장된다.
GET으로 전달된 파라미터는 주소창에 표시된다. 또한, 주소창에 직접 파라미터를 지정해서 전달할 수 도있다.
GET으로 전달할 때는 환경변수에 저장할 수 있는 문자길이에 제한이 있다.
예) http://localhost/jsbook/getname.cgi?NM=yurina


CSS

 <div>태그와 <span>태그
<div>태그와 <span>태그는 아무런 기능도 가지고 있지 않다. HTML태그에 CSS를 직접기술할 때는  style속성을 사용하여 스타일의 적용 범위를 지정한다. 한 단위의 텍스트에 스타일을 적용하고자 할 때에는 <div>태그를 사용한다.
예) <div style="color: red"> 이 문자는 빨간색입니다. </div>

특정 단어 등 텍스트의 일부에 스타일을 적용하고자 할 때는 <span>태그를 사용한다.
예) 이 문자는 <span style="color: red">빨간색</span>입니다.

 HTML파일에 CSS 기술하기

페이지 전체에 스타일을 통일하려면 HTML파일 헤더에 <style>태그를 사용하여야 한다.

<html>
<head>
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
body {color:gray}
h1 {color:red}
</style>
</head>
<body>
<h1>CSS를 기술할 장소</h1>
<p>헤더에 기술할 수 있습니다.</p>
...
</body>
</html>


스타일 계승
HTML 요소에서 모자 관계가 성립하는 경우 자식요소에 프로퍼티값이 지정되어 있지 않으면, 부모 요소의 프로퍼티 값을 상속받는다.

 


외부 스타일 시트 읽어오기
CSS파일을 별도로 작성하고 HTML파일의 <link>태그로 지정해서 읽어올 수 있다. 관리가 용이하다.

picbook1.html, pickbook2.html 
...
<head>
<meta http-equiv="content-style-type" content="text/css">
...
<link rel="stylesheet" href="abc.css" type="text/css">
</head>
...

abs.css
body{ color: red; font-size: small;}

CSS의 우선순위


1. HTML 태그에 직접 기술된 CSS (style 속성에 의한 설정)
2. HTML 파일 안에  기술된 CSS (<style> 태그에 의한 설정)
3. 외부 스타일 시트를 읽기 (<link> 태그로 설정)

문자스타일 

 p {font-family :serif}

 <p> 태그의 글꼴을 명조 계열로 지정합니다.
serif 명조계열
sans-serif 고딕계열
cursive 필기체, 궁서체 계열
monospace 문자 폭이 같은 글꼴

 p {font-size: small}


xx-small
x-small
small
medium
large
x-large
xx_large

p {font-weight: bold}


lighter
normal (기본값)
bold
bolder

 p {font-style: italic}

 
italic
normal

 p {text-decoration: underline}


overline
underline
line-through
none (기본값) 

 p {text-transform: capitalize}

 
capitalize
uppercase
lowercase
none


 p {text-align: right}


left
right
center

 p {text-indent: 3cm}

 
들여쓰기

여러개의 태그에 같은 스타일 지정하기


 h1, h2 {font-size: italic}


모든 태그에 같은 스타일 지정하기


* {font-family: serif} 모든 HTML 태그의 글꼴을 명조계열 글꼴로 지정합니다.
 

csstags.html


<html>
<head>
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" href="css/csstag.css" type="text/css">
</head>
<body>
<h1>이탤릭체 글꼴</h1>
<p>이탤릭체 글꼴은<br>
알파벳을 오른쪽으로 기울인 글꼴입니다.<br>
국어에서는 일반적으로 <span>기울임 글꼴</span>을 말합니다.</p>
</body>
</html>


 csstag.css


* {font-family:serif}
h1, h2 {font-family:sans-serif}
span {
        font-style: italic;
        font-weight: bold;
}


특정태그에 같은 스타일 지정하기

 

셀렉터에 클래스명을 붙여서 스타일을 지정하면 동일 클래스명을 갖고 있는 태그에 스타일을 지정할 수 있다. 반복해서 작업할 때 편리하다.

예)
p.picbook {
    font-size: x-large;
    color: red;
}

<p>태그의 picbook 클래스에 글꼴 크기는 크게, 문자 색은 빨간색으로 지정한다.

...
<p class="picbook">Javascript </p>
...


모든 태그에 같은 스타일 사용하기

 

  .picbook {color: gray}
  모든 태그의 picbook 클래스에 문자 색을 회색으로 지정한다.


특정 태그에 스타일 지정하기


 미리 ID를 붙여서 스타일을 설정해 두면 지정한 ID를 가지고 있는 태그에 스타일을 지정할 수 있다. 단, 한페이지에서 같은 ID를 사용해서는 안된다.

예)
p#picbook-js {font-weight: bold}

<p id="picbook-js">JavaScript가 보이는 그림책</p>

 

특수 스타일

링크 위에 마우스 포인터를 올려놓을 때 스타일 바꾸기

 

a:hover {
     color: red;
     font-family: serif;
     font-weight: bold;
}


링크가 활성화될 때 스타일 바꾸기


a:active {
     color: red;
     font-weight: bold;
     position: relative;
     top: 2px;
     left: 2px;
}


<문제>
다음 표를 그리는 HTML문을 작성하세요.

- 가위바위보 -

 

 유리나

 승

무승부

패 

 1회

 O

 

 

 2회

 

 

O 

 3회

 

O 

 

<html>
<head>
<body>
<table border="1">
<caption>- 가위바위보 -</caption>
<tr align=center>
   <td rowspan="2">&nbsp;</td>
   <td colspan="3">유리나</td>
</tr>
<tr>
   <td>승</td>
   <td>무승부</td>
   <td>패</td>
</tr>
<tr>
   <td>1회</td>
   <td align=center>O</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
</tr>
<tr>
   <td>2회</td>
   <td>&nbsp</td>
   <td>&nbsp;</td>
   <td align=center>O</td>
</tr>
<tr>
   <td>3회</td>
   <td>&nbsp;</td>
   <td align=center>O</td>
   <td>&nbsp;</td>
</tr>
</table>
</body>
</head>
</html>

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

관련글

댓글

티스토리툴바