오전
미디어쿼리 : 반응형 웹을 제작하고자 할 때 사용한다.
사용법은
@media screen and (min-width:375px) and (max-width: 400px) {
/*코드 작성*/
} //가로너비 375 이상 400 이하일 때 미디어 쿼리 안의 css 를 적용한다는 뜻이다.
분기점 :
스마트폰 세로: 0px ~ 480px
스마트폰 가로, 태블릿 : 481px ~ 768px
태블릿 가로, 노트북 : 769px ~ 1279px
데스크탑 : 1280px ~ (1920px 까지 보통 많이 사용함)
이에 맞게 미디어 쿼리를 작성한다면
/* 노트북 & 테블릿 가로 (해상도 1024px ~ 1279px)*/
@media all and (min-width:1024px) and (max-width:1279px) {
//스타일 입력
}
/* 테블릿 가로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) {
//스타일 입력
}
/* 모바일 가로 & 테블릿 세로 (해상도 480px ~ 767px)*/
@media all and (min-width:480px) and (max-width:767px) {
//style 입력
}
/* 모바일 세로 (해상도 ~ 479px)*/
@media all and (max-width:479px) {
//스타일 입력
}
html 파일에서 바로 사용하지 않고 css 파일을 link해서 사용할 수도 있다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- desktop -->
<link rel="stylesheet" href="./css/desktop.css" media="all and (max-width:800px)">
<!-- mobile -->
<link rel="stylesheet" href="./css/mobile.css" media="all and (max-width:1200px)">
<!-- tablet -->
<link rel="stylesheet" href="./css/tablet.css" media="all and (max-width:1024px)">
</head> //800,1200,1024 px 마다 css 파일을 다르게 적용해서
각자 style 설정한대로 바뀌게 만듬.
오후
프로그래머스 클론코딩중
css 단위
vw,vh : viewport 에 맞게 화면 크기 설정
vmin,vmax : 너비값,높이값 최대,최소값 지정
rem : 최상위 태그에 지정한것을 기준으로 삼는 단위 (보통 html태그)
em : 부모 요소 폰트 사이즈를 기준으로 한 단위
(보통 사용하자면 rem이 더 접근성이 편리함. 왜냐하면 em은 부모 요소를 기준으로 하기 때문에 크기가 상대적으로 변경되기 때문)
% : 부모 요소 크기에 따라 비율을 차지함.
visibility : 생성된 박스를 렌더링할 것인지 정하는 속성
- visible : 박스가 보여짐
- hidden : 박스가 보이지 않지만 공간은 확보하고 있는 중이어서 레이아웃에 계속 영향을 미침
- collapse : 내부 테이블 객체에 적용됨. hidden과 유사함
- inherit : 부모 요소로부터 값을 상속받는다
gap : 자녀 요소들이 일정한 간격으로 떨어져있을 수 있도록 설정할 때 사용.
margin을 사용할 수도 있지만 인접한 요소들이 있을 때만 공간을 벌려주는 역할을 한다.
반면 margin은 설정하는 대로 다 띄워버린다.
상하좌우 사용 가능
div {
gap: 20%; //(상하좌우 설정)
}
div {
gap: 20% 2px; //(상하-좌우 설정)
}
display: grid : 2차원적인 레이아웃 시스템 (가로와 세로 모두 사용)
반면 flex box 레이아웃은 가로나 세로중 하나를 주축으로 정해놓고 사용(1차원적)
그리드 컨테이너를 지정하는
- grid-template-columns : 컬럼 지정
- grid-template-row : 줄 지정
상대적 크기를 지정하는 fr 단위
• 그리드 레이아웃에서 칼럼이나 줄의 크기를 지정할 때 픽셀(px) 단위를 사용하면 항상 크리가 고정되므로 반응형 웹 디자인에는 적합하지 않음
- grid-tamplate-column: 1fr 1fr 1fr; → grid-tamplate-column:repeat(3, 1fr)
- 같은 단위 반복일 땐, repeat 사용(횟수, 단위)
속성 종류들은 중요한 부분들은 일단 웬만한건 다 배운것같고
이제는 어떻게 선택자를 나눠서 잘 적용시킬지 그것을 제대로 배워야겠다. 결국엔 계속 해보는 방법밖에는 없는듯하다.
오늘은 몸이 안좋아서 그런가(핑계) 수업이 진짜 따라가기 힘들었다.
이해하면서 수업을 들은게 아니고 그냥 따라 치기만 한 느낌이다.
html 코드 치기 시작하면 기본 몇백줄 이라더니 진짜였네.
'Developer Note > 국비과정 수업내용 정리&저장' 카테고리의 다른 글
| 24년 08월 30일 (2) | 2024.09.01 |
|---|---|
| 24년 08월 29일 (1) | 2024.09.01 |
| 24년 08월 26일 (0) | 2024.08.27 |
| 24년 08월 23일 (0) | 2024.08.24 |
| 24년 08월 22일 (0) | 2024.08.24 |