개요
국비 지원 교육 인터넷 강의 1주차. 아무래도 전공자다 보니, 사전에 알고 있는 내용이 많이 있었다. 하지만 중간 중간 몰랐던 내용이나, 쓸때마다 막혔던 내용들이 있었기 때문에 그에 대해 정리해 보겠다.
반응형, 적응형
적응형 웹페이지
적응형 웹페이지란 브라우저에서 스크린의 크기를 인식해 PC로 판단될 때는 원래의 url을 이용하는 웹페이지를, 모바일로 판단될때는 모바일환경에 맞는 웹페이지가 있는 url로 리디렉션을 하여 사용자에게 제공하는 웹 페이지를 의미한다.
만약 PC 화면과 모바일 화면에서 제공하는 컨텐츠가 크게 다른 경우 적응형 웹페이지로 제작하는 것이 제작 및 유지보수에 수월하다.
네이버가 이와같은 형식의 웹페이지를 제공한다.
pc 환경 : www.naver.com
모바일 환경 : m.nvaer.com
반응형 웹페이지
반응형 웹페이지는 1개의 url로 제공된 페이지를 스크린의 크기에 따라 적절히 변화되도록 만들어진 웹페이지를 의미한다.
만약 컨텐츠의 내용이 많거나 복잡하지 않고 배치정도만 달라지는 가벼운 웹페이지라면 반응형으로 유연하게 페이지를 만드는 것이 효율적이다.
페이스북 같은 경우 반응형으로 제작된 대표적인 웹페이지 이다.
쿠키, 세션, 캐시
쿠키
쿠키는 사이트를 만드는 개발자가 특정정보를 사용자의 브라우저(컴퓨터)에 저장되도록 만든것이다.
브라우저에 저장되는 것이기 때문에 서로 다른 브라우저(크롬과 IE)는 쿠키를 공유하지 않는다.
또한 브라우저에 저장되는 정보이기 때문에 내가 언제나 보고, 수정할 수 있다. 그렇기 때문에 조작이나 변조등의 보안에 취약하므로 쿠키에 저장하는 정보는 한정되어있다.
쿠키에 저장되서는 안되는 정보
- 결제관련 정보
- 보안관련 정보
- 사용자가 임의로 조작해서는 안되는 정보
쿠키에 저장되도 무방한 정보
- 최근 검색 내역
- 로그인 전 장바구니에 담긴 상품 목록
세션
세션은 어떤 사용자의 정보를 서버에 저장하는 방식이다. 만약 어떤 사용자가 네이버에 로그인한 상태라면 그것에 관한 정보를 서버컴퓨터 내부에 저장해 가지고 있는 방식이다.
서버가 정보를 관리하기 때문에 쿠키와 달리 보안과 관련된 정보들을 가지고 있다.
그럼 보안에 취약한 쿠키 쓰지 말고 세션만 쓰면 되지 않나요?
세션은 서버컴퓨터의 자원을 사용하기 때문에 클라이언트가 많아질수록 서버에 부하가 심해지게 된다. 그렇기 때문에 모든 정보를 세션에 저장하는 것은 불가능하다.
세션과 쿠키가 동시에 사용되는 경우
세션과 쿠키를 동시에 사용하는 가장 대표적인 사례로 로그인을 꼽을 수 있다.
사용자A가 특정 사이트에 로그인 하면 서버는 세션에 사용자A가 로그인한 상태라는 사실을 가지고 있는다. 그러나 사용자 A는 내가 사용자 A 임을 서버에 로그인한 사용자 A 임을 알려줄수 있어야 한다. 만약 서버에 내가 사용자 A임을 증명하지 못한다면, 로그인시 할 수 있는 모든 로그인 기능들을 사용할 때 마다 새로 로그인을 하는 방식으로 서버에 증명해야 하기 때문이다.
이를 해결하기 위해 서버는 사용자가 로그인 할 때 세션 key를 사용자의 쿠키에 저장하게 한다.
그리고 사용자 A 가 향후 로그인이 필요한 서비스를 이용할 때 이 세션 key를 서버로 보내 자신이 세션의 주인임을 알려주는 방식으로 세션과 쿠키를 동시에 사용한다.
캐시
이미지나 용량이 큰 파일들을 접속시 따로 저장해 향후 해당 페이지에 다시 접근할 경우 이를 재사용해 빠른 시간에 로드할 수 있도록 해준다.
meta 태그의 이용
메타태그는 웹페이지가 담고있는 컨텐츠가 아닌 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 태그이다.
<meta chasrset = "utf-8"> : html 문서의 인코딩 방식을 의미한다. utf-8은 전세계 모든 언어를 지원하는 인코딩 방식으로 해당 html 문서가 utf-8로 인코딩 되었음을 알려준다.
<meat name="viewport content = "~~~" : 모바일시대가 열리면서 매우 중요해진 메타 태그의 활용법이다. viweport 라는 이름을 가진 메타 태그에서 다양한 content 속성으로 적절히 셋팅해 준다면 디바이스의 크기에 따라 페이지가 화면의 바깥으로 나가는 것을 막을 수 있고, 최초 접속시 페이지의 배율도 정해줄 수 있으며, 웹페이지의 줌인 줌아웃 등을 막을 수 있다.
content = "width=device-width'": 페이지의width를 device의 width에 맞춘다content = "initial-scale=1.0": 페이지 접속시 최초 배율을 정한다.content = "user-scalable=no": 페이지의 줌인 줌아웃을 막는다.content = "width=device-width,initial-scale=1.0,user-scalable=no":이와같은 방 식으로 쉼표를 통해 여러개를 동시에 적을 수 있다.
<meta http-equiv="X-UA-Compatible" content="ie=edge"> : IE의 호환성을 위해 제공되는 메타태그 이다.해당 html을 어떤 방식으로 읽을지 설정해 놓는 태그이다.
<meta name="description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요"> :
이처럼 name에 description을 사용한 메타태그가 있을 경우 해당 페이지가 어떤 페이지인지를 묘사하는 역할을 하며 구글과 같은 검색엔진에서 content의 내용과 함께 제공된다.
<meta property="og:title" content="네이버">
<meta property="og:url" content="https://www.naver.com/">
<meta property="og:image" content="~~~">
<meta property="og:description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">
위 태그들 처럼 og가 붙은 태그의 경우 페이스북에서 사용하던 형식의 태그인데 다른서비스에서도 적극적으로 사용한다. 위 태그가 있는 페이지라면 카카오톡에 해당 페이지의 url을 넘길때 다음과 같은 미리보기를 제공한다.
강의 화면에서 캡처 카카오톡에 나오는 네이버의 정보와 og: property의 내용아 같음을 확인할 수 있음
table 태그의 이용
<table> : 태이블을 정의하는 태그
<tr> : 테이블의 1줄을 나타낸다. 이 태그 안에 들어간 <th>,<td>들이 1줄을 구성한다.
<th> : table-header 즉 테이블의 제목임
scope ="col",scope="row"해당 테이블 헤더가 행의 것인지 열의 것인지를 알려준다.
<td> : table-data 즉 테이블 안에 들어가는 데이터임
colspan="2" , rowspan="2" : 해당 칸을 행으로 혹은 열로 팽창 시키도로록 하는 태그이다.
#패스트캠퍼스 #내일배움카드취업 #국비지원교육 #K디지털기초역량훈련 #프로그래밍기초
