css final project를 통해 responsive web, media query 익히기
먼저, mobile일 때와 desktop일 때의 layout(grid) 비교하기!
grid system 관련한 것부터 markup 시작하기!
css에 스타일 할 때는 mobile만 보고 만들기!(desktop 신경❌)
Landing Section
-
mobile일 때와 desktop일 때의 화변을 비교할 때, 글자 크기와 여백이 늘어나는 정도이며 전체적으로 grid로 인한 layout 변화가 없을 때는 column 변경없이 동일하게 설정(col-12,
col-md-6) -
버튼으로 보이는 요소를 눌렀을 때 '다른 페이지로 이동'하는 역할이면 anchor 태그를 사용하여 만들고,
두 개의 버튼이 나란히 가로 배치가 되어 있다면 버튼들을 감싸주는 부모 요소 div 태그에 flex를 적용 -
중간에 줄바꿈하는 의도의 디자인이라면 html에서 <br / > 태그를 작성
-
버튼은 프로젝트 내 여러번 사용되는 경우가 있기 때문에 class명을 global한 이름으로 짓고 공통 스타일 적용.
보통 버튼의 크기를 padding값을 이용해 지정하는데 규칙 없이 모호한 경우, width와 height를 확인해 규칙적이라면 너비와 높이로 버튼 크기를 설정
=> padding 또는 width, height에서 동일한 규칙을 가진 경우를 선택해 요소의 크기를 설정! -
버튼을 만든 anchor 태그는 inline 요소로 width와 height를 설정할 수 없다. inline-block 성격을 가진 flex 형태인 inline-flex로 변경(block이나 inline-block도 가능)
-
css 선택자 작성 시, 클래스명 띄어쓰기에 따라 의미가 달라짐
❇ 띄어쓰기 없는 경우
.fill-button.inverted => fill-button 이자(and) inverted인 요소
❇ 띄어쓰기 있는 경우
.landing .button-group => landing (부모)요소 안에 button-group (자식)요소
<section class="landing">
<div class="button-group">
<a href="#" class="fill-button"> Apply now </a>
<a href="#" class="fill-button inverted"> Learn more </a>
</div>
</section>-
하나의 section(전체 중 한 페이지) 크기를 정할 때, padding값을 적용할 것인지 viewport 전체 height만큼 요소를 채울 것인지 정해야 한다.
만약 화면 크기가 w: 320, h: 568이라면, iPhone SE 해상도임을 파악하고 height를 100vh로 설정한다.
=> 상하좌우 규칙적인 padding값인지 또는 특정 모바일 해상도를 가진 width, height인지 확인하여 가장 적절한 속성을 이용해 section 크기를 설정! -
아래의 태그들은 bootstrap에서 제공된 grid system과 관련된 클래스로 (grid system 기본 설정) width, height, padding-left/right, margin-left/right 수정이 절대 불가하므로 가급적이면 부트스트랩 클래스의 '스타일'은 절대로 건들지 않는다.
<section class="landing">
<div class="container">
<div class="row">
<div class="col-12">
<!--
<div class="landing-content">
<h1 class="landing-title"></h1>
<p class="landing-desc"></p>
...
</div>
-->
</div>
</div>
</div>
</section>.landing에 100vh를 주고 flex로 정렬해도 동일하게 작동하지만, bootstrap grid system이 적용된 container를 정렬하게 되는 것이다. (.landing에 모든 역할을 부여하기보다 역할을 구분하여 코드 작성하는 것을 추천!)
- .landing: landing section, landing과 관련된 요소들을 감싸는 가장 상위 요소
- .landing-content: landing section에 들어가는 내용(grid 관련 요소를 제외한 순수 콘텐츠) 콘텐츠들의 묶는 부모 요소(정렬하고자 하는 요소의 직계부모로서 flex 적용시키기 매우 적절!)
🤔 section 태그인 .landing 안에 (flexbox로 구현되어 있는) bootstrap grid system 클래스가 사용되고 있기 때문에 .landing에게 flex를 처리하지 않고, (중첩 flexbox 권장❌)
.col-12안에 들어있는 요소들을 정렬하는 역할로만 수행되는 .landing-content 클래스를 생성해 flex를 처리한다.
- mobile 화면일 때 설정한 'height: 100vh;'를 desktop 화면일 경우 해당 속성값을 해제하기 위해 'height: auto;'를 설정한다. (desktop 화면은 padding값을 적용하여 화면 크기 지정)
즉, 자식 요소들의 세로길이 합만큼 height가 자동으로 정해진다.
