국비교육 10일차 학습일지

국비교육 학습일지

유정월드 2023. 1. 9. 21:27

국비교육 3주차 시작!

1. 반응형 웹이란?

: 데스크탑, 모바일, 태블릿 등 다양한 디바이스에 따라 웹페이지의 사이즈가 조절이 되어 스크린의 해상도에 맞게 보여지는 것을 말한다.

*반응형 웹을 추천하는 이유?

1) 유지보수가 간편하다.

모바일 버전, 데스크탑 따로 버전이 나눠져 있으면 내용 수정할 때 개별 수정해야하므로 시간과 노력이 많이 가지만 반응형 웹은 모바일 버전, 테블릿 버전, 데스크탑 버전 등 모든 디자인을 하나의 HTML파일과 CSS파일에서 작업하기 때문에 유지보수가 쉬움

2) 모바일 점유율의 증가

웹 사이트를 만들 때 pc용 웹 외에 모바일용 웹을 별도로 만들거나 반응형 웹으로 만드는 것이 기본이다.

3) 마케팅에 유리하다.

마케팅 최적의 장소로 웹이 꼽힘.

반응형 웹 기술을 이용하여 전달하고자 하는 내용을 확실하게 전달

4) 검색 엔진 최적화 가능

검색엔진 최적화란 SEO라고도 하며 포털사이트 또는 검색사이트에서 사용자가 특정 키워드로 검색을 했을 때 나오는 검색 결과에서 상위권에 나타나도록 관리하는 작업을 말함.

주소가 모바일 웹, 데스크탑 웹으로 두 가지로 나뉘어지면 동일한 내용의 웹 사이트라도 검색 엔진이 판단할 때는 둘 주엥 어떠한 주소의 정보가 정확한 정보인지 확인하기 힘들어 검색결과에서 제외 시킴.

즉, 상위권 배치에 상대적으로 불리해짐.

주소가 두 가지라 광고 비용도 두배로...

5) 미래 지향적 기술이다.

2.반응형 핵심 기술 맛보기

1) 가변 그리드 - px을 %러

: 가변이란 웹 사이트가 늘어나거나 줄어드는 성질

: 그리드란 웹 페이지의 가로 크기 또는 세로 크기, 여백, 단 등 우ㅐㅂ사이트의 구조 설계를 위한 제어

2) 뷰포트 - 화면 제어

: 화면에 보이는 영역을 제어하는 기술로 미디어 쿼리로 수 많은 기기의 화면 크기를 감지해야 할 때 필요

3) 미디어쿼리 - 화면 크기나 환경을 감지하여 구조 변경

: 컴퓨터나 기기에게' 너는 어떤 종류의 미디어니?화면 크기는 어느정도되니?'라고 질문을 하는 작업을 컴퓨터 용어로 '질의', '쿼리', '쿼리작업'이라고 부른다.

1.가변 그리드

- 가변 그리드 공식 이해하기

(가변 크기로 만들 박스의 가로너비 + 가변 크기로 만들 박스를 감싸고 있는 박스의 가로너비)*100=가변 크기의 %값

예) (300px/960px)*100=31.25%

- 가변 마진

-가변 패딩

2.calc 함수

: 계산을 해주는 속성

: 기존 자바스크립트로 하던 계산을 대신해줍니다.

: 표현식은 +,-,*,/ 등의 사칙연산이 가능 (기호 양쪽으로 공백 삽입 필수)

예) 100%-100px을 제외한 너비 크기 만큼 사이즈를 만들고 싶다.

=> width : cala(100% - 100px)

3. 가변폰트

:폰트 단위 em, rem, vw, vh, vmin, vmax

4.가변이미지와 동영상