Appia의 IT세상

[초보HTML배우기 08]HTML - HTML에 리스트(List) 나열하기 앞선 포스팅에서는 HTML에 표를 입력하는 부분에 대해서 살펴봤습니다. 앞선 포스팅에서 이야기 드린 바와 같이 HTML 자체가 문서를 작성하는 것과 그리 크게 차이가 없습니다. 그래서 이번에는 항목에 대한 리스트(List)을 열거하는 방법에 대해서 살펴보겠습니다. 먼저, HTML상에서 총 3가지 형태로 리스트를 제공하고 있습니다. 순서가 있는 리스트 - 순서가 있는 리스트의 경우 각 항목 앞에 번호를 붙여 줍니다. 순서가 없는 리스트 - 순서가 없는 리스트의 경우 도형등을 통해서 앞에 명시를 해줍니다. 사용자 정의 리스트 - 사용자 정의 리스트의 경우 각 항목들을 사용자가 지정한 대로 사용이 가능합니다. 그럼 각 항목들에 대해서 ..

[초보HTML배우기 07]HTML - HTML에 표(Table) 입력하기 앞서 포스팅에서 HTML에 사진/이미지를 입력하는 방법에 대해서 살펴봤습니다. 그러면서 간단한 속성들에 대해서 살펴봤습니다. 이번 포스팅에서는 표(Table)을 입력하는 방법에 대해서 살펴보고자 합니다. 앞선 포스팅까지 아시다시피, HTML또한 문서입니다. 즉, 웹페이지에 표시될 문서를 작성하는 것이라고 생각하시면 좋을듯 합니다. 문서에서는 아시다시피 표(Table)이 매우 많이 사용됩니다. 따라서, 이 부분에 대해서 살펴보겠습니다. 먼저, 간단한 코드를 통해서 살펴보겠습니다. Document 열 1, 행 1 열 1, 행 2 열 2, 행 1 열 2, 행 2 Colored by Color Scriptercs 위의 코드를 실행하면 다음..

[초보HTML배우기 06]HTML - HTML에 사진/이미지(Images) 삽입하기 이전 포스팅에서는 코드에 대한 주석을 처리하는 방법을 살펴봤습니다. 이번 포스팅에서는 웹페이지에 이미지를 삽입하는 방법에 대해서 살펴보고자 합니다. 웹페이지에서 글자만큼 중요한 것은 사진 또는 이미지입니다. 그 이미지를 삽입하고 간단히 활용하는 방법에 대해서 살펴보도록 하겠습니다. 이미지 삽입하기 이미지를 입력하는 방식은 먼저 태그를 활용하는 것입니다. 먼저 다음 코드를 살펴보겠습니다. Document Colored by Color Scripter cs 위와 같은 코드를 실행했을 때 다음 화면과 같이 브라우저에 사진이 출력이 됩니다. 위에서 보시는 바와 같이 다음과 같은 형태로 태그를 사용하면 됩니다. 여기에는 다양한 속..

[초보HTML배우기 05]HTML - HTML에 주석(Comment) 입력하기 프로그래밍 작업을 할 때 가장 중요한 것은 좋은 결과를 내는 것입니다. 좋은 결과는 즉 프로그램을 작성하는 사람이 원하는 결과를 얻는 것을 의미합니다. 예전에는 작업을 할 때 혼자 하는 경우가 많았습니다. 또한 혼자 작업을 하고 나서, 그 부분에 대해서 유지 보수 또한 혼자 진행해야 하는 경우가 많았습니다. 하지만, 시간이 지남에 따라, 혼자 보다는 여러명이서 같이 작업을 하는 경우도 많고, 작업을 하고 나서 다른 사람이 관련된 코드를 유지보수 해야하는 경우도 생깁니다. 이 때, 코드에 관련된 설명을 넣기 위해서는 저희는 주석을 넣습니다. 그래서 이번 포스팅에서는 HTML에 주석(Comment)을 입력하는 방법에 대해서 이야기..

