안녕하세요. 애드센스 승인이 났다면 당연히 광고를 달아야겠죠 ? 이번 포스팅은 애드센스 광고를 달아보는 시간을 가지겠습니다. 애드센스 승인 요청을 하지 않았다면 아래 포스팅을 참고해주세요. [구글 애드센스] #애드센스 승인 신청 방법 # 승인 팁 애드센스 광고를 다는 방식에는 크게 2가지 방식이 있습니다. 첫 번째는 광고 Script를 한번만 적용시켜 놓으면 알아서 광고를 적절한 위치시켜주는 자동광고와 사용자가 직접 지정하고 게재 위치를 지정 할 수 있는 사용자 지정 광고가 있습니다. 1. 자동 광고 달기 위와 같이 먼저 구글 애드센스 공식페이지로 이동하여 광고 - 자동광고 Tab으로 이동합니다. 오른쪽 볼펜 모양을 클릭하여 사용 할 자동 광고 형식만 활성화 시켜 준 뒤 저장을 해줍니다. 오른쪽 상단부분..

안녕하세요. 저번 포스팅에서 전체선택자, 태그선택자, id선택자, class 선택자에 대해서 알아 보았는데요. 이어서 다른 선택자들에 대해서도 알아보도록 하겠습니다. 미리보면 좋은 포스팅 !CSS 스타일시트 작성법과 선택자에 대해 알기선택자(Selector)를 통해 CSS를 적용해보자 #1 [HTML5/CSS3] span 태그 & div 태그의 차이 [HTML/CSS] HTML 기초 강좌 - ul/li 태그 & img 태그 이번 포스팅에서는 혼합선택자와 속성선택자에 대해서 알아보겠습니다. 1. 혼합 선택자 혼합선택자는 앞서 포스팅에서 배웠던 태그선택자/id선택자/class선택자를 혼합하여 CSS 속성을 변경하는 선택자입니다. 12345678910111213141516171819202122232425262..

안녕하세요. 저번 포스팅에서는 CSS 스타일시트 작성법과 선택자의 개념에 대해 알아보았습니다. 이번 포스팅에서는 태그를 선택하는 여러 종류의 선택자들에 대해 알아보겠습니다. [HTML5/CSS3] CSS 기초강좌 #1 - CSS 스타일시트 작성법과 선택자에 대해 알기 1. 태그 선택자 태그 선택자는 태그명을 통해 태그를 선택하는 선택자입니다. 간단한 예로 아래의 스타일시트를 살펴 보겠습니다. 태그 내부에 정의 된 Rule-Set을 해석해보자면 다음과 같습니다. h1 태그의 border 속성값을 1px solid red로 줘라h2 태그의 border 속성값을 1px solid blue로 줘라h3 태그의 border 속성값을 1px solid green으로 줘라아래 전체적인 샘플예제와 웹페이지에 표현되는 것..

이번 포스팅부터는 CSS를 통해 앞서 배운 태그들에 스타일을 적용하여 웹 페이지를 이쁘게 표현하는 방법들에 대해 포스팅 하고자 합니다. CSS를 공부하기 전 기초 태그들에 대한 지식이 있으면 좋으므로 아래 포스팅을 참고해주세요. [HTML5/CSS3] HTML 기초 강좌 - h태그와 a태그에 대해 알아보자[HTML/CSS] HTML 기초 강좌 - ul/li 태그 & img 태그[HTML5/CSS3] HTML 기초 강좌 - 테이블 태그 ( 태그)[HTML5/CSS3] form 태그를 활용한 간단한 회원가입 페이지 만들기[HTML5/CSS3] span 태그 & div 태그의 차이[HTML5/CSS3] 간단한 웹 페이지 레이아웃 구성 및 시맨틱 태그 1. 선택자를 통해 태그 선택하기 선택자란 선택을 해주는 요..

오늘은 div 태그를 이용해서 초간단 웹페이지 레이아웃을 구성하는 것을 살펴 보겠습니다. div 태그에 대해서는 아래 포스팅 참조 해주세요. [HTML5/CSS3] span 태그 & div 태그의 차이 1. 웹페이지 레이아웃 웹페이지는 일반적으로 Header 영역 / Navigation 영역 / Content 영역 / Footer 영역으로 나누어집니다. (모든 웹페이지가 그런것은 아닙니다) Header 영역 : 웹페이지를 나타내는 로고 또는 소개글이 위치합니다.Navigation 영역 : 웹페이지에서 다른 페이지로 이동하는 Menu Bar가 옵니다.Content 영역 : 웹 페이지의 내용Footer 영역 : 웹 페이지와 관련된 정보 그럼 이러한 4개의 영역으로 나누어지는 간단한 샘플예제를 살펴보겠습니다...

