반응형 CSS5 CSS 박스 스타일 CSS 강좌 07강 CSS 박스 스타일 CSS 강좌 07강 이번 강좌에서는 margin, border, padding, float 속성을 사용하여 div 및 박스를 스타일링 해보겠습니다. 박스 역시 HTML 코딩을 하면서 아주 많이 사용하니 반드시 익혀야 하는 스타일 입니다. ※박스모델▷HTML에서 특정 영역에 대한 경계.. 보통 사각형을 사용하는데 이것이 박스모델 입니다.▷속성(1)margin : 테두리를 기준으로 여백을 지정합니다.(2)border : 테두리의 두께를 지정합니다.(3)padding : 테두리와 콘텐츠의 간격을 지정합니다.(4)content : 영역 안에 들어가는 내용을 의미합니다. 예제) Content ※박스 마진겹침(margin collapsing)각각의 div 박스가 두 개 있다고 가정하고 각각의 박.. 2016. 3. 8. CSS 강좌 06강 - CSS 링크/표/배경 스타일 CSS 강좌 06강 - CSS 링크/표/배경 스타일 A 링크는 HTML 코딩을 하면서 정말 자주 사용하는 태그입니다.자주 사용하는 만큼 CSS로 스타일을 잡아주는게 좋겠죠~ ※A 링크 스타일▷링크는 링크의 상태에 따라 4가지 상태로 구분할 수 있습니다.▷링크의 상태에 따라 적절한 스타일링을 해줍니다.▷링크의 상태(1)방문(클릭) 하기 전의 상태 ->a:link (가장 기본이 되는 상태죠.)(2)이미 방문(클릭)을 실행한 상태 -> a:visited (3)링크에 마우스를 오버하고 있는 상태 -> a:hover(4)링크에 마우스를 클릭하고 있는 상태 -> a:active▷링크의 상태별로 스타일링 하는 순서1순위 : a:link/a:visited2순위 : a:hover3순위 : a:active 사용법)링크상태.. 2016. 3. 5. CSS 강좌 05강 - CSS font 스타일 CSS 강좌 05강 - CSS font 스타일 font는 글꼴을 의미하는데, 쉽게 말하자면 글자의 서체.. 즉 모양입니다. ※Font Family ▷웹 페이지에서 스타일링 한 글꼴을 사용자가 보기 위해서는 사용자의 디바이스에 해당 글꼴이 포함되어 있어야 합니다. ▷그렇기 때문에 Font Family라는 것을 사용하는데요. ▷Font Family를 사용하여 여러개의 글꼴을 지정하고, 사용자에게 있는 글꼴로 적용을 합니다. 예제) Go Learning! ※Sans-serif/serif ▷serif란 문자를 디자인 하는 요소입니다. 문자의 획 끝부분을 장식하는 모양을 말합니다. ▷serif의 대표적인 글꼴은 바탕체, 궁서체, Time New Roman이 있습니다. ▷sans-serif란 serif처럼 획 끝부.. 2016. 3. 3. CSS 강좌 02강 - CSS 선택자 CSS 강좌 02강 - CSS 선택자 ※CSS 선택자란.. CSS 선택자는 CSS를 이용해 스타일을 적용하고자 하는 태그를 지정해주는 것을 의미합니다. 태그명으로 선택자를 지정할 수 있고, 아이디나 클래스로 선택자를 지정할 수 있습니다. ※type 선택자 ▷특정 태그명을 가진 엘리먼트 전체를 제어하기 위해서 사용합니다. ▷type 선택자를 이용하여 스타일을 적용하게 될 경우 같은 type의 모든 태그에 스타일이 적용됩니다. 사용법) 태그명{ color:blue; } 예제) Go Learning! Funny Web! You Joking? 위와 같이 코딩을 하면 h1 type의 모든 태그에 스타일이 적용됩니다. 다른 type의 태그도 마찬가지 입니다. ※아이디 선택자 ▷아이디 선택자는 아이디를 가지고 있는 .. 2016. 3. 2. CSS 강좌 01강 - CSS 시작하기(CSS개념) CSS 강좌 01강 - CSS 시작하기(CSS개념) ※CSS란 무엇일까요? 지금까지 HTML, HTML5 강좌를 보셨거나 경험한 적이 있다면.. 적어도 한번 이상 CSS라는 단어를 본 적이 있을겁니다. CSS는 웹 페이지를 개발하는데 있어서 필수는 아니지만 웹 페이지를 꾸미는데 있어서 필수입니다. HTML이 웹페이지의 정보를 표현한다고 하면, CSS는 웹페이지를 시각적으로 꾸며주는 역할을 합니다. ※CSS를 왜 사용해야 할까요? CSS를 사용하여 웹페이지를 디자인 하는 경우 다음과 같은 효과를 얻을 수 있습니다. ▷정보(HTML)와 디자인(CSS)을 분리할 수 있습니다. ▷디자인만 독립적으로 수정할 수 있습니다. ▷검색엔진은 HTML을 해석할 수 있습니다. 그렇기에 많은 방문자들의 유입을 유도할 수 있습.. 2016. 3. 2. 이전 1 다음 반응형
