반응형
SMALL

HTML(HyperText Markup Language)

하이퍼텍스트 마크업 언어. 

웹브라우저에서 문자열, 이미지 , 동영상, 입력양식 등을 출력하기 위해 사용되는 언어.

 

웹페이지를 위한 마크업 언어다.

웹페이지 화면을 구성하는 제목, 단락, 목록 등의 구조를 만든다.

즉, 지금 쓰고 있는 이 화면도 HTML의 요소로 이루어져 있다.

 

HTML은 크게 "태그"로 불리는 요소로 작성된다.

자바 스크립트와 CSS 등의 스크립트가 이러한 외관과 배치를 움직일 수 있다.

HTML 자체는 정적이지만, 스크립트와 만나면 동적으로 움직인다고 표현할 수도 있겠다.

 

HTML은 출력창이 웹브라우저이다. 기본적인 꺽쇠(<, >) 를 포함한 태그로 화면 구성의 기초를 다질 수 있다.

 

HTML 기본 구조 관련 태그

화면은 EditPlus를 사용했다.

기본 화면(html,head,title,body,meta)

첫 화면이다. 한줄한줄 분석해보자.

<html> ~</html> : html 소스 전체를 감싸는 태그
<head>~</head> : html 문서의 제목이나 머리말을 감싸는 태그
<title>~</title> : 출력하는 웹브라우저의 제목 표시줄에 나타나는 내용을 감싸는 태그
<body>~</body> : 웹브라우저의 화면의 출력물(문자열, 이미지, 양식 등) 내용을 감싸는 태그

html은 가장 기본적으로 <title>, <head>와 <body>로 이루어져 있다.

각 범주를 나타내기 위해 꺽쇠로 <시작>~~~</끝> 처럼 쓴다.

 

<meta>의 경우 head 태그 안에 삽입되며, 화면이동, 문자셋, 검색 엔진이 검색하는 문자열 등을 설정하는 태그다.

meta태그속성 에는 여러가지가 있는데, " " 안에 각자 형식을 기술한다.

인코딩을 제외하고 빈칸도 가능하다.

<meta charset="UTF-8"> : 문자 인코딩 방식
<meta name="Generator" content="EditPlus®"> : 사용툴명
<meta name="Author" content=""> : 제작자명
<meta name="Keywords" content=""> : 검색엔진이검색할키워드
<meta name="Description" content=""> : 웹사이트 주제

 

주석문

주석문 쓰는 방법

주석문은<!--내용-->으로 사용 가능하다. 출력 화면에서는 나타나지 않는다.

 

body 태그

 

<br>을 붙여야 html에서 줄바꿈이 보여짐

<br> 태그는 줄바꿈이다. enter 키에 해당한다. 코딩창에서 엔터는 출력창에 반영되지 않는다.

출력창

 

body 태그 안에 삽입된 컨텐츠는 웹브라우저 화면에 그대로 나간다.

내용을 작성할 때에는 body 안에 작성하면 된다.

 

기본태그

글씨 크기 관련 태그

 

출력창

<h1>~<h6> 까지의 태그는 글씨 크기를 나타내는 태그이다.

볼드체이며, 숫자가 커질수록 작아진다.

한줄을 온전히 차지하기 때문에, 제목 등에 많이 사용된다.

6까지만 작아지고 7,8은 일반 크기로 붙여서 출력됨을 확인할 수 있다.

 

<hr>은 줄을 그린다. 한 행을 차지하는 수평선으로 단락을 나누는 용으로 많이 사용된다.

 

글자 관련 태그
출력창

<font>~</font> : 글씨와 관련된 기본 태그이다.

<font size "글씨크기" face = "글씨체" color="색상"> : 글씨 크기와 글씨체, 색상 등 폰트 기본설정을 하는 font 태그의 속성이다.

<i>~</i> : 이텔릭체(기울이기)를 적용한다.

<b>~</b> : 볼드체(두꺼움) 적용한다.

<sup>~</sup> : 위청(예)3의 3승)자를 의미한다.

<sub></sub> : 아래청(H2o의 2)자를 의미한다.

<u>~</u> : 밑줄

<s>~</s> : 취소선

 

목록 관련 태그와 출력창

 

<ul><li>~</li></ul> : 번호가 없는 목록을 만든다.

type ) disk(●), circle(○), square(■)

<ol><li>~</li></ol> : 번호가 있는 목록을 만든다.

type ) "1"(1,2,3,~), "a"(a,b,c,~), "A"(A,B,C,~), "i"(ⅰ,ⅱ,ⅲ,~)

 

목록 태그

 

<ol><li>제목1</li><ul><li>제목내용</li></ul> : 제목과 제목을 정의하는 내용을 만든다.