div 태그와 span 태그는 웹 페이지의 영역을 설정 할 때 사용하는 태그입니다. 웹 페이지의 전체적인 레이아웃을 설정 할 때 사용하는 태그인셈이죠. 예전에는 table 태그를 사용하여 웹 페이지에 대한 전체적인 레이아웃을 구성하였던 반면 요즘 트렌드는 오늘 배울 div 태그와 span 태그를 통해서 구성을 하는 것이 일반적입니다. [HTML5/CSS3] HTML 기초 강좌 - 테이블 태그 ( 태그) 알아보러 가기!! 그럼 div 태그와 span 태그의 차이점과 사용법을 살펴보겠습니다. 1. div 태그와 span 태그 비교 먼저 두 태그의 차이점은 줄바꿈입니다. div 태그의 경우 자동으로 줄바꿈이 되지만 span 태그의 경우네는 자동으로 줄바꿈이 되지 않습니다. 아래 샘플 소스를 참조해주세요. 12..

안녕하세요. 프로그래밍 개발 / 일상 / 여행 / 맛집과 관련되어 블로그를 운영하고 있는 LktPrograamer 입니다. 저는 블로그 시작은 2017년도에 했었는데요. 2개월가량을 운영을 하다가 취업을 하게 되고 바쁘다는 핑계로 블로그를 1년 조금 넘는 시간을 방치해 두었습니다. 다시 일주일전쯤부터 1일 1포스팅을 목적으로 글을 꾸준히 작성하고 있는데요. 블로그를 운영하면서 애드센스라는 것에 대해서 알게 되었습니다. #애드센스란 무엇? 애드센스는 웹 사이트 소유자가 자신의 컨텐츠에서 수익을 발생시킬 수 있도록 구글에서 제공하는 프로그램입니다. 광고를 게재한 컨텐츠와 해당 컨텐츠를 보는 사용자와 관련이 있는 텍스트 및 디스플레이 광고를 게재함으로써 사용자가 광고를 클릭하게 되면 사이트 소유자에게 수익이 ..

form 태그는 웹 페이지의 내용을 다른 웹페이지 또는 웹 서버에 전송 할 때 사용됩니다. 단순히 텍스트만 보여주는 웹 페이지일 경우 필요가 없지만 데이터를 보낼 필요가 있는 웹 페이지에서는 반드시 사용해야 하는 태그입니다. 예를들어 회원가입을 하는 웹 페이지의 경우 회원가입을 위해 입력했던 정보를 서버로 전송을 해줘야지 회원가입 요청에 대한 처리가 이루어 질 수 있습니다. 1. form 태그 먼저 form 태그의 중요 속성들에 대해서 알아 보겠습니다. action : form 내부의 데이터를 보내는 url 경로를 지정합니다.method : 데이터를 보내는 방식을 지정합니다. post와 get 방식이 있습니다.action : action에 의한 새로운 웹페이지가 열리는 방식을 지정합니다. autocomp..

개발 블로그를 운영을 하게 되면 포스팅에 소스코드를 같이 첨부해야 할 일이 많습니다. 매번 소스코드 부분을 캡쳐하고 저장하고 에디터에 다시 사진을 올리는 반복작업을 많이 하게 되면서 글을 쓰는데 제법 많은 시간을 소비하는 것 같습니다. 소스코드를 쉽고 빠르게 내가 작성하는 글에 삽입할 수 있도록 도움을 주는 사이트를 하나 소개하고자 합니다. https://colorscripter.com/ 위 사이트를 접속하게 되면 에디터 페이지가 뜨게 될 것입니다. 따로 설정 할 필요없이 게시하고자 하는 소스코드를 바로 에디터에 복사 붙여넣기를 해줍니다. 언어종류에 상관없이 소스코드를 넣게 되면 실시간 하이라이팅 기능으로 본인이 넣은 소스코드의 언어를 자동으로 감지하여 그에 맞게끔 소스코드가 이쁘게(?) 나오게 됩니다...

오늘은 웹 페이지에서 테이블 태그를 활용하여 테이블을 표현하는 방법에 대해 알아보겠습니다. 테이블 태그는 단순히 테이블을 보여줄 때 사용이 되지만 웹 페이지의 전체적인 레이아웃을 구성 할 때도 사용이 됩니다. 사실 테이블 태그의 경우는 요즘 잘 사용되지 않는 추세이긴 하지만 (웹 페이지의 레이아웃 구성도 div 태그를 활용하여 구성합니다) 그래도 모르고 넘어가면 안되기 때문에 한번 살펴보도록 하겠습니다. 1. Table 태그 기본 먼저 테이블 태그 영역에 사용 될 수 있는 하위 태그들에 대해 정리 해보겠습니다. : table을 생성하는데 사용되는 가장 상위의 태그 : 새로운 행을 시작하는 태그 : 새로운 열을 시작하는 태그기본적으로 이렇게만 알고 시작해보도록 하겠습니다. 123456789101112131..

