안녕하세요 엘빈입니다. 저번 포스팅에서는 form 구조에 대해서 간략히 알아보았습니다. 이번 포스팅에서는 Form 태그 안에서 대부분이 차지하는 input 태그에 대해서 알아보겠습니다. Input 태그는 입력 형식을 구현하기 위한 태그로 type 유형에 따라 다양하게 화면에 표시할 수 있습니다. 기본 형식은 다음과 같습니다 " " type 은 input 태그를 입력할 때 필수적인 속성입니다. type 값에 따라 input 태그는 다양한 기능과 모습으로 화면에 구현됩니다. id 값은 필수적이진 않지만 꼭 값을 넣도록 요구되는 속성 값입니다. 그 이유는 다른 input 태그와 구별하기 위함과 웹 서버에서 입력 값을 판별하기 위함입니다. 나중에 이에 대해 자세히 포스팅 하겠습니다! 일단 이정도만 알아 두고 t..
안녕하세요 엘빈입니다. 저번 포스팅에서는 링크 관련 태그들을 알아보았습니다. 이번 포스팅에서는 입력을 위한 태그 form에 대해서 알아보겠습니다. 웹에서 form은 자주 사용됩니다. Form이 무엇이냐고요? 로그인 버튼, 회원가입 페이지 등 사용자가 입력을 하는 창을 보신 적이 있을 것입니다. 빈칸의 내용을 입력하고 제출 버튼을 클릭하면 이 입력 내용들은 웹 서버로 보내집니다. 이러한 입력 및 제출과 관련한 기능을 제공하는 태그가 form인 것입니다. form 태그 만들기 Form 태그는 속성을 통해 서버로 어떤 방식으로 넘길 것인지, 어떻게 처리할 것인지를 지정할 수 있습니다. 사용하는 속성은 다음과 같습니다. method 넘겨주는 방식을 지정합니다. (get, post) name 폼의 이름을 지정합니..
안녕하세요 엘빈입니다. 링크는 웹 문서가 다른 일반 문서와 구별되는 가장 큰 특징입니다. 사이트들간의 이동을 생각하시면 쉽습니다. 우리는 해당 사이트의 주소만 알면 웹상에 어디든 이동할 수 있죠. 즉 클릭만 하면 연결된 곳으로 즉시 이동 가능하여 웹 사용을 더욱 편리하게 해줍니다. Html 문서 또한 링크 이동을 위한 태그들을 제공하고 있습니다. 링크 만들기 태그와 href 속성 글씨나 메뉴의 버튼 등을 클릭하면 어딘가로 이동하는 현상을 자주 보았을 것입니다. A 태그는 링크 주소를 통해 해당 주소로 이동할 수 있는 기능을 제공합니다. A 태그에서 사용 가능한 속성은 다음과 같습니다. 속성 태그 Href 문서나 사이트의 주소값 Target 이동 시 표시될 위치를 지정 Download 링크 내용을 다운로드..
안녕하세요 엘빈입니다. 저번 포스팅에서는 표 관련 태그들에 대해서 알아보았는데요. 이번 포스팅에서는 웹 사이트 꾸미기의 핵심이라 할 수 있는 이미지 관련 태그들에 대해서 알아보겠습니다. 텍스트로만 웹화면을 표시한다면 밋밋한 맛이 클 것입니다. 텍스트에 각종 효과를 준다고 해도 사람들은 글보다 시청각 자료에 대해서 좀 더 잘 이해하죠. 웹에서 자주 사용하는 이미지 형식은 무엇이 있을까요?? 대부분 사용되는 파일 형식은 GIF(움직이는 이미지를 표시할 때 주로 사용), JPG(다양한 색상과 명암을 표현할 수 있음), PNG(투명 배경 등 네트워크 용으로 적합함)가 있습니다. 최근 구글에서 WEBP를 개발하였습니다. 화면에 표시할 때 기존보다 적은 용량으로 사진을 보여줄 수 있게 되었습니다. 이처럼 웹개발에 ..
안녕하세요 엘빈입니다 표는 웹 문서 자료를 정리 할 때 자주 사용하는데요. Html 문서에서 또한 표를 이용한 디자인을 많이 적용시킵니다. 이번 포스팅에서는 표와 관련된 태그들에 대해서 알아보겠습니다. 기본적인 표 만들기 기본적인 표를 만드는데 총 3가지의 태그가 사용됩니다. 기본 테이블을 형성하는 소스 코드는 다음과 같습니다. 1 2 3 4 8 9 10 11 12 내용1 13 내용2 14 내용3 15 내용4 16 17 18 내용1 19 내용2 20 내용3 21 내용4 22 23 24 25 여러 열을 묶어 스타일 지정하기 여러 개의 열에 색을 넣고 싶다면 어떻게 할까요? 각각의 행이나 열에 스타일을 지정하려면 많은 시간이 소비될 것입니다. Col, colgroup 태그를 사용하면 여러 열을 묶어 한번에 ..
안녕하세요 엘빈입니다. 저번 시간까지 html 문서의 기본 구조를 살펴보았는데요. 이번 포스팅부터 실제 html 문서를 작성하는데 사용되는 태그와 속성에 대해서 알아보겠습니다. * 텍스트를 덩어리로 묶어 주는 태그 태그들은 크게 Block 태그와 inline 태그로 나뉩니다. 지금부터 알아볼 태그들은 선택한 텍스트 글자에서만 적용되는 것이 아니라 텍스트가 포함된 블록 전체에 적용되는 태그들입니다. 제목을 표시하는 태그 h1입니다 h2입니다 h3입니다 h4입니다 h5입니다 h6입니다 h(숫자) 태그는 제목을 의미하는 태그입니다. 다음과 같이 작성해 봅시다. 위와 같이 h태그를 사용하면 제목과 같은 글씨체로 표시됩니다. h 뒤의 숫자가 작을수록 좀 더 큰 제목을 표시하며 작아질수록 글씨 크기가 작아집니다. ..
웹 프로그래밍은 크게 소스코드를 작성할수 있는 '웹 편집기'와 결과화면을 볼 수 있는 '웹 브라우저'로 나누어져 있습니다. 웹 편집기와 웹 브라우저는 한 가지로 고정되어 있는 것이 아니라 종류가 정말로 다양합니다. 우리는 이 중에 각각 하나를 택해 소스코드를 작성하고 결과 화면을 볼 것입니다. # HTML 환경설정 및 기초 웹 브라우저 네이버, 구글, 페이스북 등등 우리가 접속하고 싶은 사이트를 쉽게 접근할 수 있도록 도와주는 프로그램을 웹 브라우저라고 하는데요. 웹 브라우저는 웹 편집기로 작성한 웹 문서를 화면에 표시해 주는 역할을 합니다. 현재 많은 브라우저가 존재하며 그중 사용자가 많은 대표적인 웹 브라우저만 정리해보았습니다. 각 브라우저마다 장단점이 존재하지만 2018년을 기준으로 사용 현황을 보..
웹 프로그래밍이란 무엇일까? # 웹 기반에서 동작하는 프로그래밍 방식을 뜻한다. 웹프로그래밍에 사용되는 언어는 여러가지다. # 웹 개발에는 크게 프론트엔드와 백엔드 개발로 나뉘어져있다. 간단하게 정리하자면 프론트 엔드 개발은 사용자에게 실질적으로 보여주는 화면을 개발하는 것이고 백엔드는 이 프론트엔드와 상호작용을 하며 데이터베이스와 서버를 담당하고 있다. 최근 프론트엔드와 백엔드의 경계가 허물어지면서 (점점 좋아지는 개발자 라이브러리) '풀스택' 개발도 등장하고 있다. 풀스택이란 프론트와 백엔드 모두 교차적으로 작업할 수 있는 역할을 뜻한다. 프론트엔드 언어는 HTML, CSS, JavaScript 로 구성되어 있다. 실제로 우리가 들어가는 웹 사이트 화면도 이 언어들로 구성되어 있다. 크롬 프로그램은 ..