반응형 기초강좌 HTML&CSS 2018. 12. 21. HTML+CSS 기초 강의 - 1. HTML 의 시작 이제는 인터넷을 하는 사람이라면 누구나 아는 단어가 된 HTML. 고리타분한 HTML의 탄생이나 역시 같은건 나무위키를 보면 더 자세히 나와 있으므로 여기서는 생략! 하고 싶지만 대충이라도 요약하면 1980년 유럽 입자 물리 연구소 소속의 물리학자 팀 버너스 리가 원형인 인콰이어를 제안해서... 어쩌구 저쩌구... 1991년 HTML태그를 공개하면서 HTML이 시작. 곧 1.0이 됩니다. 1995년 2.0 발표 1997년 3.2 발표 1997년 4.0 권고안 발표. 이때부터 사실 HTML을 기초로하는 웹이 널리 보급되면서 세상의 일부가 됩니다. 2008년 5.0 발표. 획기적인건 없었지만, 모호했던 것들이 대부분 정리되면서 비교적 완전한 HTML로 자리를 잡게됩니다. 2017년 5.2 업데이트 발표. H.. HTML&CSS 2018. 12. 21. HTML+CSS 기초 강의 - 2. HTML뷰어, 웹에디터, 웹브라우저 엑셀 문서(XLS 포맷)는 엑셀 프로그램에서 열면 그 내용을 볼 수 있고, 또 수정할 수 도 있습니다. 즉, 엑셀 프로그램은 XLS 문서를 보는 뷰어이기도 하고 편집기이기도 합니다. 반면, 엑셀 뷰어 프로그램은 보기 전용이기 때문에 엑셀 문서를 볼 수만 있고 수정할 수는 없습니다. 웹브라우저는 엑셀 뷰어 프로그램 같은 것입니다. HTML 문서를 읽어서 태그를 해석하고 CSS를 적용해 문서를 예쁘게 화면상에 보여주지만 거기까지가 웹브라우저의 역할이고, HTML 문서를 만들고 수정할 수 있는 에디터의 기능을 하는 편집기는 별도의 프로그램을 사용해야 합니다. 구글 크롬, 애플 사파리, 모질라 파이어폭스 같은 웹브라우저는 모두 HTML 뷰어입니다. 웹브라우저는 내 컴퓨터에 있는 HTML 문서를 열어서 볼 수도 .. HTML&CSS 2018. 12. 21. HTML+CSS 기초 강의 - 3. HTML 문서의 기본 구조 알기 HTML 문서의 기본 구조를 알기 전에 HTML 문서가 어떻게 생겼는지 간단히 알아모도록 하겠습니다. 크롬 웹브라우저 기준으로 보고 있는 현재 강의 화면에서 마우스 오른쪽 버튼을 누르면 컨텍스트 메뉴가 표시됩니다. "페이지 소스보기"(Ctrl+U) 를 선택하면 별도의 탭이나 창에 현재 보고 있는 이 강의 페이지의 HTML HTML 문서 소스가 보입니다. 이처럼 모든 웹상의 페이지는 소스를 볼 수 있는 공개된 문서입니다. 아주 복잡해 보이는 HTML 문서도 기본적인 구조는 다 동일합니다. 사용하는 태그의 종류도 많아야 20~30개 안쪽이기 때문에 기본적인 태그에 대한 이해정도만 생기면 대충의 문서 구조를 보는 것도 그리 어렵지 않게 됩니다. 아주 간단한 HTML 문서 예를 들어 보면 다음과 같습니다. 아주.. HTML&CSS 2018. 12. 21. HTML+CSS 기초 강의 - 4. HTML4와 HTML5 HTML 규격은 1.0에서부터 계속 버전업 되어 HTML4에서 완전히 대중화 되었고, 현재는 최신 버전인 HTML5가 사용되고 있습니다. 대부분의 웹브라우저에서 HTML5 스펙을 지원하기 때문에, 새롭게 HTML을 배우는 입장이라면 HTML5를 그냥 배우면 됩니다. 가장 최근 버전은 HTML 5.2 입니다. 다만, 우리나라는 아직 구버전 브라우저인 인터넷익스플로러 9/10을 사용하는 환경이 적지 않기 때문에 최신 HTML5 표준이나 CSS3를 지원하지 않는 경우에 대한 고려를 해야하는 경우가 있을 수 있습니다. HTML4가 HTML5로 버전 업 되면서 어떤점이 크게 달라졌는지 간략하게 알아보겠습니다. 자세한 기술적 내용은 몰라도 됩니다. 나중에 중급 강좌에서 배우게 되므로 이런게 추가되었구나 정도만 알고.. HTML&CSS 2018. 12. 21. HTML+CSS 기초 강의 - 5. 텍스트 태그로 기본 HTML 문서 만들기 이제 몇가지 기본 HTML 태그를 사용해 기본 HTML 문서 구조를 만드는 방법을 알아보도록 하겠습니다. 그전에 HTML 문서를 작성하기 위한 2가지 준비를 해야 합니다. - 텍스트 편집기, 또는 웹에디터 프로그램 본인 취향이나 편의성에 맞춰서 잘 쓰는 에디터를 추천합니다. 과거에는 디자이너를 중심으로 어도비 드림위버를 많이 사용했지만, 이런 웹에디터 프로그램들이 불필요한 추가 코드를 붙이는 경우가 많다보니 HTML 문서가 지저분해져서 추가 작업을 해야 하는 경우가 많았습니다., 또, 최근의 웹페이지 제작 추세인 반응형 웹, 부트스트랩, 그리고 모바일 웹 환경 등 다양한 환경을 지원하지 못하기 때문에 텍스트 에디터를 기반으로하는 웹에디터가 주로 사용되고 있습니다. 무료로 배포되는 좋은 텍스트 에디터들이 .. HTML&CSS 2018. 12. 21. HTML+CSS 기초 강의 - 6. 이미지(<img>) 태그로 이미지 붙이기 HTML 문서를 가장 예쁘게 보이게 만드는 태그중 하나가 이미지 태그()입니다. 이미지 태그는 태그쌍없이 단독 태그()로 사용하는 태그이며, 이미지 위치를 표시하는 속성인 src, 이미지 크기를 표시하는 width, height 등의 속성을 사용합니다. 태그명은 입니다. 이미지 위치를 가리키는 속성으로 src를 사용합니다. 예를들어 HTML 문서가 있는 경로에 new.jpg라는 jpeg 이미지가 있다면 와 같이 태그를 입력하면 이미지 태그가 있는 위치에 이미지가 로딩되어 표시됩니다. 이미지 크기를 지정하는 속성 값이 없을 경우 이미지 크기 그대로 웹 브라우저에 표시됩니다. 인터넷에 위치한 이미지를 링크를 걸면 인터넷에 있는 이미지도 HTML 문서 안에 바로 표시가 됩니다. 지금 보고 있는 강의의 상단 타.. HTML&CSS 2018. 12. 21. HTML+CSS 기초 강의 - 7. 하이퍼링크(<A>)로 HTML 문서를 연결하기 HTML문서는 하이퍼링크를 통해 진정한 연결형 문서가 됩니다. 하이퍼링크를 통해 문서의 다른 위치, 또는 다른 문서를 연결함으로써 다른 위치나 다른 문서로 즉시 이동할 수 있게 됩니다. 이렇게 연결된 HTML 문서들은 끊임없이 이어진 하나의 커다란 문서로 거듭나게 됩니다. 거창하게는 그렇지만 사용방법은 클릭하세요 이렇게 간단합니다. href 속성은 이동할 링크를 입력하는 사이에 입력된 텍스트 내용이나 이미지를 클릭하면 href 속성에 입력한 위치(URL)로 이동하게 됩니다. 구글로 이동 이런식으로 하이퍼링크를 사용합니다. 이 하이퍼링크의 "구글로 이동" 텍스트를 마우스로 클릭하면 구글로 이동하게 됩니다. 링크를 입력할때는 상대 경로와 절대 경로에 대해서 알아두어야 합니다. 하이퍼링크는 내 컴퓨터에 있는 .. HTML&CSS 2018. 12. 21. HTML+CSS 기초 강의 - 8. HTML 문서에서 사용할 수 있는 이미지 포맷 웹 표준으로 사용할 수 있는 이미지 포맷은 jpg(jpeg), gif, png, svg 입니다. 간단하게 말하면 이 이미지 포맷이 아닌 이미지 파일은 웹/인터넷에서 사용하면 안됩니다. 사용할 수도 없습니다. jpg(jpeg) 고해상도 고컬러 이미지를 인터넷 상에 표시하기 위해 가장 널리 사용되는 이미지 포맷입니다. 손실 압축 방식이기 때문에 압축율을 너무 많이 높이면 이미지가 다소 뭉게지거나 흐릿해 보이는 문제가 있습니다. 초고해상도 사진등을 아주 작은 파일 크기로 만들 수 있어 태생적으로 대역폭이나 트래픽 제한이 있을 수밖에 없는 인터넷 환경이나 모바일 환경에 가장 적합한 이미지 포맷입니다. 또, 프로그레시브(Progressive) 저장 옵션이나 베이스라인(Baseline) 저장 옵션을 지원하는 프로그.. 이전 1 2 3 4 5 다음 반응형
