[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..

[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 - 방문했던 ..