css final project를 통해 responsive web, media query 익히기
(나의 경우 bootstrap에서 제공하는 grid system을 적용하지 않고 작성하여 이 점을 감안하고 내 코드와 다른점을 기록함.
flex를 이용한 요소들을 가운데 정렬, margin, padding값 적용하여 여백 생성 등 추가로 작성한 코드가 있음)
Service Section
-
두 개의 wrapper div element가 있고 사이에 간격이 있는 경우, 쉽게 description 1에 margin-bottom을 줄 수 있으나 코드가 깔끔하지 못하다.
형제 요소 간에 간격을 주는 것으로 (title1과 desc1이 속한) 첫번째 wrapper div element .col-12에 margin-bottom을 부여한다.
※ bootstrap에서 제공하는 grid system 관련 스타일들(.container, .row, .col-12)은 'width, height, padding-left/right, margin-left/right'을 절대 수정하지 않는다!! (위, 아래 간격을 조정하는 것은 가능)
-
mobile 화면의 경우 1번으로 설정한 여백을 desktop 화면에서 해제(auto와 다름)
.service .col-12:first-child {
margin-bottom: 0;
}Program Section
-
Program Section과 Curriculum Section이 font-size, margin 등 유사한 패턴을 가진 공통된 디자인임을 파악!
클래스명을 한 화면에 국한되어 이중으로 작성하지 않고, global한 클래스명을 지어 공통 모듈을 작성해 스타일 적용
(공통 스타일이 아닌 color와 같은 다른 스타일은 별도로 작성) -
desktop 화면일 때 'col-md-10'은 양쪽에 하나의 column씩 가진채 가운데 정렬되어 있는 요소의 스타일은,
(flex 속성인) row 클래스를 가진 태그에 bootstrap에서 기본적으로 제공하는 스타일인 'justify-content-center' 클래스를 추가하면 간편하게 스타일이 적용됨 -
1번과 유사하게 공통의 padding을 가지면 클래스를 추가해 공통 모듈을 작성해 동일한 스타일 적용
<section class="program section">
...
</seiction>
<section class="curriculum section">
...
</section>.section {
padding: 80px 0;
}- anchor 태그 안에 있는 image의 크기를 설정할 때 패턴을 찾는다. width값이 모호하고 height값이 일정하다면 아래와 같이 설정할 수 있음
(width는 height 기준에 맞춰서 비율대로 자동 지정됨)
.program-card img {
display: block; // image에 width와 height값을 부여하기 위한 설정
width: auto;
height: 195px;
}🔽 (grid.min.css 적용 없는)내 코드와는 다른 부분
(※ grid.min.css이 기본적으로 적용된 스타일임을 참고! 😂)
5-1. wrapper element인 program-card의 크기를 block 요소로 변경하고 width와 height가 아닌 padding-top/bottom값을 부여해 지정함
※ program-card를 감싸는 '.col-12'에 자동으로 'width: 100%'가 설정되어 있는 상태임😱
(나의 경우, program-card인 anchor 태그는 inline 요소이므로 block 요소로 변경하고 padding만으로는 박스 크기를 지정할 수 없어서 별도로 width와 height값을 설정)
5-2. program-card 안에 block 형태인 img 요소를 가운데 정렬하기 위해 'margin: 0 auto;'를 적용.
strong 태그를 가운데 정렬하기 위해 부모 요소에 'text-align: center;'를 적용
.program-card {
display: block;
padding: 24px 0 32px;
// inline 요소인 strong 태그를 가운데 정렬하기 위해 적용
text-align: center;
}
.program-card img {
display: block;
width: auto;
height: 195px;
// image를 가운데 정렬하기 위해 margin 속성을 사용
margin: 0 auto 16px;
}
.program-card strong {
}(나라면→) 만약 strong 태그에 직접 가운데 정렬하는 스타일을 적용한다면 block 형태로 변경해야함
(🤔 그렇지만 굳이 적용되어야 하는 특정 요소를 감싸는 부모 요소에 text-align을 적용하는 것인가? block 형태인 부모 요소에게 적용하는 것이 간편하기 때문에..?)
.program-card strong {
display: block;
text-align: center;
}- 요소들 간에 여백을 설정하는데 first-child 등의 가상요소를 사용하지 않고, 해당 요소는 공통적으로 desktop 화면에서 4개의 column의 영역을 가진 요소들로 '.col-md-4' 클래스를 선택자로 사용
(나의 경우, program 안에 또다른 '.col-md-4'를 가진 요소들이 있을 수 있으므로 first-child, nth-child(2)에 동일한 margin-bottom을 적용)
.program .col-md-4 {
margin-bottom: 20px;
}
.program .col-md-4:last-child {
margin-bottom: 0;
}📓 참고!
🧐 마우스 동작에 따라 값이 변하는 속성인 hover를 mobile과 desktop 모두에게 선언하는 이유?
🅰 모바일 viewport가 꼭 모바일 디바이스에서만 접속하는 것이 아니라, 브라우저 크기에 따라 일반 PC에서도 모바일 화면을 볼 수 있기 때문이다.
또한, 요즘의 테블릿, 모바일 PC에서는 외부 입력장치(예: 마우스)를 연결 시 포인터를 통해 hover가 적용된 모습을 볼 수 있으므로 모두 적용해주는 것이 좋다.
더불어 모바일에서는 focus, active가 없으면 클릭 시 hover값이 적용된다.