<dl><dt><dd>~</dd></dt><dl> : 계층적 목록을 출력한다.

a태그

 

문자열이나 이미지 태그를 감싸고 클릭 등과 같은 이벤트가 발생하면 정해진 기능을 구현한다.

 

형식

<a 속성 = "속성값"> 문자열 또는 이미지태그</a>

 

속성

href = " " : 링크를 거는 속성. 이동페이지 주소, 다운로드, 파일명 등을 적을 수 있다.

target = " " : a 태그의 기능이 일어날 화면을 지정하는 속성

name = " " : 이동장소위치명을 설정하는 속성

a 태그 예시(사진 출처 : 익명이 트위터( https://twitter.com/anonymous_ikm )

 

첫 번째는 네이버 문자를 클릭하면 클릭한 웹브라우저 창 그대로 네이버로 이동한다.

두 번째는 새창으로 네이버가 열린다.

세 번째는 이미지를 클릭하면 새창으로 네이버가 열린다.

 

이미지 속성

  • cf) width ="30%"를 하면 원본 사진에 30프로로 가로세로 균일하게 줄어 든다.
  • 이미지 파일 경로가 안나오고 "cute.jpg" 이렇게만 나오면 html 파일과 이미지 파일이 동일 경로(폴더) 안에 있는 것이다.
    • 예)"../cute.jpg": 현재폴더를 벗어나서 그 전 경로 안에 있는 것, 즉 img 폴더 밖에 있다는 의미이다.
    • "../../cute.jpg": 현재폴더를 두번 벗어나서 밖에 있는 것, 즉 자바스크립트 폴더 밖에 있다는 의미이다.
    • "../abc/cute.jpg" : 현재폴더를 나오면(img 밖) 그 중에 abc라는 이름의 타 폴더가 있고, 그 안으로 들어가면 있다는 의미이다.

경로를 제대로 설정하지 못하면 불러올 수 없으므로 정확히 해야한다!

 

경로

절대경로: 파일 호출자의 위치에 관계 없이 변하지 않고 명확하게 이름을 명시한 유일한 경로

상대경로: 파일 호출자의 위치에 따라 변하는 경로

두 경로는 어느 것이 좋다기보다는 상황에 맞게 사용해야한다.

DIV 태그

 

이미지, 문자열 등을 기준별로 그룹화시켜서로 겹치게 포개 놓기, 펼쳐 놓기, 감춰놓기등을 할 수 있는 태그.

 

<div 태그 속성>

속성 비고 
width 가로 크기 
height 세로 크기 
border 테두리 굵기
background-color 배경 색상 
float 정렬
margin 여백 

크롬의 경우 픽셀(px)을 붙여야 속성이 적용된다.

 

div 태그 예시
출력창

글씨를 감싸는 배경색이 칠해지고, 원하는 위치에 원하는 크기만큼 생성되었다.

background-color : 배경색
width : 넓이
height : 높이
padding : 상하좌우 여백
position : 상하좌우 위치 설정
ex) top : 100 => 위쪽 100에 위치하게 설정한 것.

html은 기초적인 구조만 파악한 후 그때그때 필요한 태그를 구글링해서 사용하면 된다.

기본만 다지고 자바 스크립트나 css 쪽을 공부해보자.

 

반응형
LIST
저작자표시 비영리 변경금지

'[ javascript ]' 카테고리의 다른 글

리액트란?  (0) 2024.03.19
[JavaScript] 생활코딩 자바스크립트 문법 한번에 훑기  (0) 2021.03.16
[java script 개념] 자바 스크립트 기본 개념 정리  (0) 2020.08.16
[Event 객체] 웹에서 발생하는 모든 움직임 : event 객체 종류 정리, 클릭, 키보드 번호  (0) 2020.08.15
[생성자 함수] 사용자 정의 객체를 이용해 테이블 출력, 데이터 내림차순 정열 예제  (0) 2020.08.14
히앤님의 개발 세상초보 개발자. 인생게임 수동모드로 진행중입니다 :D
반응형
SMALL

자바스크립트(java script)는 HTML 언어에 추가되서 웹페이지를 동적으로 다양하게 제작할 수 있게 도와주는 스크립트 언어이다. 스크립트 언어는 혼자 실행될 수 없어서 다른 언어에 포함되어 실행되고, 문법이 복잡하지 않은 특징을 가지고 있다. 즉, 자바스크립트는 HTML 안에서만 구현된다. 공식 명칭은 [ECMAScript]

 

<html 문서 내의 언어들>

이름 특징 태그
태그 컨텐츠 출력 <hr>, <font> 등
CSS 디자인 담당 <style="color: blue">~</style>
java script 동적인 조작 기법 <script> ~ </script>

 

