프론트 엔드/HTML

[HTML] HTML - 20.HTML과 자바스크립트

이번 시간에는 자바스크립트에 대해 알아보도록 하겠습니다. 자바스크립트란? 자바스크립트(Javascript)란 객체(Object)기반의 스크립트 언어 입니다. 웹 개발의 단계는 3가지가 있습니다. HTML로 웹의 내용을 작성하면 CSS로 작성된 웹을 디자인하고 자바스크립트를 통해 웹의 동작을 구현해주는 단계입니다. 자바스크립트는 주로 웹 브라우저에 사용되나 Node.js(노드JS)와 같은 프레임워크를 사용하면 서버 측 프로그래밍 에서도 사용할 수 있습니다. 현재는 컴퓨터나 스마트폰 태블릿 등에 포함된 대부분의 웹 브라우저에서는 자바스크립트 인터프리터가 내장되 있습니다. script 요소 script 요소는 해당 웹 페이지에서 사용할 스크립트(script)를 정의하기 위해 사용합니다. script 요소 내부..

[HTML] HTML - 19.HTML과 CSS

이번 시간에는 HTML에 스타일을 더해줄 CSS에 대해 알아보도록 하겠습니다. CSS란? css란 Cascading Style Sheets의 약자로 HTML 요소들의 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어입니다. HTML4부터 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능하게 되었습니다. 오늘날 대부분의 웹 브라우저들은 무도 CSS를 지원하고 있습니다. CSS 적용법 HTML 문서에 CSS 스타일을 적용하는 방법은 다음과 같습니다. 인라인 스타일(inline style) 내부 스타일 시트(Internal style sheet) 외부 스타일 시트(External style sheet) 인라인 스타일(Inline style) 인라인 스타일이란 HTML..

[HTML] HTML - 18.Input 요소의 속성

이번 시간에는 input 요소 속성에 대해 알아보도록 하겠습니다. input 요소의 속성 input 요소의 여러 속성을 사용하면 사용자가 입력하는 방식을 더욱 다양하게 제어할 수 있습니다. value 속성 value 속성은 input 요소의 입력 필드(input field)에 나타나는 초기값을 설정합니다. 이름: 학번: 학과: readonly 속성 readonly 속성은 사용자가 입력 필드를 볼 수는 있으나 수정할 수는 없도록 설정합니다. disabled 속성과 다를 점은 전송 버튼(submit)을 누를 시 초기값이 서버로 전송됩니다. 이름: 학번: 학과: disabled 속성 disabled 속성은 사용자가 입력 필드를 아예 사용할 수 없도록 설정합니다. disabled 속성이 설정된 입력 필드는 사용..

[HTML] HTML - 17.Form요소

이번 시간에는 웹 페이지에서 사용자의 입력을 받는 Form 요소에 대해 알아보도록 하겠습니다. Form 요소 웹 페이지에서 form 요소를 사용해 사용자로부터 입력을 받을 수 있습니다. 또한, 사용자가 입력한 데이터를 서버로 보낼 시에도 form 요소를 사용합니다. form 요소는 다음과 같은 문법을 사용합니다. action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시합니다. 이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler) 라고 합니다. method 속성에는 입력받은 데이터를 서버에 전달하는 방식을 명시합니다. 따라서 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달됩니다...

[HTML] HTML - 16.레이아웃

이번 시간에는 HTML에 레이아웃에 대해 배워보도록 하겠습니다. HTML 레이아웃(layout) 레이아웃(layout)이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미합니다. 웹 페이지의 레이아웃은 웹 사이트의 외관 사항을 결정하는데 매우 중요한 요소입니다. HTML에서 다음과 같이 레이아웃을 작성할 수 있습니다. div 요소를 이용한 레이아웃 HTML5 레이아웃 table 요소를 이용한 레이아웃 div 요소를 이용한 레이아웃 div 요소는 CSS 스타일을 손쉽게 적용할 수 있으며 레이아웃을 작성하는데 자주 사용됩니다. Header 영역 Nav영역 Section 영역 Footer 영역 HTML5 레이아웃 HTML5에서 웹 페이지의 레이아웃만을 위한 별도의 새로운 요소들을 제공..

[HTML] HTML - 15. iframe 요소

어느덧 HTML이 중간단계쯤 까지 온것 같습니다. 이번 시간에는 HTM에서 다른 웹페이지를 삽입하는 방법을 알아보도록 하겠습니다. iframe 요소 HTML에서 iframe이라는 요소는 inline frame의 약자로 iframe 요소를 이용해 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있습니다. iframe 요소는 frame 요소와는 달리 종료 태그가 존재합니다. 또한. iframe 요소는 명시된 크기로 삽입되는 창의 크기가 고정되는 요소입니다. iframe 요소의 테두리 변경 iframe 요소에는 기본적으로 검정색의 테투리(border)를 가집니다. 이러한 테두리의 스타일은 style 속성에서 border 속성을 이용해 변경할 수 있습니다. 테두리를 표현하고 싶지 ..

[HTML] HTML - 14.블록과 인라인

