-
2023년 05월04일 수업 내용 정리국비 교육 내용 정리 2023. 5. 4. 14:57
* 과제1: 체스판 만들기~
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>Checkboard 만들기</title><style>#board{width: 500px;border: 1px solid #000;display: flex;flex-wrap: wrap;margin:0 auto;}.square{width: 100px;height: 100px;border: 1px solid #000;box-sizing: border-box}/* #board div:nth-child(even){background-color: black;}#board div:nth-child(odd){background-color: red;} */
.square:nth-child(odd){background-color: red;}.square:nth-child(even){background-color: black;}
</style></head><body><div id="board"><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div></div>
</body></html>* 과제2: 이미지와 스크롤 만들기(이미지 크기 조정 하는게 핵심임)~
<html>
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="quiz02.css"></head><body><div class="container"><img src="./images/budapest.jpg" alt="buda"><div class="info"><h1>Grand Budapest Hotel</h1><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci nostrum ea neque nisi, quas, qui, optio quam sit eos vero repellendus accusantium excepturi? Dicta at sint eligendi inventore quia a est quidem? Atque debitis ipsam magnam voluptatum. Aut aliquam vitae suscipit nisi. Perspiciatis mollitia quisquam eveniet, quod reiciendis deserunt veritatis.</p></div></div>
</body></html><css>
/**container-가로 길이 :500px;-세로 길이: 500px;-border:1px solid red;
*info-세로 길이: 220px-13px 두께. peru 샌깔인 테두리-스크롤시 볼 수 있는 속성 설정-글이 테두리에 붙지 않도록 15px 여백
display: block;*/
.container{width: 500px;height: 500px;border: 1px solid red;}
img{width: 100%;display: block;}.info{height:220px;border: 13px solid peru;overflow: scroll;padding:15px;box-sizing: border-box; /*박스가 딱 맞춰짐*/}1. ex) .fruits div:first-child { } < fruits class 안에 div 태그안에 첫째~
" :last-child{ } < fruits class 안에 div 태그안에 막내~
.fruits *:nth-child(2n+1) { } < 태그 선택 가능~ n은 0부터 시작~2. alt 누르고 태그 방향키 위 아래 누르면 이동가능~ tip~
3. border-radius 0px 0px 0px 0px; >> 모서리를 둥글게 만들어줌
border-style: dotted; >> 보더 스타일을 점선으로 바꿔줌
4. 인라인 요소일때는 display:inline-block; 해야지 width나 height가 먹힘
5. text-shaow px px 크기 색깔; => px px 크기 색깔; (뒤에 이어서 쓸수 있음!)
7. 사진크기: 1920*10208. ★ overflow ★
.hidden{overflow: hidden;}
.scroll{overflow: scroll;}.auto{overflow: auto;}.visible{overflow: visible;}9. ★HTML 인라인 요소 VS 블록 요소 VS 인라인 블록 요소★
-인라인:크기값을 지정 못함.
한 줄에 여러개 배치(수평정렬)
상하 마진 못 가짐(좌우 마진은 가짐)
기본 너비값은 콘텐츠의 너비값
:span,a,label,strong,sup,sub,i,big,del,s,em,b,br,audio,vidio,mark
-블록: 크기값을 지정 할수 있음)
한줄에 한개 만 배치(수직 정렬)
상하좌우 마진 모두 가짐
기본 너비값은 부모 요소의 100%
: div,h1~h6,p,ul,ol,li,hr,form,table
header,section,article,footer,nav
-인라인블록 요소: 크기값을 지정할 수 있음(블록)
한 줄에 여러 개 배치(수평정렬)
img,input,button => input vs button 언젠가 마주하게 될것이다.. 예언
fontawesome icon
10 nav바 만들어~
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>Document</title><style>#menubar{background-color: olive;}#menubar ul{padding: 0;margin:0;}#menubar ul li{list-style: none;display: inline-block;padding: 10px 15px;}#menubar ul li a{color: white;text-decoration: none;}#menubar ul li a:hover{color: violet;}</style></head><body><nav id="menubar"><ul><li><a href="#none">Home</a></li><li><a href="#none">Espresso</a></li><li><a href="#none">Cappuccino</a></li><li><a href="#none">Cafe Latte</a></li><li><a href="#none">F.A.Q</a></li></ul></nav></body></html>11. 교재(시간 모자를 시, 각 장의 마무리 문제 우선)
1) 06 css의 기본: p166~p191(마무리 문제 다 풀기)
2) 08 레이아웃을 구성하는 css박스 모델: p237~p268.p289(마무리 문제는 1번만 풀기)
-> float은 안 배웠으므로 기재한 페이지 부분만 보면 됩니다.
03) 07 텍스트를 표현하는 다양한 스타일: p193~p222, p233~p234(마무리 문제는 1,2번만 풀기)
->table 관련 css도 안다뤘으니 기재한 페이지 부분만 보면 됩니다~
'국비 교육 내용 정리' 카테고리의 다른 글
2023년 05월09일 수업 내용 정리 (0) 2023.05.09 2023년 05월08일 수업 내용 정리 (2) 2023.05.08 2023년 05월03일 수업 내용 정리 (0) 2023.05.03 Table을 이용하여 만들어봐~~ (0) 2023.05.03 2023년 05월02일 수업 내용 정리 (0) 2023.05.02