분류 전체보기 (65) 썸네일형 리스트형 03. CSS_수직 네비게이션(1) DOCTYPE html> ::: 03_CSS기초_수직_네비게이션(1) ::: /* ul 스타일 */ ul { list-style-type: none; background-color: #f1f1f1; padding: 0; margin: 0; width: 200px; } /* li a 스타일 */ li a { color: #000; padding: 5px; /* a 태그의 언더라인 없애기 */ text-decoration: none; display: block; } /* li a 태그에 마우스 오버시 처리 스타일 */ li a:hover { background-color: aqua; color: blue; } 수직 네비게이션(메뉴) Home Daum Naver Google 02. CSS_테이블 행단위 색 입히기(2) DOCTYPE html> ::: 02_CSS기초_테이블_행단위_색입히기(2) ::: /* table 스타일 */ table{ border-collapse: collapse; width: 100%; } /* th, td 스타일 */ th, td { text-align: center; padding: 8px; } /* tr태그의 홀수 행에 색 입히기 */ tr:nth-child(even) { background-color: yellow; } 테이블의 행에 마우스 오버시 색상 입히기 번호 이름 주소 1 홍길동 서울 강남구 대치동 2 홍길동 서울 강남구 대치동 3 홍길동 서울 강남구 대치동 4 홍길동 서울 강남구 대치동 01. CSS_테이블 행단위 색 입히기(1) DOCTYPE html> ::: 01_CSS기초_테이블_행단위_색입히기 ::: /* table 스타일 */ table { border-collapse: collapse; width: 100%; } /* th, td 스타일 */ th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } /* tr태그에 마우스가 올라갔을 때 스타일 */ tr:hover { background-color: yellow; } 테이블의 행에 마우스 오버시 색상 입히기 번호 이름 주소 1 홍길동 서울 강남구 대치동 2 홍길동 서울 강남구 대치동 3 홍길동 서울 강남구 대치동 4 홍길동 서울 강남구 대치동 18. html 태그_자기소개서 만들기 DOCTYPE html> ::: 한지훈의 자기소개서 ::: /* 상단영역(header) */ #header { background-color: black; color: white; text-align: center; padding: 10px; } /* 카테고리(네비게이션) 메뉴 영역(nav) */ #nav { background-color: #eeeeee; width: 100%; height: 60px; padding: 30px; text-align: center; } /* 본문 내용영역(section) */ #section { background-color: rgb(0, 174, 255); width: 100%; padding: 10px; float: left; /* float은 다음 태그를 열단위로 .. 17. html 태그_내부프레임(iFrame) DOCTYPE html> ::: 17_HTML_태그소개_내부프레임(iFrame) ::: iFrame 사용하기 태그소개 Daum 16. html 태그_레이아웃 설정하기 DOCTYPE html> ::: 16_HTML_태그소개_레이아웃_설정하기 ::: /* 상단영역(header) */ #header { background-color: black; color: white; text-align: center; padding: 5px; } /* 카테고리(네비게이션) 메뉴 영역(nav) */ #nav { background-color: #eeeeee; width: 100%; height: 30px; padding: 10px; text-align: center; } /* 본문 내용영역(section) */ #section { background-color: aqua; width: 50%; padding: 10px; float: left; /* float은 다음 태그를 열단위로 옆으.. 15. html 태그_블록태그 사용하기 DOCTYPE html> ::: 15_HTML_태그소개_블록태그사용하기 ::: div.div_style{ background-color: black; color: white; padding: 20px; margin: 25px; } /* div 태그중에 클래스 이름이 div_style인 영역 지정 */ /* 배경색 : 검정색, 텍스트 색상 : 흰색, 패딩 : 20, 외부여백 : 25 */ div.div_style2{ background-color: blue; color: white; padding: 20px; margin: 25px; } div 블록 태그 HTML 태그에서 의미를 가지지는 않으며, 영역을 표시하기 위해 주로 사용됨. 많이 사용되는 태그임. div 블록 태그-1 HTML 태그에서 의미를 가지.. 14. html 태그_목록 생성하기 DOCTYPE html> ::: 14_HTML_태그소개_목록생성하기 ::: /* ul 태그에 스타일 지정하기 : 표식 정의하기 */ ul{ /* 채워진 원 표시(디폴트값 : 생략가능) */ /* list-style-type: disc; */ /* 채워지지 않은 원 표시 */ /* list-style-type: circle; */ /* 표식 사용하지 않기 */ /* list-style-type: none; */ /* 채워진 사각형 표시 */ /* list-style-type: square; */ /* ul 태그중에 클래스 이름이 menu인 영역 패딩 지정 */} ul.menu {padding: 0;} /* ul 태그중에 menu인 클래스의 li 태그 영역을 수평구조로 변경하기(inline) */ /* > .. 이전 1 ··· 3 4 5 6 7 8 9 다음
