오늘은 테두리 선 스타일 중 자주 사용되는 세 가지 속성에 대해 알아보도록 하겠습니다. 먼저 기본 값은 none입니다. 즉, 테두리 스타일을 지정하지 않으면 테두리 색상이나 두께를 지정하더라도 화면에 표시되지 않습니다. 따라서 테두리를 그리기 위해서는 맨 먼저 테두리 스타일을 지정해야 합니다. border-style 대표 속성 세 가지 1. solid => 테두리를 실선으로 표시합니다. 2. dotted => 테두리를 점선으로 표시합니다. 3. dashed => 테두리를 짧은 선으로 표시합니다.
오늘은 웹 폰트(web font)를 사용하는 법에 대해 알아보도록 하겠습니다. 웹 폰트(Web font)란? 먼저, 웹 폰트란 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시키는 방식입니다. 결국 사용자 시스템에 없는 글꼴이더라도 웹 문서를 통해 필요한 글꼴들을 사용자 컴퓨터에 다운로드한 후 표시하기 때문에 웹 제작자가 의도한 대로 텍스트를 표시할 수 있습니다. 다운로드 없이 웹폰트를 사용하는 방법 구글에서 무료로 제공하는 웹 폰트를 사용하면 따로 다운로드 할 필요 없이 직접 링크해 사용할 수 있습니다. https://fonts.google.com에 접속하면 구글에서 제공하는 여러 웹 폰트가 나열되어 있습니다. 저는 웹 사이..
오늘은 visual studio code에서 html로 출력할 때 한글이 깨지는 현상을 없애는 법에 대해 알아보겠습니다. 먼저 위의 코드를 html로 출력했을 때의 화면입니다. 한글이 깨져서 나온다? 는 십중팔구 인코딩 문제입니다. visual studio code의 우측 하단을 보면 UTF-8로 되어있는 인코딩을 확인할 수 있습니다. "UTF-8"을 먼저 클릭합니다. 다음으로 저는 visual studio code를 영문 버전으로 다운받았기 때문에 Reopen with Encoding이라고 나와 있으나 한글버전일 경우 '인코딩하여 다시 열기'를 클릭합니다. Korean의 일부를 입력하면 그와 관련된 목록이 나옵니다. Korean(EUC-KR)을 클릭해줍니다. UTF-8이 Korean(EUC-KR)로 바..
오늘은 입력란에 텍스트를 표시하는 것을 넘어 사용자가 입력하지 못하고 읽게만 만드는 기능인 readonly에 대해 알아보겠습니다. readonly 속성은 해당 필드를 읽기 전용으로 바꾸어 줍니다. 즉, 텍스트 필드나 텍스트 영역처럼 필드 안에 내용이 있지만 사용자에게 내용을 보여 주기만 하고 입력은 할 수 없게 합니다. readonly 속성은 “true” 값을 지정하여 나타내도고 간단히 readonly라고만 쓰거나 readonly=”readonly” 라고 써도 readonly=”true”로 인식합니다. 실습을 통해 readonly 표현 방식 세 가지를 알아보겠습니다. 1. readonly = "true" readonly 예제 위 예에서는 readonly가 true로 되어 있기 때문에 읽기 전용 텍스트 필..
라디오 버튼과 체크박스 input type에 사용되는 라디오 버튼과 체크박스에 대해 알아보도록 하겠습니다. 라디오 버튼과 체크박스는 여러 항목 중 원하는 항목을 선택할 때 사용하는 폼 요소입니다. 속성 설명 name 라디오 버튼이나 체크박스가 여러 개 있을 경우, 서버의 폼 프로그램에서 라디오 버튼이나 체크박스를 구분하기 위해 이름을 지정합니다. 라디오 버튼은 여러 개 중에서 하나만 선택하는 것이기 때문에 관련있는 그룹끼리는 name 속성 값을 똑같이 만듭니다. value 선택한 라디오 버튼이나 체크박스를 서버로 알려 줄 때 넘길 값을 지정합니다. 이 값은 영문이거나 숫자여야 하며 필수 속성입니다. checked 라디오 버튼의 항목들은 처음에 아무 것도 선택되지 않은 상태로 화면에 표시되는데 기본으로 선..
태그의 type 속성에서 사용 가능한 유형 기본형 ex) 로그인 창에서 아이디나 비밀번호를 입력하거나 로그인 버튼을 클릭하는 등 태그를 사용해 사용자가 입력할 수 있는 형태는 매우 다양합니다. 태그에서 입력 형태를 지정할 대 type속성을 사용하는데 다음 표는 태그의 type 속성에서 사용할 수 있는 유형들입니다. 여기 나열된 유형은 자주 사용하는 것이므로 모두 알아 두어야 합니다. 유형 설명 hidden 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가집니다. text 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣습니다. search 검색 상자를 넣습니다. tel 전화번호 입력 필드를 넣습니다 url URL 주소를 입력할 수 있는 필드를 넣습니다. email 메일 주소를 입력할 수 있는 필드를..
- Autocomplete 속성 자동 완성 이란 검색창이나 로그인 창에 내용을 입력할 때 이전에 입력했던 내용이 아래에 표시되는 것을 말합니다. 이 기능은 autocomplete속성을 이용하여 구현할 수 있는데 기본값이 “on”이기 때문에 이 기능을 사용하는 것보다 사용하지 말아야만 할 때가 중요합니다. 이를테면 중요한 개인정보를 입력하거나 인증번호 입력과 같이 한 번만 사용하고 말 정보를 입력한다면 자동 완성 기능을 끄는 것이 좋을 것입니다. 이렇게 자동 완성 기능을 사용하지 않으려면 보통 브라우저의 환경 설정 명령을 이용해 꺼야 하는데 태그의 autocomplete 속성을 “off”로 지정해 다음과 같이 끌 수 있습니다.
SVG 파일 형식이란? 웹 사이트를 표시할 화면 크기가 다양하기 때문에 같은 이미지라도 작게 표현해야 할 때가 있고 크게 표현해야 할 때가 있습니다. 그런데 원래 작은 크기였던 gif나 jpg/jpeg, png 파일을 크게 확대해 나타내면 이미지가 깨지곤 합니다. 이런 이미지를 비트맵 이미지(bitmap image)라고 합니다. 반면, 이미지를 아무리 확대하거나 축소해도 원래의 깨끗한 상태 그대로 유지되는 이미지를 벡터 이미지(vector image)라고 하는데 이것이 SVG 이미지입니다. SVG 이미지는 크기를 조정해도 이미지가 깨지지 않고 깨끗이 유지되기 때문에 로고나 아이콘에서 많이 사용되며 최근 많은 관심을 끌고 있는 데이터 시각화에서 차트나 다이어그램, 지도 등을 구현할 때도 많이 사용됩니다.
iframe을 이용한 문서 삽입 html에서 iframe 이라는 태그를 이용하면 현재 페이지 안에 또 다른 페이지를 넣을 수 있습니다. 아이프레임은 프레임의 일종으로 프레임 중에서 문서 본문에 액자처럼 삽입하는 것을 말합니다. Iframe을 이용해 또 다른 페이지를 삽입 했을 때 현재 문서는 부모 문서가 되고 삽입된 문서는 자식 문서가 됩니다. 실습 Iframe 태그를 실습하기 위해 간단한 부모 문서와 자식 문서부터 만들어 보겠습니다. 부모 문서(Parent.html) iframe 예제 아래 화면은 iframe 태그를 이용해 외부 문서를 현재 문서에 삽입한 것입니다. 자식 문서(Child.html) iframe child 이제 iframe 태그를 사용하여 이 Child.html을 Parent.html의 ..
태그 – 문자 인코딩 및 문서 요약 정보 태그에 대해 알아보도록 하겠습니다. 태그는 태그 안에서 쓰이는 태그로서 화면에 글자를 표시하는 문자 인코딩 방법을 비롯해 웹 문서 키워드 등을 지정할 수 있습니다. 이것은 웹 문서 정보를 검색 엔진에게 전달해 주는데 매우 유용하게 사용됩니다. 태그에서 가장 중요한 부분은 문자 인코딩을 지정하는 것입니다. 문자 인코딩 웹 서버는 영어를 기본으로 하기 때문에 웹 문서에서 한글을 표시하려면 한글을 화면에 나타내기 위한 문자 세트를 지정해야 합니다. 이것을 문자 인코딩 이라고 하는데 HTML5에서는 한글과 영문을 비롯해 모든 언어를 표시할 수 있는 utf-8 방식을 사용 합니다. DOCTYPE html> Example 문서 정보 태그를 이용하면 문서에 대한 간단한 설명을..
HTML의 기본 구조를 살펴보도록 하겠습니다. HTML 문서는 일반 문서와 달리 정해진 형식이 있습니다. 소스가 아무리 짧더라도, 또는 아무리 길더라도 , , - 웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분. 문서에서 사용할 외부 파일들도 이곳에서 링크. 여기에 있는 정보는 실제 문서 내용은 아님. 스타일 및 스크립트 등이 포함되기도 함. 4) ~ - 실제로 브라우저 화면에 나타날 내용. 대부분의 태그가 이 태그 안에 들어감. HTML 문서 예제
HTML(HyperText Markup Language) HTML이란 HyperText Markup Language의 줄임말입니다. 문자 그대로 접근해보면 하이퍼텍스트를 마크업하는 언어라는 말인데 그럼 ‘하이퍼텍스트’는 무엇일까요? 이 하이퍼텍스트는 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능을 말합니다. ‘마크업’은 태그(tag)를 사용해 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 것으로 ,, 을 이용해 나타냅니다. 즉, 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어가 HTML입니다. 컴퓨터에서 사용하는 모든 파일에는 각각 고유의 형식이 있습니다. Ex) 엑셀 -> *.xlsx, 한글 -> *.hwp 웹의 경우도 마찬가지로 웹..