html 태그(이미지, 표, 링크, 오디오, 비디오) / javascript 문법, 변수, 입/출력에 대해서 정리한다.
HTML tag
3. 이미지( jpg, png, bmp, ... )
- 내용이 없는 태그
- 속성을 통해서 이미지의 경로만 표현: src
- <img src="path" />
ex) http://img.etnews.com/photonews/1607/829691_20160728165237_786_0001.jpg
- path: local path, URL
- img는 인라인 태그이기 때문에 하나의 블록을 다 차지하지 않고 크기에 따라 달라진다.
( img 태그를 이용해서 외부에 있는 그림이나 local에 있는 그림을 가져와서 웹서버에서 공유 할 수 있다 )
( 인터넷에 있는 그림을 그림 주소만 가져와서 img 태그를 이용해서 해당 웹서버에 공유 시켜봤다 )
( img 태그의 속성을 이용해서 width나 height로 그림의 크기를 마음대로 지정해 줄 수 있다 )
( 그림의 크기가 아까와는 다르게 width=200, height=200 픽셀의 크기로 정사각형 모양이 된 걸 볼 수 있다 )
4. 표: table
<table>
<thead>
</thead>
<tbody>
<tr>
<th></th>
...
</tr>
<tr>
<td></td>
...
</tr>
</table>
* 표는 간단한 화면의 레이아웃 구성에도 많이 쓰인다.
* talbe 태그에서도 head와 body로 나뉘고 행을 나타내는 <td> 태그와 열을 나타내는 <tr>태그,
그리고 제목을 나타내는 <th> 태그가 있다.
- bootstrap 사용해보기
* bootstrap을 사용 해보기 위해서 wget으로 /var/www/html로 받아온다.
( bootstrap 홈페이지 메인 화면이고 bootstrap을 이용하면 디자인 부분을 손쉽게 꾸밀 수 있다 )
( html head 부분에 link 태그를 이용해서 다운로드한 bootstrap의 경로를 적어줌으로써
옆에 결과를 보면 해당 html 파일에 bootstrap이 적용 된걸 볼 수 있다 )
( bootstrap에 보면 디자인을 바꿀수 있는 여러가지 기능이 많이 나와있는데 위 그림과 같이
table 태그 안에 class 속성으로 지정해주면 bootstrap이 지원해주는 디자인으로 테이블이 변경 되는걸 볼 수 있다 )
!zip 패키지 설치
#>yum install zip.i686
...
#>yum install unzip.i686
...
#>unzip <path>
5. 링크
- 웹의 주요 기능중의 하나
- anchor, link
- anchor: <a href= > link </a>
* anchor는 페이지를 이동하는 경우에 많이 쓰이고
link 태그 같은 경우에는 외부에 있는 문서를 가져오거나 할 때 많이 쓰인다.
( achor 태그를 이용해서 글자에 링크를 걸 수 있으며 글자를 클릭하면 해당 주소인 http://www.naver.com으로
이동 되는걸 볼 수 있다 )
( anchor 태그로 되있는 Naver라는 글자를 클릭 했더니 해당 주소인 http://www.naver.com으로 이동 된걸 볼 수 있다 )
( anchor 태그는 글자 말고 그림에도 적용이 가능하기 때문에 위와 같이 그림에 적용을 해봤고
그림에 적용 할때는 img 태그가 anchor 태그의 하위에 위치해야 된다는 점만 주의해주면 된다 )
( anchor 태그를 사용한 그림을 클릭하니 href 속성에 설정된 주소인 http://daum.net으로 이동이 된걸 볼 수 있다 )
6. 오디오, 비디오
- <video>
https://www.w3schools.com/tags/tag_video.asp
- <audio>
https://www.w3schools.com/tags/tag_audio.asp
javascript
- html 요소들을 제어할 수 있는 수단
- 유일한 수단
0. 문법
- 문자의 끝에 ';'을 붙여준다.
1. 변수
- 변수를 따로 선언하지 않는다.
- 변수에 대한 정의만 해주면 된다.
- 변수의 타입은 정의될 때 결정된다. ( python과 같은 특성 )
- 변수 이름 앞에 'var' 키워드를 붙여준다.
2. 입/출력
1). 출력
- document.write ( 현재 페이지의 정보를 가지고 있는 document 객체 )
- alert
- console.log ( 콘솔에 직접 로그를 남길때 사용 )
<!doctype html>
<html>
<head>
<script>
var apple = 10;
// alert( apple );
// console.log("apple is: " + apple );
document.write("apple is: " + apple );
</script>
</head>
<body>
<script>
</script>
</body>
</html>
( alert를 이용하면 확인 버튼이 있는 메시지 박스를 하나 출력 한다는걸 알 수 있고 박스안에 글자를 담을 수 있다 )
( javascript는 웹브라우저 URL 입렦창에서도 실행 시킬 수 있다 )
* javascript 코드는 웹브라우저상에서도 URL 입력창에 javascript:<실행코드>를 입력하거나
개발자 도구에 console을 이용해서도 확인해볼 수 있다.
( 위에서 10이 출력되는 이유는 웹브라우저에서 이미 한번 javascript.html 파일이 로딩 되었기 때문에
웹브라우저안에 해당 페이지에는 apple 변수의 정보가 있는거고 해당 값은 충분히 바꿀수 있다 )
* 클라이언트에서 실행되는 언어이기 때문에 이런 확인이 가능하다.
( console.log를 이용하면 크롬 개발자 도구에서 확인해본 결과 화면상에는 출력이 되지 않지만 console에 log로
해당 값이 보이는걸 알 수 있고 보통 디버깅 할때 많이 사용한다고 한다 )
( document.write를 이용해서 화면상에서 내용을 출력이 가능하고 javascript는 + 기호를 이용해서 내용을 합칠때
내용의 타입은 상관하지 않고 모두 합쳐주는걸 볼 수 있다 )
* javascript에서는 '+'를 이용해서 python과 같이 문자열을 합칠 수 있지만 python과 다른 점은
변수 형태가 달라도 합쳐준다.
2). 입력
- confirm ( 사용자에게 True 혹은 False를 입력 받는다 )
- prompt ( 사용자에게 값을 입력 받을때 사용한다 / python의 표준 입력과 같다고 볼 수 있다 )
* 사용자가 취소를 누르게 되면 null값을 반환한다.
<!doctype html>
<html>
<head>
<script>
//var ret = confirm("집에 빨리 가고 싶죠?");
//document.write( ret );
var name = prompt("당신의 이름은?", "예). kim");
document.write( name );
</script>
</head>
<body>
<script>
</script>
</body>
</html>
( confirm을 이용하면 사용자에게 True 혹은 False를 입력 받을 수 있는 메시지 박스를 하나 출력할 수 있고
내용은 괄호 안에 적어주면 된다 )
( confirm이 반환하는 값을 알아보기 위해서 변수에 저장시켜 document.write를 이용해서
페이지에 출력 해봤더니 true라는 값이 나왔다 )
( prompt는 사용자에게 정보를 입력 받을 수 있는 메시지 박스를 보여주는 함수이다 )
( 'kkkkkkkkkkkkk'라고 입력하고 변수에 저장시켜 변수를 출력 해봤더니 사용자의 입력 값을 그대로 출력 하는걸 볼 수 있다 )
( prompt 함수에 인자 값이 2개까지 가능하고 첫번째 값은 메시지 박스에 위 문자열을 나타내고
두번째 값은 입력값의 기본값을 설정해주는 값이다 )
3). 제어문: 조건문, 반복문
- 조건문: if, switch
* javascript에서는 타입을 구별하지 않는다. ( php 또한 마찬가지이다 )
예). 1 == 1 / 1 == '1' javascript에서는 둘다 True이다...
* 그렇기 때문에 = 기호를 3개 이용해야 타입까지 같이 비교해준다. ( === )
( if 조건문은 python과 사용 방법이 동일하고 조건문과 confirm 함수를 이용해서 간단한 걸 만들어 봤다 )
( confirm 함수는 true 혹은 false를 반환 해주기 때문에 이런식으로 조건문과 함께 쓰면
확인 버튼을 눌렀을때와 취소버튼을 눌렀을때 다른 내용이 출력 되도록 할 수 있다 )
'프로그래밍 > WEB HACKING' 카테고리의 다른 글
| [WEB HACKING] php 간단한 로그인 창 만들기 / 쿠키 & 세션 이용방법 (0) | 2017.08.29 |
|---|---|
| [WEB HACKING] php 연관 배열, foreach / 데이터를 서버로 전달하는 방법( GET / POST / 쿠키 ) / 웹 인증 방법 (0) | 2017.08.17 |
| [WEB HACKING] javascript 이벤트 / php 개념 및 슈퍼 글로벌 변수 (0) | 2017.08.17 |
| [WEB HACKING] javascript 반복문( while, for, for in ), 배열 / 간단한 야구게임 만들어보기 (0) | 2017.08.14 |
| [WEB HACKING] 웹서버 구성 / html 기본구조 및 태그 (0) | 2017.08.11 |
댓글