교육 8일차인 오늘은 css파트에서 table관련 속성에 대해서 공부하고 오후 시간에는 웹 사이트 만들기 실습을했습니다.
오늘은 목요일이니까 하루만 더 화이팅하면 주말이니 힘내보겠습니당!!
[chapter 05 table을 위한 스타일]
1.caption-side 속성
: 표 제목 위치 정하는 속성
| 속성 값 | 설명 |
| top | 캡션을 표 윗부분에 표시(기본값) |
| bottom | 캡션을 표의 아랫부분에 표시 |
2. border-collaps
: 테두리 통합, 분리하는 속성
| 속성 값 | 설명 |
| separate | 테두리를 따로 표시(기본값) |
| collapse | 테두리를 하나로 합친다 |
3.border-spacing
: 인접한 셀 테두리 사이 거리 지정하는 속성
4. empty-cells 속성
: 내용을 안넣는 빈 셀의 표시 여부 관련 속성
* border-collape가 적용되면 empty-cells의 속성은 의미가 없다.
| 속성 값 | 설명 |
| show | 빈 셀 주위에 테두리를 그려 빈 셀을 표시(기본값) |
| hide | 빈 셀 테두리를 그리지 않고 비워둔다. |
5. table-layout
: 콘텐츠에 맞게 셀 너비를 지정하는 속성
| 속성 값 | 설명 |
| auto | 셀 내용에 따라 셀 너비가 달라진다.(기본값) |
| fixed | 셀 너비를 고정(셀의 내용의 따라 너비가 달라지지 않는다.) |
6.vertical-align 속성
: inline이나 inline-block을 위, 세로중앙,아래로 정렬 시켜주는 속성
(block 요소에 적용할 경우 작동되지 않음)
:img, input,select, label, th, td 등
: 요소 자체만 정령하고 내용에는 영향을 미치지 않는다.(table cell 제외)
: table cell에 적용할 때는 내용에 영향을 미친다.
: 정렬하려는 요소를 다른 인라인 요소에 상대적으로 정렬한다.
: 같은 줄에 인라인 요소의 크기에 따라 높낮이가 달라질 수 있고, 그 줄에 있는 line-height 설정에 따라서 달라질 수도 있다.
| 속성 값 | 설명 |
| top | 위쪽 정렬 |
| middle | 세로 중앙 정렬 |
| bottom | 아래쪽 정렬 |
* 1) div요소에 준 display:table-cell 제거하면, 수직정렬 효과 반영 안 됨
2) display:table-cell 속성 준 경우, clear:both 속성이 안 먹힘
3) 좌우정렬 위해 float 속성이나 positon 속성 줄 경우, 수직 중앙정렬 안 됨
4) 수직정렬 효과를 준 채 좌우정렬을 위해서는 div로 한번 더 감싼 후 div에 적용.
이때 주의할 점은, 감싼 div에 반드시 width 값 주고 margin:0 auto 줘야 함
7.cursor 속성
: 해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있다.
8.table-cell 속성
: 표처럼 보이기 위해 사용할 수 있는 속성 값으로 td의 성격을 가진다.
오늘학습한 이론은 여기까지!
나머지 시간에는 강사님 따라서 간단한 홈페이지를 만들어보고
맨 마지막에는 혼자서 웹 사이트를 만들어보는 시간을 가졌다!
<chapter04. 인터넷 센터 웹 사이트 만들기 실습>
*문제 예제 정답과 내가 완성한 웹사이트
전체적인 구조 자체를 만드는데는 조금 비슷..해진것 같다..!
디테일하게 아이콘 크기나 마진 값 등등이 달라서 전체 웹 사이트 크기는 동일하나 세부적인 값은 완벽히 하지는 못했다.
positon 개념과 float개념이 어려웠었는데 점점 감이 잡히는 것 같다.
엉망진창이지만... 직접 만들어본 웹사이트 코드를 공유하겠습니다!!
<html>
인터넷센터
환영합니다!
.jpg)
.jpg)
.jpg)
공지사항
| 내용 | 날짜 |
|---|---|
| 인터넷센터에서 12회 심포지움을 개최합니다. | 2018-04-10 |
| 따뜻한 인터넷을 위한 선플캠페인에 참여하세요. | 2018-04-10 |
| [자료] 개인정보 보호를 위한 올바른 인터넷 사용법 | 2018-04-09 |
| 스몸비에 대응하는 청소년 교육자료를 배포합니다. | 2018-03-17 |
| 인터넷센터와 함께 하실 인재를 모집합니다. | 2018-03-07 |
Wep partner Site
인터넷 정보수집 발굴
인터넷 사례 조사
인터넷문화 관련 자료 수집
인터넷 기술현황 정리
기타 인터넷 관련 정보 수집
교육 프로그램 개발
인터넷 교육프로그램 연구
인터넷 교육도구 개발
인터넷 특강
기타 인터넷 교육 연구
역기능 예방 및 대응
저작권 침해/예방 대응 연구
불법유해정보 유통 예방/대응 연구
사이버범죄 예방/대응 연구
인터넷중독 예방/대응 연구
<css>
@charset "UTF-8";
/*reset*/
*{margin: 0; padding: 0; list-style: none; text-decoration: none; color: #FFFFFF;}
body{background-color:#303030; font-family: "맑은 고딕";}
img{display: block;}
a{display: block;}
#wrap{width: 1000px; height: 1100px; margin: auto;}
/*헤더*/
header{width: 1000px; height: 150px; float: left;}
/*로고*/
header h1{width: 300px; height: 100px;}
header h1 img{}
/*1차메뉴*/
header nav{float: right; height: 50px; z-index: 3; position: relative;}
header nav ul.main{}
header nav ul.main>li{; width: 150px; height: 25px; float: left;margin-top: 25px;}
header nav ul.main>li>a{ float: left; font-size: 20px;}
/*2차메뉴*/
header nav ul.main>li >ul.sub{clear: both; display: none;}
header nav ul.main>li:hover >ul.sub{clear: both; display: block;}
header nav ul.main li >ul.sub li{}
header nav ul.main li >ul.sub li a{background-color: rgba(0, 102, 204,0.5); padding: 10px;}
header nav ul.main li >ul.sub li a:hover{text-decoration: underline;}
/*슬라이드 이미지*/
#slid{clear: both; height: 350px; overflow: hidden; position: relative;}
#slid ul{width: 3000px;}
#slid ul li{float: left;}
#slid p{position: absolute; background-color: rgba(255, 255, 255, 0.5); width: 200px;
height: 80px; border-radius: 10px; top: 0; left: 0; bottom: 0; right: 0; margin: auto; text-align: center; line-height: 40px; font-weight: bold; }
/*공지사항 파트너 공통 부분*/
#sec1{width: 1000px; height: 250px; float: left; position: relative;}
.sec-all{width: 500px; height: 250px; float: left;}
.sec-all h2{text-align: center; margin-top: 5px; border-bottom:1px solid #6699FF;width: 496px}
/*공지사항*/
.notice table{margin: auto; margin-top: 20px ; border-collapse: collapse; width: 500px; height: 192px;}
.notice table tr:nth-child(even){background-color: #6699FF;}
.notice table th{}
/*파트너*/
.partner img{margin: auto; width:500px; bottom: 0; position: absolute;}
/*아이콘*/
#icon{width: 840px; height: 250px;margin: auto; clear: both;}
.icon-all{width:280px; height: 250px; width: 280px; height: 250px; float: left; text-align: center}
.title{margin-top: 30px; color: #6699FF; font-weight: bolder;}
.text{margin-top: 10px;}
.icon-all img{margin: auto; margin-top: 25px;}
.icon-all:hover{background-color: rgba(102, 153, 255,0.5);}
/**/
footer{clear: both;width: 1000px; height: 100px; background-color: #6699FF;}
.footer-left{float: left; width: 500px; height: 100px;}
.footer-left ul li{float: left; margin: 20px;}
.footer-right address{font-style: normal; font-size: small; margin: auto; padding: 10px;}'국비교육 학습일지' 카테고리의 다른 글
| 국비교육 10일차 학습일지 - 반응형 웹 (0) | 2023.01.09 |
|---|---|
| 국비교육 9일차 학습일지 - css, html으로 간단한 웹 사이트 제작 (1) | 2023.01.06 |
| 국비교육 7일차 학습일지- css,html (2) | 2023.01.04 |
| 국비교육6일차 학습일지 - css (0) | 2023.01.03 |
| 국비교육 5일차 일지 -css (0) | 2023.01.02 |