본문 바로가기

2018/12

HTML+CSS 기초강의 목차 HTML+CSS 기초강의 목차 HTML+CSS 기초 강의 - 1. HTML 의 시작 HTML+CSS 기초 강의 - 2. HTML뷰어, 웹에디터, 웹브라우저 HTML+CSS 기초 강의 - 3. HTML 문서의 기본 구조 알기 HTML+CSS 기초 강의 - 4. HTML4와 HTML5 HTML+CSS 기초 강의 - 5. 텍스트 태그로 기본 HTML 문서 만들기 HTML+CSS 기초 강의 - 6. 이미지(<img>) 태그로 이미지 ..
HTML+CSS 기초 강의 - 1. HTML 의 시작 이제는 인터넷을 하는 사람이라면 누구나 아는 단어가 된 HTML.  고리타분한 HTML의 탄생이나 역시 같은건 나무위키를 보면 더 자세히 나와 있으므로 여기서는 생략! 하고 싶지만 대충이라도 요약하면 1980년 유럽 입자 물리 연구소 소속의 물리학자 팀 버너스 리가 원형인 인콰이어를 제안해서... 어쩌구 저쩌구... 1991년 HTML태그를 공개하면서 HTML이 시작. 곧 1.0이 됩니다. 1995년 2.0 발표 199..
HTML+CSS 기초 강의 - 2. HTML뷰어, 웹에디터, 웹브라우저 엑셀 문서(XLS 포맷)는 엑셀 프로그램에서 열면 그 내용을 볼 수 있고, 또 수정할 수 도 있습니다.  즉, 엑셀 프로그램은 XLS 문서를 보는 뷰어이기도 하고 편집기이기도 합니다. 반면, 엑셀 뷰어 프로그램은 보기 전용이기 때문에 엑셀 문서를 볼 수만 있고 수정할 수는 없습니다. 웹브라우저는 엑셀 뷰어 프로그램 같은 것입니다. HTML 문서를 읽어서 태그를 해석하고 CSS를 적용해 문서를 예쁘게 화면상에 ..
HTML+CSS 기초 강의 - 3. HTML 문서의 기본 구조 알기 HTML 문서의 기본 구조를 알기 전에 HTML 문서가 어떻게 생겼는지 간단히 알아모도록 하겠습니다. 크롬 웹브라우저 기준으로 보고 있는 현재 강의 화면에서 마우스 오른쪽 버튼을 누르면 컨텍스트 메뉴가 표시됩니다. "페이지 소스보기"(Ctrl+U) 를 선택하면 별도의 탭이나 창에 현재 보고 있는 이 강의 페이지의 HTML HTML 문서 소스가 보입니다. 이처럼 모든 웹상의 페이지는 소스를 볼 수 있는 공개된 문서입니다. 아주 복잡해 ..
HTML+CSS 기초 강의 - 4. HTML4와 HTML5 HTML 규격은 1.0에서부터 계속 버전업 되어 HTML4에서 완전히 대중화 되었고, 현재는 최신 버전인 HTML5가 사용되고 있습니다. 대부분의 웹브라우저에서 HTML5 스펙을 지원하기 때문에, 새롭게 HTML을 배우는 입장이라면 HTML5를 그냥 배우면 됩니다. 가장 최근 버전은 HTML 5.2 입니다. 다만, 우리나라는 아직 구버전 브라우저인 인터넷익스플로러 9/10을 사용하는 환경이 적지 않기 때문에 최신 HTML5 표준이나 CSS3..
HTML+CSS 기초 강의 - 5. 텍스트 태그로 기본 HTML 문서 만들기 이제 몇가지 기본 HTML 태그를 사용해 기본 HTML 문서 구조를 만드는 방법을 알아보도록 하겠습니다. 그전에 HTML 문서를 작성하기 위한 2가지 준비를 해야 합니다. - 텍스트 편집기, 또는 웹에디터 프로그램 본인 취향이나 편의성에 맞춰서 잘 쓰는 에디터를 추천합니다. 과거에는 디자이너를 중심으로 어도비 드림위버를 많이 사용했지만, 이런 웹에디터 프로그램들이 불필요한 추가 코드를 붙이는 경우가 많다보니 HTML 문서가 ..
HTML+CSS 기초 강의 - 6. 이미지(<img>) 태그로 이미지 붙이기 HTML 문서를 가장 예쁘게 보이게 만드는 태그중 하나가 이미지 태그(<img>)입니다. 이미지 태그는 태그쌍없이 단독 태그(<img>)로 사용하는 태그이며, 이미지 위치를 표시하는 속성인 src, 이미지 크기를 표시하는 width, height 등의 속성을 사용합니다. 태그명은 <img/> 입니다. 이미지 위치를 가리키는 속성으로 src를 사용합니다. 예를들어 HTML 문서가 있는 경로에 new...
HTML+CSS 기초 강의 - 7. 하이퍼링크(<A>)로 HTML 문서를 연결하기 HTML문서는 하이퍼링크를 통해 진정한 연결형 문서가 됩니다.  하이퍼링크를 통해 문서의 다른 위치, 또는 다른 문서를 연결함으로써 다른 위치나 다른 문서로 즉시 이동할 수 있게 됩니다. 이렇게 연결된 HTML 문서들은 끊임없이 이어진 하나의 커다란 문서로 거듭나게 됩니다. 거창하게는 그렇지만  사용방법은  <a href="#chapter2">클릭하세요</a> 이렇게 간단합니다. href 속..
HTML+CSS 기초 강의 - 8. HTML 문서에서 사용할 수 있는 이미지 포맷 웹 표준으로 사용할 수 있는 이미지 포맷은 jpg(jpeg), gif, png, svg 입니다. 간단하게 말하면 이 이미지 포맷이 아닌 이미지 파일은 웹/인터넷에서 사용하면 안됩니다. 사용할 수도 없습니다. jpg(jpeg) 고해상도 고컬러 이미지를 인터넷 상에 표시하기 위해 가장 널리 사용되는 이미지 포맷입니다. 손실 압축 방식이기 때문에 압축율을 너무 많이 높이면 이미지가 다소 뭉게지거나 흐릿해 보이는 문제가 있습니다. 초고해상도 사진등..
HTML+CSS 기초 강의 - 9. 시맨틱 태그로 문서를 구조화하기 시맨틱 태그를 꼭 사용해야 하냐 마냐는 해묵은 문제이므로 여기서는 논외로 합니다. 사용하면 좋지만 사용하지 않아도 문제 없고,  CSS로 레이아웃을 정의할 때 정해진 영역 용도에 따라 정의해주면 되니 좋지만,  시맨틱 태그 아니어도 CSS로도 거의 동일한 문서 구조화를 해서 관리가 가능합니다. 굳이 표현하자면 니맛도 내맛도 아닌 뭐 그런 태그입니다. <aside></aside> 태그로 섹션 정의하면 이 ..