'Front-End'에 해당되는 글 53건

  1. 2019.05.07 js(자바스크립트 파일) 만드는법
  2. 2019.04.29 HTML5 버전 이상 가운데 정렬 사용하기
  3. 2019.04.28 HTML 문법정리
  4. 2019.04.22 HTML 테이블 짜보기
  5. 2019.04.22 HTML 실습 주소

js(자바스크립트 파일) 만드는법

Front-End/javascript 2019. 5. 7. 17:10

자바스크립트 선언하기

HTML 태그 사이에 자바스크립트를 삽입하는 방법은 2가지가 있다.

​

1)  태그 사이에 직접 선언하여 자바스크립트 삽입

  * JAVA 선언은 헤드태그 또는 바디태크 영역 사이에서 한다

  * 자바 선언 태크 : <script type ="text/javascript"> </script>

  * '<sc' 입력 후 ctrl + space 누르면 자동완성 됨

​

2) js 파일을 작성하여 html에 삽입하기

  * [web content 폴더] - [new] - [other] - [javascript source file] - 파일명 적고 finish.

  * js파일에서는 자바스크립트 선언 없이 바로 자바코드를 작성한다.

  * 파일을 저장하면 파일명.js 파일이 생성된다.

  * HTML에 js파일 삽입 하기

    : HTML 헤드태그 사이에 자바선언 후 선언문 사이에 삽입

     <script type ="text/javascript" src="파일명.js"> </script>

 

 

 

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > javascript' 카테고리의 다른 글

JavaScript 숫자와 문자 -2  (0) 2019.05.22
JavaScript 숫자와 문자 -1  (0) 2019.05.22
sublimetext 설치  (0) 2019.05.22
JavaScript 실행 및 실습  (0) 2019.05.21
JavaScript 학습일정  (0) 2019.05.16
:

HTML5 버전 이상 가운데 정렬 사용하기

Front-End/HTML 2019. 4. 29. 13:39

HTML5버전 이상부터는 <center>명령어를 사용하게 되면 제한적으로밖에 사용할 수가 없기 때문에 다음과 같은 style명령어로 

대체하도록 한다.

 

 
  <div style="text-align:center;">


  가운데 정렬할 문자


  </div>

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

 

저작자표시

'Front-End > HTML' 카테고리의 다른 글

두개의 영역(그림, 글자, 광고 등)을 나란히 놓기 - float:left/right  (4) 2019.10.01
HTML 문법정리  (0) 2019.04.28
HTML 테이블 짜보기  (0) 2019.04.22
HTML 실습 주소  (0) 2019.04.22
:

HTML 문법정리

Front-End/HTML 2019. 4. 28. 17:46

 

 문 법 설 명 
 <title>~</title> 탭 이름을 정할수 있음
 <br> 줄 바꿈 
 <h숫자>~</h같은숫자>  글씨 크기 지정 (1이 제일크고 숫자가 커질수록 글씨 크기 작아짐)
 <p> 한줄 건너뛰고 줄 바꿈 
 <center>~</center> 가운데 정렬시킴 
 <ul>~</ul> 목록 지정 (번호가 없는 목록)
 <li>~</li> 목록안에 객체 지정
 <ol>~</ol> 목록 지정 (번호가 있는 목록) 
 <dl>~</dl> 목록 정의 
<dt>~</dt> <dl>~</dl>안에 쓸 객체 지정 
 <dd>~</dd> <dt>~</dt>안에 있는 객체에 대한 설명 
 <img src="g:/img/coffee_a.jpg" width=250 height=250> 경로에있는 이미지를 삽입하고 크기 지정 
 <a href="g:/htmltest/menu.html" target="_blank"> 다른 파일과 연결하는 하이퍼 링크 태그 삽입 
(blank는 새로운 브라우저로 생성)
 <a href="g:/htmltest/menu.html" target="_self">  다른 파일과 연결하는 하이퍼 링크 태그 삽입 
(self는 기존에 있던 브라우저에서 이동함)
 <audio src="g:/owlcity.mp3" controls>  경로에 있는 음악 삽입
<align="center">, <align="left">, ............ 정렬 시킨다 (중앙, 왼쪽, 오른쪽 등등..)
 <method="post"> 페이지에서 자신이 작성한 값을 암호화한다.
 <method="get">  페이지에서 자신이 작성한 값을 URL에 표기해준다.
<charset=....>  Http client(웹 브라우저)가 받아볼 페이지의 인코딩 방식
 <PageEncoding=....> JSP 파일(페이지)에 기록된 코드 자체의 인코딩 방식
 <!DOCTYPE html...> 웹 문서가 어떤 버전의 HTML언어로 작성되었는지 결정하는 기능 
 <DTD...> 웹 문서의 버전을 웹 브라우저에 전달
 <meta ....>  키워드 검색엔진에 특정 홈페이지 또는 HTML문서에 대한 색인정보.
즉, 키워드와 약간의 정리된 내용(콘텐츠)을 표현하는 HTML Tag이다.
<colspan="숫자"> 숫자 만큼의 칸을 합친다.(가로로) 세로로 정보를 읽고 싶을때 사용 
<input type = "submit" value = " 전송"> 태그내에 입력된 데이터를 서버로 전달하는 기능을 가짐.

 

 

동영상

https://youtu.be/EtLbvFbvI3A

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > HTML' 카테고리의 다른 글

두개의 영역(그림, 글자, 광고 등)을 나란히 놓기 - float:left/right  (4) 2019.10.01
HTML5 버전 이상 가운데 정렬 사용하기  (0) 2019.04.29
HTML 테이블 짜보기  (0) 2019.04.22
HTML 실습 주소  (0) 2019.04.22
:

HTML 테이블 짜보기

Front-End/HTML 2019. 4. 22. 23:50

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
 
td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
 
tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>
<h1>나의 정보 테이블<h1>  
 
<table style="width:80%">
<tr>
<th>이름</th>
<th>나이</th>
<th>사는지역</th>
</tr>
 
<tr>
<th>이한섭</th>
<th>28살</th>
<th>인천</th>
</tr>
 
</table>
 
</body>
</html>
 
 
 cs

 

 

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > HTML' 카테고리의 다른 글

두개의 영역(그림, 글자, 광고 등)을 나란히 놓기 - float:left/right  (4) 2019.10.01
HTML5 버전 이상 가운데 정렬 사용하기  (0) 2019.04.29
HTML 문법정리  (0) 2019.04.28
HTML 실습 주소  (0) 2019.04.22
:

HTML 실습 주소

Front-End/HTML 2019. 4. 22. 23:38

HTML 실습 주소

https://www.w3schools.com/html/default.asp 

 

HTML Tutorial

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

 

 

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > HTML' 카테고리의 다른 글

두개의 영역(그림, 글자, 광고 등)을 나란히 놓기 - float:left/right  (4) 2019.10.01
HTML5 버전 이상 가운데 정렬 사용하기  (0) 2019.04.29
HTML 문법정리  (0) 2019.04.28
HTML 테이블 짜보기  (0) 2019.04.22
:
◀ PREV : [1] : [···] : [4] : [5] : [6] : [7] : NEXT ▶

티스토리툴바