2017 티스토리 결산 - 비밀의화원 2017년 4월 블로그를 처음 시작했어요. 사실 2012년 개설을 했지만 그동안 포스팅을 하진 않았어요. 그래서인지 결산 내역에는 '5년차 블로거' 라고 나오네요. 5년동안 무심히 지나친 시절이 아깝다는 생각이 들었습니다. 처음 하는 결산인데 상위 10% 부지러너라니 그래도 열심히 했구나 라는 뿌듯함도 느껴지네요. 2018년은 1월부터 12월까지 진정한 결산을 제대로 받아보고 싶어요!! 비밀의화원 2017 결산 리포트 ▶관련 포스팅◀ [TIP/PC] - SMB 포트차단 해제하기!! [Killing Time/Psy Test] - 심리 테스트 전생에 나는 어떤 사람이였을까? [Culture] - 2017년 경복궁 창경궁 야간개장!! [Killing Time/Psy Tes..

Button Generator!! CSS 버튼 꾸며주는 사이트 html의 기본형 버튼은 회색에 투박하기 때문에 디자인의 통일성을 깨뜨리는 문제가 발생합니다. 버튼은 웹문서에서 상당히 많이 사용하게되며 이미지로 사용하기도 하지만 CSS를 이용하여 만들 계획이라면 버튼을 쉽게 만들어주는 사이트가 있습니다. Button Generator ① 미리 제작된 템플릿을 선택할 수 있습니다. ② 색상을 선택할 수 있고 디자인을 실시간으로 확인 할 수 있습니다. ③ 버튼의 세부적인 디자인을 변경 할 수 있습니다. 원하는 형태의 버튼이 완성 되었다면 미리보기창의 버튼을 눌러줍니다. 그러면 우측의 설정부분이 CSS 코드로 변하는데 이걸 복사해주세요. 티스토리의 HTML/CSS 편집에서 CSS부분에 붙여넣어주면 버튼에 대한 ..

반응형 웹문서를 테스트하는 사이트!! 반응형 웹문서를 작성 할때 다른 디바이스에서는 어떻게 보이나 궁금할때가 많죠? 반응형 웹문서를 테스트 할 수 있는 사이트가 있습니다. Troy Labs 링크를 타고 들어가면 사용방법이 쓰여있어서 너무 쉽게 설명이 되어있습니다. 좌측에서 디바이스를 선택 후 상단에 테스트 할 URL을 입력해주면 끝나요. 앞서 다룬 미디어 쿼리를 이용하여 다양한 디바이스에서 반응형 웹을 테스트해 보세요. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] HTML에 CSS를 적용하는 방법!! [TIP/Blog] - [HTML/CSS] CSS의 Display속성 [TIP/Blog] - [HTML/CSS] CSS의 Position속성 [TIP/Blog] - [HTML/CSS] CSS의..

[HTML/CSS] CSS의 @media query 미디어 쿼리!! 본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] HTML에 CSS를 적용하는 방법!! [TIP/Blog] - [HTML/CSS] CSS의 Display속성 [TIP/Blog] - [HTML/CSS] CSS의 Position속성 [TIP/Blog] - [HTML/CSS] CSS의 Float속성 반응형 웹에 대해 아시나요? 스마트폰의 보급에의해 기존의 웹사이트를 모바일로 보기에는 무리가 있어 대형 포털사이트에서는 모바일에서 보기 편하도록 모바일 페이지를 별도로 만들었습니다. 예를 들어 http://m.naver.com ..

[HTML/CSS] CSS의 Float속성 본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] HTML에 CSS를 적용하는 방법!! [TIP/Blog] - [HTML/CSS] CSS의 박스모델링 [TIP/Blog] - [HTML/CSS] CSS의 Display속성 [TIP/Blog] - [HTML/CSS] CSS의 Position속성 Float은 Position과 함께 레이아웃을 구성할때 많이 사용합니다. * Float : Left * Float : Right * Clear : Both 태그 속성 속성값 비고 style float left 왼쪽으로 배치 right 오른쪽으로 배치 cle..

[HTML/CSS] CSS의 Position속성 본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] HTML에 CSS를 적용하는 방법!! [TIP/Blog] - [HTML/CSS] CSS의 박스모델링 [TIP/Blog] - [HTML/CSS] 블록 요소 & 인라인 요소 [TIP/Blog] - [HTML/CSS] CSS의 Display속성 Position은 요소의 위치를 지정할 방식을 지정합니다. * Static - 기본값 * Relative - 원래 위치를 기준 * Fixed - 웹브라우저창을 기준 * Absolute - 웹문서를 기준 태그 속성 속성값 비고 style position ..

[HTML/CSS] CSS의 Display속성 본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] CSS란? CSS의 작성법 [TIP/Blog] - [HTML/CSS] HTML에 CSS를 적용하는 방법!! [TIP/Blog] - [HTML/CSS] CSS의 박스모델링 [TIP/Blog] - [HTML/CSS] 블록 요소 & 인라인 요소 Display는 요소를 보여주기 위한 방식을 지정하는 속성입니다. * Inline * Block * List-Item * Run-In * Inline-Block * Inline-Table * Table * Table-Row-Group * Table-Hea..

[HTML/CSS] 블록 요소 & 인라인 요소 HTML의 태그들은 기본적으로 블록 혹은 인라인 속성을 지니고 있습니다. 예를들면 태그를 보면 한줄에 여러개씩 작성 가능한반면 태그는 한줄에 하나밖에 작성 할수 없어요. 전부 외우고 있을 필요는 없지만 자주 사용하는 태그가 어떤 속성을 지니고 있는지는 알아야 웹문서를 작성할때 더욱 유용합니다. 아래는 네이버 "꼬꼬냥"님 블로그에서 워낙 잘 만들어주셨기 때문에 일부 부연 설명을 덧붙여 퍼왔음을 알려드립니다. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] HTML의 기본구조 [TIP/Blog] - [HTML/CSS] CSS의 링크꾸미기 [TIP/Blog] - [HTML/CSS] CSS의 박스모델링 [TIP/Blog] - [HTML/CSS] CSS의 ..

[HTML/CSS] CSS의 Margin속성 본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] CSS란? CSS의 작성법 [TIP/Blog] - [HTML/CSS] HTML에 CSS를 적용하는 방법!! [TIP/Blog] - [HTML/CSS] CSS의 박스모델링 [TIP/Blog] - [HTML/CSS] CSS의 Padding속성 Margin은 Border의 바깥에 위치하는 바깥여백입니다. 모든 속성은 앞서 다룬 Padding과 동일하지만 두가지 특징이 더 있습니다. 첫째로는 (-)음수값을 사용할 수 있으며, 둘째로 Auto값을 지정 할 수 있습니다. 각 변을 따로 지정 할 수 있으..

[HTML/CSS] CSS의 Padding속성 본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] CSS란? CSS의 작성법 [TIP/Blog] - [HTML/CSS] HTML에 CSS를 적용하는 방법!! [TIP/Blog] - [HTML/CSS] CSS의 박스모델링 [TIP/Blog] - [HTML/CSS] CSS의 Border속성 Padding은 Border와 Content사이의 여백을 관리하는 안쪽여백입니다. 각 변을 따로 지정 할 수 있으며 다음과 같이 사용합니다. * Padding-Top * Padding-Bottom * Padding-Left * Padding-Right Pa..