허니 몬 ( Honeymon ) 의 달콤 한 비행 : : ' css ' 태그 의 글 목록 
 ' css ' 에 해당 되 는 글 3 건 
 2009 . 03 . 22 허니 몬 의 CSS 에 대한 간단 정리 ! ! ( 1 ) 
 허니 몬 의 CSS 에 대한 간단 정리 ! ! 
 허니 몬 의 IT 이야기 2009 . 03 . 22 09 : 04 
 스타일 시트 ( Style Sheet ) : HTML 문서 에서 자주 사용 하 는 서체 나 색상 , 정렬 , 각 요소 들 의 배치 등 의 유형 을 가리킨다 . 웹 브라우저 창 의 한쪽 에 배치 하 는 등 의 다양 한 스타일 을 한 군데 모아 놓 은 것 을 ' 스타일 시트 ' 라고 한다 . 
 -> 스타일 시트 사용 시 에 는 한 번 만 적용 하 면 된다 . 
 < h 4 > HTML 이 뭘까 ? </ h 4 > 
 < h 4 > 스타일 시트 는 또 뭐 고 ? </ h 4 > 
 ● 스타일 시트 를 사용 해야 하 는 이유 
 ◎ 웹 문서 의 디자인 과 내용 을 분리 할 수 있 습니다 . 
 ⊙ CSS 를 이용 해서 웹 문서 를 디자인 할 경우 HTML 소스 부분 은 그대루 두 고 CSS 소스 만 
 수정 하 면 되 기 때문 에 작업 이 훨씬 효율 적 이 다 . 
 ◎ 다양 한 매체 에 적합 한 문서 를 만들 수 있 습니다 . 
 ⊙ HTML 로 작성 된 내용 은 그대로 두 고 CSS 에서 대상 매체 ( Media ) 가 프린터 인지 , 모바일 
 기기 인지 만 지정 해 주 면 같 은 내용 을 여러 매체 에서 사용 할 수 있 다 . 
 자신 이 작성 한 문서 에 자신 이 원 하 는 형식 의 매체 스타일 ( Style or Design ) 을 적용 시키 면 된다 . 
 CSS 명령어 사용 하 기 
 ● CSS 명령어 의 구조 
 선택 자 : 주로 태그 가 기술 됨 . 이 태그 에 프로 퍼티 와 값 이 적용 됨 
 값 : 프로 퍼티 의 값 . 즉 , 속성 값 을 기술 함 . 이 값 은 프로 퍼티 마다 다름 
 ①. 모든 CSS 구문 은 위 와 같이 선택 자 , 프로 퍼티 , 값 으로 구성 
 ③. 값 이 2 개 이상 의 단어 로 구성 되 면 따옴표 내 에 기술 합니다 . 
 ⑤. 여러 개 의 프로 퍼티 를 지정 할 경우 , CSS 구문 을 읽 기 쉽 도록 한 개 라인 에 한 개 의 프로 퍼티 : 값 쌍 을 기술 할 수 도 있 습니다 . 
 ● CLASS 속성 사용 하 기 ( Tag . class name ) 
 class 속성 은 두 가지 경우 에 유용 하 다 . 첫 번 째 는 하나 의 태그 에 여러 개 의 스타일 을 적용 하 는 경우 이 고 , 두 번 째 는 여러 개 의 태그 에 하나 의 스타일 을 적용 하 는 경우 이 다 . 
 ● ID 속성 사용 하 기 ( # ID name ) 
 ID 속성 은 CLASS 속 서오 가 유사 하 다 . ID 속성 도 두 가지 경우 에 유용 하 다 . 첫 번 째 는 동일 한 ID 를 가진 모든 태그 들 에 동일 한 스타일 이 적용 되 는 경우 이 고 , 두 번 째 는 동일 한 태그 라도 해당 ID 를 가진 경우 만 스타일 이 적용 된다 . 
 ● 주석 사용 하 기 
 / * 와 */ 사이 에 기술 한다 ( 여러 줄 주석 ) 
 / * 이것 은 주석 입니다 . */ 
 / * 이것 도 주석 입니다 . */ 
 ● CSS 를 이용 하 는 3 가지 방법 
 1 . < head > . .. </ head > 사이 에 기술 ( 내부 파일 방식 ) [ 우선순위 1 ] 
 2 . HTML 태그 내 에 직접 기술 ( 인라인 방식 ) [ 우선순위 2 ] 
 3 . 별도 의 . css 파일 에 기술 ( 외부 파일 방식 ) [ 우선순위 3 ] 
 @ import 문 이용 
 ● CSS 입력 위치 
 [ 1 ] . < head > . .. </ head > 사이 에 기술 ( 내부 파일 방식 ) 기재 분량 적 을 떄 
 [ 2 ] . html 태그 내 에 직접 기술 ( 인라인 방식 ) 
 [ 3 ] . 별도 의 . css 파일 에 기술 ( 외부 파일 방식 ) 
 [ 4 ] @ import 문 이용 
 @ import " 외부 스타일 시트 파일 " 
 ● @ import 문 사용 시 < link > 태그 와 함께 사용 
 @ import " style 2 . css " 
 ● Border Style 
 ● Border Style 2 ( border width , style , color , boder - right - color ) 
 / * border - right - color : # ff 0000 */ 
 p . two / * 색상 두 개 지정 할 경우 , 먼저 색은 위아래 선색 , 다음 색 은 좌우 선색 */ 
 border - color : blue yellow 
 p . three / * 색상 세 개 지정 할 경우 , 먼저 색은 위 , 다음 색 은 좌우 색 , 다음 색 은 아래 로 나타난다 . */ 
 border - color : blue yellow red 
 p . four / * 시계 방향 으로 적용 됨 */ 
 border - color : blue yellow red gray 
 ● < a > 태그 설정 과 관련 된 CSS 
 / * 문서 가 처음 표시 될 때 */ 
 / * 링크 가 한 번 이라도 클릭 된 후 */ 
 / * 링크 를 클릭 하 고 나 면 */ 
 / * 커서 가 링크 위 로 올라왔 을 때 */ 
 ● 테이블 에 CSS 적용 하 기 
 < TITLE > 테이블 에 스타일 시트 적용 하 기 </ TITLE > 
 / * 테두리 굵기 : 5 px */ 
 / * 테두리 색 : # 006600 */ 
 border - color : # 006600 
 / * border - top - width : 위쪽 테두리 굵기 : 0 px */ 
 / * 아래쪽 테두리 굵기 : 5 px */ 
 / * 오른쪽 테두리 굵기 : 0 px */ 
 / * 왼쪽 테두리 굵기 : 0 px */ 
 / * padding : 셀 안 의 데이터 와 테두리 간 여백 : 5 px 5 px 5 px 5 px */ 
 / * 배 경색 : # ffffff */ 
 / * 글 자색 : # 006699 */ 
 / * 폰트 크기 : 15 pt */ 
 / * 폰트 체 : 바탕 */ 
 / * 글자 간격 : 10 px */ 
 letter - spacing : 10 px 
 / * 테두리 종류 : dotted */ 
 / * 아래쪽 테두리 굵기 : 1 px */ 
 / * 칸 높이 : line - height : 150 %*/ 
 font - family : 바탕 7 
 < TH > 영어 속담 </ TH > 
 < TD > Better late than never . < BR > 
 아무리 늦 더라도 전혀 안 하 는 것 보다 는 낫 다 . 
 < TD > Rome was not built in a day . < BR > 
 로마 는 하루 아침 에 이루어지 지 않 았 다 . 
 < TD > The beginning is half of the whole . < BR > 
 < TD > Nothing ventured , nothing gained . < BR > 
 모험 을 하 지 않 으면 얻 는 것 도 없 다 . 
 < TD > Little strokes fell great oaks . < BR > 
 열 번 찍 어 안 넘어가 는 나무 없 다 . 
 ● Margin ( 바깥 여백 ) , Boder ( 선 ) , Padding ( 안쪽 여백 ) 명칭 
 [ 1 ] . padding - top [ 2 ] . padding - right [ 3 ] . padding - bottom [ 4 ] . padding - left 
 [ 5 ] . border - top [ 6 ] . border - right [ 7 ] . border - bottom [ 8 ] . border - left 
 [ 9 ] . margin - top [ 10 ] . margin - right [ 11 ] . margin - bottom [ 12 ] . margin - left 
 ● border - style 속성 
 border - width - style : 위 4 가지 속성 을 한꺼번에 지정 할 때 사용 . 
 ● 목록 스타일 지정 하 기 - list - style 
 list - style - type : value 
 허니 몬 의 사이트 소개 : touropia . com - 세계 유명 관광지 돌아보 기 ~ ( 0 ) 
 css , 간단 , 요약 , 정리 , 허니 몬 
 미 투데이 , 내 , 그 , 하지만 , 우분투 , ㅎㅎ , 나 의 , me 2 mobile , Java , ubuntu , _, 구글 , OTL , 난 , 내 가 , ㅡㅅ -, D 80 , 대한 , 클라이밍 , 나 는 , 있 는 , me 2 book , 허니 몬 , 더 , ㅡ _-, 흠 , 안드로이드 , 개발자 , me 2 photo , 수 ,