자바 스크립트 기능

1. 유효성 체크 : 데이터가 DB에 저장될 수 있는지, 부족한 것은 없는지 검사

2. 태그 속성값 또는 태그 자체의 입력/수정/삭제 : html의 태그 컨트롤

3. AJAX를 통한 웹서버와의 데이터 통신

4. 동적인 메뉴 제작, 이미지 효과 등

 

AJAX: 비동기 방식으로 웹서버와 통신한 후에 통신 결과물을 화면에 반영하는 기술들의 총칭.

비동기 방식: 페이지 이동 없이 웹서버와 통신하는 방식 (예 : ID 중복 검사, 연관검색어 등)

 

자바 스크립트 특징

  • HTML 소스 코드 안에 삽입되어 웹브라우저에 결과 출력 -> 소스가 클라이언트에게 노출. 보안성이 낮다.
  • AJAX를 사용하여 간접 DB연동 가능(자바는 직접 DB 연동)
  • 문법이 자바나 C보다 쉽다. 모든 변수의 형식을 검사하지 않기 때문. 때문에 에러 발생 시 찾기가 힘들다.
  • 화면 출력이 목적!

 

자바스크립트 형식

자바 스크립트 형식

<script> ~ </script> 안에 삽입되어 사용된다. 

함수인 경우 관용적으로 head 안에 있는 편.

자바 스크립트 수입

스크립트가 너무 길면 확장자를 js로 설정하여 독립된 파일을 만든다.

필요 시에 html 파일에 수입해서 삽입할 수 있다.

 

<자바스크립트 자료형>

자료형 종류 설명
숫자형 정수, 실수 데이터.
문자형 문자데이터. "로 감싼다. ""는 길이 없는 문자데이터.
boolean 형 true / false 데이터.
함수형 function(){실행구문;} 형태의 데이터.
1. 함수 전체를 데이터의 한 종류로 취급 (변수에 저장 가능)
2. 이름이 없을 수 있음.(=익명함수)
객체형 속성변수와 메소드로 구성된 단위 프로그램을 객체화했을 때 객체가 차지하는 메모리 공간의 위치 주소값.
ex) var aaa = new nnn();
undefined 형 알수없는 데이터. 프로그램에서 사용할 수 없는 데이터. 위의 5가지가 아닌 모든 것의 자료형을 말한다.(null이 아님)

 

자바스크립트 변수

var 변수명 = 데이터;

변수는 세 종류가 있다.

1. 전역변수 : var가 있거나 없거나. 모든 자바스크립트에서 공유 가능한 변수

2. 지역변수 : 함수 안에서 var로 선언되어 함수 안에서만 사용되는 함수. 전역변수랑 헷갈릴 수 있음.

3. 매개변수 : 함수 호출 시 전달되는 데이터를 저장하는 변수다. 함수 안에서만 사용 가능(함수 오른쪽에 위치). 앞에 var 없음.

 

변수 선언 형식


  

    
    
    
    
  
var aaa;  //undefined



var aaa = 5; //변수 선언



var aaa; //선언 후 데이터 넣기

aaa = 5;

 

데이터 자료형


  

    
    
    
    
  
var aaa = "123";  //문자형

var aaa = "123";  //숫자형

var aaa = boolean("n");  //논리형

논리형의 경우, 하단 "자바스크립트 조건문" 참고.

<참고> 자료형을 출력해보려면 typeOf를 사용한다. ex) document.write( typeOf aaa );

 

자바스크립트 연산자

1. ===연산자

자바와 동일.

단, 비교 연산자에서 ===의 경우 좌우가 같으면 true를 리턴한다. (자바에 없는 연산자)

true가 리턴되려면 자료형이 같아야한다. 자료형이 다르면 다른 유형의 데이터를 비교하는 것으로, 무조건 false가 리턴된다.

<주의> 자바는 [숫자]와 [숫자문자] 간의 비교가 불가능했으나, 자바스크립트는 [숫자문자]가 [숫자]로 변환되어 비교된다.


  

    
    
    
    
  
"10" == 10  //true, 자료형상관x



"10" === 10 //false, 자료형 일치해야함.

 

2. 문자 결합 연산자

"문자" + "문자" = "문자문자";  //문자끼리 더하면 문자
"문자" + 123 = "문자123";   //문자+숫자는 문자화

 

3. 삼항조건연산자


  

    
    
    
    
  
var aaa = a>b ? "맞아" : "아냐";

a가 b보다 클 때(조건식), 삼항조건연산자 ? 의 출력값 리턴. true일 경우 "맞아", false일 경우 "아냐" 출력.

 

 

자바스크립트 조건문

if(조건식1){ 실행구문; }

