[front-end] 17

Javascript

1) Javascript html: 틀, 골격, 사람자체 css: 디자인, 옷 javascript: 움직임, 동작, 댄스, 축구 등 ex) 회원가입시 숫자란에 문자 입력시 js로 처리 가능 프로그래밍에서 동작(동적웹페이지)을 담당 2) js특징: html 태그에 접근 가능, 하지만 접근할 수 있는 html 태그가 한정된 것이 기본 웹페이지는 window > document > form > img > input 순서로 되어있음 html은 w3c에서 관장 js는 ECMA(Europe Computer Manufactor Association)에서 관장 (ECMAScript) 그래서 자바스크립트는 접근할수 있는 태그가 한정되어 있음 에는 접근 가능 는 접근 불가 - 모든 태그에 접근하는 DOM DOMScript..

Semantic

웹에 자주 사용되는 요소 1. table 2. div>ul>li 3. semantic web = 의미있는 웹(사람이나 기계가 쉽게 이해할 수 있는 웹) div>ul>li를 활용해서 웹 페이지를 만드는 방법 여기는 헤드 부분(로고) 여기는 메뉴가 나오는 부분 여기는 내용이 나오는 부분 여기는 맨 아래 주소등이 나오는 부분 - float로 위치 정하기 - width %로 일정 비율로 고정 Semantic tag 구조 ---------------------------------- header ---------------------------------- nav section aside article article ---------------------------------- footer ------------..

[front-end]/CSS 2021.01.11

CSS 속성

font: bold 20pt serif,sans-serif; 굵기, 크기, 글꼴(첫번쨰 글꼴이 없으면 그 다음 글꼴 사용) 순 text-shadow: 3px 3px 5px #777777; 글씨 그림자 효과 1. x쪽으로 이동 2. y쪽으로 이동 3. 번짐(blur, 숫자가 클수록 더 번짐) 4. 그림자 색 box-shadow: 10px 10px 3px #0000FF; 박스 그림자 효과 위와 동일 border: 3px dotted blue; 경계선두께 경계선디자인 경계선색 경계선디자인은 dotted(점선) dashed(조금긴 점선) double(얇은선 두개) groove(굵은선) inset ridge outset(태극기처럼 대각선으로 나뉨) solid(그냥 선) 등이 있음 table과 table안에 있는 ..

[front-end]/CSS 2021.01.08

CSS

1) css 는 rgb로 색을 표현 - rgb: red green blue 빛 - 표현방법: 1. #ffff00 두개씩 나눔 (00~FF) 2. rgba(255,255,0,0.5) ,로 나눔 3. blue 이렇게 바로 해도 됨 rgba의 a(alpha)는 투명도, 0.0~1.0(투명~불투명) 0.0 fully transparent and 1.0 fully opaque 클래스1 클래스2 아이디1 2) border padding margin border는 테두리 크기 padding은 글씨와 테두리와의 간격 margin은 두 테이블 사이의 간격(둘다 겉의 테두리) padding:20px (상우하좌 4개 모두 20px) padding:20px 30px (상 우) (상하 20 좌우 30) padding:20px ..

[front-end]/CSS 2021.01.05

emmet 플러그인

emmet 플러그인: 이클립스에서 유용한 html, xml(pom.xml) 태그 도우미 설치방법: help - eclipse marketplace - find에 emmet 입력 후 install - 설치 도중 경고뜨면 무시하고 첫번째 install anyway 클릭 marketplace 안되면 help - install new software로 들어가서 http://emmet.io/eclipse/updates 주소를 url로 설정 emmet 사용법 - 테그 내용 입력 후 ctrl + e 혹은 tab 1. h1 2. div>ul>li 하위 코드 생성 방법 form>table>tr>td 3. div>ul*2>li*3 4. input:text 5. input:submit[value="서버로 이동"] 6. di..

[front-end]/HTML 2021.01.05

HTML 테그

HTML은 형식이 비교적 자유로움, 하지만 xml은 형식이 엄격함, 여는 태그가 있으면 반드시 닫아줘야됨, 그래서 환경설정 파일 작성하는데 많이 사용됨 1. 줄바꿈 : 한줄 바꿈 : 두줄 바꿈 2. 기호 띄어 쓰기 &기호: & >: > 비밀번호 전화번호 생년월일(2000년 이상만) 생일은 몇번째 주? 태어난시간? 현재시간? 좋아하는색? 좋아하는 숫자?(0~100, 10단위) 성격? 내성적 검색: 도시 선택

[front-end]/HTML 2021.01.05

HTML

1) html(Hyper Text Markup Language): 웹페이지를 작성하기 위한 언어로 팀 버너스리가 개발 - markup: 태그를 사용한다 2) html 역사: - html버전: 1991년 html 시작으로 html 4.0, 4.01, 2000년 xhtml 1.0, 1.1, 2.0(사장됨) - 2012년 html 4.0에서 확장된 html5 대두, 최종버전 완성됨 - html5: audio, video, 지도, websocket 엄청 편해짐 - 비디오와 오디오 심플하게 지원, css3지원, 위치정보(geolocation), local depository 지원(jQuery mobile 작성시 이것 사용) - 웹은 html + css + javascripte + dom을 중심으로 함(MVC 모델..

[front-end]/HTML 2021.01.05