[데이터_공예소]

기본문서구조 !doctype html - 문서는 HTML5기준 작성 HTML ~~ /HTML: 웹문서의 시작과 끝 HEAD ~ /HEAD: 브라우저가 웹문서를 해석하여 정보를 가져옴 BODY ~~ /BODY 우리에게 보이는 문서의 본문 호스팅 서버 준비하기 HTML로 만든 웹사이트를 다른사람이 볼 수 있게 웹문서를 서버 컴퓨터에 업로드 해야한다. 서버를 물리적으로 사지 않고 일정금액을 내고 사용하는 호스팅 서비스를 이용한다. https://www.dothome.co.kr/ 닷홈 호스팅 닷홈은 도메인, 무료 웹호스팅, 웹빌더, 메일호스팅, SSL보안인증서, 서버호스팅, 코로케이션 등 다양한 호스팅 서비스를 제공하고 있습니다. www.dothome.co.kr FTP 프로그램 준비하기 호스팅한 서버에 파일의 ..

오늘날 우리는 PC를 넘어서 스마트폰, 태블릿 등 다양한 디스플레이를 통해서 웹사이트를 접속한다. 반응형 웹이란 이러한 시대적 변화에 따라 접속하는 디스플레이 종류에 맞는 화면과 구성요소의 크기 및 위치가 조정되는 사이트를 말한다. 내가 어떤 모바일 기기로 접속하든 간에 모든 콘텐츠들을 보기 쉽게 최적화해서 보여준다니 이 얼마나 친절한가! 그렇다면 이제 어떤 사이트를 반응형 웹사이트라고 할 수 있는지 예시들로 확인해보도록 하자. Reference #1. CJ 문화재단 (https://www.cjazit.org/) 상단 차례대로 아이폰 12 mini, 아이패드, 노트북 (LG 그램)에서 접속한 CJ 문화재단 홈페이지 화면이다. 뭐가 다른가 하고 보니, 휴대폰과 아이패드로 접속했을 때엔 오른쪽 상단에 메뉴 ..

웹페이지의 레이아웃을 구성하기 위해서 공간을 분할할 필요가 있다. 공간을 분할할 수 있는 태그는 div, span, table 등이 있는데, 과거에는 table 태그를 사용하여 레이아웃을 구성하기도 하였으나 모던 웹에서는 주로 div를 사용하여 레이아웃을 구성한다. 그런데 div 태그는 의미론적으로 어떠한 의미도 가지고 있지 않기 때문에 아래와 같이 HTML5에서 새롭게 추가된 시맨틱 태그를 사용하는 것이 더 나은 방법이나 IE에서 작동하지 않기 때문에 주의가 필요하다. tagDescription header 헤더를 의미한다 nav 내비게이션을 의미한다 aside 사이드에 위치하는 공간을 의미한다 section 본문의 여러 내용(article)을 포함하는 공간을 의미한다 article 분문의 주내용이 들..

form form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있다. ... form elements (input, checkbox, radio button, submit button...) ... attribute Value Description action URL 입력 데이터(form data)가 전송될 URL 지정 method get / post 입력 데이터(form data) 전달 방식 지정 GET과 POST는 HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타내며 HTTP request method라..

