본문 바로가기
[CSS 完] 마우스 커서,스크롤바 색상,링크 색상,필터,인쇄,ime-mode,포지셔닝(Positioning) 에 대해서 CSS를 이용한 마우스 커서 모양 지정 cursor 속성을 이용하면 마우스 커서의 형태를 지정할 수 있습니다. 아주 간단하므로 예제를 보시면 금방 이해가 됩니다. Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help 아래 예제에서 글자위에 마우스를 올리면 모양이 변합니다. Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help CSS 고급 - 스크롤바 색상 scro.. 더보기
[CSS] table에 대해서 CSS를 이용한 table 응용 테이블을 이용하여 레이아웃을 잡는것이 바람직 하지 않다고 하더라도 아직까지는 테이블을 이용한 레이아웃이 여전히 많이 쓰이고 있습니다. 이는 새로운 기술을 익히기가 힘들다는 점도 있지만 웹브라우저들이 CSS를 아직까지 완벽하게 지원하지 못하는 이유도 있습니다. 그러므로 테이블은 여전히 많이 쓰이게 되는 중요한 태그이고, 이 테이블을 좀더 정교하게 다루기 위해서는 CSS를 사용해야 합니다. 테이블에서 자주 사용하는 CSS를 팁 형식으로 계속적으로 소개해 나가겠습니다. 테이블 태그 자체에서 사용하는 CSS 속성으로는 대표적으로 border-collapse 와 table-layout 이 있습니다. border-collapse 는 테이블의 경계선을 어떻게 표시하느냐를 지정하는 속성.. 더보기
[CSS] 선택자(Selector),block-level과 inline-level에 대해서 CSS 선택자(Selector) CSS에서 가장 중요한 개념은 선택자(Selector)라고 할 수 있습니다. 선택자(Selector)가 있어야 선언된 CSS가 어디에 적용될지를 결정할 수 있기 때문입니다. 특히 CSS는 상속의 개념을 가지므로 선택자(Selector)에 대한 확실한 이해가 없이는 CSS를 제대로 활용하지 못합니다. 선택자(Selector)의 종류 선택자(Selector)는 아래와 같이 4개로 나누어볼 수 있습니다. 공통 선택자(Universal Selector) 타입 선택자(Type Selector) ID 선택자(ID Selector) Class 선택자(Class Selector) 공통 선택자(Universal Selector) 공통 선택자(Universal Selector)는 *로 표현.. 더보기
[CSS] 글꼴(Font) 스타일,Box Model,리스트(list) 에 대해서 CSS 글꼴(Font) 스타일 font 속성은 텍스트의 글꼴과 스타일을 지정합니다. font-family 속성을 이용하면 텍스트의 글꼴을 지정할 수 있습니다. 돋움 글꼴로 지정된 텍스트입니다. 궁서 글꼴로 지정된 텍스트입니다. 바탕 글꼴로 지정된 텍스트입니다. 돋움 글꼴로 지정된 텍스트입니다. 궁서 글꼴로 지정된 텍스트입니다. 바탕 글꼴로 지정된 텍스트입니다. font-size 속성을 이용하면 텍스트의 크기를 지정할 수 있습니다. 10픽셀로 지정된 텍스트입니다. 13픽셀로 지정된 텍스트입니다. 9포인트로 지정된 텍스트입니다. 10포인트로 지정된 텍스트입니다. 10픽셀로 지정된 텍스트입니다. 13픽셀로 지정된 텍스트입니다. 9포인트로 지정된 텍스트입니다. 10포인트로 지정된 텍스트입니다. font-weig.. 더보기
[CSS] 배경(background)에 대해서 CSS 배경(background) HTML태그에서 배경을 지정하는 방법은 배경색(bgcolor)과 배경이미지(background) 속성밖에 사용할 수 없었지만 CSS에서는 보다 다양한 방법으로 배경을 지정할 수 있습니다. 속성 설명 값 background-color 배경색을 지정할 수 있습니다. #FFFF80, Ivory background-image 배경이미지를 지정할 수 있습니다. url(bg.gif) background-repeat 배경이미지의 반복 여부를 지정합니다. repeat, repeat-x, repeat-y, no-repeat background-position 배경이미지의 위치를 지정합니다. top left, top center, top right, center left, center c.. 더보기
[CSS] 텍스트 에 대해 알아보자. 텍스트에 적용하는 CSS 속성 HTML문서에서는 아무래도 텍스트가 가장 많은 비중을 차지합니다. HTML태그는 텍스트의 스타일 표현에 한계가 있으므로 반드시 CSS를 익혀서 텍스트의 스타일을 지정하여야 합니다. 텍스트의 스타일을 지정하기 위한 속성들은 아래와 같습니다. 속성 속성값 설명 color red, #FF0000 텍스트 색상 direction ltr, rtl 텍스트 방향 line-height 150% 줄 간격 letter-spacing -0.1px 글자 간격 text-align left, right, center, justify 텍스트 정렬 text-decoration none, underline, overline, line-through, blink 텍스트 장식 text-indent 20px 들.. 더보기
[CSS] 사용법 과 문법에 대해서 HTML문서에 CSS를 사용하는 3가지 방법 HTML문서에 CSS를 사용하는 방법은 3가지가 있습니다. 외부 스타일 시트(External Style Sheet) 내부 스타일 시트(Internal Style Sheet) HTML태그내에 스타일 지정(Inline Styles) 외부 스타일 시트(External Style Sheet) css라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML 문서에 연결하여 사용하는 방법입니다. 이 방법의 장점은 홈페이지 전체의 스타일을 일관성있게 유지하면서 변경시에도 일괄적으로 변경되므로 홈페이지 제작의 효율성을 극대화 할 수 있습니다. 반면 외부 스타일 시트 파일을 계속적으로 관리해주면서 HTML 문서를 만들어 나가야 하기에 불편한 경우가 있습니다. 그리고 외.. 더보기
[Html 完] 배경음악,필드셋(Fieldset),마퀴(Marquee),HTML과 XHTML,오브젝트(Object) 에 대해서 배경음악 사용하기 Bgsound와 Embed 좀더 분위기 있는 홈페이지를 만들기 위해서 배경 음악을 사용하는 경우가 많습니다. 그러나 방문자가 배경음악을 원하지 않는 경우도 있으므로 배경음악을 사용할때 아래의 내용을 고려해 봐야 합니다. 꼭 필요한 곳에만 배경 음악이나 배경음을 넣습니다. 배경음악을 사용자가 직접 제어 할 수 있도록 합니다. 배경음악을 원치 않는 사용자들이 쉽게 소리를 줄이거나 끌 수 있어야 합니다. 3.용량이 많은 배경음악은 페이지 로딩을 방해하는 요소로 작용할 수 있기에 페이지 전체적인 용량을 고려해서 배경음악을 선택합니다. 배경음악 사용 방법 ① bgsound bgsound element는 인터넷 익스플로러에서만 작동합니다. 그리고 화면에 아무런 내용이 출력되지 않으므로 방문자가 음.. 더보기
[Html] 입력양식(form)에 대해서 입력양식(form) 입력양식(form)은 홈페이지에서 사용자에게 정보를 받을때 사용됩니다. 회원가입을 하거나 혹은 쇼핑몰에서 주문을 하는 경우 사용자의 정보를 입력받을 필요가 있습니다. 이때 입력양식(form) 페이지를 제공하여 정보를 입력하게한 다음 이를 처리하는 페이지를 만들어서 DB에 저장을 합니다. 회원가입 입력폼을 member.html 이라고 한다면 member_confirm.php 와같은 페이지를 만들어서 회원가입 처리를 합니다. 이때 member.html 페이지는 태그를 이용하여 간단하게 만들수 있지만 member_confirm.php 페이지는 입력받은 정보를 DB에 저장하는 역할을 하기 때문에 프로그래밍 처리를 해야 합니다. 그래서 HTML 만으로는 입력양식만을 만들 수 있을뿐 이를 DB에.. 더보기
[Html] 메타(Meta) ,이미지맵(image map),아이프레임(iframe) 에 대해서 메타(Meta) 태그 태그는 HTML 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서 자체의 특성을 담고 있습니다. 태그는 문서의 헤더부분( 사이)에 위치하여야 합니다. 태그에서 가장 일반적으로 사용되는 속성은 name, content 속성입니다. name 속성값으로는 subject, title, author, keywords 등이 있습니다. 검색엔진에게 문서의 내용을 요약해 주는 역할을 담당한다고 할 수 있습니다. 그럼 name 속성값으로 keywords를 지정하고, content에 "meta태그, HTML, 홈페이지제작" 이라고 지정했으니 검색엔진에서 홈페이지 제작이라고 입력하면 이 페이지가 상단에 나올까요? 검색엔진이 태그를 수집하여 참고는 합니다만 이를 상업적.. 더보기

티스토리툴바