웹 프로그래밍/FE(Front-End)
-
flex box layout (display : flex ;)웹 프로그래밍/FE(Front-End) 2021. 7. 8. 18:00
우리는 보여지는 요소의 위치를 내가 원하는대로 조정하여 반응형 웹 디자인을 구현하기 위해 position속성에 값을 주어 left, right, bottom, right를 주거나 이렇게 조정하여도 원하는 결과를 얻지 못하면 float 속성을 이용한다. 하지만, float속성이 만들어진 이유는 반응형 웹 디자인을 위해서가 아니라 마치 요소를 떠 있게 하는 것처럼 하여 그 주변을 다른 요소로 감싸는 포지셔닝(positing)을 위해서이다. 즉, 우리가 원하는 레이아웃(layout)으로 요소를 배치하기 위해 float속성을 마주잡이로 사용하는 것은 어긋난 행동이다. 하지만, flex box가 나오기 이전에는 어쩔 수 없이 position, float, table 등과 같은 속성을 사용하여 레이아웃을 구성하게 ..
-
JSON이란?웹 프로그래밍/FE(Front-End) 2021. 7. 5. 22:52
JSON은 JavaScript Object Naotation의 약어로 말 그대로 번역해 보면 자바스크립트에서의 객체 표기법으로 작성된 텍스트이다. 이러한 JSON은 데이터 저장 및 교환을 위한 개방형 표준 포맷으로 사용되고도 하고 넓은 범위로는 AJAX를 위해 XML을 대체하는 데이터 포맷으로 사용되기도 한다. 자바스크립트 개게 표기법 구문에서 파생된 JSON의 구문은 다음과 같다. - 데이터는 이름/값(속성-값 쌍 또는 키-값쌍)이다. - 데이터는 쉼표로 구분되다. - 중골호는 객체를 유지한다. - 대괄호는 배열을 유지한다. JSON에서의 값(value)은 문자열, 숫자, 객체(JSON 객체), 배열, Boolean, null 중 하나이여한다. JSON 안에 있는 값(value)에 접근하기 위해서는 도..
-
브라우저 객체(BOM)웹 프로그래밍/FE(Front-End) 2021. 7. 4. 23:20
오늘은 브라우저 객체(BOM)에 대해 정리해보려고 한다. BOM(Browser Object Model)은 브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체모델로 웹 브라우저가 가지고 있는 모든 객체를 의미한다. 공식 표준은 아니지만 브라우저 대부분이 자바스크립트와의 상호작용에 있어서 비슷한 메소드와 속성으로 동작하기에 이와 같은 메소드들을 통칭하여 BOM이라고 한다. BOM을 사용하면 자바스크립트가 브라우저와 대화할 수 있고 BOM의 객체모델을 보면 아래와 같다. 최상위 객체는 window 객체이고 하위 객체로 6개의 객체를 가지고 있다. 그러면 각각의 객체에 대해 알아보자. 1) window 객체 window 객체는 모든 브라우저에서 지원되는 객체로 우리가 보고 있는 브라우저 창을..
-
form 태그 파헤치기웹 프로그래밍/FE(Front-End) 2021. 7. 1. 22:36
오늘은 HTML을 공부하던 중 평소에는 별 관심없이 썼던 form태그에 많은 기능이 있다는 것을 알고 정리해보려고 한다. 먼저, form태그의 이용성을 간단히 얘기해보면 웹에서 로그인이나 회원가입 페이지를 구현할 때 자주 사용되고 검색 사이트나 쇼핑몰 주문서 화면에서도 form태그를 이용하기도 한다. 그러면 form태그에는 어떠한 기능을 가지고 있을까? 먼저, form태그와 같이 선언되는 속성에 대해 알아보자. 속성 설명 method 사용자가 입력한 내용들을 서버로 넘겨주는 방법을 지정하는 속성으로 GET, POST 중 원하는 속성값을 지정 name 폼의 이름을 지정하는 속성으로 한 HTML 문서 안에 여러 개의 form태그가 있을 경우 form을 구별하기 위해 사용 action form 태그 안의 내용..
-
[에러 수정] Uncaught TypeError: $.ajax is not a function웹 프로그래밍/FE(Front-End) 2021. 6. 29. 20:18
오늘은 JQuery를 이용하여 간단한 웹 페이지를 만들던 중 처음보는 Error가 나와서 해결방법에 대해 정리해보려고한다. 먼저, 문제가 발생한 코드를 봐보자. (문제가 발생한 요인과 관계없는 코드는 생략) ajax를 쓰기위해 Jquery라이브러리는 에 선언을 해주었고 ajax API를 문제없이 쓴 것으로 보인다. 일단은 ajax를 선언한 코드 내에서는 문제가 될만한 점이 보이지 않는다. 그러면 어디가 잘못된 것일까? 정답은 Jquery 라이브러리를 불러오는 부분이 잘못된 것이다. 무엇이 JQuery라이브러리가 ajax를 인식하지 못하게 한 것일까? 그것은 jquery-3.5.1.slim.min.js에서 .slim이라는 문구가 문제를 일으킨 것이다. 더보기 jquery-3.5.1.slim.min.js을 ..
-
JQuery 접해보기웹 프로그래밍/FE(Front-End) 2021. 6. 27. 22:34
오늘은 JQuery를 처음으로 접해봤다. 그 전에는 모든 기능은 JavaScript로만 구현했는데 JQuery를 알게되니까 너무 편하다는 것을 느끼게 됐다. 그러면 지금부터 JQuery에 대해 알아보자. JQuery는 JavaScript를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리이다. JQuery를 이용하면 DOM과 이벤트 처리를 손쉽게 구현할 수 있고 Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발할 수 있다. 그러면 코드를 보며 JQuery가 기존에 JavaScript만을 써서 코드를 짠 것보다 얼마나 더 간편한지 알아보자. HTML에서 어떠한 요소를 숨기는 기능을 구현하는 것을 생각해보자. JavaScript로만 코드를 짠다면 아래와 같다...
-
HTML 속성 제대로 알고 사용하기!!(lang, rel, href, role)웹 프로그래밍/FE(Front-End) 2021. 6. 26. 21:52
오늘은 HTML과 CSS를 공부하면서 평소에는 그냥 넘어갔지만 오늘은 유독 궁금한 부분이 생겨서 찾아보며 안 내용을 정리하려고 한다. HTML을 작성하면서 html부터 head, body, div, a, p 등 수 많은 태그를 사용한다. 이러한 태그에 대한 설명은 강의나 공식문서에서 쉽게 접할 수 있다. 하지만, 태그 안에서 쓰는 속성은 대표적으로 쓰이는 id, class를 제외하면 기능을 모르고 쓰는 경우가 많다. 그래서 기본적인 html에서 많이 본 속성이지만 기능을 모르고 넘어간 것들에 대해 알아보자. - lang 먼저, html의 가장 위에서 선언되는 html태그의 속성인 lang이다. lang은 우리가 쓰고 있는 html 내의 텍스트가 어떠한 언어로 되어있는지를 알려주는 속성이다. 그러면, 그냥..
-
AJAX 파헤치기 (add. 동기/비동기)웹 프로그래밍/FE(Front-End) 2021. 6. 21. 19:06
AJAX는 Asynchronous Javascript And Xml의 약어로 UX(User Experience)와 관련이 많은 기술이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 페이지의 새로고침없이 서버 측의 데이터를 별도로 요청해서 화면에 그려주는 기술이다. JavaScript에서 사용하는 AJAX는 다음과 같은 문제를 해결할 수 있다. 우리가 웹 페이지에 접속하여 순차적으로 렌더링되다가 중간에 서버와의 통신을 위한 코드가 있다면 서버에게 요청을 보내고 응답을 받는 순간까지 잠시 렌더링이 멈춰있을 것이다. 사용자 입장에서는 중간에 통신이 이루어진다는 것은 관심도 없고 인지도 못하고 있을텐데 로딩이 느리다고 생각할 것이다. 이러한 점을 해결하기 위해 JavaScript에서는 화면..