티스토리 BGM 배경음악 설치하기!! 네이버 블로그는 자체적인 뮤직 플레이어가 있어서 어렵지 않게 배경음을 설정 할 수 있는데요. 티스토리의 경우 공식적으로 지원하고 있지는 않지만 자유로운 설치형 블로그 답게 HTML을 활용하여 뮤직 플레이어를 설치 할 수 있어요. SCM Music Player 링크를 타고 들어가서 자신의 블로그에 어울리는 스킨을 선택하도록 합니다. 저는 핫핑크를 포인트로 사용하고 있으므로 핑크색으로 선택했어요. "Next"를 눌러 다음으로 넘어갑시다. 업로드 되어있는 MP3파일의 URL주소 혹은 유튜브의 URL주소를 입력합니다. 저는 MP3파일이 없으므로 유튜브의 노래를 사용할게요. 유튜브 주소를 얻는법은 아래를 봐주세요. 빠..빠.. 빨간맛~ 궁금해 Honey♪♬ 유튜브에서 URL을..
[HTML/CSS] HTML에 CSS를 적용하는 방법!! 앞선 포스팅에서 웹문서는 "바디" 즉 몸이 되는 HTML과 이를 꾸며주는 "의상" CSS로 구성된다고 했었죠? HTML에서 상용되는 기본 태그들을 다뤄서 몸은 어느정도 만들 수 있게 되었고 이제는 옷을 입혀보도록 해요. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] 웹 문서의 개념 [TIP/Blog] - [HTML/CSS] HTML의 기본구조 [TIP/Blog] - [HTML/CSS] CSS란? CSS의 작성법 HTML에 CSS를 적용하는 방법은 3가지가 있어요. • Inline Style Sheet 태그의 style속성에 CSS스타일을 적용하는 방법이에요. • Internal Style Sheet HTML문서 안에 스타일태그안에 작성..
[HTML/CSS] , 목록 태그만들기!! 흔히 카테고리나 목차 등을 나열 할 때 목록을 표현 하게되죠? 목록태그는 목록의 범위를 나타내는 목록 태그와, 목록의 각 항목을 나타내는 태그가 함께 사용됩니다. 목록 태그는 순서가 있는 목록 과 순서가 없는 목록 이 있어요. 순서가 있는 목록 태그 속성 속성값 비고ol type 표현값 1 / a / A / i / I, 기본값1 start 번호 시작숫자 li type 표현값 1 / a / A / i / I, 기본값1 value 번호 시작숫자 순서가 있는 목록태그는 속성과 속성값을 모두 생략하고 작성할 수 있으며 번호 형식은 숫자를 기본으로 합니다.번호 형식을 지정하려면 숫자"1"은 아라비아 숫자, 소문자"a"는 영어소문자, 대문자"A"는 영어대문자, 소문자아이"..
[HTML/CSS] 표 만들기 태그!!(2) 앞서 태그의 구성에 대해 간단히 다뤘는데 이번엔 태그에 들어가는 속성에 대해 다뤄볼게요. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] 표 만들기 〈TABLE〉태그!!(1) 테이블 태그 태그 속성 속성값 비고 table align 정렬 left / right / center, 기본값left border 숫자 테두리의 두께, 기본값0 bordercolor 색상코드 0000FF, FFFFFF 등등, 테두리 색상 width/height 숫자 표의 너비 / 높이 cellpadding 숫자 셀 테두리와 내용 사이의 간격 cellspacing 숫자 셀과 셀 사이의 간격 background 파일명이나 URL 표의 배경 이미지 삽입 bgcolor 색상코드 000..
[HTML/CSS] 표 만들기 태그!!(1) 일반적으로 문서 작성을 할때 표를 많이 만들어 보셨죠? 웹 문서에서도 표를 만들수 있는데 이때 사용되는 태그는 단순히 표로써의 역할만 하는것이 아니라 문서 구성을 위한 레이아웃을 잡을때도 사용해요. 저 같은경우엔 거의 모든 포스팅에 포함 되어 있을정도로 많이 사용하는 태그에요. 표의 구성 중학교 수학시간에 행열에 대해 배우셨죠? 표는 데이터가 들어가는 셀들이 모여 행과 열을 이루고, 행과 열들이 모여 하나의 표가 완성됩니다. 태그 비고 table 테이블을 선언하는 태그 caption 테이블에 표기하는 캡션 tr 한 행을 구성하는 태그 th 제목셀이며 일반 셀과 다르게 강조되어 나타남 td 일반 셀이며 내용을 구성함 일반적으로 이렇게 속에 혹은 를 넣어 구성을 ..
[HTML/CSS] 움직이는 글자 태그!! 웹 문서에서 글자를 돋보이게 하기 위해 태그를 사용 할 수 있어요. 간판의 "네온사인" 같은 느낌을 낼 수 있지만 사실 요즘에는 gif이미지로 표현 하는것이 훨씬 자유롭고 멋지게 만들 수 있기 때문에 요즘에는 거의 사용하지 않는 태그에요. 마퀴태그 태그 속성 속성값 비고 marquee align 위치 top / middle / bottom width/height 숫자 가로, 세로 보여줄 범위 hspace/vspace 숫자 텍스트 바깥 여백 behavior scroll 가로로 지나감(기본값) slide 한쪽 끝에 닿으면 멈춤 alternate 범위 안에서 왕복 direction 방향 up / down / left / right scrolldelay 숫자 지연속도 ..
[HTML/CSS] 이미지 넣기 태그!! 이미지는 웹 문서를 한눈에 파악하기 쉽도록 해주는 가장 중요한 매체로 웹 페이지에서 텍스트와 함께 가장 많은 부분을 차지하기 때문에 반드시 알고 있어야해요. 이미지 삽입 태그 태그 속성 속성값 비고 img src 파일명이나 URL 이미지 파일의 경로와 파일명 혹은 URL alt 이미지 설명 이미지에 대한 대체 텍스트 border 테두리 지정 테두리선 두께 지정 align left / right 등 정렬 top/middle/bottom/left/right 지정 width 숫자 / % 등 너비 이미지의 가로크기 height 숫자 / % 등 높이 이미지의 세로크기 hspace 좌우 여백 숫자 이미지의 좌우여백 vspace 상하 여백 숫자 이미지의 상하여백 * alt 속..
[HTML/CSS] 특수한 글자 태그!! 일반적으로는 사용하지 않지만 특수한 경우 사용하게 되는 글자 태그를 다뤄 볼게요. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] 문서작성 기본태그!! [TIP/Blog] - [HTML/CSS] 폰트 사이즈 단위 아래 첨자 태그 태그 속성 속성값 비고 sub 보통 화학식 등에 사용됨 예) CO2 위 첨자 태그 태그 속성 속성값 비고 sup 제곱 등의 수학식에 사용됨 예) x2 일본어, 한자등의 표기 태그 속성 속성값 비고 ruby 루비문자 선언 rt 위에 쓰여질 작은 글자 rp ruby태그 의미 보강태그 rp태그는 HTML5에서 추가된 태그로 익스플로러9, 파이어 폭스, 오페라, 크롬, Safari에서 지원하며, 익스플로러8 이하에서는 지원하지 않을수도..
[HTML/CSS] 수평선 긋기 태그!! 태그는 수평선을 그어주는 태그입니다. Horizontal Rules의 줄임말이며 속성을 통해 형태의 변화를 줄 수 있어요. 수평선 태그 태그 속성 속성값 비고 hr size 굵기 숫자로 표현함 width 길이 px, %등의 단위 align 정렬방식 left, right, center color 색상코드 red, FF0000 등의 색상코드 noshade 입체감 없는 수평선 태그는 종료태그 없이 사용되며 ... 이렇게 열고 닫지 않고 사용되요. hr태그는 무조껀 화면 끝까지 가기 때문에 정렬(align)을 하기 위해선 길이(width)를 조절해줘야 합니다. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] 문서작성 기본태그!! w3스쿨js피들
구글 애드센스 계좌 등록하기 얼마전 PIN번호도 등록 했고 애드센스에 계속 신경쓰기 귀찮아서 아직 100$가 되려면 멀었지만 미리 계좌를 등록 했어요. 입출금통장이면 어떤것이든 상관없지만 송금 수수료, 환전 수수료 등 은행에서 떼어가는게 만만치 않아요. 저는 US달러로 받아놓고 환률 차이를 보면서 변경하기 위해 외화통장을 발급 받았어요. 수수료를 비교해본 후 스탠다드차타드은행에서 외화통장을 발급 받았고, 신규 거래이다보니 일반 입출금통장도 함께 발급 받았어요. (저는 모르고 일반 입출금통장을 발급 받았는데 굳이 필요는 없어요.) 마침 마블체크카드 발급 기간이여서 캡틴아메리카 통장과 아이언맨카드를 만들었는데 이쁘네요 ㅎㅎ 외화통장은 마블캐릭터가 안되요~ 그리고 최근 대포통장 근절을 위한 서류절차가 매우 복..