프로젝트4 - div 섹션 구역 분리 와 CSS 스타일 적용하기

이미지
웹 브라우저에 표시되는 글자와 이미지 들에 디자인 적인 효과( 배경색, 글자색, 크기 조절...) 및 브라우저 내에서의 배치등을 조절하기 위해서는 구역을 나누면 편리해진다. 바로 구역(섹션) 을 나누어 주는 역할을 하는 태그가 div 이다. <div>태그는 브라우저에서 보여지는 시각적 기능은 없다. 단지, 구역을 나누는 역할을 한다.  코드를 만들어 본다. <!DOCTYPE html> <html> <head>   <title>div</title> </head> <body>   <div>     <p>Ice cream is a frozen dessert typically made from milk or cream that has been flavoured with a sweetener,        either sugar or an alternative, and a spice,        such as cocoa or vanilla, or with fruit, such as strawberries or peaches.</p>   </div>   <div>     <p> Food colouring is sometimes added in addition to stabilizers.        mixture is cooled below the freezing point of water and stirred to incorporate air spaces and prevent detectable ice crystals from forming.        It can also be made by whisking a flavoured cream base and liquid nitrogen together.        The result is a smooth, semi-solid foam that is solid at v

sub 와 sup 태그 사용법

이미지
sub 와 sup 태그 는 밑첨자 와 윗첨자를 나타낼 때 사용하는 태그 입니다.  각각 subscript 와 superscript 의 약자로 쓰임새는 이와 같다. <sub></sub> 열린 태그와 닫힘 태그 사이 Element 항목에 텍스트를 입력하면 밑 첨자로 표기된다. <sup></sup> 열린 태그와 닫힘 태그 사이 Element 항목에 텍스트를 입력하면 윗 첨자로 표기된다.  하기는 브라우저에서 실행해본 결과이다. 화학 및 수학 기호 등을 표현할때 유용하게 사용될 수 있다. 감사합니다.

ins 와 del 태그 사용법

이미지
<ins> 와 <del> 태그 사용법 을 정리해봅니다. ins 는 insert 의 약자. del 는 delete 의 약자 이다. 웹 문서에서 새롭게 삽입(추가)된 글 과 기존 글이 삭제된 상태임을 텍스트에 표식 해줄때 사용하는 태그 이다. 해당 태그들은 대형 포털 사이트 보다는 나무위키 등의 텍스트 기반의 웹 백과 사전등에서 자료가 갱신될때 주로 사용되는 모습을 보인다. 각 태그의 사용법은  <ins>추가된 글자</ins> <del>삭제된 글자</del> 하기처럼 문단에 각각 ins, del 태그를 적용한다. 그럼 결과는 브라우저에서 하기처럼 나온다. 추가됨을 나타내는 글자들에는 밑줄이 <ins> 삭제됨을 알려주는 글자들에는 중간에 취소선이 생긴다. 위에서 말한 것 처럼, 이력을 관리하는 텍스트 기반의 웹 문서에는 유용하게 사용될 수 있다.

br 태그 사용법

이미지
HTML br 태그는 break 의 약자로 줄 띄우기를 할때 사용된다 <br> 태그는 열림 태그만 있고, 닫힘 태그는 없기에, 꼭 한쌍으로 맞추지 않아도 된다. h1, P 요소(element) 로 구성된 예제가 있다. essentially unchanged. 다음에 커서를 두고 소스코드 에서 한줄 띄우기 를 한다. 결과를 확인 하면, 예상과는 다르게 줄 띄우기 가 되지 않는다. 즉, HTML 은 에디터로 편집을 한다고 해서 줄 띄움이 되는 것이 아니라 이 또한 태그를 사용해야 한다. 이때 사용하는 태그가 바로 <br> 태그 이다. 사용법은 띄움이 필요한 곳에 열림 br 태그 만 기재한다. essentially unchanged. 다음에 <br> 태그를 코딩하고 실행 해본다. 브라우저에 확인 결과, 정상적으로 한줄 띄우기가 실행이 되었다. <br> 태그는 필요한 곳에서 한줄 띄우기 기능을 한다. 감사합니다.

P 태그 사용법

