프로젝트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

div 태그 사용법 과 예제

이미지
div 태그는 division 의 약자로 구역을 나눈다는 뜻 입니다. div 태그의 사용법을 알아봅니다. div 태그는 다른 태그들과는 다르게 뜻별한 태그 자체의 기능을 가지고 있지않다. 다만, 해당 구역을 나눔으로써 향후 배울 CSS 나 JS 등에서 해당 Element 들의 시각적 기능적 효과를 구분해서 손쉽게 적용할 수 있다. 그런용도 로 가장 많이 사용된다. div 태그를 쓴다고 해서 화면상 기능상 무언가 확실하게 눈에 보이게 달라지지 않는다. 그럼 예제 코드를 만들어보자. 두개의 문단이 두개의 div 태그로 둘러쌓여 있다. div 요소(Element)가 두개 인 구조가 되었다. 브라우저에서 실행한 결과이다. div 태그의 특성상 화면상으로 달라진 점은 없다. 다만, 위 예제 코드에서 처럼 div 태그는 열린태그 안에 id 라는 속성을 통해서 div 태그들을 나누어 주고 있다. id라는 속성은 그 태그 를 식별할 수 있는 식별자 이다. 주민등록번호 나 자동차 면허증 처럼 말이다. 이렇게 식별된 div 태그에만 CSS 디자인 요소 및 JS 기능적인 요소를 넣는다면 해당 div 엘리멘트 에서만 그 기능을 하기에 구조적으로 나눔이 효과적으로 사용될 수 있는 것이다. 참고로, div 태그를 사용하면 div엘리먼트 전후 로 line break (한줄)이 자동으로 띄워진다. 하기 코드에서는 P태그를 삭제하였다. P태그가 없지만, div 요소들은 앞뒤로 한줄의 띄움이 생긴다. 감사합니다. HTML태그 란 그리고 엘리먼트란?

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주가 소요된다고 합니다. 필자의 구글 블로그 는 도메인을 구매하여, 맞춤 도메인 설정을 완료한 사이트 입니다. 애드센

이 블로그의 인기 게시물

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

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

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