Blog Content

color : 전경색(Foreground Color) background-color : 배경색 font-size : 글자크기, pt 단위 또는 px 단위, 9pt, 11px font-family : 글꼴, Verdana, '맑은 고딕' font-family : "Malgun Gothic", verdana; font-weight:bold; : 볼드체 font-style:italic; : 이탤릭체 text-decoration : 밑줄관련 none, underline, overline, line-through width : 가로길이, % 단위 또는 px 단위 height : 세로길이 padding : 안쪽 여백 margine : 바깥쪽 여백 text-align : 수평 정렬 left, center, right..

레이어(Layer)에 대해 알아보겠습니다. 레이어(Layer)는 HTML문서상의 또다른 문서(객체)로 속성으로는 Position : 그리드레이아웃(absolute), 플로우레이아웃(atatic) absolute : 자신의 영역과 겹쳐 보이게 함 Z-Index : Int 레이어 순서지정 Visibility : Visible(보여주기) / Hidden(숨기기) Display : 레이어 감추기 -> Display : none; Overflow : 스크롤사용 -> Visible(보임), hidden(숨김), Scroll(사용), Auto(자동) 레이어 예제 결과 화면입니다. ( 예제1~4까지 작성, 주석으로 설명 추가 )

를 이용하여 레이아웃 설정을 통해 프레임형식 웹을 표현해 보겠습니다. 부분에 아이디값을 정하고 스타일 설정을 하겠습니다. #아이디이름 {길이, 색상, 테두리, 여백설정}으로 설정하도록 하겠습니다. #header { width:770px; height:50px;background-color:Yellow; border:groove 1px silver; padding:5px 5px 5px 5px; margin:0px 0px 10px 0px; } #left{ width:180px; height:100px; background-color:Yellow; border:groove 1px silver; padding:5px 5px 5px 5px; margin:0px 10px 0px 0px;float:left; } #c..

이미지 위치를 지정/정렬 하여 이미지 옆에 문장을 입력, 이미지 크기 만큼 문장을 줄 단위로 입력 가능하게 해주는 방법으로 속성으로float, clear속성 두가지가 있습니다. float 속성 : 배치할 위치(이미지에 많이 사용됨)를 표시해주는 속성으로 이미지 옆에 문자열을 넣어 이미지 옆에 붙게 되며 나머지 문장은 아래로 내려가게 할때 사용되는 속성입니다. FLOAT : left, right, none clear 속성 : 해제방향입니다. 이미지 박스의 좌우에 떠다니는 box의 다음줄로 내려가게 하는것입니다. CLEAR : left, right, both,none 예제1) 기본속성 예제2) float:left, clear:both 사용 문장문장 현재 모든 웹 사이트는 테이블 사용을 안합니다. 많이 사용하..

자신만의 스타일 시트를 작성하는 방법입니다. CSS2.0 - 02.외부스타일시트 강좌와 같이 (파일).CSS 연결 시켜주면 CSS 파일 안에 작성된 스타일시트로 연결된 해당페이지의 스타일이 바뀌게 됩니다. 이 방법을 활용하게 되면 작업을 할때마다 스타일을 지정해 주지 않아도 되며, 손쉽게 자신이 사용하는 스타일로 적용가능하게 됩니다 예제는 body 안에 있는 모든 폰트 크기와 글꼴체 변경입니다. 스타일시트를 생성하신 후에 다음과 같이 입력합니다. body { color:#3366FF; font-size=15px; font-family:@맑은 고딕; } 저장 후 링크를 걸 html(htm)파일을 생성후 다음과 같이 입력합니다. 나만의 스타일 파일 안에 다른 예제 있습니다. 참고하세요

스크롤바의 스타일을 지정하여 자신만의 스크롤바를 만들 수 있습니다. scrollbar 3dlight-color : 스크롤 박스와 화살표 박스의 상단과 왼쪽 가장 자리에 색상 arrow-color : 화살표 박스의 화살표색상 base-color : arrow, shadow, darkshadow를 제외한 기본적인 곳 darkshadow-color : 스크롤박스, 화살표 박스의 하단, 오른쪽 가장 자리 색상 face-color : 스크롤 박스와 화살표 박스 그리고 트랙의 표면 highlight-color : 왼쪽 가장 자리의 겉 색상 shadow-color : 스크롤 박스, 화살표 박스의 하단과 오른쪽의 그림자 부분 스크롤바 스타일 변경 예제 입니다. 실제 적용한 화면입니다. 입력해보세요~ 스크롤바 스타일 적..

마우스 커서의 모양을 바꿔 줄 수 있습니다. style속성은 cursor이며, 값은 default, auto, help, crossha, pointer, wait, text, move 가 있습니다. 예제로 바로 확인 할 수 있습니다. 기본값 자동으로 커서 설정 도움말 표시 손모양 모래시계 텍스트 움직임 실행후 문자열에 마우스 포인터를 이동하시면 커서 모양이 바뀌는것을 확인 할 수 있습니다.

Element의 배경색이나 무늬를 지정할 수 있습니다. - background-color : 색 이름 / RGB값 - background-image : url("URL") / none - background-repeat : repeat / repeat-x / repeat-y / no-repeat - background-position : top / bottom / left / right / center - background-attachment : fixed / scroll 예제 입니다. 배경 no-repeat로 하면 한번 만 보여주겠다.(repeat-x,repeat-y;) background-attachment:fixed;와 scroll로 바꿀수 있다. fixed는 이미지 고정시켜서 스크롤을 내려도 이..

테두리 각각에 색깔을 사용 할 수 있습니다. 이곳 예제에서는 border와 button의 테두리 색상과 선 모양을 바꿔 보겠습니다. 예제1) 각각의 테두리에 두깨와 모양, 색깔 설정하는 예제 입니다. 테두리 두깨 설정; 테두리 선 모양 설정; 테두리 선 색깔 border-left-width:1px; border-left-style:solid; border-left-color:Red; border-top-width:1px; border-top-style:dotted; border-top-color:Blue; border-right-width:1px; border-right-style:groove; border-right-color:Green; border-bottom-width:1px; border-bot..

