요소의 박스보다 내용이 길어질 경우 어떻게 보여줄 것인가? 이와 관련된 개념으로 블록 서식 맥락(block format context; 이하 ‘BFC’)에 대해 살펴보고 BFC가 생성되는 overflow의 상황을 살펴보고자 한다. 1. 블록 서식 맥락(block format context) 1-1 의미 웹 페이지를 렌더링하는 시각적 CSS의...

HTML5에서는 <canvas> 와 SVG를 이용하여 기존에 플래시, 실버라이트로 했던 그래픽 처리를 대체할 수 있다. 1 . Canvas 1-1. 의의 Canvas는 자체가 그래픽을 구현 하는 것이 아닌 웹문서에 그래픽 구현을 위한 영역을 정의하고 실제로는 JavaScript를 이용해 Canvas API로 만든 코드를 이용해 ...

DOM (Document Object Model) 1- 1. 개념 및 의의 DOM(돔)이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델이다. JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있다. DOM은 HTML인 웹페이지와 스크립팅언어(JavaScript)를 서로 연결하는 역할을 한다....

약속어(Reserved Words) 이미 사용중인 함수 단어들 이므로 코딩할 때 함부로 사용할 수 없다. ::예시1> alert() : 알림창 _ 사용자에게 안내하고 싶은 텍스트를 보여줌 ::예시2> console.log() :개발자 도구 *개발자가 확인하고 싶은 내용을 출력 *이전 값들을 지우고 싶다면? co...

CSS? = HTML tag에 디자인을 입혀주는 것 HTML과 CSS파일의 연결: 1. HTML document에 CSS파일 불러오기 <link href=“css파일경로” rel=“stylesheet” type=“text/css”> rel: HTML file과 CSS file과의 관계를 설명 2. HTML에 CSS적...

웹페이지에 이미지를 생성하는 방법은 크게 두가지로 구분할 수있다. HTML <img> tag를 활용하는 방법과 CSS에서 divtag에 background-imageattribute 추가하는 방식이다. 두 방식의 특징과 차이점에 대해 검토하기에 앞서 Semantic HTML 과 그와 관련된 HTML tag에 대해 살펴보겠다. Semant...

Data type Data type(데이터 형) 은 쉽게 말하자면 ‘메모리에 저장되는 방식’을 의미한다. 자바스크립트 언어의 특징 중 하나가 데이터 타입을 신경쓰지 않는다는 것이다다. 타입 체크가 쉽다는 건 다른 언어보다 편하다고 할 수 있겠지만, 코드를 잘못 짜면 자칫 오류가 날 수 있습니다. (다른 언어에서는 변수에 어떤 값을 할당해서 변수의...

Codecademy의 Beginer friendly courses 중 HTML과정에서 배운내용을 다시 정리해보고자 한다. HTML이란 무엇인지 그 의미를 알아보고 이후 HTML의 속성 및 요소들 대해 검토하겠다. 참고자료: https://www.codecademy.com/catalog/language/html-css 1. HTML? HTML...