이번시간에는 HTML 공간분할에 대해 알아보도록 하겠습니다. HTML 블록과 인라인 HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짖는 display 속성을 가집니다. 대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 값 중 하나를 가지게 됩니다. 블록(block) 인라인(inline) 블록(block) 타입의 요소 display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며 해당 라인은 모든 너비를 차지합니다. p요소는 display 속성값이 block인 요소입니다. 여기서 ,, , ,, 요소는 display 속성값이 블록(block)인 대표적인 요소입니다. 요소 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 ..

[HTML] HTML - 13.리스트와 테이블

이번 시간에서는 HTML 리스트와 테이블을 삽입하는 방법을 알아보겠습니다. HTML 리스트(List) 리스트(list)란 여러 요소들을 일려로 나열한 목록이나 명단을 의미합니다. HTML에서는 이러한 리스트를 표현하기 위해서 다음과 같은 리스트를 제공합니다. 순서가 없는 리스트(unoredered list) 순서가 있는 리스트(ordered list) 정의 리스트(definition list) 순서가 없는 리스트 순서가 없는 리스트는 태그로 시작되며, 여기에 포함되는 각각의 리스트 요소는 태그로 시작합니다. 각각의 리스트 요소 앞에는 기본 마커(marker)로 검정색의 작은 원(bullet) 이 위치합니다. 사과 멜론 바나나 CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는..

[HTML] HTML - 12.링크와 이미지

이번 시간에서는 HTML 링크 주소와 이미지를 삽입하는 방법을 알아보도록 하겠습니다. HTML 링크(Link) 오늘날 웹 페이지에 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(hyperlin)가 존재합니다.이러한 하이퍼 링크를 간단히 링크(link)라고도 불리고, HTML에서는 태그로 표현합니다. HTML 링크 태그의 href 속성은 링크를 클릭 시 연결할 페이지나 또는 다이트 URL 주소를 명시합니다. 태그는 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용할 수 있습니다. 링크를 클릭해서 접속 target속성 태그의 target 속성은 링크로 연결된 문서를 어디에서 열지를 명시합니다. 새창에서 열기 현재 창에서 열기 링크로 연결된 부모 프레임 에서 열기 링크로 연결된 창의 가장 상위..

[HTML] HTML - 11.색과 배경

HTML 색(Color) 표현 이번 시간에는 HTML Style을 사용해서 색을 표현하는 방법을 알아보겠습니다. HTML에서 색을 표현하기 위해서 다음과 같은 3가지 방법이 있습니다. 색상의 이름으로 표현 RGB 색상값으로 표현 16진수를 이용한 표현 색상 이름을 사용해 표현하기 W3C에서 정의한 16가지의 HTML5 표준 색상이름은 다음과 같습니다. 그럼 위 표를 참고해서 만들어 보겠습니다. 색상: 파란색 색상: 브라운 색상: 초콜렛 색상: 아쿠아 RGB 색상값으로 표현 모니터나 스크린에서는 빨간색(Red),녹색(Green),파란색(Blue)를 혼합하여 색을 표현합니다. HTML에서도 위와 같이 세 가지 색을 가지고 색을 표현하기 위해 RGB 색상을 사용합니다. RGB 색상의 기본색은 각각 0부터 25..

[HTML] HTML - 10.스타일

HTML 스타일(Style) 이번 시간에는 HTML 스타일을 사용해 CSS스타일을 HTML요소에 설정하는 방법을 알아보도록 하겠습니다. HTML 요소의 style 속성(attribute)을 이용해 CSS 스타일을 HTML 요소에 직접 설정가능합니다. 하지만 이러한 style 요소를 사용하면 단 하나의 HTML 요소에만 스타일을 적용할 수 있습니다. 배경색 변경 다음 예제에서는 style 속성을 이용해 배경색을 변경 해보겠습니다. style 속성을 이용한 배경색 변경 글자색 변경 다음 예제는 style 속성을 이용해 글자색을 변경하는 방법입니다. style 속성을 이용한 글자색 변경 글자 크기 변경 다음 예제는 style 속성을 이용해 글자 크기를 변경하는 방법입니다. style 속성을 이용한 글자 크기 ..

[HTML] HTML - 9. 주석과 엔티티 그리고 문자셋

이번 시간에는 3가지 항목을 배워볼텐데 먼저 내가 짠 코딩에 대한 해석이 필요할 때 사용하는 주석(Comment) HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위한 문자셋 엔티티(Entity) 웹 브라우저가 HTML 문서를 정확하게 나타내기 위해 사용되는 문자셋(Character Set) 이 3가지의 항목은 한번 배워보도록 하겠습니다. 1. 주석(Comment) 주석(comment)란 개발자가 직접 작성한 해당 코드에 대해 다른 사용자가 보았을때 직접 해석이 가능할 수 있도록 설명이나 디버깅을 위해 작성하는 구문입니다. 주석은 다른 HTML 코드와는 달리 웹 브라우저 화면상에는 나타나지 않습니다. HTML에서 주석을 표현하려면 다음과 같습니다. HTML 주석의 시작 태그( ) 에는 느낌표가 없..