HTML에서 투명버튼 영역을 div로 만들어 주고, 1 2 3 4 5 6 css에서 처리하는 기법이 크게 3가지 정도로 나뉜다. 1. background:url(#) 0 0 repeat; 처리. 1 2 #btnContainer{position:absolute;width:255px;height:362px;} #btn00{position:absolute;left:745px;top:28px;width:255px;height:121px;cursor:pointer;background:url(#) 0 0 repeat;} 2. 가로세로 1px인 투명gif를 width, height늘려서 채우기. 3. 일단 css에서 background-color:#000000; 1 2 #btnContainer{position:abs..
css display display 속성은 인라인(inline) 타입인지 블럭(block) 타입인지 등에 관한 해당 요소의 유형을 지정한다. 다른 자잘한 속성도 많지만 거의 3타입을 가장 많이 쓴다. none : 해당 요소가 생성되지 않음 block : 위아래 줄바꿈이 되는 블럭 요소로 지정 inline : 기본값(default), 위아래 줄바꿈이 되지 않는 인라인 요소로 지정 { visibility:hidden; } 은 보여지지 않지만 공간은 차지하고 있으며, { display:none; } 은 보여지지 않으면서 공간도 없어지게 된다. 두 속성의 차이점을 주의해야 한다.
position
position 웹사이트중 퀵메뉴, 즉 스크롤에 따라다니는 메뉴바 형태에서 position을 이용해 위치를 고정시키고 자바스크립트를 이용해 스크롤을 따라다니는 모양으로 만들어준다. 속성값 : absolute, relative, fixed, static, inherit 위치 설정 : top, left, bottom, right ex) {position:absolute;left:10px;top:20px;} absolute 절대위치 relative 상대위치 fixed 위치고정 inherit 부모의 속성이 상속됨 static 포지션의 기본값으로 위치 설정 relative 현재위치에서 상대적인 위치에 이동 absolute absolute일때는 두가지 형태로 나뉨. 상위 element속성이 relative인것과 아..
margin과 padding의 차이
마진: 이윤, 이득 패딩: 두툼한 옷 위에 설명이 맞을까요? 맞습니다. 하지만 제가 설명하려는 단어는 같은 단어지만 다른 의미에 대해 얘기를 해보려 합니다. 마진(margin) VS 패딩(padding) 두 용어는 웹페이지에서 여백의 의미로 많이 사용되고 있습니다. 실제 블로그에서도 꼭 필요한 요소이구요. 마진: 여백, 여유 패딩: 속을 넣다, 채워 넣다 위의 의미로 다시 생각을 해보면 웹에서 사용되는 의미를 조금이나마 이해 할 수 있을 겁니다. 그림을 보면서 간단하게 설명을 드리면 기준점이 되는 border(테두리를 의미하며 보이지 않는 경우도 있음)의 내부 여백은 패딩, 외부 여백은 마진으로 나눌 수 있습니다. margin, padding의 방향성 블로그 CSS를 살펴보면 종종 이런 수치들을 만나게 ..
1. CSS에서 클래스 혹은 아이디를 부여함. 1 2 3 4 5 6 7 8 #mainSet00{position:absolute;top:0;left:0;overflow:hidden;width:745px;height:390px;} .bg00{position:absolute;top:0;left:0;z-index:99;} .img00_00{position:absolute;left:39px;top:77px;z-index:99;} .img00_01{position:absolute;left:311px;top:120px;z-index:99;} .img00_02{position:absolute;left:395px;top:104px;z-index:99;} .img00_03{position:absolute;left:465p..
css : Cascading Style Sheets HTML과 XHTML에 주로쓰이는 CSS는 마크업 언어가 실제 표시되는 방법을 기술하는 언어이다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. CSS를 사용하는 방법은 크게 3가지로 분류할수있다. 1. HTML 태그에 직접 Style 속성을 사용. 의 형태. 9번 라인을 보면 css를 적용한 모습 폰트의 사이즈, 컬러를 적용한 상태이다. 1 2 3 4 5 6 7 8 9 10 11 DOCTYPE HTML> 첫번째 방법 html 태그에 직접 Style속성을 이용하여 사용할 수 도있다. css를 적용한 모습 결과) 2. head부분에서 선언하여 사용. 사이에 선언하여 쓰는 방법 아래의 경우는 앞으로 쓰이는 모든 H1 태그는 색상이 re..