민아의 개발블로그

1. 자바스크립트 자바스크립트는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어이다. 웹페이지에서 어떤 버튼을 클릭하거나, 내용을 입력한 후 일어나는 일을 컨트롤할 수 있는 것은 모두 자바 스크립트의 역할이다. 2. 장점 2-1. 속도 자바스크립트는 인터프리터 언어이기 때문에, 자바와 같이 컴파일이 필요한 다른 프로그래밍 언어에 비해 시간이 적게 소요된다. 인터프리터 언어 프로그래밍 언어를 컴파일하여 기계 언어로 바꾸지 않고, 프로그래밍 언어로 되어 있는 코드를 한줄씩 읽으며 실행한다. 매번 똑같은 결과를 반환하느 함수를 5번 호출한다고 치자. 인터프리터 방식은 해당 함수 호출을 만날 때마다 함수를 매번 하여 총 5번 함수를 실행한다. 반면, 컴파일 언어에서는 처음..

1. DOM (문서 객체 모델) 자바스크립트의 언어 구조 상 HTML 페이지에 있는 구조, 스타일, 내용 등에 접근할 수 없다. 따라서, 웹 페이지에 있는 HTML요소들을 자바스크립트가 읽을 수 있게 고쳐야 한다. 이와 같은 표현을 웹 페이지의 객체 지향 표현이라 칭하며 자바스크립트의 자료형 중 객체(object)를 이용한다. 이렇게 변환시켜준 문서 객체를 DOM이라 부른다. 2. 트리 구조 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현한다. 왼쪽 이미지 : html 페이지이다. 자바스크립트가 읽을 수 있게 변환해준다. 오른쪽 이미지 : 각 객체(네모박스)들이 부모-자식 관계로 표현되어있다. 3. 노드 (Node) DOM 맥락에서는, 노드(node) 는 노드..

1. 호이스팅 변수 선언들은 코드가 실행 되기 전에 처리하기 때문에, 코드 안에서의 변수 선언은 최상위에 선언한 것과 동등합니다. 이것은 변수가 선언되기 전에 사용 될 수 있다는 것을 의미합니다. 변수 선언이 함수 또는 전역 코드의 상단에 이동하는 것과 같은 행동을 "호이스팅(hoisting)"이라고 불립니다. name = mina; var name; // 위 선언은 아래와 같습니다. var name; name = mina; 2. var var 문은 변수를 선언하고, 선택적으로 초기화할 수 있습니다. 2-1. 변수의 중복 선언이 가능합니다. 변수 선언 오류는 예기치않은 결과로 이어질 가능성이 높아, var의 사용을 권장하지 않습니다. var x = 1; console.log(x) //1 var x = 2..

1. 사용하는 이유 각 브라우저는 브라우저 내장 스타일을 가지고 있어서 스타일링을 전혀 하지 않은 HTML이라 할지라도 최소한의 형태를 보장할 수 있다. 스타일이 없는 같은 html이라고 하더라도 사파리, 크롬, 파이어폭스에서 다르게 보일 수 있다. 이와 같은 문제를 최소화하여 사용자들에게 최대한 동일한 사용감을 주기 위해 사용하는 것이 nomalize, reset css입니다. 2. normalize.css 가능한한 브라우저의 내장 스타일을 최대한 건들지 않는 선에서 브라우저 간에 상이한 부분만 스타일을 통일시켜 줍니다. 기존의 모든 스타일을 제거하는 reset과 달리 기본 브라우저의 스타일을 유지하려는 스타일링이다. 2-1. 장점 정규화가 필요한 태그들만 터치한다. 지속적으로 업데이트 중인 프로젝트이..

CSS의 display 속성에 대하여 알아보겠습니다. display: none 화면에서 사라집니다. 영역도 차지하지 않습니다. (visibility:hidden 는 영역을 차지합니다.) display: inline 글자나 문장의 효과를 주기 위해 존재하는 태그로, block과 달리 줄바꿈이 되지 않고, width와 height를 줄 수 없습니다. span , i , a 태그 등이 해당됩니다. display: inline-block block과 inline의 중간형태로 볼 수 있으며, 컨텐츠 크기만큼의 영역을 차지하며 width와 height를 줄 수 있습니다. display: block 일반적으로 div가 가지는 기본 속성이며 width와 height를 줄 수 있습니다. 컨텐츠의 가로영역을 모두 차지하여..

프로그래밍에서, 시맨틱은 코드 조각의 '의미'를 나타내며 채워질 '데이터'를 나타내도록 코딩해야 합니다. 이게 어떻게 시각적으로 보여질까? 보다는 이 HTML 엘리먼트가 가진 목적이나 역할은 무엇일까요?를 들 수 있습니다. 어떻게 보여져야만 하는가는 CSS만의 단독 역할입니다. 웹접근성에 효율적 - 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 사용할 수 있습니다. 코드 가독성 상승 - 끊임없는 div 들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽습니다. 검색엔진 최적화(SEO)에 유리 - 의미론적 마크업을 페이지의 검색 순위에 영향을 줄 수 있는 중요한 키워드로 간주합니다 HTML 문서의 루트(최..

알람 버튼 누르면 알람 쌓이고 3초 뒤 자동으로 삭 삭제 버튼 누르면 리셋