프론트 엔드

[Go] Go 변수와 상수

이번 시간에는 go의 변수와 상수를 알아보도록 하겠습니다. 변수 선언 Go에서 변수는 var 키워드를 사용해 선언하고 다음과 같이 var 다음에 변수 이름과 타입을 표기합니다. var 변수명 타입 Go는 대부분의 언어와는 달리 변수 이름을 먼저 쓰고 그 다음에 타입을 표기해 줍니다. var a int var b string 다른 언어들과 비교해 보면 // C - 타입을 변수명 앞에 표기 int a; char *b; // 자바 - 타입을 변수명 앞에 표기 int a; String b; 이와 같은 순서로 변수를 선언하는 이유는 코드를 더욱 자연스럽게 읽기 위해서 입니다. 코드를 읽을 때 var i int라는 구문을 보면 '변수 i를 int 타입을 선언한다"는 뜻으로 자연스럽게 해석할 수 있습니다. Go는 변..

[HTML] HTML - 24.HTML5 요소 - input 요소

이번 시간에는 HTML에 다양한 타입의 input 요소에 대해 알아보도록 하겠습니다. 다양한 타입의 input 요소 HTML에서는 다양한 타입의 input 요소를 이용해 사용자로부터 입력을 받을 수 있습니다. 대표적으로 사용하는 HTML input 요소는 다음과 같습니다. 텍스트 입력 비밀번호 입력 라디오 버튼 체크박스(check box) 파일 선택 박스 선택(select) 입력(drop-down 리스트) 문장 입력 버튼(button) 입력 전송 버튼(submit) 필드셋(fieldset) HTML5에서 추가된 다양한 타입의 input 요소 HTML5에서 새롭게 추가된 다양한 타입의 input 요소는 다음과 같습니다. datalist 요소 keygen 요소 output 요소 datalist 요소 data..

[HTML] HTML - 23.HTML5 요소 - 의미 요소

이번 시간에는 HTML의 의미 요소에 대해 알아보도록 하겠습니다. 의미 요소(semantic element) 의미 요소(semantic element)란 그 자체로 의미를 가지고 있는 요소를 가리킵니다. 즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미합니다. 의미 요소가 아닌 div 요소나 span 요소 등은 해당 요소가 어떠한 목적으로 사용되었는지 코드를 살펴봐야만 알 수 있습니다. 하지만 의미 요소 중 하나인 table 요소는 코드를 직접 보지 않아도 해당 요소가 표를 만드는 태그라고 인식한다는 것을 이름 그 자체만 보아도 알 수 있습니다. HTML5 에서 추가된 의미 요소 HTML5에 새롭게 추가된 대표적인 의미 요소로는 다음과 같습니다. h..

[HTML] HTML - 22.HTML5 시작

이번 시간에는 HTML의 완전한 5번째 버전으로 월드 와이드 웹의 핵심인 HTML5에 대해서 알아보도록 하겠습니다. HTML5는 무엇인가? HTML5는 웹 상에서 콘텐츠(content)를 구성하고 보여주기 위한 HTML 언어의 최신 표준 권고안으로 HTML5에서는 HTML 4.01,XHTML 1.1등을 대체하는 매우 혁신적인 HTML의 차세대 표준입니다. HTML5는 XML이나 XHTML과는 달리 문법적으로 매우 유연하게 대처하는 언어로써 다음과 같은 사항들을 모두 문법적으로 허용하고 있습니다. 태그 이름에 대문자 사용 속성값에 따옴표 생략 속성값 생략 빈 태그의 종료 태그(/) 생략 HTML5 문서의 기본 구조 HTML5에서는 DOCTYPE 선언이 매우 간단해졌습니다. 또한, 문자셋(character ..

[HTML] HTML - 21.HTML과 XHTML

이번 시간에는 HTML과 거의 비슷한 XHTML에 대해 알아보도록 하겠습니다. XHMTL(EXtensible HTML) XHTML이라는 것은 EXtensible HTML의 약자로 HTML과 거의 비슷하나 문법의 적용이 조금 더 엄격한 특징을 가지고 있는 언어입니다. 좀 더 엄격한 XHTML을 사용하는 이유 오늘날 웹 콘텐츠는 기존의 PC 위주 환경에서 벗어나 다양한 플랫폼이 더욱 많이 이용되고 있습니다. 따라서 부정확한 HTML 문법을 지원하는 데 필요한 자원이 부족한 환경이 점차 생겨나기 마련이기에 XHTML 문서는 하나의 XML 문서로 문법적으로 정확하기 떄문에 표준 XML 라이브러리를 이용한 자동화된 처리가 가능합니다. XHML에 변경사항 문서의 구조적 측면 XHTML DOCTYPE을 반드시 명시 ..

[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에서 웹 페이지의 레이아웃만을 위한 별도의 새로운 요소들을 제공..

[Go] Gofmt로 코드 서식 지정, Gofmt 도구

이번 시간에는 gofmt를 사용해 코드 서식 지정과 도구를 사용하는 법을 알아보도록 하겠습니다. gofmt로 코드 서식 지정하기 go에서는 괄호나 들여쓰기 같은 코드의 서식 지정 문제는 개발자 커뮤니티에서도 자주 등장하는 논쟁거리입니다. Go는 코드의 스타일을 자동으로 맞춰주는 gofmt 도구를 제공함으로써 이러한 논쟁을 해결했습니다. gofmt 도구를 사용하면 코드의 타일을 Go에서 사용하는 스타일 대로 맞춰줍니다. // style 이 맞치 않은 코드 package main import "fmt" func main() { type Rect struct{ width int // width height int // height } r := Rect{1, 2}; fmt.Println(r.width * 2 +..

[HTML] HTML - 15. iframe 요소

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