CSS 상속/우선순위 CSS 강좌 09강 ※상속▷상위 엘리먼트의 속성을 하위 엘리먼트가 물려 받는것을 속성이라 합니다.▷상속이 가능하지 않은 속성도 존재합니다.▷상속이 가능하지 않은 속성에 inHerited 값을 지정할 경우 강제로 상속이 가능합니다. 예제) 축구동호회 농구동호회 농구동호회 주장 농구동호회 감독 농구동호회 코치진 이농구 코치 김농구 코치 야구동호회 볼링동호회 탁구동호회 수영동호회 가장 상위의 엘리먼트에서 선언한 속성이 하위 엘리먼트의 속성값으로 상속이 됩니다.하지만 중간에 농구동호회 코치진에서 선언한 속성이 농구동호회 자식 엘리먼트에만 영향을 미칩니다. 예제) 축구동호회 농구동호회 농구동호회 주장 농구동호회 감독 농구동호회 코치진 이농구 코치 김농구 코치 야구동호회 볼링동호회 탁구동호회 ..

CSS 포지션 스타일 CSS 강좌 08강 ※position▷position은 CSS를 이용하여 HTML 엘리먼트들의 위치를 제어하는 방법입니다.▷position의 종류(1)상대위치(relative position)->자신의 위치를 기준으로 위치 값을 지정합니다.ㅇ기준위치 : 엘리먼트 자체ㅇ부모의크기 : 자식의 크기에 따라 변경ㅇ자신의크기 : 부모의 크기를 따름(width:100%)ㅇoffset : 사용가능ㅇ스크롤 : 영향을 받음 사용법){ position:relative } 예제)*스타일 요소 *HTML요소 일반적인 박스 부모 박스 자신 박스 위 소스에서 자신박스에 offset 값으로 top:20px 을 추가해서 테스트 해보겠습니다. (2)절대위치(absolute position)->문서를 기준으로 위치..

CSS 박스 스타일 CSS 강좌 07강 이번 강좌에서는 margin, border, padding, float 속성을 사용하여 div 및 박스를 스타일링 해보겠습니다. 박스 역시 HTML 코딩을 하면서 아주 많이 사용하니 반드시 익혀야 하는 스타일 입니다. ※박스모델▷HTML에서 특정 영역에 대한 경계.. 보통 사각형을 사용하는데 이것이 박스모델 입니다.▷속성(1)margin : 테두리를 기준으로 여백을 지정합니다.(2)border : 테두리의 두께를 지정합니다.(3)padding : 테두리와 콘텐츠의 간격을 지정합니다.(4)content : 영역 안에 들어가는 내용을 의미합니다. 예제) Content ※박스 마진겹침(margin collapsing)각각의 div 박스가 두 개 있다고 가정하고 각각의 박..

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 사용법)링크상태..

CSS 강좌 05강 - CSS font 스타일 font는 글꼴을 의미하는데, 쉽게 말하자면 글자의 서체.. 즉 모양입니다. ※Font Family ▷웹 페이지에서 스타일링 한 글꼴을 사용자가 보기 위해서는 사용자의 디바이스에 해당 글꼴이 포함되어 있어야 합니다. ▷그렇기 때문에 Font Family라는 것을 사용하는데요. ▷Font Family를 사용하여 여러개의 글꼴을 지정하고, 사용자에게 있는 글꼴로 적용을 합니다. 예제) Go Learning! ※Sans-serif/serif ▷serif란 문자를 디자인 하는 요소입니다. 문자의 획 끝부분을 장식하는 모양을 말합니다. ▷serif의 대표적인 글꼴은 바탕체, 궁서체, Time New Roman이 있습니다. ▷sans-serif란 serif처럼 획 끝부..

CSS 강좌 04강 - CSS 텍스트 스타일 ※SPAN 태그 ▷특정한 텍스트 영역에 특정한 스타일을 주기위해 SPAN태그를 이용합니다. ▷SPAN태그 시작태그와 종료태그 사이에 있는 요소에 스타일을 지정할 수 있습니다. 사용법) 스타일을 지정하지 않고자 하는 요소 스타일을 지정하는 요소 스타일을 지정하지 않고자 하는 요소 예제) 스타일을 지정하지 않고자 하는 요소 스타일을 지정하는 요소 스타일을 지정하지 않고자 하는 요소 ※색상 지정 ▷지금까지 많이 사용했던 스타일 코드입니다. 특정 텍스트에 색상을 지정합니다. ▷색상을 지정하는 방법은 다음과 같이 세 가지 방법이 있습니다. (1)Hex : 16진수를 이용한 표현 (예제 : #ff0000, #00ff00, #0000ff) (2)RGB : red, blue..

CSS 강좌 03강 - CSS 선택자 조합 ※하위 선택자 ▷어떠한 객체의 하위에 나오는 요소를 선택합니다. ▷하위 요소를 감싸고 있는 부모 객체가 먼저 입력하고 공백으로 구분한 후 하위 요소를 입력합니다. 사용법) 상위객체 하위요소{ } 예제) Go Learning! Go Learning! 예제를 보면 알겠지만, 첫 번째 div 객체의 h1 요소만 영향을 받고, 두 번째 h1 요소는 영향을 받지 않습니다. ※다중 선택자에 적용하기 ▷여러 요소나 객체를 동시에 선언하여 스타일을 지정할 수 있습니다. ▷선택자와 선택자는 , 로 구분하여 나열합니다. 사용법) 선택자, 선택자, 선택자{ } 예제) Go Learning! Go Learning! Go Learning! ※자식 선택자 ▷어떠한 요소의 자식이 되는 요..

CSS 강좌 02강 - CSS 선택자 ※CSS 선택자란.. CSS 선택자는 CSS를 이용해 스타일을 적용하고자 하는 태그를 지정해주는 것을 의미합니다. 태그명으로 선택자를 지정할 수 있고, 아이디나 클래스로 선택자를 지정할 수 있습니다. ※type 선택자 ▷특정 태그명을 가진 엘리먼트 전체를 제어하기 위해서 사용합니다. ▷type 선택자를 이용하여 스타일을 적용하게 될 경우 같은 type의 모든 태그에 스타일이 적용됩니다. 사용법) 태그명{ color:blue; } 예제) Go Learning! Funny Web! You Joking? 위와 같이 코딩을 하면 h1 type의 모든 태그에 스타일이 적용됩니다. 다른 type의 태그도 마찬가지 입니다. ※아이디 선택자 ▷아이디 선택자는 아이디를 가지고 있는 ..

CSS 강좌 01강 - CSS 시작하기(CSS개념) ※CSS란 무엇일까요? 지금까지 HTML, HTML5 강좌를 보셨거나 경험한 적이 있다면.. 적어도 한번 이상 CSS라는 단어를 본 적이 있을겁니다. CSS는 웹 페이지를 개발하는데 있어서 필수는 아니지만 웹 페이지를 꾸미는데 있어서 필수입니다. HTML이 웹페이지의 정보를 표현한다고 하면, CSS는 웹페이지를 시각적으로 꾸며주는 역할을 합니다. ※CSS를 왜 사용해야 할까요? CSS를 사용하여 웹페이지를 디자인 하는 경우 다음과 같은 효과를 얻을 수 있습니다. ▷정보(HTML)와 디자인(CSS)을 분리할 수 있습니다. ▷디자인만 독립적으로 수정할 수 있습니다. ▷검색엔진은 HTML을 해석할 수 있습니다. 그렇기에 많은 방문자들의 유입을 유도할 수 있습..