3일만에 끝내는 HTML, CSS, JS 기초

HTML URL 주소 체계 URL 은 Uniform Resource Locators 의 약어로서 인터넷 상의 주소체계를 의미합니다. 이 URL 은 단어로도 표시될 수 있고 (never.com), 또는 인터넷 프로토콜 번호로도 표시될 수 있습니다(125.209.222.141). 일반적으로 웹 서핑할 때는 이름을 사용하게 됩니다. 웹 브라우저는 특정 웹 서버의 웹 페이지를 요청할 때 URL 을 사용하게 되는데, HTML 웹 페이지에서 링크를 클릭하면 태그는 웹상의 페이지의 위치를 가리키게 됩니다. 즉 URL 이 웹상의 데이터나 웹페이지의 주소를 알려주게 되고 웹 브라우저는 특정 웹 페이지를 호출하게 됩니다. URL Scheme(방식) 은 통신에 사용될 프로토콜을 알려주게 됩니다. 대부분의 웹 페이지에서는 h..

HTML 인코딩 문자 설정 HTML 웹 페이지를 올바르게 표현하려면, 먼저 웹 브라우저가 사용할 문자셋을 알아야 합니다. 아스키(ASCII) 는 맨 처음 사용된 문자 부호화 체계입니다. 모두 127 개의 알파벳 및 숫자로 된 문자를 가지고 인터넷 상에서 사용되었습니다. 아스키(ASCII) 코드는 숫자 (0-9), 영어 문자 (A-Z), 그리고 특수문자 ! $ + - ( ) @ 로 구성되었습니다. 반면 ANSI (Windows-1252) 는 윈도우즈 문자셋 용으로 시작되었습니다. 256 개의 문자 코드를 지원합니다. ISO-8859-1 은 HTML 4 환경에서 표준 문자셋 입니다. 이것 역시 256 개의 문자 코드를 가지고 있습니다. ANSI 와 ISO 문자셋이 한계가 있었기 때문에, HTML5로 ..

HTML 주석달기 주석은 브라우저 화면에는 표시되지 않습니다. 자신의 HTML 코드에 대해 상기시키는 역할을 합니다. 본문 내용 부분입니다. 본문 내용 부분입니다. HTML 코드에서 오류를 찾기 위해 코드를 하나씩 주석처리 해 볼수 있습니다. HTML 에서 조건부 주석 처리를 할 수 있습니다. 조건부 주석은 인터넷 익스플로러 브라우저의 버전이 해당되는 경우에만 HTML 코드가 실행되고, 그외에는 주석으로 처리됩니다. [광고] Udemy 동영상 강의로 보기

HTML 특수문자 입력 키보드에 없는 문자들도, 특수문자 입력에 의해 표현할 수 있습니다. 특히, less than () 문자의 경우에는 브라우저가 태그로 인식할 수가 있어서 혼란이 올 수 있는데 이 경우, 특수문자 입력 방식을 사용하면 됩니다. 아래와 같이 하면 코드가 아니라 문자로 인식하게 됩니다. &entity_name; 또는 &#entity_number; 특수문자 설명(영문) 이름형식 번호형식 (스페이스) non-breaking space     greater than > > & ampersand & & © copyright © © ® registered trademark ® &#17..

HTML 헤드 태그 태그는 메타데이터를 담기 위한 태그입니다. 메타데이터란 HTML 페이지 생성에 관계된 데이터인데, 문서의 본문에 표시되지는 않습니다. 메타데이터는 문서의 제목, 스타일 지정 본문내용 적는 곳 언어의 설정은 화면을 읽어주는 프로그램이나 또는 검색엔진에게 중요합니다. 태그 또는 태그를 생략할 수는 있느나, 생략하게되면 DOM/XML을 활용하는 프로그램에서는 심각한 문제를 일으킬 수 있습니다. 태그는 브라우저 탭에 제목을 부여합니다. 또 즐겨찾기로 등록할 때 페이지 제목으로 사용되고, 검색엔진에서 검색결과를 표시할 때에도 제목으로 사용됩니다. 따라서 타이틀을 잘 기입하는 것이 중요하겠습니다. [광고] Udemy 동영상 강의로 보기

