Web/CSS 썸네일형 리스트형 CSS 문법 (CSS syntax) CSS 문법은 크게 두가지 부분으로 나눌 수 있다. 1. 어떤 부분 2. 어떻게 나타내라 [그림 1] 위 그림에서 h1이 1.어떤 부분에 해당한다. 태그를 대상으로 한다는 것이다. {color:blue; font-size:12px;} 부분이 2. 어떻게 나타내라에 해당한다. 즉, css 문법에 맞춰 기술 해주면 위와 같이 문서에서 원하는 부분을 잡아서 스타일링을 할 수 있다. 그림 1에서 보면 h1위에 Selector라고 나와있는데 스타일링하기 위한 대상을 지정하기 위해 Selector가 쓰인다. 예를 한번 보자 ( http://www.w3schools.com/css/tryit.asp?filename=trycss_syntax1 ) [예제 1] css 문법을 적용하는 방법 중 하나로 html내에서 styl.. 더보기 CSS cascading style sheets 의 약자 HTML 문서가 어떻게 표현될 것인지를 나타내는 방법이다. 아래 링크로 접속해 보면 그림 1처럼 보인다. http://www.w3schools.com/css/ex2.htm [그림 1. CSS가 적용된 페이지] 하지만 실제 CSS로 표현된 것을 제외하면 아래 그림2 같다. [그림2. CSS가 적용되지 않은 페이지] 즉, text의 색상과 크기, 배경색 등을 다르게 보이게 정의 하면 그림 1 처럼 보이는 방법을 정의 할 수 있는 것이다. 그럼 실제 코드를 보자 This is a header 1 You can see that the style sheet formats the text This is a link 위에서 보면 HTML로 문서를 어떻게 정의 했는지 .. 더보기 CSS selector CSS2 selector를 사용할 일이 있어서 정리를 해 놓는다. CSS selector를 사용하면 javascript내에서 원하는 node element에 쉽게 접근할 수있다. 참고 : w3의 CSS2 selector 관련 문서 (http://www.w3.org/TR/CSS2/selector.html) 그럼, 먼저 아래의 HTML을 살펴 보자 Wide text 출처 : http://www.w3.org/TR/CSS2/selector.html#id-selectors 위에서 보면 Style을 지정할때 id가 *#z98y인 모든 element를 찾아 letter-spacing: 0.3em라는 style을 지정해주고 있다. javascript 사용시에 document .. 더보기 background image 백그라운드 이미지 사이즈 맞추기 홈페이지에 백그라운드 이미지를 넣으려다가 전체 화면에 맞게 넣고 싶은데 잘 안되서 고생을 했다. googling을 해본 css에 아래와 같이 넣으면 전체 화면에 딱 맞춰 준다. html { background: url(images.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 자세한것은 아래를 참조 http://css-tricks.com/perfect-full-page-background-image/ 더보기 이전 1 다음
