반응형 Web18 쿠키 Cookie란? 쿠키 Cookie란? 클라이언트 단에 저장되는 작은 정보 단위이다. 클라이언트에서 생성하고 저장될 수 있고, 서버 단에서 전송한 쿠키가 클라이언트에 저장될 수 있다. 서버에서 클라이언트의 브라우저로 전송되어 사용자의 컴퓨터에 저장한다. 저장된 쿠키는 다시 해당하는 웹 페이지에 접속할 때, 브라우저에서 서버로 쿠키를 전송한다. 쿠키는 이름(name)과 값(value) 쌍으로 정보를 저장한다. 이름 값 쌍 외에도 다양한 속성을 저장할 수 있습니다. ex) 도메인(Domain), 경로(Path), 유효기간(Max-Age, Expires), 보안(Secure), HttpOnly 속성 등 기존 브라우저에서 쿠키값들을 확인하고 싶다면 크롬의 개발자 도구를 활용할 수 있다. ※ 쿠키는 그 수와 크기에 제한 브라우저별.. 2021. 3. 4. 반응형 웹 사이트란? 다양한 Device가 등장하며 그에 최적화된 CSS 디자인을 보여지도록 되어있는 사이트 의미 https://vimeo.com/85914334 실제 웹 사이트에서는 화면을 작게 해도 아래처럼 변형되지 않게 되어있다. 그래서 데스크톱 PC용 브라우저를 기본으로 만들어진 곳을 모바일로 접속하면 글자 등이 작아 확대해서 볼 수 밖에 없다. 그래서 포털 사이트나 쇼핑몰의 경우에는 모바일 기기의 특성을 활용해 모바일 사이트를 별도로 제작하였다. 다양한 화면 크기의 모바일 기기들이 계속 쏟아져 나오는데 그 때마다 그 크기에 맞춘 사이트를 별도로 제작하는 것 투자 비용과 시간 및 인력이 만만치 않다. 그렇기에 반응형 웹 사이트를 제작하여 https://colly.com/ 처럼 화면 크기에 '반응'해 화면 요소들을 자동.. 2021. 3. 4. [HTML] HTML이란? HTML이란 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어 ※ HyperText : 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 이동하는 기능 기존의 텍스트가 전형적인 특징이 순서가 정해져 있다면, 하이퍼 텍스트는 순서가 정해져 있지 않고 여기저기 갈 수 있다. ※ Markup : 태그(tag)를 사용해 어느 부분이 제목이고 본문인지 표시하는 구조화를 의미한다. 블로그 이름은 까망 하르방이고, 블로그 주소는 https://zoosso.tistory.com/ 입니다. 위의 정보를 아래와 같이 표시할 수 있으며 까망 하르방 https://zoosso.tistory.com/ 실제 태그로는 아래와 같이 표시할 수 있다. 까망 하르방 링크 웹 문서(*.html 또는 *.htm)를 보는 프로그램 웹 문.. 2021. 3. 3. [HTML] HTML 기본 구조 웹 문서를 읽는 Web Browser는 HTML 코드를 한 줄씩 읽어가는데 크게 구분 짓는 / / / 를 살펴보자. : 현재 문서가 HTML5 언어로 작성된 웹 문서라는 뜻 : 웹 문서의 시작과 끝을 나타내는 태그 태그에서는 lang이라는 속성을 사용해 문서에서 사용할 언어를 지정 (한국어는 'ko') ※ 사용 언어를 명시하는 이유는? 1. 검색 사이트에서 '한국어로 된 문서'로 범위로 제한할 때, 우선 검색된다. 2. 화면 낭독기(Screen Reader)가 웹 문서를 읽어줄 때, 그 언어의 발음이나 억양, 목소시를 맞춰준다. 웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분 (문서에서 사용할 외부 파일들도 이곳에서 링크 link) : 문자 인코딩 방법, 웹 문서 키워드 등을 지정 .. 2021. 3. 3. HTML 태그 주석 <!-- --> 각 언어마다 주석 기능이 존재하며, 기호는 동일한 것도 있지만 다른 것도 존재한다. HTML 소스도 마찬가지로 주석 기능이 존재하며, 소스에만 표시하며 화면상에 보이지 않는다. ※ 모든 브라우저에 상관없이 지원 ※ CSS /* */과 // 로 사용 아래와 같이 HTML 태그 사이에서 영역을 구분할 때 사용되기도 한다. 2021. 2. 22. Chrome 개발자 도구 (F12) ✔️ 크롬(Chrome) 브라우저 (단축키 F12) 브라우저마다 개발자 도구를 제공하고 있다. 개발자 도구를 통해서 HTML/CSS 구조를 엿볼 수 있다. 한편으로 웹 개발을 하다 보면 Ajax와 같은 요청처리 문제가 발생할 수 있다. 이때, Ajax 통신에서 로직이 문제인지, 서버 쪽 문제인지 확인하고 싶을 때가 있다. 이러한 부분을 코드로는 디버깅하기 쉽지 않다. Ajax뿐만 아니라 HTML이나 CSS 조절이나 네트워크 동신 과정 상황을 보는데로 Chrome Browser 개발자 도구는 용이하다. - 녹화기능을 통한 HTML, CSS, JavaScript, image 파일 상황 - 404와 같은 응답 오류 문제 분석 - 서버 응답 시간 - Network Tab "Capture screenshots" .. 2021. 2. 21. [CSS] CSS 선택자 CSS 선택자(Selector)는 HTML 요소(Element)를 찾는 방법이다. tag로 지정하기 [css] span { color : red; } id로 지정하기 id 선택자는 HTML에 존재하는 유일한 Element에 적용할 때 사용가능. [css] #spantag { color : red; } [html] HELLO World! class로 지정하기 여러 요소에 적용하고자 한다면 class 선택자 활용. [css] .spanClass { color : red } [html] HELLO World! 요소 선택자 / 아이디 선택자 / 클래스 선택자 외에도 선택자 종류는 다양하게 존재한다. + 전체선택자(*) / 가상 클래스 / 수도 클래스 / 종속 선택자 / 하위 선택자 등 자손 요소 (중간에 공백으.. 2021. 2. 21. [jQuery] attr() 속성 값 가져오기 및 추가 attr() 속성 값 가져오기 및 추가 .attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가한다. ① 속성 값 가져오기 $('a').attr('href'); (현재 Page) 모든 a 태그의 href 속성에 적혀져 있는 값을 가져온다. * 태그 혹은 클래스 상관없이 선택자 이용해서 대상을 선정할 수 있다. ② 속성 값 추가 및 변경하기 $('a').attr('target', '_blank'); (현재 Page) 모든 a 태그의 target 속성을 _blank로 추가 및 변경한다. + 여러 속성값을 변경하고자 할 때는 json 형식을 이용할 수 있다. $('button').click(function () { $('#id').attr({ 'title' : '까망 하르.. 2021. 2. 21. 이전 1 2 다음 반응형
