Blog Content

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배우는시간 적용이 안되는것을 확인 할 수 있습니다. 밑에 태그는 적용이 안된다.

하나의 문서(페이지)에서 여러개를 중복 사용이 가능하며, 직접 지정이 가능한 것이 중첩클래스입니다. 안녕하세요. 안녕하세요. 안녕하세요. 안에 style type 정의 한 다음, 사용할 클래스 이름과 속성을 지정합니다. .redText { color:Blue; } /* 폰트색상을 파랑색 으로 바뀌도록 했습니다. */ 클래스에서 지정한 속성을 적용시키기 위해 해당 태그 속성에 Class 작성하셔야 합니다. 예) 안녕하세요. 직접 지정에 대한 코드 입니다. 클래스를 정의한 곳에 다음과 같이 작성합니다. h2.redText { color:Red; } 폰드(글씨)색깔을 빨간색으로 직접 지정하여 바꿔줍니다.

스타일시트를 중복적용 하게되는 경우에 어떤 어디서 정의된 스타일시트가 먼저 적용이 되는가에 대해 알아보겠습니다. style속성 > id속성 > class속성 > (style태그>link태그)--> 안녕하세요. 굵은 글씨로 작성된것을 지우고 하나씩 입력해 보세요. 우선순위 결과 style속성 > id속성 > class속성 > style태그 > link태그

ID는 CLASS와 비슷 하지만. 한 문서에서는 ID가 하나만 존재해야 합니다. 중복 사용 불가능! ID를 쓰실 때는 #표시를 하셔야합니다. 공지사항 자유게시판 5~6줄 : 아아디값에 스타일시트를 정의 해줌. 10~11줄 : 영역에 정의된 아이디 값을 사용하여 스타일 시트를 적용 시켜줬습니다. 서로 다르게 구분을 주고 싶을때는 아이디를 사용하여 적용 가능합니다. 자바스크립트에서 아이디속성을 많이 사용합니다.

하나의 스타일시트를 여러번/중복되는 경우에 사용되는 것이 .Class(점클래스)입니다. 결과화면 점클래스를 이용하셔 스타일시트를 정의 했습니다. (배경색 : 노랑색으로 지정) 타입을 정하고 나서 뒤에 class="점클래스이름"을 입력하셔야 합니다.