반응형 웹 실습을 통해 느낀 점
반응형 웹 실습을 통해 느낀 점, 답답한 점, 알아차린 점 등등을 말해본다.
기본 시나리오
1. 서서히 줄이다가 767px에서 변화가 생긴다.
2. 더 줄이다가 450px에서 변화가 생긴다.
3. 기본 레이아웃 css 하나, 반응형 css 두개 만들자!
확실히 느낀 점 : 수업을 들으며 이해하는 것과, 직접 만드는 것은 천지차이.
New!!!!!
1. @media screen and (max-width:900px)
이 선언 밑에있는 스타일은 최대너비가 900픽셀입니다. 라는 의미이다.
= 즉, 901픽셀은 이 스타일을 받을 수 없다는 의미이다.
= 결국 900픽셀 이하에서 적용한다라는 의미.
하지만, 이 '이하'라는 부분을 외우려 하지말자.
처음부터 천천히 해석하자. 그러면 훨씬 이해가 빠를테니!!
body{background:black;}
@media screen and (min-width:481px) and (max-width:1280px){
body{background:red;}
}
@media screen and (max-width:480px){
body{background:green;}
}- 바디의 배경은 검은색입니다. (아래를 다 해석하니 얘는 1281~이 된다.)
- 이 선언 밑에 있는 스타일은 최소너비가 481px, 최대너비가 1280px입니다.(481 ~ 1280)
- 바디의 배경은 빨간색입니다.
- 이 선언 밑에 있는 스타일은 최대너비가 480px입니다.(~480)
- 바디의 배경은 초록색입니다.
2. 스타일을 재정의하지 않으면 그대로 스타일이 유지된다.
말 그대로, 재정의 한 스타일만 바뀌는 것이다.
바꿀 스타일만 선언하면 된다!!!!
3. 보통 무엇이 바뀌었나
보통 font-size, font-weight, margin, padding, button size, img size가 많이 바뀌더라.
피그마 시안을 받게되면, 하나만 보지말고 위의 속성에 유념하며 차이를 빠르게 알아가자!!!
아래부터는 갈피를 못잡는 부분들😂(반드시 언젠가 돌아와 해답을 낼 수 있기를!!!)
글씨부터 어렵다👽 어떡하지
피그마에서 알려주는 글씨 굵기만큼이 적용이 안된다...더 굵어야 하는데 마음처럼 쉽지 않다.
(어렴풋이 폰트를 가져올 때, 굵기들도 가져온다고 아는데 내가 덜 가져왔나?) ←꼭 해결할것
우선 나는 눈누에서 폰트를 가져왔는데, 눈누에서는 폰트사이즈?를 찾기 어려웠다.
폰트자체에 Bold폰트가 있기는 했었다.(폰트이름 Bold 이런식으로,,)
반면, 구글 폰트에서는 크기들을 불러올 수 있는 옵션들을 찾을 수 있었다.
Semantic plz
구조를 탄탄하게 짜기는 커녕 <p>파티였다.
Figma🤪
피그마 시안을 보는게 살짝 어렵다. 익숙치가 않아서인지...
<p>의 너비나 높이를 지정하는게 맞는건가...?
한번 제작하고 절-대 수정이 없다면 모를까, 내용의 추가들이 생길 경우 높이값을 지정하는 것은 바람직하지 못하다고 생각한다. 콘텐츠가 가진 자연스러운 크기를 그대로 가져가는 것이 중요하다고 보인다.
정렬이나 글씨크기는 충분히 CSS에서 다듬을 수 있기 때문에, 당장 '그렇게 보이기 위해서' 스타일을 지정하는 것은 지양해야겠다.
Button Size
버튼을 만든다고 했을 때,
너비와 높이 값을 지정하고, 박스사이징을 보더박스로 지정.
패딩 값을 주어 크기 지정.
line-height 값 지정. 등등등,,,
차이가 무엇인지, 어떻게 만들어야 하는지 감이 안온다.
(무아지경의 상태로 그냥 다 바꾸면서 만드느라 감이 전혀 안온다..)
이 부분은 아직도 딱 이해를 못했지만, 시나리오를 생각해보자
반응형 웹을 만든다는 시나리오
피그마를 확인한다. PC Tablet Mobile 각각 버튼을 확인해서 바로 패딩값을 보자!
패딩값이 동.일.하.다.면 주저없이 너비*높이 지정을 하지말고 패딩으로 처리하자.
그리고, 각각에 맞추어 폰트 사이즈와 라인 하이트를 조정해준다.
갑자기 줄이 왜 바뀌나
<br>의 사용을 지양하는 방향으로 짜고자 했다.
도중에 갑자기 세 줄이 되어버려서, 의도치 않게 html에서 새로운 클래스를 만들고,
디스플레이를 flex로 바꿔버렸다. 왜 바꿨는지도 기억이 나질 않지만, 결과물은 썩 괜찮았다.
mobile ↔ tablet ↔ pc
나는 PC레이아웃을 먼저 잡고, 태블릿, 모바일 순으로 스타일을 수정했다.
스타일을 입혀나가는 순서도 아직은 어렵다.
