본문 바로가기

전체 글

 (894)
7장 마무리 문제 1 DOCTYPE html> 표 스타일 다양하게 적용하기 .various { list-style-type:none; font-size:24px; line-height:2.0; } .one-color { color:#ad3000; } 최신 웹 디자인 트렌드 반응형 웹디자인-다양한 화면 크기에 최적화하다. 플랫 디자인-입체에서 평면으로 풀 스크린 배경-콘텐츠에 집중 원 페이지 사이트-한 페이지에 모든 내용을 담다. 패럴랙스 스크롤링-동적인 효과로 강한 인상을! 웹 폰트-웹 타이포그래피를 받쳐 주는 기술 결과 :표 스타일 다양하게 적용하기
7장 예제 - 표 스타일 다양하게 적용하기 DOCTYPE html> 표 스타일 다양하게 적용하기 table { caption-side:bottom; /*표 캡션 위치 아래로 */ border:1px solid black; /*표 테두리는 검은색 실선으로 */ border-collapse:collapse; /*표와 테두리를 한 줄로 표시 */ } td,th { border:1px dotted black; /*셀 테두리는 검은색 점선으로 */ padding:10px; /*셀 테두리와 내용사이의 여백 */ text-align:center; /*셀 내용 정렬 방법 */ } 상품구성 선물용과 가정용 상품 구성 용도 중량 개수 가격 선물용 3kg 11~16과 35,000원 5kg 18~26과 52,000원 가정용 3kg 11~26과 30,000원 5kg 1..
7장 실습-목록을 사용하여 세로 메뉴 만들기 DOCTYPE html> 목록을 사용하여 세로메뉴 만들기 nav { width:300px; margin:50px 30px; } ul { list-style:none; } li { border:1px solid #222; padding: 20px 40px; margin:5px; } 회사소개 도서 자료실 동영상 강의 결과:목록을 사용하여 세로메뉴 만들기
6장 마무리 문제 2 DOCTYPE html> 탐라국 입춘굿 #container { /*내용 전체를 감싸는 능력 */ width:600px; /*너비 600 픽셀 */ margin:20px auto;/*내용이 화면 중앙에 오도록 지정 */ } h1 { display:inline-block; /*글자 부분에만 배경색이 채워지도록 지정 */ background-color:#0404aa;/*배경색- 짙은 파란색 */ color:#fff; /*글자색- 흰색 */ } .accent { font-weight:bold; /*글자 굵게*/ color:red; /*글자색 -빨간색 */ } 탐라국 입춘굿 제주도의 문화축제 중에서 유일하게 탐라 시대부터 내려운 축제이다. 제주에서 입춘은 새철(제주어,샛절)드는 날이라 한다. 하늘의 1만 8,00..
6장 마무리 문제 1 DOCTYPE html> 상품 소개 페이지 웹 기술 - 기본 HTML CSS Javascript 기초 h1 { display: inline-block; font-size:1.4em; background-color:#222; color:#fff; padding:10px; } ul { list-style:none; } li { font-size:1.2em; line-height:1.5; color:blue; } 결과:상품 소개 페이지
5장 마무리 문제 2 DOCTYPE html> 프런트엔드 개발자 지원서 프런트엔드 개발자 지원서 HTML,CSS,자바스크립트의 기술을 이해하고 실무 경험이 있는 분을 찾습니다. 개인정보 이름 연락처 지원분야 웹 퍼블리싱 웹 어플리케이션 개발 개발 환경 개선 지원동기 결과: 프런트엔드 개발자 지원서
5장 마무리 문제 1 DOCTYPE html> 예약정보 예약정보 이름 전화 이메일 결과 :예약정보
5장 실습 2 - 회원 가입 신청서에 속성 지정하기 DOCTYPE html> 회원가입 신청서에 속성 지정하기 회원가입을 환영합니다 사용자 정보 아이디 이메일 비밀번호 비밀번호 확인 이벤트와 새로운 소식 메일 수신 메일 수신 안함 결과: 회원가입 신청서에 속성 지정하기

티스토리툴바