Web/CSS (7) 썸네일형 리스트형 [WEB] CSS layout(float, overflow, clear 속성) float 기반 layout 구성1234567891011121314151617181920212223header menu home name 반가워요! :-) crong pororo pobi rupy footercs 12345678910111213141516171819202122232425262728293031323334353637li { list-style: none;}header { background-color : #eee;}footer { background-color : #eee; clear: left;}#wrap { overflow: auto; margin: 20px 0;}.left, .right { float: left; height: 200px;}.left { width: 37%; margin.. [WEB] CSS 요소 배치(2) float 속성기존의 배치에서 예외적으로 떠있게 한다. float 속성이 없다면 blue, green, red div가 각각 위에서 아래로 순서대로 보여야 한다.하지만 float 속성에 의해 green div가 배치와 관계없이 화면에 띄워지게 되므로 red div가 blue div 바로 아래에 배치된다. 123cs 1234567891011.blue { background-color: blue;}.green { float: left; background-color: green; margin-left: 30px;}.red { background-color: red;}cs Box-model하나의 block 요소는 box형태이다. block 요소의 경우 box의 크기와 간격에 관한 속성으로 배치를 추가 결정한다.. [WEB] CSS 요소 배치(1) display 속성12block1block2cs∎ block위에서 아래로 요소들이 쌓인다. ∎ inline우측으로 요소들이 쌓인다. width, height 속성을 지정해도 반영되지 않는다. ∎ inline-blockinline 요소처럼 동작하지만, 해당 요소 내부에서는 block요소처럼 동작한다.inline요소와 비슷하지만, width, height를 설정할 수 있다. position 속성position 속성을 이용하여 특별한 배치를 할 수 있으며, position 속성의 기본값은 static이다. ∎ static순서대로 배치된다. ∎ absolute기준점에 따라서 특별한 위치에 배치되며, top/left/right/bottom으로 설정한다.상위 요소 중 static이 아닌 position을 기준점으로.. [WEB] CSS 기본 Style Font 색상변경123color : red;color : rgba(255, 0, 0, 0.5);color : #ff0000;cs Font 사이즈 변경12font-size : 16px;font-size : 1em;cs 배경색12345background-color : #ff0;background-image : ;background-position : ;background-repeat : ;background : #0000ff url(“.../gif”) no-repeat center top; Colored by Color Scriptercs 글씨체/글꼴12font-family : "Gulim";font-family : monospace;cs 웹폰트브라우저에서 기본으로 지원하지 않는 폰트를 웹으로부터 다운로드받.. [WEB] CSS Selector CSS SelectorHTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법 ∎ tag로 지정하기12345 span { color : red; }cs ∎ id로 지정하기123456789 #spanId { color : red; } Hello World! Colored by Color Scriptercs ∎ class로 지정하기123456789 #spanClass { color : red; } Hello World! Colored by Color Scriptercs CSS Selector의 다양한 활용∎ id, class 속성을 요소 선택자와 함께 활용123456span#mySpanId { color : red;}div.myDivClass { color : green;}cs ∎.. [WEB] CSS 선택자 우선순위 CSS 상속상위 요소에 설정된 스타일 속성은 하위 요소에도 반영된다.이로 인해 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 된다.※ box-model이라고 불리는 속성들 즉, 크기와 배치 관련된 속성들은 하위 엘리먼트로 상속되지 않는다.ex) width, height, margin, padding, border 선택자 우선순위(CSS Specificity, Cascading Order) ∎ 선언 방식에 따른 차이123456span { color : red;}span { color : blue;}cs같은 선택자라면 나중에 선언한 것이 적용된다. => blue 123456body > span { color : red;}span { color : blue;}cs선택자의 표현이.. [WEB] CSS 선언방법 및 적용방법 CSS 선언방법123span { color: red;}csspan : selector(선택자)color : propertyred : value CSS를 HTML에 적용하는 방법∎ inline HTML 태그 안에다가 넣는 방법으로, 다른 CSS 파일에 적용한 것보다 가장 먼저 적용된다.1cs ∎ internal style 태그로 지정하는 방법으로 구조와 스타일이 섞이게 되므로 유지보수가 어렵다. 별도의 CSS파일을 관리하지 않아도 되며, 서버에 CSS파일을 부르기 위해 브라우저가 요청을 보낼 필요가 없다.1234567891011121314 p { font-size: 2em; border: 1px solid gray; color: red; } Hello CSS cs ∎ external 외부파일(.css)로.. 이전 1 다음