[초보HTML배우기 04]HTML - HTML에 메타 태그(meta tag) , 메타 데이터(metadata) 입력하는 방법 이전 포스팅에서는 HTML에서 사용하는 글자의 스타일(굵기, 이태릭체, 등등)에 대해서 포스팅을 했습니다. 이번 포스팅은 메타 태그(meta tag)에 대해서 살펴보면서, 이 부분을 HTML에 입력하는 방법등에 대해서 살펴보고자 합니다. 먼저, 메타 태그(meta tag)란, 다양한 방법으로 문서에 추가 정보를 설정할 수 있고 이를 제공하는데 사용합니다. 흔히 작성자, 키워드 목록와 같은 HTML 문서의 속성을 설명하는 Name/Value입니다. 기본적으로 메타 태그(meta tag)는 문서의 실제 모양에 서식에 영향을 미치지 않습니다. 따라서, 메타 태그(meta tag)가 작성..

[초보HTML배우기 03]HTML - 글자 속성 스타일 적용 앞선 포스팅에서는 기본태그(Tag) 구성 원칙 및 각 속성을 입력하는 방법에 대해서 확인해 봤습니다. 이번 포스팅에서는 글자의 스타일을 설정하는 부분에 대해서 알아보고자 합니다. 흔히 글자 스타일 관련해서는 문서 작성을 할 때 많이 사용하는 다음과 같은 속성들을 많이 적용합니다. 스타일 적용된 텍스트 굵게 굵게 적용한 텍스트 이태릭체 이태릭체를 적용한 텍스트 밑줄 밑줕이 적용된 텍스트 가운데 줄 가운데줄이 적용된 텍스트 윗첨자 위첨자 텍스트 아래첨자 아래첨자 텍스트 흔히 다음과 같은 텍스트에 적용된 스타일이 가장 많이 사용됩니다. 이 부분에 대해서 코드 상으로 이야기 해보겠습니다. Document 굵게 적용한 텍스트 이태릭체를 적용한 텍스트 밑..

[초보HTML배우기 02]HTML - 기본 태그(Tag) 구성 원칙 및 속성 이번 앞선 포스팅에서는 가장 기본적인 (Tag)에 들에 대해서 살펴봤습니다. 제목, 문단등을 사용하면서 각 태그를 어떻게 사용하는지에 대해서 확인할 수 있었습니다. 이번 포스팅에서는 이 태그들을 사용하는 방법에 있어서 몇가지 원칙에 대해서 살펴 보고자 합니다. 그런 후에 각 태그에 대한 속성에 대해서 살펴보고자 합니다. 일단, 앞서서 사용했던 간단한 예시를 살펴보겠습니다. Document h1 : Hello Appia h2 : Hello Appia h3 : Hello Appia h4 : Hello Appia h5 : Hello Appia h6 : Hello Appia Colored by Color Scripter cs 위의 코드..

[초보HTML배우기 01]HTML / CSS 환경설정 - 처음시작 및 기본태그(Tag) 일단, 앞서 포스팅에서는 HTML/CSS를 진행하기 위해서 환경설정을 하였습니다. 그 과정에서 Visual Studio Code를 설치하였고, 그에 따른 다양한 Extension을 설치하였습니다. 그럼 이번에는 이렇게 구축된 환경을 바탕으로 기본 태그에 대해서 한번 살펴보고자 합니다. 먼저 Visual Studio Code를 실행하시길 바랍니다. 위의 화면에서 보이는 부분의 아이콘을 클릭하여 HTML 파일을 하나 생성합니다. 이름은 원하시는 이름의 형태로 작성하시면 됩니다. 그리고 다음 화면에서와 같이 html:5를 입력하시면 다음 보이는 부분과 같이 화면이 나타납니다. 이 때, 키를 눌러 주시길 바랍니다. 그럼 다음..

[초보HTML배우기00]HTML / CSS 환경설정 - Visual Studio Code 설치 최근 크롤러 스터디를 준비하는 과정 중에 몇가지 선수 지식이 요구된다는 것을 인지하였습니다. 그중 가장 먼저 필요로 하는 것이 HTML이었습니다. 그리고 이와 더불어 CSS부분을 함께 공부해두면 좋을 것 같다는 생각이 들어 공부하면서 관련된 기록들을 남길 예정입니다. HTML / CSS 정의 HTML(HyperText Markup Language) - 웹페이지를 구성하는 틀을 구성하는 언어입니다. 즉, 제목부터, 프레임등을 구성하는 구조적 뿐 아니라 다양한 링크 등을 통해 구조적 문서를 만드는 언어입니다. CSS(Cascading Style Sheet)는 HTML의 각 부분들이 미디어에 어떻게 표현되는지에 대해..