웹에서 사용 가능한 이미지 파일 형식 JPEG (Joint Photographic Experts Group): JPEG 이미지는 주로 사진이나 복잡한 그래픽을 표현할 때 사용. 그림 손실이 있긴 하지만, 보통은 무시할 정도로 작음. PNG (Portable Network Graphics): PNG 이미지는 투명 배경을 지원하며, 로스리스(무손실) 이미지 형식. 그래픽이나 아이콘 이미지에 주로 사용돼. 투명도와 이미지 품질을 유지하면서 파일 크기를 줄일 수 있음. GIF (Graphics Interchange Format): GIF 이미지는 주로 애니메이션 이미지를 만들 때 활용. 이미지 시퀀스를 지원하며, 256색 팔레트를 사용해 파일 크기를 작게 유지할 수 있음. SVG (Scalable Vector ..

목록 (List) 순서없는 목록 (Unordered List) 순서없는 목록 (Unordered List) Coffee Tea Milk 순서있는 목록 (Ordered List) 순서있는 목록 (Ordered List) Coffee Tea Milk type 어트리뷰트를 사용하여 순서를 나타내는 문자를 지정할 수 있습니다 ValueDescription “1” 숫자 (기본값) “A” 대문자 알파벳 “a” 소문자 알파벳 “I” 대문자 로마숫자 “i” 소문자 로마숫자 Coffee Tea Milk start 어트리뷰트로 리스트의 시작값을 지정할 수 있습니다. Coffee Tea Milk reversed 어트리뷰트를 지정하면 리스트의 순서값을 역으로 표현합니다. Coffee Tea Milk 중첩 목록 중첩 목록 Co..

"HyperText"의 "Hyper"는 컴퓨터 용어로서 정보(예: 텍스트)가 단순한 선형적 구조가 아니라, 다중으로 연결되어 있는 상태를 나타냅니다. 이것은 HTML의 가장 중요한 특징인 링크(link) 개념과 관련이 있으며, 기존의 단일 문서나 텍스트의 선형적이고 고정적인 제약에서 벗어나, 사용자가 원하는 순서로 원하는 정보를 얻을 수 있게 해줍니다. 이것은 하이퍼링크(hyperlink)라고도 알려져 있습니다. HTML의 링크(link)는 하이퍼링크(hyperlink)를 나타내며, 이 기능은 주로 "a" (anchor) 태그를 통해 구현됩니다. 이 태그는 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 하이퍼링크를 생성하는 역할을 합니다. Visit google.com! href 어트리뷰트 href..

제목 (Headings) 태그 Heading 태그는 제목을 나타낼 때 사용하며 h1에서 h6까지의 태그가 있다. h1이 가장 중요한 제목을 의미하며 글자의 크기도 가장 큽니다. 시맨틱 웹의 의미를 살려서 제목 이외에는 사용하지 않는 것이 좋다. 검색엔진은 제목 태그를 중요한 의미로 받아들일 가능성이 큽니다. heading 1 heading 2 heading 3 heading 4 heading 5 heading 6 글자 형태 (Text Formatting) 태그 b bold체를 지정합니다. 제목 태그와 같이 의미론적(Semantic) 중요성의 의미는 없습니다. This text is normal. This text is bold. This text is bold. strong b tag와 동일하게 bold..

웹사이트의 노출 및 검색 엔진 최적화(SEO)는 현대 인터넷 환경에서 매우 중요한 역할을 합니다. 검색 엔진은 웹사이트를 수집하고 사용자가 검색 시 원하는 정보를 제공하기 위한 강력한 도구로서 작용하며, 웹사이트가 검색 결과에 노출되는 정도가 중요합니다. SEO를 통해 웹사이트가 검색 엔진에 노출되도록 만들기 위해서는 검색 엔진이 웹사이트 정보를 수집하는 방식을 이해해야 합니다. 검색 엔진은 크롤러 또는 로봇 프로그램을 사용하여 전세계의 웹사이트 정보를 수집합니다. 이 프로세스는 크롤링이라고 불리며 검색 엔진의 크롤러가 실행합니다. 검색 엔진은 미리 예상한 키워드에 대응하는 인덱스(색인)을 생성하여 사용자에게 검색 결과를 제공합니다. 이 과정은 인덱싱이라고 불리며 검색 엔진의 인덱서가 수행합니다. 검색 ..

HTML5 HTML (HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어입니다. 조금 더 자세히 말하면 웹페이지의 내용(content)과 구조(structure)을 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하는 것입니다. HTML5는 2014년 10월 28일에 확정된 차세대 웹 표준으로, 다음과 같은 주요 기능을 추가하여 플랫폼으로의 사용을 가능케 했습니다: 멀티미디어(Multimedia): HTML5는 플래시와 같은 플러그인의 도움 없이 비디오 및 오디오 기능을 자체적으로 지원합니다. 그래픽(Graphics & Effects): SVG, 캔버스를 사용한 2차원 그래픽 및 CSS3, WebGL을 사용한 3차원 그래픽을 지원합니다. 통신(Connectivity..