이미지
P태그 사용법에 대해서 다루어 본다. Paragraph 의 약자로 문단을 나타낸다. 문단이라 함은 하기처럼 무언가 설명을 하고자 하는 글들의 덩어리 라고 생각하면 된다. HTML 웹 문서에서 문단을 만들기 위해서는 P태그를 사용한다. 하기 예제에서는 H1으로 키워드가 되는 제목을 설정하였고, 그 밑에 해당 키워드에 대한 설명으로 문단을 사용한다. 브라우저 상에서 보이는 결과는 하기와 같다. 문단 이기에 글 처음과 마지막에 한줄의 공백이 생긴다. 추가로 하나의 문단을 더 추가하게되면, 결과는 하기와 같다. 요즘 웹 페이지가 사진과 영상 및 여러 애니메이션 효과가 있지만 그래도 가장 기본이 되고 많이 노출이 되는 콘텐츠는 바로 글자 이다. 그렇기에 P태그 는 HTML 태그 중 가장 많이 사용되는 태그 중 하나이다. 감사합니다. 더미 텍스트 사용을 위해서는 Lorem Ipsum 사이트를 사용하면 된다. 더미 텍스트 란 "프린팅 과 타이핑" 등을 위한 의미없는 글자 텍스트를 의미하며, Lorem Ipsum 에서는 그러한 텍스트를 무료로 공급한다. 웹 페이지에 많은 양의 예제 텍스트가 필요하다면 하기 사이트를 적극 활용하자. https://www.lipsum.com/

H 태그 사용법 과 주의 사항

이미지
H 태그는 Heading 의 약자 로, H1~H6 까지 사용할 수 있고 글자의 크기와 굵기가 바뀐다. 단지, 글자의 크기와 굵기만 바뀌기 보다는 웹 페이지를 검색하는 검색 봇 들에게 해당 웹 페이지의 키워드 들을 제공하는 역할을 한다. 그렇기때문에, H 태그는 글 내용 중 제목 및 소제목 그리고 중요한 키워드가 될 만한 텍스트 들을 사용해야 한다. 그래야지만, 포털 등에서 내 글들이 잘 검색이 되어 진다. 사실 포털들이 운영하는 검색 Robot 의 알고리즘이 계속 해서 업데이트 되기에 어떤 SEO(Search Engine Optimization) 가 딱 정답이다 라고 말할 수는 없다. 하지만, 태그를 사용할 때는 HTML 태그의 본래의 목적에 맞게 잘 사용해주는 것이 가장 좋다. 물론 글을 잘 노출하기 위해서는 SEO 도 중요하지만, 타인에게 도움이 되는 글 이 첫번째가 되어야 하겠다. 도움이 되는 글을 시간이 지나더라도 어떻게든 사람들이 찾아오게 되어있기 때문이다. 그럼 H 태그의 예제와 결과를 만들어 보자. H1이 가장 중요한 키워드가 되겠고, 그 다음으로는 숫자가 커질수록 중요도가 작아진다. 가장 중요한 키워드 나 제목 등은 H1으로 표현해야겠다. 추가로, 블로그에 따라 기본 제목 등이 이미 H1으로 설정된 경우등도 있다 그럴때 본문은 H2 부터 사용해주는 것이 좋다. SEO등은 H1 이 두개가 나오면 SEO에 최적화 된 글이라고 생각하지 않는다.  위에서 언급한 것 처럼, 좋은 글이라면 노출은 분명 된다. SEO만 너무 생각하다보면 알맹이가 없는 껍데기에 만 너무 치중하게 된다. SEO를 너무 신경쓰지말고 좋은 글을 적는 것에 초점을 맞추는 것이 좋다. 감사합니다.

HTML 태그란 무엇일까?

이미지
HTML에서 태그란 무엇일까? 바로 <> 기호로 둘러쌓인 HTML 문법의 가장 작은 단위 이다. <> 시작되는 태그 를 start tag </> 닫히는 태그를 end tag   라고 부른다. 이 두 태그 사이에 적히는 text 내용을 content 라고 한다. <시작태그>콘텐츠<닫힌태그> 이 모두를 가리켜 요소 즉, Element  라고 부른다. 해당 내용을 몰라도 코딩을 하고 앱을 만드는 데 문제가 없지만 API 문서나 웹에서 이야기 할때 용어를 모르면 의사소통 및 문서내용이 이해가 되지 않기에 최소한의 기본 규칙들은 알아야 한다. 공식적은 HTML Tag(태그) 는 약 150개 정도로 알려져 있다. <html> , <Input> , <Image> 등등... 태그 라는 단위를 이용해서 웹 페이지에 글자 및 이미지 그리고 다양한 정보를 구조화 해서 만들어 낼 수 있다. HTML 웹 문서를 만든다는 것은 바로 해당 태그들을 잘 조합해서  문서를 만들어 낸다는 이야기 이다. 그렇다면, HTML 공부는 바로 태그의 쓰임새를 코딩해보는 것이라고 할 수있다. 요즘은 웹에서 수많은 자료를 찾을 수 있다. 태그 역시 동일하다. 그렇기 때문에 모든 태그를 외우기 보다는 자주사용되는 태그들의 쓰임새를 코딩해보고 필요에 따라 그때 그때 검색하여 해당 태그의 예제를 복사 붙여넣기 후 확장하여 사용하는 것이 올바른 방법이라 생각 한다. HTML 태그 학습법에 대해서 정리하며...

