Appia의 IT세상

[윈도우10 Windows10] 크롬(Chrome)에서 웹페이지 항목 CSS Selector로 확인하기 웹크롤링을 하다보면, HTML과 CSS에 대해서 약간의 지식이 필요합니다. 그 부분을 바탕으로 필요한 부분을 크롤링 하기 위해서입니다. 하지만, 모든 사람들은 HTML과 CSS의 전 영역에 대해서 알기 힘듭니다. 그래서 이번 포스팅에서는 CSS에서 Selector로 사용하기 위한 부분을 확인하는 방법에 대해서 살펴보겠습니다. 이번 포스팅은 기본적으로 크롬(Chrome)브라우저를 사용하고 있습니다. 따라서, 크롬 브라우저를 기반으로 사용하고 있습니다. 혹, 크롬(Chrome)브라우저가 없는 분들은 다음 링크를 이용하여 크롬(Chrome)브라우저를 설치해주시길 바랍니다. [윈도우10 Windows10] 브..

[초보HTML배우기 09]HTML - HTML에 하이퍼 링크(hyper-link)연결하기 이번 포스팅에서는 HTML에 하이퍼 링크(hyper-link)을 연결하는 방법에 대해서 살펴보고자 합니다. 흔히 웹페이지에서 특정 부분을 클릭하면, 다른 사이트등에 바로 연결되게 하는 것을 하이퍼 링크(hyper-link)라고 합니다. 먼저 하이퍼링크를 연결하기 위해서는 앵커태그라고 하는 - 을 사용해야합니다. 앵커 태그 내부에서는 어떤것도 링크의 일부가 되고, 해당 부분에 대해서 클릭을 할 수가 있습니다. Text 상기 부분이 적용된 간단한 예시를 한번 살펴보겠습니다. Document 링크 연결 테스트 앱피아 홈페이지 이동 Colored by Color Scriptercs 위의 부분을 적용하면 다음과 같은 화면이 ..

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

[초보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배우기 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의 각 부분들이 미디어에 어떻게 표현되는지에 대해..