display 조작

//보여줌
display:none;


//숨김 또는 보여줌

dis_target = document.getElementById("infor_layer["+nm+"]").style;
if(x[0].checked){
dis_target.display = "";//보여줌
}else{
dis_target.display = "none";//숨김
}

li태그 안에 img를 사용할때 img아래에 여백문제

ul {

    list-style: none;

    margin: 0; padding: 0;

    overflow: hidden;

}

ul li {

        display: block;

        line-height: 0;

        font-size: 0;

    }

ul li img {

            display: block;
        }

a:hover

1. <ul>  
2.     <li><a href="#">1</a></li>  
3.     <li><a href="#">2</a></li>  
4.     <li><a href="#">3</a></li>  
5.     <li><a href="#">4</a></li>  
6.     <li><a href="#">5</a></li>  
7.     <li><a href="#">6</a></li>  
8.     <li><a href="#">7</a></li>  
9.     <li><a href="#">8</a></li>  
10.     <li><a href="#">9</a></li>  
11.     <li><a href="#">10</a></li>  
12. </ul>  

1. ul {  
2.     list-style:none;  
3.     float:left;  
4.     display:inline;  
5. }  
6. ul li {  
7.     float:left;  
8. }  
9. ul li a {  
10.     float:left;  
11.     padding:4px;  
12.     margin-right:3px;  
13.     width:15px;  
14.     color:#000;  
15.     font:bold 12px tahoma;  
16.     border:1px solid #eee;  
17.     text-align:center;  
18.     text-decoration:none;  
19. }  
20. ul li a:hover, ul li a:focus {  
21.     color:#fff;  
22.     border:1px solid #f40;  
23.     background-color:#f40;  
24. }  

위내용을 정리해보면,

1. 목록을 우선 float 시켜서 가로로 배열하고,
2. 각 li 들의 a 값을 이용해서 width 값을 고정시키고,
3. a 에 비활성화 상태의 스타일을 정의하고,
4. a의 hover 선택자에서 활성화 상태의 스타일을 정의

a태그 밑줄없애기

HTML의 a태그로 만들어진 링크에는, 기본적으로 항상 밑줄(Underline)이 붙습니다.

요즘에는 링크에서 밑줄을 지우는 것이 일반적입니다. 링크에서 밑줄을 삭제하려면

style="text-decoration:none"

이라는 스타일을 지정하면 됩니다. 또는 클래스를 만들어 지정해 주어도 됩니다.


그런데 text-decoration:none 을 지정해도, 아주 복잡한 웹페이지의 경우에는 링크가 없어지지 않는 경우가 있습니다. CSS 속성들이 서로 뒤엉켜 있기 때문입니다. 이때는

!important

이라는 (느낌표+important) 구문을 추가하여 강제로 지정해야 합니다. 다음 예제와 같습니다:







/* 링크에서 밑줄 없애기 */
a.no-uline { text-decoration:none }

/* 마우스 지나갈 때만 삭제 + 강제로 없애기 */
a.noul:hover { text-decoration:none !important }

hidden visiable

• visibility는 대상을 보이게 또는 보이지 않게 한다.

         display:none가 해당 개체 면적을 차지하지 않는것과 달리 면적을 차지한 상태로 단지
         화면에 보이거나 보이지 않는다.

      .notWaiting{
         visibility:hidden;
}


       .waiting{
          visibility:visible;
}

• display

       style="display:none"
       document.getElementById("memName").style.display="";//보이게
       document.getElementById("memName").style.display="none";//보이지 않게

a태그에 이미지 테두리 없애기

style="border: none;"

<a href="/adm/admIndex.jsp"><img style="border: none;" src="/images/adm/logo.gif" alt="로고" width="240" height="57"></a>

테이블 css, javascript

http://kmoonki.tistory.com/201?srchid=BR1http://kmoonki.tistory.com/201

아이콘 생성기

http://icon-generator.net/download.html

이미지 넣기

• 표기법

1. background-image: url(images/bg.gif); =>css 파일 기준 경로
2. background-image: url(../images/bg.gif);  => css 파일 기준 경로
3. background-image: url(/images/bg.gif);

• 반복 제어

1. background-repeat : no-repeat;
2. background-repeat : repeat;
3. background-repeat : repeat-x;
4. background-repeat : repeat-y;

• 위치지정

