⭐ 활용
를 사용 해서
단어를 묶음처리해서 하나의 단어로 만들기.
줄 바꿈 처리 자연스럽게 하기
❗
<br>태그를 사용해서 줄바꿈 처리를 하면 반응형 제작 시 부자연스럽다.
⭐flex:1;
단축 속성 사용 시 알아야 할 것
flex-item의 개별 속성
| 속성 명 | 기본 값 | 설명 |
|---|---|---|
| flex-grow | 0 | 증가 비율 없음 |
| flex-shrink | 1 | flex-container 너비에 따라 감소 비율 적용 |
| flex-basis | auto | 요소의 Content 너비 |
.child:nth-child(1){
flex-grow: 1;
/*
flex-basis: auto; 기본 값
*/
}
.child:nth-child(2){
flex-grow: 1;
/*
flex-basis: auto; 기본 값
*/
} 개별 속성 사용 시엔
flex-basis의 기본 값이 auto이므로
content영역의 너비를 제외한 나머지 영역의 비율로 맞춤flex-item의 단축 속성 flex
| 속성 명 | flex-grow | flex-shrink | flex-basis |
|---|---|---|---|
| flex | 0 | 1 | 0 |
| 설명 | 상동 | 상동 | 요소의 Content 너비 무시하고 비율대로 |
.child:nth-child(1){
flex: 1; /* 1 1 0*/
/*
flex-basis: 0; 기본 값
*/
}
.child:nth-child(2){
flex: 1; /* 1 1 0*/
/*
flex-basis: 0; 기본 값
*/
} flex: 1; 처럼
단축 속성 사용으로 나머지 옵션의 값을 생략하면
flex-basis의 기본 값이 0이 되므로
content영역의 너비를 무시하고 비율을 맞춤❓ 결론
즉, 단축 속성 사용 시 grow값을 표기 후 나머지 값을 생략하면(flex:1;과 같이)
flex-basis의 값이 0이 되므로 content의 너비는 무시 되는것을 알고 사용하자.
⭐동영상 비율 맞추기 (16 : 9)
16:9 는 너비 16, 높이 9의 비율을 갖는 가로세로비이다. 2010년대 이후로, 16:9는 텔레비전과 컴퓨터 모니터의 가장 일반적인 화면 비율일 뿐만 아니라 HDTV, 풀 HD, 디지털 텔레비전, 아날로그 와이드 스크린 텔레비전의 국제 표준이다.출처 : 위키백과
자식 요소의 높이 값을 주지 않고
padding-top의 값을 %단위로 주게 되면
해당 자식 요소의 padding의 높이 값은 부모의 가로너비의 %가 됨
이것을 바탕으로 동영상 최적 비율인 16:9를 계산하면
56.25%가 나온다
이렇게 패딩으로 자식요소.child의 영역을 잡아 놓고
그 안에서.video같은 자식 요소의 값을 위치상의 부모 요소.child를 기준으로
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: orange;
전체 쭉~ 펴주면.parent의width값이 변경 되어도16 : 9비율을 유지하게 된다!!!
⭐이미지를 부모기준 비율로 확대/축소
⭐반응형 메뉴 순서 변경
화면 크기가 변경됨에 따라 메뉴 노출 순서 변경하기(되돌리기)
뷰 포트의 크기가 변경됨에 따라 메뉴 순서를 변경해야 할때
기본 데스크탑 사이즈에서는 flex-container에는 display: flex;
flex-item에는 order로 순서를 지정해 놓고
특정 크기가 왔을 때 display:block으로 diplay값을 무효화 시키면..
원래 html DOM요소 순서대로 출력이 된다. (반대도 마찬가지고)⭐반응형 요소 비율 맞추기
float 사용
ex) 1 : 1 : 1 : 1 비율
grid 사용
ex) 1 : 1 : 1 : 1 비율
⭐반응형 미디어쿼리 css파일 분리
⭐반응형 웹 작업 시 주의점
미디어 쿼리 작업 시
뷰의 크기가 변경됨에 따라 작업해 놓은 스타일을 덮어 씌워야 하기 때문에
이전에 작성한 `선택자들 점수를 잘 고려해야 함..`
앞서 작업한 선택자의 점수가 높으면.. 적용이 안되기 때문에..
일치 선택자를 강제해서 사용해 점수를 높이게 되고..
만약 일치 선택자로 추가할 선택자가 더 이상 없으면 다시 `DOM`에 직접 추가를 하거나
더 높은 점수를 가진 선택자로 수정을 해야 하니..
구조도 바뀌고.. `휴먼에러`가 날 가능성이 높아진다..
또한 선택자 뎁스가 깊어지면서 복잡해져 눈에 잘 안들어옴..
!important를 사용할 수도 있지만
이건 최대한 small미디어 사이즈에서 최후로 사용하는게 좋겠다.