전체 글

[JavaScript] DOM이란?

DOM이란? Document Object Model 의 약자입니다. 컴퓨터가 문서를 잘 처리할 수 있도록, 문서의 구조를 약속한 것입니다. DOM은 Tree 형태를 따르고 있습니다. Document Object는 JavaScript에서 document로 접근이 가능하며, 부모, 자식 노드를 확인 할 수 있습니다. 위의 사진을 보시면, Tree 형태를 띄고있는 DOM을 보여 주는데, html 코드와 tree 형태를 띄고 있는 사진과 상당히 유사한 구조를 가지고 있습니다. 위 사진은 html DOM Tree를 보여줍니다. 태그 안의 element, attribute 등 나와있는데 이해 안가실수도 있으니, 코드로 직접 확인해 보겠습니다. 우선 저번에 작성했던 코드로 예를 들겠습니다. 우선 가장 상위 오브젝트인..

[JavaScript] CSS 란? CSS 다루기

css란? Cascading Style Sheet HTML 문서의 요소가 어떻게 표시될지 정의 즉, 간단히 HTML로 이루어진 웹 페이지를 디자인하고 꾸미는 것입니다. JavaScript에서 태그 안에는 항상 JavaScript가 와야한다. 라는 약속처럼 css에서는 style="" 안에는 항상 css가 와야한다. 라는 약속이 있습니다. 그리고 style을 적용할 element를 선택 해야합니다. tag, id, class를 선택할 수 있습니다. 그럼 코드에서 확인해 보겠습니다. 여행 명언이고 마음에 와닿는말이라 써보았습니다. 현재 html로 코딩되어있고, 이것을 조금 더 css를 이용하여 꾸며보겠습니다. 현재 실행 화면입니다. 저는 첫번째로 css 사용을 링크 참조를 이용해 외부에서 파일을 들여오는 방..

[JavaScript] Console 창 사용법, window 객체

콘솔 창이란? 크롬 웹브라우저를 기준으로 웹 브라우저 실행 후 F12를 누르면 나오는 개발자 툴에 있는 바로 웹 페이지에 적용할 수 있게 만들어져 있는 도구입니다. 저희는 오늘 Javascript를 에디터를 사용하지 않고 콘솔을 이용해 바로 웹 페이지에 적용을 해보겠습니다. 아래 사진에서는 콘솔창에 코드를 입력하여 웹페이지의 변화를 보는 사진입니다. 저희는 콘솔창을 이용해 보다 수월하게 웹 페이지의 변화를 줄 수 있습니다. 두번째로 window 객체입니다. window 객체는 JavaScript를 실행 했을시 가장 상위의 객체입니다. 예를들어 변수를 선언하거나, 함수를 선언할 시 모두 window 객체 안에 선언이 됩니다. 또한 상위 객체이기 때문에, html, css에도 보다 쉽게 접근이 용이합니다. ..

[JavaScript] script 태그, event 주기

JavaScript는 웹 페이지에서 사용할 수 있는 유일무이한 프로그래밍 언어입니다. 또한 웹에 기초하기 때문에 html과의 밀접한 관련이 있습니다. JavaScript의 가장 큰 요소는 사용자와 상호 작용을 한다는 것입니다. 사용자의 반응에 따라 결과값이 달라집니다. 웹 페이지는 실행이 될경우, 스스로 변화를 주지 못합니다. 하지만 JavaScript는 html를 제어하는 언어이기 때문에, 웹 페이지에 변화를 줄 수 있습니다. CSS는 웹 페이지를 좀 더 꾸미고, 디자인에 치우쳐 있다면, JavaScript는 웹 페이지를 좀 더 사용자에게 최적화시키고, 동적으로 만들어 줄 수 있다고 생각 할 수 있겠습니다. JavaScript는 정적인 웹 페이지를 동적으로 만들어 줍니다. 웹 페이지는 HTML, CSS..

[HTML] HTML <Video> 태그, <Table> 태그