여백 관련 스타일로 영역을 조절하는 방법 입니다. margin, padding 두가지 방법으로 설정 할 수 있습니다. margin : 바깥쪽 여백 padding : 안쪽 여백 안녕하세요와 여백 스타일 설정한 부분하고의 차이점을 확인 할 수 있습니다. 그림13-1은 전체 여백을 하나의 값으로 설정했는데요. 각각의 left, top, right, bottom을 설정 가능합니다. 안녕하세요

style의 txt-transform 속성을 사용하여 영문 텍스트를 대문자, 소문자, 또는 첫 글자만 대문자로 표시 가능합니다. 예제로 abc 단어를 바꿔보겠습니다. abc ABC Abc 결과화면입니다. 에 있는 들여쓰기인 과 문장을 묶는 를 style를 이용하여 적용시키도록 하겠습니다. 입니다. "background-color:Yellow;text-indent:50px;"> 입니다. "white-space:nowrap;">010-1234-5678 기타) 공백문자 처리방법 (white-space)입니다. - 연속적인 공백문자를 처리하는 방법으로 3가지 속성이 있습니다. normal, pre, nowrap가 있습니다. 를대처 가능한 것이 white-space입니다.

를 사용하여 정렬에 대해 알아보겠습니다. 에서 정렬 관련으로 사용되던 align과 valign를 이용하여 정열했습니다. 1 -> 가운데 정렬 3 -> 오른쪽 상단 정렬 이번에는 CSS의 style을 이용해서 정렬하도록 하겠습니다. style속성중 line-height 와 vertical-align 이 있습니다. line-height : 문자열의 아랫선에서 다음 줄에 있는 문자열의 아랫선까지의 높이 vertical-align : 한 줄 안에서의 Box 간의 수직 정렬 방식을 정의 (table의 vertical-align 속성) 텍스트 포맷 관련 스타일 letter-spacing : 문자 간격 word-spacing : 단어 간격(음수 사용가능)em (단위) : 해당 범위에서 높이를 1로 하는 단위 1 1 ..

폰트 관련 스타일에 대해 알아보겠습니다. 크게 글자 모양관련 3가지 속성으로는 색상, 크기, 글꼴 모양입니다. 예제를 통해 볼드체로 변경하도록 하겠습니다. 볼드체 변경으로 두가지 방법이 있습니다. 와 (클레스로 적용) 볼드체볼드체 1. 안에 있는 모든 폰트-색상 : 녹색; 폰트-크기 : 11px; 폰트-글꼴 : 맑은고딕 적용 2. 점클래스 선언. 속성은{ 폰트-굵기: bold; } 3. 안에 하여 적용 - 추가 - 볼드체 변경 방법을 응용하여 #(아이디)값을 통해 이텔릭체로 적용 가능 (파일 첨부) 이번에는 폰트에 밑줄, 취소선을 적용시켜 보도록 하겠습니다. 밑줄 적용방법 2가지 : 와 취소선 적용방법 3가지 : 와, 밑줄문자 밑줄문자 취소선1 취소선2 취소선3 결과: 6줄-.strikeText{ tex..

특정 영역(또는 레이어, 박스라고 표현)에 스타일 적용하는 방법입니다. 와이 사용되며 차이점은 다음과 같습니다. : 특정 문단에 적용(해당 문단 전체 영역), 고정됩니다 : 해당 문단의 택스트까지만 적용( 해당 택스트 영역), 자동 줄 바꿈이 가능합니다. 안녕하세요. 반갑습니다. 또 만나요. 안녕하세요. 반갑습니다. 또 만나요. 결과 화면 입니다. div - 태그는 자동 줄 바꿈, 해당 영역 전체 스타일 적용 span - 해당 영역만 스타일 적용 이번에는 현업에서 사용되는것을 해보는 것으로 영역을 지정하고 스타일 적용시켜보도록합니다. 공지사항 Visual Web Developer 2008 설치 SQL Server 2008설치 style의 속성인 margin는 들여쓰기의 넓이 설정 가능하게 해줍니다. 예제..

중첩태그로 어떤 태그 안에 있는 어떤태그에 포함된 부분만을 변경할때 사용하는 방법입니다. HTML CSS 오늘은 CSS2.0배우는시간 오늘은 CSS2.0배우는시간 기본적으로 는 강조를 표현하는 태그중 하나입니다. 를 사용하게 되면 글자체가 이탤릭체로 바뀌게 됩니다. h3태그 안에 있는 em태그안에 있는 부분을 {색상을:빨간색} 으로 변경 지정 하여 변경 되는것을 확인 할 수 있으며 밑에 태그인 - 오늘은 CSS2.0배우는시간 적용이 안되는것을 확인 할 수 있습니다. 밑에 태그는 적용이 안된다.