반응형 웹 -1일차

학습한 내용

반응형 웹 소개와 실습-반응형웹이란, 반응형 웹 핵심 기술

반응형 웹이란,
PC, 태블릿, 모바일 등 다양한 환경에서 화면에 맞게 레이아웃을 보여주는 것이라고 할 수 있다.

첫 번쨰로 static 레이아웃 설정 시, 화면이 줄어들게 되면 짤리는 것처럼 보이는 것을 확인 할 수 있다. 또한, 코드자체에서 픽셀로 폭, 높이 등을 픽셀로
지정해 주어 다른 영역들이 픽셀로 고정되어 있다.

두 번째로 fluid 레이아웃은 static과 다르게 픽셀로 지정해주는 것이아닌
% 비율로 지정해주기 때문에 화면이 줄어들었을 때, 영역들도 같이 줄어드는 형태를 확인 할 수 있다. 패딩, 마진도 %로 계산해서 넣어 주고, 최대한 오차를
줄이기 위해서 소수점 이하 3~4자리까지 나태난다.

반응형 웹의 기능을 사용하기 위해서 함수 특징을 알아보면,
viewport : 스마트 폰 화면에서 실제 내용이 표시되는 영역
width : 뷰 포트 너비
initial-scale : 초기 확대/축소 값(1~10) ex1. 1: 확대없이 원래 크기로
user-scalable : 확대 축소 가능 여부를 나태나고

또한, 외부에서 별도css파일로 작성해 링크해줄 수 있는데 다음과 같다.

첫 번째 실습.
pc,mobile 버전으로 지정 폭 기준으로
각 pc, moblie버전으로 한 h1을 나태내기


위에 설정한 코드처럼 먼저 99px기준으로 모바일 화면을 나태내려 했고,
600~767px 사이에서 h1설정과 100~599px사이의 설정을 다르게 하여 확인하였다.

또한, 단말기 가로 방향과 세로방향의 설정을 바꾸어주는 실습


두 번째 실습
지정 폭에서 폰트사이즈, 배경색 변경 레이아웃

다음과 같이 잘 변화하는 것을 확인할 수 있었다.

세 번째 실습
가로 메뉴가 지정 폭에 의해 세로 메뉴로 바뀌는 레이아웃
다음과 같이 style.css파일을 코딩을 해주고 확인해보면


다음과 같이 세로로 정렬되는 것을 확인할 수 있다.
그리고 주의해야할 점이 box-sizing을 해주지 않았기에
@media에 width설정 시 content, border, padding값을 모두 고려하여 변경해주어야 한다.

네 번째 실습
마지막으로, 위 메뉴 실습과 비슷하게 카드 형태의 콘텐츠를 이용해보았다.



다음과 같이 css파일을 설정해 준다.
기본 설정 - 세로 배치에서 중간 포인트 768px가 넘어서면 다음과 같이 가로로 배치되는 것을 확인할 수 있다.

또한 마지막으로 1716px이상에서는 가로 한 줄로 나타내는 것을 볼 수 있다.

학습한 내용 중 어려웠던 점 또는 해결못한 것들

학습하면서 어려웠던 점은 기본 정렬하는 거와 조건문 @media에서 설정해 줄 때
중복되는건 따로 설정하지 않아도 된다고 하셨는데, 조건문이랑 다른 조건문이 중복되는건 적어주어야 한다고 하셨는데, 처음에는 이해가 잘 안되었다.

해결방법 작성

위에서 말한 조건문끼리의 중복은 어느 한 조건이 만족되면 다른 조건은 일어나지 않는데, 따라서 적용이 되고 안 되고하는 차이이다.
즉, 기본 설정에서 color는 red, font-size는 20이였을 때
width 500px이상에서 color는 똑같이 font-size만 40이라고 가정할 때,
color부분은 중복이라 생략하고 font부분만 설정해 주면 된다.
또 여기서 width 700px이상일 때, color는 blue, font-size는 40이라고 가정할 때, 위 중복과 현재 중복은 font-size부분은 동일하다. 하지만, 이 조건이 실행될 때는 500px 조건문이 해당하지 않기에 font-size를 설정해주지 않으면 기본설정 20이 적용된다. 따라서 여기서는, color와 font-size 둘 다 설정해 주어야 한다.

학습 소감

반응형 웹을 처음 배우는 시간이었는데, width줄 때 margin이나 padding 고려하여 넣어주는 생각이 바로바로 떠오르지 않아 힘들것으로 예상되나, 조금더 공부하고 실습을 많이하면 고쳐질 것 같다. 또한, 정적인 페이지보다 더 예쁜 것같고, 나중에 다 배우고나서 나만의 페이지를 만들어 보고 싶다.