잰니의 성장블로그✈

■ 연산자 자바스크립트의 연산자는 산술(arithmetic) 연산자, 할당(assignment) 연산자. 문자열(string) 연산자, 비교(copmaparison) 연산자, 그리고 논리(logical) 연산자가 있다. - 산술 연산자 : 숫자 연산에 사용된다. + 덧셈, - 뺄셈, * 곱셈, / 나눗셈, % 나머지, ** 거듭제곱, ++ 1 증가, -- 1 감소가 있다. 일반 사칙연산에서처럼 곱셈과 나눗셈이 덧셈과 뺄셈에 우선하고 필요하면 ( )로 계산 순서를 변경할 수 있다. - 할당 연산자 : 할당 연산자는 데이터나 변수 값을 다시 변수에 저장해서 메모리 공간에 할당한다. 크다 5 > 3 true 5는 3보다 크다로 true = 크거나 같다 5 >= 3 true 5는 5보다 크거나 같다로 true ..

■ 자바스크립트 기본 문법 변수는 데이터를 저장하는 컴퓨터의 메모리 공간이다. 변수와 변수에 데이터 저장 방법, 그리고 변수나 데이터 값을 브라우저 화면에 출력하는 네 가지 방법이 있다. ** 오류 발생시 F12 키를 누르면 내용을 확인할 수 있다. ■ 자바스크립트 주석문 => (한줄 // ~ 를 사용하고, 여러 줄 주석은 /* ~*/ 사용한다. ) ** HTML 주석문 ( 한줄이나 여러 줄이나 사용한다.) / CSS 주석문 ( 한 줄이나 여러 줄이나 /* ~ */ 사용한다. ) ■ 변수 컴퓨터 메모리에는 정수,실수,문자 등 다양한 데이터들이 저장된다. 데이터를 메모리 공간에 저장하기 위해서 자바 스크립트, 파이썬, C등의 프로그래밍 언어에서는 변수라는 개념을 사용한다. 변수는 데이터가 저장되는 메모리 ..

자바스크립트란? HTML/CSS로 구성된 HTML문서를 동적으로 만드는데 사용되는 프로그래밍 언어이다. 웹 프로그래밍 웹(www)은 인터넷에 연결된 컴퓨터를 통해서 서로 정보를 공유하고 소통하는 사이버 공간이다. 웹에서는 인터넷 익스플러나 크롬과 같은 웹 브라우저가 중요한 역할을 한다. 웹에서 사용자들은 웹 브라우저를 통해서 인터넷 상에 있는 원격 컴퓨터 서버에서 제공되는 웹 서비스를 이용한다. 웹 프로그래밍은 웹에서 사용되는 회원가입, 로그인, 쇼핑몰 장바구니, 온라인 결제, 온라인 예약, 스케쥴 관리 등의 기능을 실제로 구현하는 작업을 의미한다. 참고로 웹 디자인은 웹 사이트에 들어가는 디자인적 요소, 즉 텍스트, 이미지, 동영상, 음악 등의 콘텐츠를 디자인하는 것을 말한다. ** 서버 ㅣ 서비스를 ..

플렉서블 박스(Flexable Box) 플렉서블 박스는 간단히 플렉스 박스(FlexBox)라고도 하는데 박스를 쉽게 가변적으로 만들어 주고 동시에 반응형 웹을 위한 몇 가지 기능도 제공해주는 최신 기술이다. 플렉스 박스는 컨테이너(Container)와 아이템(Item)이라는 두 개의 개념이 필수적으로 존재해야 한다. 아이템이 컨테이너 안에 들어 있게 된다. Flex Box 장점 콘텐츠를 수평 방향으로 쉽게 중앙 정렬할 수 있다. 뷰 포트의 너비에 따라 요소의 배치 순서를 달리 할 수 있다. 박스 내 요소의 여백과 배치를 자동으로 조절 할 수 있다. Flex Direction의 속성 값 row 기본 값, 플렉스 박스의 아이템을 수평 방향으로 배치(좌->우) row-reverse 속성 값 row와 동일하나 ..

반응형 웹 폰트란? 일반적인 웹 페이지에서는 fontsize 속성을 이용해서 픽셀 단위로 글자 크기를 설정한다. 이 px 단위는 모니터 해상도를 기준으로 하기 때문에 스마트 폰 등 다양한 기기를 고려해야 하는 반응형 웹에서 글자 크기를 설정하기에 적합하지 않다. 실제로 px 단위로 각종 기기에 모두 적합한 글자 크기를 지정하기는 불가능하다고 볼 수 있다. 이런 문제를 해결하기 위해서 반응형 웹에서는 px 단위 대신 상위 요소에서의 설정이 하위요소에게 영향을 끼치는 상속의 개념이 있는 em또는 상속의 개념이 없는 rem 단위를 많이 사용한다. => em 단위는 영문자 M의 너비를 1em으로 계산해서 이에 대한 상대적 크기로 글자 크기를 계산한다. em 활용 rem이란? em 단위의 상속이 작업 시 편리함을..

반응형 웹(Responsive Web) 작성해둔 웹 페이지의 구성과 디자인이 데스크탑, 태블릿, 스마트폰 등 다양한 접속 기기에 반응하여 달라지게 하는 기술을 반응형 웹이라고 한다. 여기서 반응형 웹의 기본이 되는 뷰 포트의 개념, 그리드 뷰, 반응형 웹의 폰트 등을 알아보는데 그리드 뷰에서 가장 많이 사용되는 12열_그리드_시스템의 동작 원리와 이를 활용하여 실제로 웹 페이지를 만들어 본다. 반응형 웹 디자인(Responsive Web Design) 반응형 웹 디자인은 하나의 웹 페이지로 데스크 톱, 태블릿, 스마트 폰 등 다양한 기기에서 콘텐츠가 제대로 보이게 하는 기술이다. 일반적으로 문서의 너비가 고정된 고정 레이아웃에 맞게 개발된 웹 페이지는 스마트 폰에서 보면 이미지나 글자가 너무 작아지게 되..

HTML5 레이아웃 활용

HTML5 레이아웃 요소 div 요소를 이용해서 웹 페이지를 레이아웃하면 태그가 필연적으로 많이 사용되게 된다. 페이지 내에 산재되어 있는 태그들은 웹 페이지의 구조를 복잡하게 만들고 웹 페이지의 가독성을 떨어뜨린다. 이렇게 되면 웹 페이지의 유지 보수가 어렵고 작업자 이외에는 문서를 이해하기 어려워서 공동작업도 어렵게 될 것이다. 이런 단점을 보완하기 위해서 HTML5 웹 페이지의 레이아웃을 상대 위치 지정(position : relative) 요소 A 요소 B 요소 C 절대 위치 지정(position : absolute) 요소 A 요소 B 요소 C 절대 위치 지정(position : absolute, 부모 요소가 있는 경우) 요소 A 요소 B 요소 C 위치 고정(position : fixed) 요소A

웹 페이지 레이아웃 웹 페이지를 제작할 때 먼저 구획을 나누어 몇 개의 큰 박스를 화면에 배치한 다음 각 박스 안에서 세부적인 내용에 관한 요소들의 배치가 이뤄진다. 이와 같이 웹 페이지의 전체적인 윤곽을 잡는 작업을 웹 페이지 레이아웃(Layout)이라고 한다. div 요소를 이용한 레이아웃 상단 헤더 사이드 바 메인 섹션 하단 푸터 박스의 중앙 배치 안녕하세요 안녕하세요 float 요소 이용 CSS의 float 속성을 이용하면 웹 페이지 요소를 임의로 창의 좌측 또는 우측에 배치할 수 있다. 요소 A 요소 B 요소 C 요소 D clear 속성 CSS의 float 속성은 요소를 임의로(float) 창의 좌측이나 우측에 배치하는데 하나의 요소에 float 속성이 적용되면 그 다음에 오는 요소들도 계속해서..

로그인 폼 아이디 로그인 비밀번호