1. 가로(left, center, right), 세로(top, center, bottom)
2. 예) background-position : left top;
3. 예) background-position : 5px 8px;  =>오른쪽으로 5px, 아래로 8px
4. 예) background-position : 50% 50%  =>화면 한가운데 배치
5. 예) background-position : 5px 50%   =>오른쪽으로5px, 세로로 가운데

• 제자리에 이미지 고정시키기

1. background-attachment : fixed; =>스크롤해도 화면의 그 자리에 계속 유지
2. background-attachment : scroll;  => 기본설정

• 속기법

1. background : url(image/bullseye.gif) fixed left top repeat-x;

overflow 프로퍼티

스타일 정의된 태그안의 내용물이 스타일에 정의된 너비나 높이를 넘어설 경우

1. overflow : visible;  => 평소대로 보여준다.
2. scroll;  => 스크롤바를 넣는다.
3. auto; => 스크롤바가 필요할때만 넣는다.
4. hidden; =>박스바깥으로 넘치는 내용은 숨긴다. 

border태그

• 속성

1. color
2. width : 선의 두께
3. style : solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden

• 설정방법

1. border : 4px solid #F00;
2. border-bottom : 2px dashed red;
3. border : 2px inset #FFCC33; border-right:none;   =>위, 아래, 왼쪽에만 선을 넣음
4. border-width:2px; border-style:double;  border-color:#FFCC33;

화면 가운데 배치하기

#wrapper{
  width:760px;
  margin:15px auto 0 auto;
}

<body>
  <div id="wrapper">
  </div>
</body>

• 800*600정도 해상도에 맞음

display : block

display:none 출력하지 않는다. 또한 지정된 요소의 자손 요소도 출력되지 않는다.

------------------------------------------------------------------------------------

아래 태그는

div1

dIv2

div3

웹 브라우저에 아래와 같이 표시된다.

div1
div2
div3

반면에 아래 태그는

span1
span2
span3

웹 브라우저에 아래와 같이 표시된다.
span1 span2 span3

이 둘 사이에 나타나는 가장 큰 차이는 줄 바꿈 여부이다. div 태그는 줄바꿈되고, span 태그는 줄바꿈되지 않는다.

div 태그가 줄바꿈되는 이유는 CSS display 속성 기본 값이 block이기 때문이고, span 태그가 줄바꿈되지 않는 이유는 CSS display 속성 기본 값이 inline이기 때문이다.


아래처럼 반대로 설정하면

div {
display: inline;
}

span {
display: block;
}

웹 브라우저에 아래와 같이 표시된다.


block과 inline의 차이점은 줄바꿈만은 아니다.
block으로 설정하면 줄바꿈 되고, inline으로 설정하면 줄바꿈이 되지 않는다.
block으로 설정하면 상/하 margin과 padding 속성을 사용할 수 있지만, inline으로 설정하면 상/하 margin과 padding 속성을 사용할 수 없다.
block으로 설정하면 width, height 속성을 사용할 수 있지만, inline으로 설정하면 width, height 속성을 사용할 수 없다.

자동줄바꿈

wordWrap='true'

margin, padding

• 기본 개념

width = content width + L/R padding + L/R border + L/R margin

margin : 특정 영역(box)의 바깥쪽 여백을 의미
padding : 특정 영역(box)의 안쪽 여백을 의미


cellspacing : 바깥쪽 여백
cellpadding : 안쪽 여백

background -color은 padding 영역을 포함한 border안쪽 공간을 채운다.

• padding, margin 지정법

1. margin : 0 10px 10px 20px;   => top, right, bottom, left
2. margin-bottom : 20px;
3. padding : 10px;
4. margin : 2px 5px;  =>top,bottom은 2px, left,right는 5px

• margin 병합

위 아래 엘리먼트의 margin이 겹칠 경우 두 margin중 큰 것을 따른다.
해결책 : margin이 겹치지 않도록 padding이나 border값을 준다.

• 인라인 태그 vs 블록 계층 태그

1. 블록 계층 태그 : <P> <DIV> <TABLE>

        글꼴, 색상, 배경, 테두리, padding, margin

1. 인라인 태그 : <strong> <span> ,<img> <a>

        글꼴, 색상, 배경, 테두리,  padding(좌,우), margin(좌,우)
        img태그는 padding, margin 상,하 사용 가능

1. 유형변경

       display : inline;  
       display : block;

css관련 사이트

layout관련
http://www.positioniseverything.net/

float 관련
http://blog.naver.com/nicebodytony/50053091846

^.^;/~: CSS, position과 z-index 속성 정리

^.^;/~: CSS, position과 z-index 속성 정리