HTML 페이지 기본 구성.(HTML Page Structure)

이미지
HTML 기본 구성. HTML 문서는 기본적으로 <html>요소 사이에 <head><body> 를 담고 있다. 이게 가장 큰 구조 이다. 먼저 <head></head> 요소는 브라우저에 나타낼 정보를 표기 한다고 생각하면 된다. <title>요소는 브라우저의 타이틀 바 혹은 페이지 탭에 보여지는 제목이다. 하기 빨간 네모박스 부분이라고 생각하면 된다. <body></body>요소 안의 컨텐츠는 브라우저 화면에 보여지는 부분이다. 위 그림에서 My First Heading 과 My first paragraph 부분이 되겠다. 위 그림에 나오는 웹 페이지를 코딩하면 하기와 같다. HTML에서 가장 기본이 되는 문법단위인 태그에 대해서 한번쯤은 생각해 볼 필요가 있다. 태그란 무엇인가에 그리고 HTML은 어떻게 공부하는 것이 좋을것인가 대해서는 하기글에서 이야기 해보자. HTML 태그란 무엇인가?

HTML 을 배워야 하는 이유

이미지
HTML 을 배워야 하는 이유는 사람마다 다르겠지만, 웹 페이지를 만들 수 있는 언어라는 점은 공통되다. 즉, 웹 페이지에서 동작하는 어떤 프로그램 혹은 게임을 만들기 위해서는 HTML에 대한 이해가 필요하다. 물론 게임엔진등을 활용하여 웹 릴리즈 버전을 만들 수도 있지만 JS를 바탕으로 한 웹 게임을 만들때는 그래도 HTML 구조를 알아야 한다. 그리고, 웹앱 등을 만들려고 해도 HTML의 기본은 알아야 한다. 한국인들이 습관처럼 들여다 보는 포털 사이트들도 모두 웹 기반이다. 그리고 우리가 손에서 놓치않는 핸드폰의 많은 앱들도 웹앱 기반의 앱들이 많다. 여기서 웹앱이란 웹 베이스로 구성되어있는 앱을 말한다.  안드로이드와 아이폰 네이티브 소스는 단지 껍질만 쌓여있고 실제 내부구성은 웹 방식으로 구동이 됨을 말한다. HTML은 1990년에 개발된 웹 페이지를 위한 언어이다. 이렇게 보면 정말 장수하고 있는 언어이다. 장수만 하는것이 아니라 계속해서 발전하고 있다. 초기의 웹페이지는 HTML만으로도 구동되는 단순한 웹 페이지 였다. 대다수 가 텍스트 기반의 웹 페이지 였으니 말이다. 하지만, 현재는 웹페이지에 글자 보다 영상이나 사진 그리고 다양한 이펙트들이  첨가되어 화려함을 자랑한다. 바로 웹이 계속해서 발전해나가고 있기 때문이다. C, C++ , Java 등도 장수하고 있는 언어이긴 하지만, 웹 만큼 우리 생활 친숙히 사용자 들에게 노출된 언어가 있을까란 생각도 해본다. 그렇기에 HTML 언어는 웹 프로그램 혹은 프로그램 언어를 학습하는데 있어서 배워볼만한 재미있는 언어라고 할 수 있다. 언어 문법을 다 외우기 보다는 검색을 통해서 HTML 태그들도 구성하기에 HTML의 기본 구성 공부를 편히 마칠수 있다고 본다.

구글 블로그 애드센스 신청하기.