조건식 자리에는 boolean 형으로 true, false가 온다.(비교 연산식 또는 논리연산식이 나옴)

조건식 자리에 boolean 형이 아닌 데이터가 올 수 있다.

비어있거나(null), "",'' 등 길이가 없는 문자데이터 또는 0이 나오면 false로 형변환이 되고, 그 이외의 데이터는 true로 변환된다.

예)if(5){ 실행구문; } -> true일 때 실행구문을 실행하는 것.

 

자바스크립트 객체

ex) TV

기능(메소드) : 켜다(), 끄다()   -> 호출 : 객체.메소드(~);

속성 : 높이, 색상, 무게 등  -> 호출 : 객체.속성; 또는 객체.속성 = 값;

 

종류

1. 내장 객체 : 엔진에 이미 만들어져 저장.

ex) 문자, 날짜, 배열, 수학 등

생성 방법

var 변수명 = new Object(); //기본
var 변수명 = new Date(); //날짜
var 변수명 = new Math(); //수학
var 변수명 = new Array(); //배열
var 변수명 = new String(); //문자열

변수가 기본객체생성함수( Object(); )메소드를 참조중.

 

 

2. 브라우저 객체(BOM) : 브라우저에 계층구조로 내장되어 있음.

ex) Window(document, location) , Screen, Location, History, Navigator, Event

 

3. 문서객체(DOM) : html 문서 구조.

ex) <html>, <head>, <body> 등의 태그

-> 이러한 구조를 파악해야 원하는 곳에 원하는 기능을 넣을 수 있음.

-> 문서객체 대신에 jQuery 문서 객체 모델 사용이 많다.

 

자바스크립트 함수

자바의 메소드와 유사하다.

[실행구문]에 이름을 붙여 선언한 후 필요시점에 이름을 호출하여 실행구문을 실행하는 일종의 단위 프로그램.

-> 반복 사용하는 실행구문을 함수로 만들어 놓으면 보관이 용이하고 언제든지 쉽게 호출 가능하다.

함수는 반복 호출이 가능하고, 함수명을 호출해야 함수 내용이 실행된다. 호출 전에는 실행되지 않는다.

 

<자바스크립트 함수 종류>

함수 종류 설명
정적함수 함수명을 붙여 선언하는 함수
-> 웹브라우저는 정적함수를 먼저 골라 읽어드린 후 나머지 코딩을 실행하기 때문에 관용적으로 위쪽에 써준다.
<주의> 동일한 이름의 정적함수가 2개면, 마지막 정적함수가 진짜 정적함수다.
익명함수 함수명 없이 선언하는 함수로 주로 변수에 저장한다.(=데이터의 한 종류)
매개변수는 0개 이상 나올 수 있으며, 함수 호출 시 return 반환값;이 나오면 함수 중단 후 반환값을 호출한 곳으로 리턴한다. 그냥 return;만 나오면 함수 중단.
내장함수 자바스크립트에 이미 만들어져 제공하는 함수
내부함수 함수 내부에 선언된 또다른 함수
<주의> 내부함수와 외부함수의 이름이 같을 경우 [부모함수] 안에서 [내부함수]를 호출할 때 [내부함수]가우선적으로 호출된다.
사용자 정의 함수 개발자가 만들어서 사용하는 함수
콜백함수 직접 호출하지 않고 나중에 필요시에 호출해서 사용하라고 전달해주는 함수.
예) setTimeout( function(~){실행구문;}, 초숫자 );

 

객체 생성자 함수

function 함수명( 매개변수1, 매개변수2, ... , 매개변수n){
   this.속성명 = 새 값;
   this.함수명 = function(){실행구문;}
}

var 참조변수(인스턴스 네임) = new 함수명();
var 참조변수 = {  속성 : 새값, 함수명 : function(){~}  }
반응형
LIST
저작자표시 비영리 변경금지

'[ javascript ]' 카테고리의 다른 글

[JavaScript] 생활코딩 자바스크립트 문법 한번에 훑기  (0) 2021.03.16
[java script 개념] html 기초 개념 정리  (0) 2020.08.17
[Event 객체] 웹에서 발생하는 모든 움직임 : event 객체 종류 정리, 클릭, 키보드 번호  (0) 2020.08.15
[생성자 함수] 사용자 정의 객체를 이용해 테이블 출력, 데이터 내림차순 정열 예제  (0) 2020.08.14
[DOM 객체] 유효성체크 : 회원가입창에 입력된 데이터 관리하기  (0) 2020.08.13
히앤님의 개발 세상초보 개발자. 인생게임 수동모드로 진행중입니다 :D
반응형
SMALL

+ Recent posts

반응형
LIST

티스토리툴바