헬로월드

동물 이미지 갤러리 개 고양이 토끼 Login Board 자유게시판 뉴스 버그/오류 제보 게시판 자랑하기 우리 개는요. 우리 고양이는요. 우리 토끼는요. 시스템 COMPANY : company ADDRESS : address TEL : tel COPYRIGHT *{ font-style: 굴림; } body{ background: transparent no-repeat center top; background-attachment: scroll; } #layout{ width : 1600px; /* height : 2700px; */ margin-left: auto; margin-right: auto; } /* --------------------------탑 시 작-----------------------..

HTML DOCTYPE html> 홈페이지제작 이미지 갤러리 개 고양이 토끼 Login ID PW Board 자유게시판 뉴스 버그/오류 제보 게시판 자랑하기 우리 개는요. 우리 고양이는요. 우리 토끼는요. (주)307 시스템 COMPANY : (주)307시스템 , OWNER : 안성모 ADDRESS : [11111] 경기도 성남시 ㅇㅇ구 ㅇㅇ동 111-111 TEL : 02) 1111-2222 , FAX : 02) 1111-2222, E-MAIL : aaa@aaa.co.kr COPYRIGHT 2007 307 system co. All Rights Reserved. CSS *{ /* 글씨체 지정 */ font-style: "굴림"; } body{ background : transparent no-repea..

CSS /* p{ color : rgb(54, 134, 134); font-family: "굴림"; font-size: large; font-style: italic; text-align: center; text-decoration:line-through; text-shadow: 4px 4px 4px black; } *{ background-color: white; } ol{ list-style-type:square; } ul{ list-style-type: upper-roman; } table{ border : 3px solid pink; caption-side: bottom; } img{ width : 80px; height : 80px; display: block; border-style: dash..

연결 선택자 = 선택자와 선택자를 연결하여 css 적용 대상을 제한 하위 선택자 부모 요소에 포함된 모든 하위 요소에 스타일이 적용. 자식 및 손자까지 적용. rule 상위요소 하위요소 { ... } ex. div p { ... } 자식 선택자 자식만 적용됨 rule 부모요소 > 자식요소 { ... } ex. div > p { ... } 인접 형제 선택자 요소1 과 같은 깊이(depth) 이면서 바로 다음 행에 오는 요소2에 적용 rule 요소1 + 요소2 { ... } ex. css h1 + p { ... } ex. html a b 형제 선택자 요소1 과 같은 깊이(depth) 인 모든 요소2에 적용 rule 요소1 ~ 요소2 { ... } ex. css h1 + p { ... } ex. html a ..

배경색과 배경 범위 지정하기 background-color 배경 색상 지정. color와 동일. 배경 이미지 지정하기 background-image 배경 이미지 지정 rule background-image: url(' 이미지경로 ') ; 그러데이션 효과로 배경 꾸미기 선형 그러데이션 수직,수평 또는 특정 각도 방향으로 색상이 일정하게 변하는 것 rule background-image: url(' 이미지경로 ') ; ex. html ex. css div#ig { width: 100px; height: 100px; background: linear-gradient(to right bottom, yellow, white); } div#ie { width: 100px; height: 100px; backgrou..

css와 박스 모델 블록 레벨 요소 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소 ex. , 등 인라인 레벨 요소 줄을 차지 하지 않는 요소 ex. 등 박스 모델 실제 콘텐츠 영역, 패딩, 테두리(border), 마진(margin) 요소로 구성됨 개발자 도구창( f12 누르고 - 우하단 탭 중 탭 선택 ) 에서 그림으로 확인 가능 width, height 실제 콘텐츠 영역 크기 지정 rule width: | | | auto(기본값, 콘텐츠의 크기에 따라 자동) height: | | | auto(기본값, 콘텐츠의 크기에 따라 자동) 테두리 스타일 지정하기 박스 모델의 값 지정 방향 네 방향의 값 지정 시 방향 순서 : 위 > 우 > 아래 > 좌 border-style 속성 테두리 스타일 rule bord..

글꼴 관련 스타일 font-family body 태그에 적용시 전체 적용. 지정한 글꼴이 없을 경우에 대비해 두번째, 세번째 글꼴 지정도 가능. rule font-family: font-family: , font-size 글자 크기 rule font-size: | ex. css h1 { /* font-size: 3em; */ font-size: 400%; } 단위 종류 설명 em 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정 rem 문서 시작 부분에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정 ex 해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정 px 모니터의 1픽셀을 기준 pt 포인트라고 하며, 일반 문서에 많이 사용 이탤릭 ..

왜 스타일을 사용할까? HTML 은 내용 나열, CSS 는 디자인 구성 ( 그래서 css만 바꾸면 디자인을 바꿀 수 있음 ) 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다 ( 반응형 웹 디자인 ) Rule 선택자 { 속성1 : 속성값1 ; 속성2 : 속성2값 } 주석 /* 주석내용 */ CSS 분류 브라우저 기본 스타일 css 를 사용하지 않은 웹 문서라고 하더라도 웹 브라우저에 표시할 때는 기본 스타일을 사용 사용자 스타일 인라인 스타일 스타일을 적용할 대상에 직접 표시 ex. html 빨강 내부 스타일 시트 웹 문서 안에 스타일을 작성한 것. 빨강 외부 스타일 시트 스타일을 따로 파일로 작성한 것. *. css 확장자 사용. 기본 선택자 종류 전체 rule * { 스타일규칙 } ex. *..