본문 바로가기

CSS

!important css !important를 선언하면 다른 중복되는 스타일 중 우선순위가 가장 높은 형태가 된다. 인라인으로 선언해도 css가 먹히지 않는다면 css에 !important가 선언되어 있지 않은지를 의심해봐야한다. 인라인보다도 우선순위가 되기 때문이다. 중복되는 css에 모두 !important가 선언되었다면? 나중에 작성된 스타일이 먹힌다. 다시말해 코딩 아랫줄에 있는 놈이 먹힌다고 한다. 더보기
input type selector 셀렉터 $("input[type=reset]").click(function(){ alert(""); }); 더보기
테이블 border 파이프 같은 선 없애기 얇은 선 넣기 table {border-collapse: collapse;}th, td {padding: 5px;border:1px solid #4FC9DE} 더보기
CSS 이미지 관련 이미지 관련 ■ CSS img 속성 ο width 이미지의 가로 크기를 지정한다. 크기 단위는 in(인치), cm(센치미터), mm(밀리미터), pt(포인터), pc(피카스), em, ex(em대비 1/2크기), px(픽셀), %(%단위)등의 상대적 단위크기를 사용하기도 한다. ο height 이미지의 세로 크기를 지정한다. 단위는 width와 같다. ο vertical-align 이미지가 텍스트와 함께 사용되는 경우 텍스트의 위치를 지정하는 속성이다. top(위쪽), middle(가운데), bottom(아래쪽) 값을 사용할 수 있다. - 참고 css를 이용해서 image resize(css 3)를 하려면, img tag안의 height, width를 모두 없애야 한다. 더보기
CSS List list ■ list-style-type 목록 단추 설명 번호 있는 목록(ordered list) 에서 번호 형태나 번호 없는 목록(unordered list)에서 단추(bullet) 타입을 지정 한다. 번호 있는 목록(ordered list)에서 번호 형태에서 값 : decimal, lower-roman, upper-roman, lower-alpha, upper-alpha 번호 없는 목록(unordered list) 에서 단추(bullet) 타입에서 값 : disc, circle, square, none 예 : ol {list-style-type: lower-roman;} ul {list-style-type: square;} ■ list-style-image 목록 이미지 설명 목록에서 단추(bullet.. 더보기
CSS 레이아웃 배경 스타일 ■ display display는 설정된 곳 안의 요소들이 어떻게 표현되는지, 어떻게 나열되는지를 결정해주는 속성이다. 값 none : 보이지 않음(영역이 없어짐) inline : 같은 라인에 연결되어 끊기지 않고 표현됨(width, higth 속성은 무시됨) block : 단어 당, 블록 당 끊어줌 list-item : 리스트처럼 보여주게 됨 run-in : 표현 되는 곳 안의 환경에 따라 끊거나 이어줌. compact : 위와 같음 table : 테이블처럼 표현이 됨 inline-table : 테이블처럼 표현이 되며 끊기지 않고 연결함 table-row-group : 테이블의 열처럼 보이게 됨 table-header-group : 여러 개의 열이 모여서 보이게 됨 table-footer-.. 더보기
CSS 배경 스타일 배경 스타일 background-color: 배경색상 background-image: 배경이미지 background-repeat: 배경의 반복 background-position:배경의 위치(반복할 경우 시작위치) background-attachment: 배경의 고정 유무 background-size(CSS 3) : 백그라운드 이미지의 크기를 지정하는 속성. ■ background 배경을 지정 background: 색상 url("이미지경로") 반복유무 x축위치 y축위치 고정유무; 값 : [ || || || || ] | inherit inherit : 부모 요소의 값을 상속하도록 지정 스크립트this.style.backgroundthis.style.backgroundImage 예 : body { backg.. 더보기
CSS Box 스타일 Box 스타일 ■ border 컨텐츠의 경계선을 지정 윗쪽 border의 두께(width), 색상(color) 및 특성(style)을 지정 한다. 값은 border-width, border-style, color 값을 갖는다. 형식 {border : width_값 style_값 color_값} ex) border: 1px solid black {border-top : width_값 style_값 color_값} {border-left : width_값 style_값 color_값} {border-right : width_값 style_값 color_값} {border-bottom : width_값 style_값 color_값} Scripting : object.style.borderTop(Right, B.. 더보기