태그란?? html의 태그는 html5에서만 지원이 되는 태그입니다. mp4, webm, ogg의 세가지 확장자가 지원되며, 사용법은 아래와 같습니다. 태그에는 여러 속성이 있습니다. autoplay, controls, height, loop, muted, width, src..등등 이중 몇가지만 보도록 하겠습니다. 1. Autoplay autoplay는 비디오가 로드 될 경우 자동으로 시작되도록 하는 속성입니다. 2. Controls controls 속성은 동영상에 재생, 볼륨조절, 전체화면, 뒤로가기등 창을 띄울수 있게됩니다. 3. loop loop 속성은 비디오를 반복해서 재생하는 속성입니다. 4. src src 속성은 페이지에 삽입할 동영상의 주소를 나타냅니다. 5. widght, height 동..

[HTML] HTML Form 태그, <Meta> 태그

HTML의 유용한 Tag들에 대해 알아보도록 하겠습니다. Form 태그란? 로그인이나 글쓰기, 댓글쓰기 등 사용자가 입력한 정보를 서버로 보낼 때 사용하는 태그입니다. 쉽게 말해, 클라이언트에서 서버로 정보를 전달하여 처리를 할 수 있게 만들어주는 태그입니다. 우선 select태그와 option 태그에 대해 알아보겠습니다. select 태그는 드롭다운 리스트를 만드는 태그이고, option 태그는 드롭다운 리스트 내부의 아이템을 만들 수 있습니다. C#을 먼저 공부한 저로서는 드롭다운 리스트을 선택한 뒤 끌어다 Form 안에 넣은 후, 내부 아이템을 타이핑만 하면 됬었는데 이렇게 사용하려니 불편하다고 생각하였지만, html에서는 좀더 세세하게 디자인할 수 있고, 사용한다는 점이 장점인것 같습니다. 아래 ..

[HTML] HTML 기본 태그와 문법 (3)

태그와 하이퍼텍스트, 주석태그, Img 태그란? 태그는 시작태그와 종료태그 사이의 글을 링크 시켜주는 태그입니다. 하지만 링크 시켜주기 위해서는 당연히 링크될 페이지의 속성값이 필요하겠죠?? 아래 코드에서 속성값을 어떻게 부여하는지 확인할 수 있습니다. 여기서 태그를 사용할때 부여하는 속성값 중 target="_blank" 는 새창에서 페이지가 열리게 하는 속성값입니다. href="" 는 Hypertext Reference의 약자로 하이퍼텍스트를 참조해서 링크시켜주는 역할을 합니다. 이 속성들이 없다면? 태그는 아무런 일도 수행하지 못하게 됩니다. 그럼 화면에서는 어떻게 표현이 될까요? href 속성 뒤에 하이퍼텍스트라고 입력했던 부분이 링크가 걸리게됩니다. 이 하이퍼텍스트를 클릭하게되면 href=" ~..

[HTML] HTML 기본 태그와 문법 (2)

가장 기본적인 , , , 태그란 ? 태그는 heading 의 줄임말 입니다. 즉, 제목이라는 말로 해석할 수 있습니다. 태그는 강조를 뜻합니다. 예를 들어보겠습니다. 태그는 ~ 까지 있으며, 정의에 따르면, 중요함에 따라 1~6까지의 순번을 매긴다. 라고 되어있습니다. h 뒤에있는 숫자가 작을수록 크기가 커집니다. 태그는 중요한 부분의 글을 굵게 표시할 수 있습니다. 아래의 결과값을 보면 알 수 있습니다. 이와 같이 태그의 숫자가 작을수록 글이 커지는 것을 알 수 있습니다. 또한 태그의 시작과 종료 사이에 있는 글은 굵게 표시가 됨을 알 수 있습니다. 태그는 문단의 시작을 알리는 태그입니다. 그렇다면 종료태그는 문단의 종료를 알리는 태그겠죠? 태그는 문단이 종료가 되면 줄을 바꾸게 됩니다. 즉, 줄 바꿈..