웹 컨텐츠에서 제목을 작성하는 h 태그와 다른 웹페이지로 이동을 시켜주는 하이퍼링크 인 a태그에 이어서 오늘은 리스트 태그와 이미지 태그에 대해서 정리해보도록 하겠습니다. [Programming/HTML&CSS] - [HTML5/CSS3] HTML 기초 강좌 - h태그와 a태그에 대해 알아보자[Programming/HTML&CSS] - [HTML5/CSS] HTML과 CSS 기초 개념 이해하기 1. 리스트 태그 - 태그 html에서는 목록을 작성 할 수 있는 태그들이 있는데요. 먼저 ul 태그에 대해서 살펴 보겠습니다. ul 태그는 unordered list의 약자로 순서가 없는 리스트를 작성 할 때 사용됩니다. 순서가 없기 때문에 글머리 기호를 사용해서 나타내는게 특징입니다. 태그의 경우는 사이에 정의..

오늘부터 HTML에서 사용하는 태그들에 대해서 하나씩 정리해 나가도록 하겠습니다. 오늘 게시글 주제는 컨텐츠에서 제목을 표현하는 h태그와 본문 내용을 작성 할 때 사용하는 a 태그에 대해서 알아보도록 하겠습니다. 1. 제목 요소에 해당하는 h 태그 H 태그들은 웹 페이지의 컨텐츠 내에서 제목을 표시 할 때 사용하는 헤드라인 태그입니다. 컨텐츠내에서 제목을 작성 할 때 사용되는 태그들로 웹 페이지의 내용만큼이나 중요한 요소입니다. h 태그는 h1을 시작으로 h6까지 있으며 상위번호로 갈수록 글자크기가 작아집니다. 보통 h1 태그가 웹 페이지 컨텐츠상에서 주 제목을 쓸때 쓰이며 h1을 제외한 상위번호를 통해 부제목을 작성을 하게 됩니다. 태그 사용방법은 앞서 게시글에서 얘기했던대로 제목 요소 와 같이 사용하..

1. HTML 이란 ? HTML은 Hyper Text Markup Language의 약자로 웹 페이지를 만들기 위해 사용되는 마크업 언어로 확장자를 *.htm 또는 *.html로 지정하면 웹 브라우저를 이를 html 문서로 인식하고 로딩을 하게 됩니다. HTML은 아무 Text Editor를 사용해서 확장자만 제대로 지정해주면 브라우저로 곧바로 실행 해 볼수 있습니다. (참고로 저는 Visual Studio Code Editor를 사용하여 실습을 진행해 나갈 생각입니다. 아래 링크 게시글을 통해 확인 바랍니다. ) [Programming/JavaScript] - [JavaScript] Visual Studio Code 설치 및 시작 1.1 HTML 기본 구조 123456789101112 Document ..

1. 왜 CRA를 사용하는가 ? React Code의 경우 최신 자바스크립트 코드로 작성하는 것이 일반적입니다. 여기서 최신 자바스크립트란 ES6 기반의 코드를 의미하는데 이러한 ES6 기반의 자바 스크립트를 모든 브라우저에서 지원을 해주고 있지 않습니다. 따라서 정식으로는 웹팩이라는 녀석을 설치하고 설정을 따로 해줘야 합니다. 하지만 고맙게도(?) 페이스북에서 초보자를 위해 웹팩을 따로 설치하지 않고도 사용 할 수 있도록 CRA라는 툴을 제공하고 있습니다. CRA는 ES6 자바 스크립트를 브라우저가 이해 할 수 있는 ES5 코드로 변경을 해주는 고마운 툴입니다. 2. ES6 Style의 자바 스크립트 소스 1_TestFunction = function() { console.log("Test Code")..

1. Visual Studio Code 시작하기JavaScript를 시작하기에 앞서 먼저 편지기인 Visual Studio Code를 설치하도록 하겠습니다. https://code.visualstudio.com/ 위 Red Marking 된 부분의 Download for Windows를 Click하여 Setup 파일을 다운로드 합니다.설치과정은 머 없으니 생략하도록 하겠습니다. 설치가 끝나고 아래와 같이 Visual Studio Code가 정상적으로 실행되는 것을 확인하시면 됩니다. 2. Visual Studio Code 알아보기 Visual Studio Code에서 작업 할 폴더를 불러와야 합니다. 위 View Bar 에서 맨 위에 있는 것을 클릭 한 뒤 Open Folder를 Click하여 작업 할 ..