CSS/CSS 실습

DOCTYPE html> Document 로그인 | 회원가입 | 공지사항 HTML | CSS | Javascript | Python | PHP | Java /* 여백초기화 */ * { padding: 0; margin: 0; } /* 리스트 점 없애기 */ li { list-style-type: none; } /* 로고수정 */ #logo { /* 왼쪽배치 */ float: left; /* 바깥여백 */ margin-top: 20px; margin-left: 20px; margin-bottom: 10px; /* 외곽선 */ border: 1px solid red; } /* 소메뉴 수정 */ #top { /* 오른쪽 배치 */ float: right; /* 바깥여백 */ margin-top: 30px; m..

/* float 속성 특징 : float 걸린 태그는 떠 있음 */ /* float 밑에 있는 태그들이 높이가 없다고 가정하여 위로 말려 올라옴(겹침현상) */ /* 여백 초기화 */ * { padding: 0; margin: 0; } li { list-style-type: none; } #image { float: left; border: 1px solid red; } #desc { border: 1px solid red; margin-left: 30px; float: left; width: 300px; } #menu { border: 1px solid red; float: right; }

/* 문제풀이 */ ul{ border: 1px solid #cccccc; border-radius: 10px; background-color: #f5f7e4; width: 640px; padding: 30px; } li{ /* display : 가로배치 */ display: inline-block; /* 앞에 점 없애기 */ list-style-type: none; margin-left: 20px; } li { list-style-type: none; } #v_menu{ width: 150px; } #v_menu li{ border-bottom: 1px dotted black; padding: 5px; } /* 가로 메뉴 디자인 */ /* 후손선택자 */ #h_menu li{ display: inlin..

다음 결과물을 참고하여 CSS 디자인을 해보세요. h1 - Moirai One 구글 웹폰트 적용 p - Diphylleia 구글 웹폰트 적용 DOCTYPE html> Document 홍길동의 블로그 안녕하세요 홍길동입니다. 홍길동의 블로그 홈페이지에 오신 것을 환영합니다. CSS 코드 더보기 @import url('https://fonts.googleapis.com/css2?family=Diphylleia&family=Moirai+One&display=swap'); h1{ /* 구글 웹폰트 */ font-family: 'Moirai One', cursive; /* 글자 중앙 정렬 */ text-align: center; } p{ font-family: 'Diphylleia', serif; text-ali..

[html 예시] DOCTYPE html> Document 열차표 예매 열차번호 출발 도착 출발시간 특실 일반실 소요시간 199 수원 대전 10:00 01:44 230 수원 대전 11:30 01:38 [CSS] 더보기 table { /* 테이블 선 사이 붙이기 */ border-collapse: collapse; /* 가로 크기를 고정크기로 */ /* 화면단위 : px(고정크기), %(반응형단위), 뷰포트 단위(반응형) : vw(가로), vh(세로) */ /* viewport : 모니터의 화면(PC모니터, 태블릿, 모바일 화면에 맞추어 보임 */ /* 예) 코딩 시 100vw(가로) -> PC, 태블릿 등에서 적절하게 맞추어줌 */ width: 610px; } /* 디자인 기본 : 디자인 적용 우선순위 ..

다음 예시를 참고하여 CSS 코드를 작성해보세요 [html] DOCTYPE html> Document 가족과 즐거운 크리스마스를 보내세요~~~ 카드 보내기 [css] 더보기 body{ /* 배경이미지 */ /* background-image: url("경로") */ background-image: url("../img/back.jpg"); /* 이미지 반복 중단 */ /* background-repeat: no-repeat; */ background-repeat: no-repeat; } p{ /* 글자크기 */ font-size: 20px; /* 바깥여백 -위 */ margin-top: 160px; /* 바깥여백 -왼쪽 */ margin-left: 130px; /* 가로크기 */ width: 280px;..

1. 다음 예시처럼 css 코드를 작성해보세요 [html] DOCTYPE html> Document 딸기 딸기는 25℃ 이하의 선선한 기후 를 좋아하는 여러해살이 열매 채소로 5월에 열매를 수확합니다. 다른 작물에 비해 잘 기르기 위해서 많은 노력이 필요합니다. 양평 딸기 축제 일 시 : 2018년 1월 15일~5월 15일 장 소 : 양평군 내 딸기 마을 연락처 : 031-774-0000 일정은 바뀔 수 있으므로 방문 전 전화 요망 [css] 더보기 #title1 { color: purple; } #title2 { color: green; } #weather { color: red; font-weight: bold; } #location { font-weight: bold; } #notice { colo..

아래 예시와 같이 CSS 코드를 작성해보세요 DOCTYPE html> Document 태풍 정보 일시 중심위치 중심기압(hPa) 최대풍속 위도 경도 초속(m/s) 시속(km/s) /* 문제 풀이 */ /* 선택자들에게 공통된 속성 적용하기 */ /* 사용법 : 선택자, 선택자2, ... { 속성 : 값; } */ table, tr, th, td { /* 외곽선 : border : 선두께 선스타일 선색상 */ border: 1px solid black; /* 테이블 선사이 간격 붙이기 속성 */ border-collapse: collapse; /* 안쪽 여백(padding) */ padding: 8px; }