'CSS'에 해당되는 글 2건

  1. 2007/05/31 변경된 구글 코리아의 첫 화면을 뜯어 보자.
  2. 2007/01/15 테이블, 이미지 테두리관련 스타일
2007/05/31 16:26

변경된 구글 코리아의 첫 화면을 뜯어 보자.

2007/05/31 16:26 in 웹2.0
http://hooney.net/2007/05/30/384/

개편에 사용된이미지 1개

많은 사람들이 구글 코리아 첫 화면에 많은 이미지를 사용했다고 하는데, 시각적으로만 그럴뿐이며 실제는 3개만 사용됐다. “구글 로고, 검색 아이콘 세트, 서비스 아이콘 세트” 이렇게 3개의 이미지를 CSS의 배경 위치 변경 기법을 이용하여 여러개 처럼 보이게 한 것이다.
'

Oh My GOD!!!!
크리에이티브 커먼즈 라이선스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

'웹2.0' 카테고리의 다른 글

초심의 유효기간은 어디까지일까?  (2) 2007/07/08
웹2.0시대에 우리가 정말 필요한건 attention.talk가 아닐까?  (0) 2007/07/04
변경된 구글 코리아의 첫 화면을 뜯어 보자.  (0) 2007/05/31
네이버 검색결과를 바라보는 시선을 ‘추적’하라!  (0) 2007/05/02
daum의 YOUCC TIME  (0) 2007/03/28
웹기반의 워드프로세서  (0) 2007/03/20
Posted by 감정은행
Tag CSS, Google, Java, JavaScript, 개편, 구글, 구글코리아, 네비게이션
Trackback 0 Comment 0
2007/01/15 17:33

테이블, 이미지 테두리관련 스타일

2007/01/15 17:33 in 웹_TIP
테이블,이미지 테두리 스타일 .................................................

테이블 태그나 이미지등 테두리선에 대한 스타일을 ! 특히 점선이나 한편을 다르게 표현하고자 할 때는 CSS를 사용할 수 있다.



■ border-style
border-style:none
 
border-style:dotted
 
border-style:dashed
 
border-style:solid
 
border-style:double
 
border-style:groove
 
border-style:ridge
 
border-style:inset
 
border-style:outset
 
* 4개의 태드리선을 모두 다르게 적용하려면
border-top-style
border-bottom-style
border-left-style
border-right-style 를 따로 따로 지정해야한다.


■ border-color
border-color:#006699
border-style:dotted
 
border-color:tomato
border-style:dashed
 
border-color:orange
border-style:solid
 
* 4개의 태드리선을 모두 다르게 적용하려면
border-top-color
border-bottom-color
border-left-color
border-right-color 를 따로 따로 지정해야한다.


■ border-width
border-width:1px
border-color:#006699
border-style:dotted
1px

3px
border-width:1px
border-color:tomato
border-style:dashed
1px

3px
border-width:1px
border-color:orange
border-style:solid
1px

3px
* 4개의 태드리선을 모두 다르게 적용하려면
border-top-width
border-bottom-width
border-left-width
border-right-width 를 따로 따로 지정해야한다.


■ margin (바깥쪽 여백)
margin:3px
border-width:1px
border-color:#006699
border-style:dotted
margin 없이

margin:3px

margin:10px
* 4개의 태드리선을 모두 다르게 적용하려면
margin- top
margin-bottom
margin-left
margin-right 를 따로 따로 지정해야한다.


■ width, height
width=300
height=40
border-width:1px
border-color:#006699
border-style:dotted
width=300
height=40


■ padding (안쪽 여백)
padding:5px
width=300px
border-width:1px
border-color:#006699
border-style:dotted
내용물 주위로 여백이...
* 4개의 태드리선을 모두 다르게 적용하려면
padding-top
padding-bottom
padding-left
padding-right 를 따로 따로 지정해야한다.


■ 이미지에 적용하기
border-style:dotted;
border-color:orange;
border-width:3px		 border-style:dashed;
border-color:orange;
border-width:3px		 border-style:outset;
border-color:orange;
border-width:3px
크리에이티브 커먼즈 라이선스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

'웹_TIP' 카테고리의 다른 글

onfocus='blur();' 를 한번에  (0) 2007/01/15
드래그금지,마우스오른쪽금지  (0) 2007/01/15
전체화면(풀스크린)으로 창 열기  (0) 2007/01/15
테이블, 이미지 테두리관련 스타일  (0) 2007/01/15
한줄짜리 웹소스  (0) 2007/01/15
포토샵에서 한글안써질때  (1) 2007/01/15
Posted by 감정은행
Tag CSS, 이미지, 테두리, 테이블
Trackback 0 Comment 0
prev Prev 1 Next next