13. CSS 레이아웃
14. HTML5 테이블 태그
✅ float: left (or right);를 사용하는 경우 둥둥 떠다녀서 영역을 설정할 수 없음
그럴 경우 부모에게 overflow: hidden;을 줘서 영역을 설정
overflow: hidden; 이 없을 경우, 부모가 자식을 감싸지 못함
✅ float 특징
자식 태그에 float을 적용하면 부모 태그는 높이 값을 잃어버림
-
float 속성은 상속
전체 초기화 후 중앙정렬
margin: 0 auto;
부모에게 overflow: hidden; or
위에 있는 코드가 뭔지 확인하지 않아도 되서, clear:both 일반적으로 많이 사용
%로 주면 가득찬 상태로 비율만큼 가득차게 변신!
테이블의 헤드, 바디, 풋!
볼드를 어떻게 하지 고민이었는데, text-가 아니라 font-였다..!!
아니면 td말고 th로!
15. HTML 목록 태그
16. 폼 태그
리스트 종류 : ol, ul, dl
리스트 아이템(데이터) : li, </li>는 생략가능
<ol type="A"> ABCD..
<ol type="a"> abcd..
list-style-position: inside;
을 사용하면 동그라미까지 영역 확대 (디폴트 값은 outside)
display : inline; 사용하면 블록이 옆으로! 메뉴 비슷한 느낌
float: left;의 부모 위치에 overflow: hidden; 사용
✅ 검색어➡키워드(query) = 검색어(css)
query=css
검색어 : <input type="text" name="query">
query라는 상자로 지정해줘야 함
<input type="text" list="countries">
<datalist id="countries"> ⬅⬆ 두개 같아야함!
✅
checkbox는 네모난 박스 (복수 선택 ⭕)
radio는 동그란 박스 (복수 선택 ❌)
name 속성 값이 같은(같아야 함) 라디오버튼들이 하나의 그룹 형성
✅ name이 다르면 하나만 체크가 안됨!
<form name="fo" method="get"> : get은 주소창에 노출⭕
<form name="fo" method="post"> : post는 주소창에 노출❌
disabled : 수정하지 못하게! (비밀번호 찾을 시 ID)
readonly : 읽을수만 있게
실습
마음의 소리😁
왼쪽은 과제, 오른쪽은 나의 작품..
❔의문
한글을 옆으로 밀어내고 싶습니다..
❔의문
코딩 숙련도 아래 가운데 분할 하는 법..
17. 반응형 웹
반응형 웹 장점
- 기기의 화면 크기나 해상도에 영향❌
- 화면 변화 즉시 반응
- 어느 기기에서나 사이트 주소가 동일
- 유지 관리가 편함
미디어 쿼리 기본 문법
@media [only 또는 not] [미디어 유형][and 또는 ,] (조건문) {
실행문
}
screen and (max-width:320px) : 320px 이하일 때 max를 사용할 땐 큰 순서대로
screen and (min-width:320px) : 320px 이상일 때 min 을 사용할 땐 작은 순서대로
18. 플렉스 박스
displa: flex;
flex-direction : row; row-reverse; column; column-reverse;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
✅justify-content 속성 🌟
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
✅ align-items 속성
align-items: baseline;
큰 글자의 바닥선을 기준으로 정렬
✅ align-items: 한 줄일때 사용하기 좋음
align-content: 속성: 여러줄 일 때만 사용 가능
flex-flow: row wrap; 되어있어야 함
align-content: flex-start;
align-content: space-between;
align-content: space-around;
align-content: stretch;
✅ flex-basis: auto; 인 경우 아이템의 width, height가 우선 적용
flex-basis: auto; 가 아닌 경우 flex-basis 가 우선 적용
✅ felx 속성에 값이 한 개인 경우 flex-grow가 적용
✅felx 속성에 값이 두 개인 경우 :
두 번째 값이 단위⭕ flex-basis (기본 사이즈를 지정)
두 번째 값이 단위❌ flex-shrink
✅ felx 속성에 값이 세 개인 경우
1. flex-grow가 적용
2. flex-basis가 적용
2. flex-shrink가 적용
🎮 재미있던 게임 실습
Flexbox froggy
• https://flexboxfroggy.com/#ko
역시나 보스맵은 어렵다..
flex-wrap: wrap-reverse; // 여러줄 표시 + 시작 끝점 뒤집기
flex-direction: column-reverse; // 가로정렬을 세로정렬로 바꾸기
align-content: space-between; // 첫번째 아이템과 끝 아이템을 시작점과 끝점 배치 후 나머지 같은 간격
justify-content: center; // 개구리 중앙배치
마무리! 개구리 댄스타임!🐸
실습
헤더랑 푸터를 옆으로 눕히고 위 아래로 내리고 싶다..🤯
힘들고 어려웠던 flex 실습...😭😭
19. 플렉스 박스2
20. 구글 클론코딩
21. 그리드 레이아웃
✅ 높이 꽉 차게 만들기
1. 부모와 자식에 둘 다 100%로 하기. 부모 높이가 지정이 되어야 함
2. .container { height:100vh } 눈에 보이는 화면 전체를 다 사용
살기 좋은 세상..😎
calc라는 함수에 넣어주면 뚝딱 완성!
초안(밑 그림)을 만든 후 마크업!!
큰 틀은 그리드, 자잘한건 플렉스 사용!
grid-template-columns: 1fr 1fr;
fr(fraction) 단위 : 그리드 레이아웃에서 상대적인 크기를 지정하는 단위
grid-template-rows: minmax(100px,auto);
minmax() 함수 : 최소값 최대값을 지정하여 줄 높이를 유연하게 지정하는 함수
grid-auto-rows: 100px;
자동으로 줄들이 100px을 가짐 but 고정값이기 때문에 데이터가 많아지면 다 짤림
grid-auto-rows :minmax(100px, auto);
최소 100px , 커지면 자동으로 조절
grid-template-areas:
/* 한 줄에 들어갈 영역을 따옴표로 묶음 */
/* 비워 둘 영역은 마침표(.)를 넣음 */
"box1 box1 box1"
"box2 box3 box3"
"box2 . box4"
". box5 ."
"box6 . . ";
클론코딩을 더 해봐야겠다..! 이번주 실습까지 마무리 완료!
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 2주차 블로그 포스팅
