CSS List & Table Chapter 5 Part 2 이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다. 구역 구역을 추가하려면 슬라이드를 마우스 오른쪽 단추로 클릭하십시오. 구역을 사용하면 슬라이드를 쉽게 구성할 수 있으며, 여러 작성자가 원활하게 협력하여 슬라이드를 작성할 수 있습니다. 메모 설명을 제공하거나 청중에게 자세한 내용을 알릴 때 메모를 사용합니다. 프레젠테이션하는 동안 프레젠테이션 보기에서 이러한 메모를 볼 수 있습니다. 글꼴 크기에 주의(접근성, 가시성, 비디오 테이프 작성, 온라인 재생 등에 중요함) 배색 그래프, 차트 및 텍스트 상자에 특히 주의를 기울이십시오. 참석자가 흑백이나 회색조로 인쇄할 경우를 고려해야 합니다. 테스트로 인쇄하여 흑백이나 회색조로 인쇄해도 색에 문제가 없는지 확인하십시오. 그래픽, 테이블 및 그래프 간결하게 유지하십시오. 가능한 일관되고 혼란스럽지 않은 스타일과 색을 사용하는 것이 좋습니다. 모든 그래프와 표에 레이블을 추가합니다. Chapter 5 Part 2
list-style 속성 설명 list-style 리스트에 대한 속성을 한줄로 설정한다. list-style-image 리스트 항목 마커를 이미지로 지정한다. list-style-position 리스트 마커의 위치를 안쪽인지 바깥쪽인지를 지정한다. list-style-type 리스트 마커의 타입을 지정한다.
list-style-type:none <!DOCTYPE html> <html> <head> <style> ul.a {list-style-type: circle; } ul.b {list-style-type: disc; } ul.c {list-style-type: square; } ul.d {list-style-type: none; } </style> </head> <body> <ul class="a"> <li>HTML5</li> <li>CSS3</li> </ul> <ul class=“b"> <li>HTML5</li> <li>CSS3</li> </ul> <ul class=“c"> <li>HTML5</li> <li>CSS3</li> </ul> <ul class=“d"> <li>HTML5</li> <li>CSS3</li> </ul> </body> </html>
수평리스트 예제 <!DOCTYPE html> <html> <head> <style> ul { list-style:none; text-align:center; border-top:1px solid red; border-bottom:1px solid red; padding:10px 0; } ul li { display:inline; text-transform:uppercase; padding:0 10px; letter-spacing:10px; ul li a { text-decoration:none; color:black; } ul li a:hover { text-decoration:underline; } </style> </head>
수평리스트 예제 (계속) <body> <ul> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </body> </html>
결과
테이블 스타일 속성 설명 border 테이블의 경계선 border-collapse 이웃한 셀의 경계선을 합칠 것인지 여부 wdith 테이블의 가로 길이 height 테이블의 세로 길이 border-spacing 테이블 셀 사이의 거리 empty-cells 공백 셀을 그릴 것인지 여부 table-align 테이블 셀의 정렬 설정
border-collapse: collapse <!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; } table, th, td { border: 1px solid blue; </style> </head>
border-collapse: collapse(계속) <body> <table> <tr> <th>이름</th> <th>이메일</th> </tr> <td>김철수</td> <td>chul@google.com</td> <td>김영희</td> <td>young@google.com</td> </table> </body> </html>
HOMEWORK #5
HW#5 요구 사항 /homework/hw5/myw3schools.html 과제 의도: 다음의 사이트 제작https://www.w3schools.com/cssref/css3_pr_box-shadow.asp 파일이름 /homework/hw5/myw3schools.html TLS와 cslab2에 각각 탑재
요구 사항 (계속) Heading: w3schools.com 메인 메뉴 w3schools는 검은색, .com은 green 마우스가 올라오면 w3schools가 green으로 메인 메뉴 list style을 수평으로 배치 <div> </div>안에 정의 위, 아래 경계선 빨간색 배경색은 #a1a1a1 각 메뉴에 마우스가 올라가면 글자색은 yellow 배경색은 #ff111f
요구 사항 (계속) 사이드 메뉴와 contents는 table로 작성 사이드 메뉴 list-type:none으로 작성 각 항목에 마우스가 올라가면 배경색이 lightgray로
요구 사항 (계속) 버튼 만들기 Example 3개의 버튼을 만들고 shadow기능 되도록 왼쪽 버튼의 배경색은 흰색 가운데 버튼의 배경색은 default 오른쪽 버튼의 배경색은 rgba(0,255,0,0.5) Example 배경색은 노란색 왼쪽 경계선은 두께 3px의 green으로
TIP 버튼 만들기 <button id=left>< Previous</button> <button id=center>Complete CSS Reference</button> <button id=right>Next ></button>