HTML 반응형 웹 디자인 어떤 단말기냐에 관계없이 각 장비에 맞게 최적화된 웹사이트를 보여주는 디자인을 반응형 웹디자인이라고 합니다. 예를 들면 데스크탑에서는 큰 화면에 맞게 보이고, 또 타블렛이나 스마트폰에서는 그 화면의 크기에 맞게 자동으로 디자인이 변형됩니다. 반응형 웹 디자인은 CSS 스타일을 사용하여 HTML 요소들을 크기 변경이나 이동, 또는 숨기기와 같이 변형시켜 각 스크린에 최적화시키는 방법을 사용하게 됩니다. 반응형 웹 디자인을 위해서는 일반적으로 화면을 여러개의 영역으로 나눌 필요가 있는데, 주로 태그를 사용하여 HTML Layout 을 표현합니다. 태그가 많이 사용되는 이유는 CSS 스타일을 쉽게 지정할 수 있기 때문입니다. wordpress.com 에서는 기본적으로 반응형 웹 디자..

HTML 블록 태그 및 인라인 태그 모든 HTML 태그는 기본적으로 블록 태그와 인라인 태그로 나눌 수 있습니다. 블록 태그들은 화면의 전체폭을 갖으며 줄바꿈으로 시작합니다. 태그가 이런 종류의 태그입니다. , , ..., 등이 있습니다. A B C D A B C D 인라인 태그들은 새로운 줄에서 시작하지 않습니다. 그리고 폭도 필요한 만큼만 가지게 됩니다. 태그는 태그 내에서 인라인 태그로 사용됩니다. 인라인 태그에는 , , 태그가 있습니다. 1 2 1 2 태그는 다른 HTML 태그를 담는 그릇과 같은 역할을 하는 블록 태그 입니다. 태그에 style 및 class 를 지정하여 사용할 수 있습니다. 이때 태그는 스타일이 적용되는 영역으로 사용될 수 있습니다. 수소폭탄 수소폭탄은 일반 핵폭탄을 이용해 수..

HTML 리스트 태그 HTML 리스트 기능중에 태그로 시작하고, 각 리스트 항목이 태그를 갖으면, 해당 리스트 항목들의 맨 앞에 검은 점이 표시됩니다. 울산바위 흔들바위 등산 : 30분 하산 : 20분 비선대 장승골 여우마실 구름마당 오선지 수학노트 음악공책 울산바위 흔들바위 등산 : 30분 하산 : 20분 비선대 장승골 여우마실 구름마당 오선지 수학노트 음악공책 태그로 시작하고 각 리스트 항목이 태그를 갖으면, 해당 항목의 맨 앞에 일련번호가 순차로 표시됩니다. 치와와 풍산개 바둑이 치와와 풍산개 바둑이 볼트 너트 나사 감 밤 사과 배추 단무지 겉절이 롤리팝 마시멜로 넛 브레드 치와와 풍산개 바둑이 치와와 풍산개 바둑이 볼트 너트 나사 감 밤 사과 배추 단무지 겉절이 롤리팝 마시멜로 넛 브레드 태그는 ..

HTML 도표 도표 형태를 태그로 표현할 수 있습니다. 이 테이블은 다시 태그로 테이블 열로 나뉘고, 그 안에서 태그로 테이블 데이터를 표현합니다. td 는 '테이블 데이터'를 의미하는데, 이는 모든 HTML 요소들 즉, 문자, 이미지, 목록 또는 다른 테이들도 포함합니다. 테이블 열에서 태그 대신에 태그를 사용하면 도표의 머리글로 표현됩니다. 성 이름 나이 장 나리 30 박 봄에 32 성 이름 나이 장 나리 30 박 봄에 32 테두리는 border 속성으로 표현합니다. boder 속성은 표준 문법이 아니기 때문에, CSS 스타일을 사용하는 것이 좋습니다. 이와 같이 CSS 스타일을 적용하면 테이블 뿐아니라 테이블 안의 셀까지도 테두리가 적용됩니다. 셀에 패딩(안쪽 여백)을 적용하면 셀의 내용과 테두리 ..

HTML 이미지 태그 HTML에서는 이미지 표시도 태그로 정의합니다. src 속성으로 이미지의 url 을 입력해 줍니다. alt 속성은 이미지가 로드되지 않았을 때 대체 문자를 표시해 줍니다. 또 alt 속성값은 페이지를 읽어주는 프로그램에서 사용되기도 합니다. 이미지 사용시, 가로와 세로 픽셀을 지정하는 것이 좋습니다. 가로 세로 픽셀이 지정되어 있지 않으면 이미지가 로드 될 때 떨수가 있습니다. 이미지의 경로가 지정되어 있지 않으면, 브라우저는 같은 폴더내에서 파일을 찾기 때문에, 폴더위치가 틀리다면 틀린부분을 적어 주어야 합니다. 하위 폴더에 이미지가 있는 경우가 많은데, 이때에는 폴더이름과 파일이름을 적어 줍니다. 다른 사이트에 있는 이미지의 경우에는 전체 경로를 모두 포함하여야 합니다. 이미지에..