이미지
구글 블로그에 새로운 애드센스 승인을 신청해봅니다. 구글 애드센스에 접속한 이후 사이트 메뉴를 선택하고 새 사이트를 등록합니다. 1. 구글 애드센스 사이트 > 새 사이트 추가 사이트 추가 팝업창에서 구글 블로그 주소를 입력합니다. 필자는 맞춤 도메인으로 설정한 도메인을 입력했습니다.  주소 입력 후 저장 합니다. 2. 코드 복사 사이트 연결을 위한 코드가 나옵니다. 해당 코드를 구글 블로그에 붙여넣기를 할 것 입니다. 이 과정은 본인의 블로그 임을 인증하는 과정입니다. 별로 어렵지 않으니 따라 해 볼까요? "복사 하기" 선택 후 해당 창을 닫지 말고 기다려 주세요. 우리는 이제 구글 블로그로 가서 해당 코드를 붙여넣기 할 것 입니다. 2. 구글 블로그 열고, HTML 편집하기    본인 블로그의 관리메뉴에서 테마 > 현재 테마를 선택한 후 "HTML편집" 을 선택합니다. 하기 처럼 HTML 편집기 창이 열렸습니다. 구글의 안내처럼 <head> </head> 태그 사이에 복사한 코드를 붙여넣습니다. 첫 줄에 해주면 보기에도 쉬울거 같습니다. 코드를 붙여 넣은 후 오른쪽 상단 저장 버튼을 선택합니다. 곧 블로그의 테마가 업데이트 됩니다. 구글 블로그에서 해주어야 할 일은 끝 입니다. 3. 구글 애드센스 에서 연결확인 하기. 조금 전 열어두었던 구글 애드센스 코드 복사창에서 "코드를 삽했습니다" 를 체크 후 확인을 선택 합니다. 곧 "사이트가 확인되었습니다" 란 팝업이 뜹니다. 다음을 선택합니다. (만약 사이트 확인 안될때는 위 과정들을 다시 한번 천천히 해보는 것을 추천드립니다.) 사이트 확인이 완료되면, 드디어 구글 애드센스가 해당 사이트에 광고를 달 수 있는지 아닌지를 확인 하는 과정이 진행 됩니다. 구글에 따르면, 이 과정은 며칠에서 최대 2주가 소요된다고 합니다. 필자의 구글 블로그 는 도메인을 구매하여, 맞춤 도메인 설정을 완료한 사이트 입니다. 애드센

웹 크롤링 이란?

이미지
웹 크롤링(Web Crawling)은 인터넷 상에서 웹 페이지를 자동으로 탐색하고, 그 정보를 수집하는 과정을 말합니다. 다른 말로는 웹 스크레이핑(Web Scraping)이라고도 합니다. 일반적으로 크롤링은 다음과 같은 과정을 따릅니다: 1. 웹 페이지 요청: 크롤러라고 불리는 프로그램이 웹 서버에게 특정 웹 페이지를 요청합니다. 2. 웹 페이지 다운로드: 서버는 요청받은 페이지를 응답으로 보내줍니다. 3. 페이지 내용 분석: 받은 페이지의 HTML 코드를 분석하여 필요한 정보를 추출합니다. 4. 데이터 추출: 추출된 정보를 정제하고 필요한 데이터를 추출합니다. 5. 데이터 저장: 추출한 데이터를 파일이나 데이터베이스에 저장합니다. 웹 크롤링은 다양한 목적으로 활용됩니다.  예를 들어: 1.데이터 수집 및 분석: 인터넷 상의 정보를 수집하여 분석하거나 특정 패턴을 찾습니다. 2. 가격 비교: 상품의 가격 정보를 다양한 웹사이트에서 수집하여 비교합니다. 3.검색 엔진: 검색 엔진은 웹을 크롤링하여 인덱싱하여 사용자에게 정확한 검색 결과를 제공합니다. 하지만, 웹 크롤링을 사용할 때 주의해야 할 몇 가지 중요한 점이 있습니다: 1. 저작권 및 법적 제한: 일부 웹 사이트는 크롤링을 금지하고 있습니다. 항상 해당 웹 사이트의 이용 정책을 확인하고 준수해야 합니다. 2. 부하 관리: 과도한 요청을 보내면 서버에 부하를 줄 수 있으므로, 적절한 속도로 크롤링을 수행해야 합니다. 3. 개인 정보 보호: 민감한 정보를 수집할 때에는 사용자 동의나 법적 규정을 준수해야 합니다. 웹 크롤링은 강력한 도구이지만, 적절한 윤리와 법규를 준수하여 사용해야 합니다. 웹 크롤링을 한줄로 요약하자면 웹 사이트 등에서 필요한 정보를 자동으로 수집하는 행위라고 할 수 있겠습니다. 웹 크롤링 = 웹에서 엉금엉금 기어다니다. 웹을 기어다니며 정보를 수집한다 ^^ 이렇게 생각하면 쉽겠죠. 도움이 되셨으면 좋겠습니다. 감사합니다.

이 블로그의 인기 게시물

구글 블로그 이미지 복사 붙여넣기 가능한가요?

HTML 페이지 기본 구성.(HTML Page Structure)

구글 블로그 대표이미지 설정하기