분류 전체보기
-
CSS 실습 예제 해보기 블로그 형식Study 2022. 2. 3. 23:54
* { margin: 0; padding: 0; font-family: '맑은 고딕', Malgun Gothic, sans-serif; } a { text-decoration: none; } li { list-style: none; } /* 기본 클래스 */ .pull-left {float:left;} /* HTML5 개요와 활용 이미지(430x280) 왼쪽으로 이동 */ .pull-right {float:right;} /* searchbar 검색 오른쪽으로 이동 */ body { width: 960px; margin: 0 auto; /* margin: 0 auto -> 전체적인 페이지 가운데로이동? */ background: #E6E6E6; } #HTML-page-wrapper{ ba..
-
CSS 공부 정리Study 2022. 2. 2. 23:41
CSS 선택자 CSS3에서 특정 HTML 태그를 선택할 때는 선택자를 사용 h1(선택자){color(스타일 속성):red;(스타일 값)} 이와 같이 css 블록을 입력해 작성한 코드를 스타일시트라고 함 선택자의 종류 전체 선택자 = * 태그 선택자 = 태그= (h1 아이디 선택자 = #아이디 = #id 클래스 선택자 = .클래스 = .header 후손 선택자 = 선택자 선택자 = header h1 자손 선택자 = 선택자 > 선택자 = header > h1 기본 선택자 (전체, 태그, 아이디, 클래스) 공간 분할 태그에 아이디 선택자를 사용해 id 속성을 적용하고 레이아웃을 구성 클래스 선택자는 특정한 클래스가 있는 태그를 선택할 때 사용 (웹 페이지 개발 시 가장 많이 사용) 속성 선택자 특정 속성 값이..
-
HTML 공부 정리Study 2022. 2. 1. 23:46
HTML 인터넷 전 세계를 연결하는 국제 정보 통신망으로, 컴퓨터나 스마트폰 같은 디지털 기기로 연결되어 사람들이 정보를 공유 할 수 있는 공간 하이퍼링크 인터넷에서 문서 사이를 쉽게 이동할 수 있는 기능 W3C HTML 표준을 비롯한 웹 표준안을 제작하거나 제안하는 일을 한는 국제적인 웹 표준화 단체 플러그인 사용자 PC에 프로그램을 추가로 설치해 웹 브라우저의 기능을 확장하는 방법 웹 동작 웹 웹은 요청과 응답이라는 간단한 형태로 동작 웹에서 어떤 대상을 구분하는 주소를 URL이라고 함 URI는 웹에서 어떤 대상을 구분하는 방법을 총칭한 것 웹 서버 웹 서버는 치킨집과 같은 느낌 클라이언트(사용자)가 request(요청, 주문)을 하면 치킨집에서는 response(응답, 배달)을 하는 형태 요청하는 ..
-
jQuery란? , 코드 형태프론트엔드 프로그래밍/jQuery 2022. 1. 28. 21:39
jQuery - 2006년 John Resig(존 레식)이 디자인한 자바스크립트 라이브러리 - 자바스크립트를 이용해 만든 다양한 함수들의 집합 - 무료 사용 가능한 오픈 소스 라이브러리 - 모든 웹 브라우저에서 동작 jQuery 특징 - 용량이 약 100 KB 가벼움 - 동적으로 HTML이나 CSS 컨트롤 능력 탁월 - 짧고 간결하게 코딩 가능 - 웹 표준과 타 브라우저 호환성 뛰어남 - 편리한 Ajax 호출 방법 - 메소드 체인 방식(여러 메소드를 연결하여 사용)으로 효율적인 코딩 가능, 간결하고 효과적인 코드 수정 가능 - 다양한 플러그인 제공 jQuery 사용 목적 - 쉬운 DOM 처리 - 쉽고 일관된 이벤트 연결 구현 - 쉬운 시각적 효과 구현 - Ajax 기능 쉽게 구현 jQuery 기능 - D..
-
문서 객체 모델, 사용자 정의 객체, 이벤트 처리, JSON 변환프론트엔드 프로그래밍/JavaScript 2022. 1. 27. 22:52
문서 객체 모델 (Document Object Model) - 객체 지향 모델로서 구조화된 문서를 표현하는 형식 - HTML 문서에 접근하기 위한 표준 모델 - 표준은 대부분의 브라우저에서 DOM을 구현하는 기준 - 문서 내의 모든 요소를 정의하고, 각 요소에 접근하는 방법을 제공 - 웹 브라우저에서 보여지는 HTML 문서 태그 요소에 대한 정보와 문서에 대한 여러 가지 속성을 제공 - document 객체의 하위 객체를 이용하여 문서 내에서 일어나는 다양한 기능 제어 DOM 사용 시기 - HTML 문서가 로드되고 나서 파싱 작업을 거쳐 DOM 트리 생성 - DOM 문서가 로드될 때 모든 DOM을 사용할 수 있게 되는 때임 문서 내의 요소 (태그) 제어 메소드 문서 내의 요소(태그) 제어 메소드를 사용하..
-
브라우저 객체 모델 (window, history, location, navigator)프론트엔드 프로그래밍/JavaScript 2022. 1. 27. 22:02
브라우저 객체 모델 (Browser Object Model) - 자바스크립트에서는 웹 페이지를 구성하는 HTML 태그의 모든 요소와 웹 브라우저를 구성하는 요소들을 객체로 정의하여 제공 - 객체들을 계층 구조로 분류 브라우저 객체 - 웹 브라우저를 대상으로 이루어지 객체 - window 객체 : 창 - document 객체 : 문서 - history 객체 : 웹 브라우저 기록 정보 - location 객체 : 주소 정보 - navigator 객체 : 웹 브라우저 정보 (종류 판별 등) - new 연산자를 통해서 생성하지 않고 그냥 사용하면 됨 - 예 : document.write() 브라우저 객체의 계층 구조 window 객체 - 창에 대한 전반적인 상황을 제어하는 최상위 객체 - 자바스크립트에서 사용되..
-
자바스크립트 객체 (Object) > 내장 객체 (Date, Array, Math, String)프론트엔드 프로그래밍/JavaScript 2022. 1. 27. 21:52
자바스크립트 객체 (Object) - 내장 객체 - 브라우저 객체 - 문서 객체 (DOM) - 사용자 정의 객체 자바스크립트 내장 객체 (Built in Object) - 미리 정의되어 있는 객체 - 선언 과정을 통해 객체 변수를 정의해서 사용 - 특별한 경우에만 사용자 정의 객체를 정의하여 사용하고 - 대부분의 경우에는 내장 객체 많이 사용 대표적인 내장 객체 - Date : 날짜와 시간을 처리하기 위한 객체 - Array : 배열을 만들기 위한 객체 - String : 문자열을 다루기 위한 객체 - Math : 수학 계산을 위한 객체 - Event : 발생하는 이벤트에 관한 정보를 제공하는 객체 - Screen : 화면의 해상도, 색상, 크기에 관한 정보를 제공하는 객체 객체 생성 및 사용 예 - 객..
-
제어문 (if, switch, for, while...)프론트엔드 프로그래밍/JavaScript 2022. 1. 27. 21:33
제어문 - 프로그램의 흐름을 제어 - 자바 언어와 완전 동일 if(조건식) { 조건의 결과 참일 때 수행되는 문장; 1줄인 경우 괄호({}) 없어도 됨 2줄 이상인 경우 반드시 괄호 있어야 함 } if(조건식){ 조건의 결과 참일 때 수행되는 문장; } else { 조건의 결과 거짓일 때 수행되는 문장; } if(조건식1){ 조건식1의 결과 참일 때 수행되는 문장; } else if (조건식2){ // else로 넘어 왔다는 것은 조건식1에 해당이 안 된다는 의미 조건식1의 결과가 거짓이면서 조건식2의 결과 참일 때 수행되는 문장; } else { // 주의!!!! 여기에 조건식 없음 (조건식은 if 다음에만 적음) 조건식1,2 모두 거짓인 경우 수행되는 문장; } 중첩 if 문 : if문 안에 if문 ..
-
변수 (var, let, const) + 연산자 + 데이터 타입프론트엔드 프로그래밍/JavaScript 2022. 1. 27. 13:35
변수 - 프로그램 실행 중에 값을 저장하기 위한 메모리 내의 임시 기억장소 자바스크립트에서 식별자(변수명, 함수명 등) 명명 규칙 - 시작은 반드시 영문자나 _ 사용. 숫자로 시작하지 않음 - 대소문자 구별 - 키워드 사용할 수 없음 - 특수문자, 공백 사용할 수 없음 - 한글 사용 가능 (영문 사용 권장 - 한글 사용 안 함) - 의미 있는 단어 사용 (예: name, address, age) 변수 선언 - var - let - const - ES6 이후 보완하기 위해 추가된 변수 선언 방식 : let과 const 변수 선언 - 변수를필요한 곳에 사용하면 자동으로 생성되기 때문에 반드시 선언하지 않아도 됨 - 변수의 데이터 타입은 실행 시 결정 (동적 타이핑) - 명시적으로 선언하는 경우에는 예약어 v..
-
데이터 출력(alert, console.log, write), 입력 방법(confirm, prompt)프론트엔드 프로그래밍/JavaScript 2022. 1. 26. 22:40
데이터를 출력하는 방법 - window.alert(내용) : 내용을 알림창(경고창)으로 출력 - console.log(내용) - document.write(내용) : 화면(문서)에 내용 출력 - DOM(문서 객체 모델) 사용 : 예: body - 예제 - write.html body 본문에서 출력 - console.html - console.log 는 option+command+I 눌러야 내용 뜨는거고 document.write는 바로 웹에 출력, alert는 경고 메시지 출력 자바스크립트 코드 입력 시 주의 점 - 대소문자 구별 - 문장 끝에 세미콜론(;) 사용 - 문자열에 따옴표 겹침 오류 주의 - 문자열 큰 따옴표, 작은 따옴표 모두 사용 가능 - document.write(“이름은 홍길동입니다”)..