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

[HTML/CSS] CSS의 Border속성 본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] CSS란? CSS의 작성법 [TIP/Blog] - [HTML/CSS] HTML에 CSS를 적용하는 방법!! [TIP/Blog] - [HTML/CSS] CSS의 Background속성 [TIP/Blog] - [HTML/CSS] CSS의 박스모델링 Border는 테두리의 형태를 다루는 속성입니다. 테두리의 스타일, 두께, 색상, 곡률을 지정하며 각 변을 따로 지정 할 수도 있습니다. 테두리 스타일은 다음과 같은 효과를 부여합니다. * Dotted - 점선 테두리 * Dashed - 파선 테두리 ..

[HTML/CSS] CSS의 박스모델링 본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] 표 만들기 〈TABLE〉태그!!(2) [TIP/Blog] - [HTML/CSS] 표 만들기 〈TABLE〉태그!!(1) [TIP/Blog] - [HTML/CSS] CSS란? CSS의 작성법 [TIP/Blog] - [HTML/CSS] HTML에 CSS를 적용하는 방법!! 모든 요소는 하나의 박스(Box)로 생각 할 수 있습니다. 큰 박스, 작은 박스 등을 쌓아올려 보기좋게 레이아웃을 구성할 수 있으며 블로그 및 홈페이지를 제작할때 확실히 이해를 하고 있어야 합니다. 박스모델을 한장의 이미지로 가장 쉽..

[HTML/CSS] CSS의 링크꾸미기 본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] 폰트 사이즈 단위 [TIP/Blog] - [HTML/CSS] CSS란? CSS의 작성법 [TIP/Blog] - [HTML/CSS] HTML에 CSS를 적용하는 방법!! [TIP/Blog] - [HTML/CSS] 링크걸기 〈a〉태그!! 링크는 태그를 사용하기 때문에 태그를 꾸며주게 되는데, CSS란? CSS의 작성법의 의사셀렉터(가상선택자) 부분을 활용하여 속성을 부여합니다. 링크꾸미기는 보통 다음과 같은 효과를 부여합니다. * a:Link - 방문하지 않은 링크 * a:Visited - 방문했던 ..