챌린지 온보딩 당신의 코드는 기본에 충실한가요? (2일차)
2회차 질문
모바일 웹을 만들어 봅시다.
기본
Moblie first
- 모바일웹이 시작될 당시에는 모바일 기기임에도 미디어쿼리 미 지원 기기가 많았음.
- 데스크탑부터 작업을 하게 되면 오버라이딩이 많이 발생함
- 복잡한 구조를 줄이기 보다 단순한 구조를 늘리는 것이 쉬움
<meta name="viewport" content="width=device-width, initial-scale=1.0">- viewport
모바일 브라우저가 웹페이지를 어떻게 렌더링 해야 하는지 설정 - width
렌더링 영역의 크기를 설정, 보통은 device-width로 설정 - initial-scale
웹 페이지가 처음 로딩될 때 줌 레벨 제어
웹표준(web standards)
- 월드와이드웹(world wide web)과 관련된 기술의 표준 문법을 지키는 웹개발 기법
- 즉, HTML, CSS, Javascript의 표준 문법을 지켜서 코드를 작성
- 웹접근성과 함께 사용되는 경우가 많지만 서로 다른 개념
하지만 웸표준만 잘 지켜도 웹점근성은 90% 정도는 지켜짐
버튼은 무언갈 실행할때 사용하고, div에 a테그를 사용하는건 링크를 쓸때 사용하자.
웹표준의 중요성. 많이 부끄러워진다. 앞으로 웹 표준을 꼭 지키자.
block_inline / inline-block
- block: 새 줄 생성, 공간 생성
- padding, margin, height 가능
- inline: 콘텐츠 안에 생성, 공간 없음
- padding, margin, height 불가능 (좌, 우는 가능)
- inline-block: content 안에 생성되면서 공간도 생성
- padding, margin, height 가능
Reset css
- 코드를 작성하면서 필요한 부분의 reset css만 구성해서 사용하는 것을 추천
- 특히 전체 선택자(*)를 사용하지 말것
-> 필요없는 곳에 영향을 준다. - 유명한 reset.css을 가져다 쓰는 것은 좋으나 반드시 왜 리셋했는지를 알고 사용해야 함.
- html 에 font-size: 62.5% = 10px;
- 운영체제에서 화면을 확대 시켰을때 같이 적용시키기위해 고정 픽셀이아닌 퍼센트를 사용한다.
무작정 reset.css를 사용하기 보다 나에게 필요한 테그들을 왜 reset하는지를 이해하고 사용하자. 지금도 필요 테그들만 reset을 진행을 하고 있지만 의무성으로 사용 중이었는데 reset을 사용할때 한번 더 생각하게 된다.
float 해제 방법 5가지
1-1. clear:both
<div class="float_left">
<div>box1</div>
<div>box2</div>
<div>box3</div>
</div>
<div class="clear"></div>.float_left {
box-sizing: border-box;
width: 100%;
padding: 10px;
background-color: lightslategrey;
}
.float_left > div {
float: left;
}
.clear {
clear: both;
}1-2. clear:both (1번과 다른 방법)
<div class="float_left">
<div>box1</div>
<div>box2</div>
<div>box3</div>
<div class="clear"></div>
</div>.float_left {
box-sizing: border-box;
width: 100%;
padding: 10px;
background-color: lightslategrey;
}
.float_left > div {
float: left;
}
.clear {
clear: both;
}- :after & clear:both
<div class="float_left clear">
<div>box1</div>
<div>box2</div>
<div>box3</div>
</div>.float_left {
box-sizing: border-box;
width: 100%;
padding: 10px;
background-color: lightslategrey;
}
.float_left > div {
float: left;
}
.clear:after {
content: '';
display: block;
clear: both;
}- overflow:auto
<div class="float_left">
<div>box1</div>
<div>box2</div>
<div>box3</div>
</div>.float_left {
box-sizing: border-box;
width: 100%;
padding: 10px;
background-color: lightslategrey;
overflow: auto;
}
.float_left > div {
float: left;
}- float & width
<div class="float_left">
<div>box1</div>
<div>box2</div>
<div>box3</div>
</div>.float_left {
box-sizing: border-box;
width: 100%;
padding: 10px;
background-color: lightslategrey;
float: left
}
.float_left > div {
float: left;
}- display: flow-root
<div class="float_left">
<div>box1</div>
<div>box2</div>
<div>box3</div>
</div>.float_left {
box-sizing: border-box;
width: 100%;
padding: 10px;
background-color: lightslategrey;
display: flow-root
}
.float_left > div {
float: left;
}사실 flex와 grid로 해결하다보니 float를 잘 쓰지 않아서 '해제'라는 용어도 처음 들어보았고, float만 사용하면 레이아웃이 깨진다는것도 처음 알았다. 다른 누군가가 만든 웹 페이지 레이아웃이 float로 되어있을때 유용하게 사용할 수 있을듯하다.
html css를 하며 웹 표준이란 것에 잘 모르고 그냥 디자인대로 완성하면 끝이다 라고 생각했는데 강의를 들으면서 너무 부끄러워 졌다. 웹 표준을 잘 준수하고 더 나아가 접근성까지 생각하면서 html css를 만들 수 있게 자꾸 연습을 해주어야 될듯하다.
그리고 강사님께서는 모바일 우선으로 작업하는걸 추천한다고 하셨는데 이유를 들어보니 정말 모바일부터 하는게 맞는거 같기도하다.
이유는 미디어쿼리로 자꾸 css를 오버라이딩을 하게된다. 오버라이딩작업 자체가 기기가 연산을 한번이라도 더 하기 때문에 모바일로 먼저 만들면 오버라이딩 없이 모바일에서 작동하여 발열, 베터리 타임에 조금이라도 더 유리하고 데스크탑, 렙탑 등은 연산이 많아도 내부에 팬들이 있어 발열, 베터리 등에 모바일 기기보단 훨씬 여유롭기 때문에 모바일 우선으로 작업하는게 좋다고 생각한다.비록 모든 내용을 흡수하진 못했지만 정말 알차게 들은 강의였다.
