본문 바로가기

웹 개발

구글 애드센스 광고 넣는 방법 이 글을 읽으면 알 수있는 정보 구글 애드센스 수동광고 구글 애드센스 자동광고 목차 항목을 클릭하면 바로 볼수 있습니다. 목차 00. 들어가는 글 01. 검색하기 02. 로그인 하기 03. 광고 탭 클릭하기 04. 자동광고 설정하기 05. 수동 광고 설정하기 05-01 수동 광도에 대해서 05-02 수동 광고 설정하기 5-03 수동 광고 배치하기 06. 마무리 하며 00. 들어가는 글 티스토리 블로그에서 구글 애드센스에 대해 알아보겠습니다. 해보면서 느낀점은 이제 막 블로그를 시작한 사람들에게는 어려울 것 같았습니다. 그래서 저는 매우 쉽게 알려드리려고 합니다. 지금부터 아래의 글을 꼼꼼하게 읽어 주세요! 가볍게 넘어가도 되는 글은 주황색으로 표시 해놓고 동시에 박스안에 글이 들어가 있습니다. 구글 애드.. 더보기
CSS를 HTML에 적용하는 방법 안녕하세요! 이번 글은 웹 개발이네요! 드디어 개발 환경 설치하는 방법 설명이 끝나고 본격적인 웹 개발하는 방법에 대해 설명드릴 겁니다. ​ 먼저 저번 글에서 했던 설명을 되짚어보자면 웹 개발에는 프런트엔드 백엔드로 나누어진다고 설명했었고 프런트엔드는 사용자가 보는 모든 인터페이스를 꾸미고 코딩한다고 했었습니다. 백엔드는 데이터베이스 관리 서버 관리에 중점을 둔다고 했었죠. 그래서 저는 웹 개발 중에 프런트엔드에 대해서만 설명한다고 했었습니다. 본론으로 들어가자면 프런트엔드에서 웹 개발은 HTML, CSS, Javascript를 다룰 줄 알아야 합니다. 먼저 HTML으로 홈페이지의 뼈대를 구성하고 CSS로 홈페이지를 꾸며줍니다. HTML로 만든 구성요소들을 CSS로 꾸며준다고 생각하면 더 쉬운 설명이 될.. 더보기
애플 폰트 SF Pro, 윈도우에서 사용하는 방법 안녕하세요. 최근 젊은 세대들은 폰트에도 민감하죠. 특히 디자인 관련 직업을 가지고 계신 분들은 글씨체 즉 폰트에 정말 민감합니다. 제가 보기엔 같아 보이는데 디자이너분들은 다른 것을 정말 잘 찾아내십니다.. 그에 따라 개발자분들도 최대한 맞춰주려고 노력을 많이 하죠. 본론으로 와서 이번 글에서는 애플 SF Pro를 윈도우에서 사용하는 방법에 대해 알아보겠습니다. 애플에서 제공하는 폰트 SF Pro는 Mac에서만 적용이 가능합니다. 하지만 조금만 노력을 들인다면 Window(윈도우)에서도 SF Pro 폰트 사용이 가능합니다. 한번 알아볼까요? ​ ​ ​ SF Pro.dmg 파일 다운로드하기 먼저 아래의 사이트를 클릭합니다. 아래의 사이트는 apple developer 사이트입니다. https://deve.. 더보기
웹 개발 환경 구축하기 웹 개발을 할 때 메모장으로도 가능한 것을 아시나요? 하지만 엄청 불편합니다. 그래서 웹 개발을 할 때 개발 툴을 설치해서 프로그래밍을 합니다. 웹 개발뿐만 아니라 다른 언어도 마찬가지죠. 오늘은 웹 개발 환경 구축에 대해 알아보려고 합니다. 웹 개발 환경을 사용할 때 사용하는 개발 툴은 다양하게 있습니다. 저는 이번 글에서 웹 개발에 유용한 개발 툴 3가지를 소개해드리려고 합니다. 01. brackets brackets는 웹 개발에 초점을 맞춰 만들어진 소스 코드 편집기입니다. 쉽게 말하면 웹 개발 전용 개발 환경입니다. 어도비 많이 들어보셨나요? 포토샵이나 일러스트레이터 등 다양한 디자인 툴을 판매, 제공하는 기업이죠. brackets는 바로 어도비에서 개발한 툴입니다. 현재는 어도비와 다른 오픈 소.. 더보기
프런트엔드에 대해서 알아봅시다. 여기를 검색해서 들어오신 분이라면 대부분 웹 개발에 대해서 입문하셨다고 생각합니다. 그래서 먼저 웹 개발을 위한 환경 세팅을 하기 전에 웹개발에는 무엇이 있는지부터 알아보겠습니다. 웹 개발은 크게 두 개로 구분지을 수 있습니다. 프런트엔드와 백엔드 바로 프런트엔드와 백엔드입니다. 프론트엔드 개발은 지금 여러분이 보고있는 화면 구성의 전체적인 부분을 담당합니다. 어려운 말로는 '사용자가 보는 인터페이스 구성을 개발한다'고 할수 있겠습니다. 네이버 홈페이지로 설명하자면 눈에 보이는 모든 요소를 개발한다고 생각하면 됩니다. 저는 프론트엔드 개발을 하고 있기 때문에 앞으로 백엔드 설명을 제외하고 프론트엔드 설명만 할 예정입니다. 제가 임의로 네이버 홈페이지의 영역을 나눠봤습니다. 위의 이미지 사진과 같이 홈페이.. 더보기