Study Note

Meta tag는 웹페이지가 담고 있는 컨텐츠가 아닌 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 HTML 태그를 의미한다. 웹페이지의 컨텐츠에는 아무 영향을 주지 않으며, 검색엔진과 같은 기계들이 웹페이지를 읽어야할 때, 메타 태그의 내용들은 해당 서비스에서 어떻게 표시될지를 결정하는 매우 핵심적인 요소가 되며, 검색엔진 최적화 (SEO) 등을 통하여 검색에 노출되도록 해준다. 활용예시 인코딩 지정 호환성보기 기능 활성화 화면에 보이는 영역으로 너비를 현재 기기의 width로 정하고 이에 맞춰 초기 화면 배율을 1로 지정 Open graph 링크를 입력했을 때 화면에 미리보기 형태로 보여준다.

200: OK, 데이터를 요청하는 GET 요청이 정상적으로 이루어졌을 때 201: Created, 데이터를 생성하는 POST 요청이 정상적으로 이루어졌을 때 206: Partial content, 데이터를 일부 수정하는 PATCH 요청이 정상적으로 이루어졌을 때 400: Bad request: 클라이언트가 잘못된 요청을 보냈을 때 401: Unauthorized, 인증이 필요하나 인증관련 내용이 요청에 없을 때 403: Forbidden, 클라이언트가 접근하지 못하도록 막아놓은 곳에 요청이 왔을 때 404: Not found, 클라이언트가 요청을 보낸 곳이 잘못된 url일 때 500: Internal server error, 서버 쪽에서 코드가 잘못되었을 때

method: 서버 프로그램으로 어떻게 넘겨줄 것인가 (get, post) name: 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정 action: 내용을 처리해줄 서버 프로그램을 지정 target: action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함 autocomplete: 자동완성, 기본값은 “on” : 하나의 폼 안에서 여러 구역을 나눔 : 으로 묶은 그룹에 제목을 붙임 : LABLE NAME text: 한줄짜리 텍스트 입력하는 텍스트 박스 password: 비밀번호 입력하는 필드 search: 검색할때 입력하는 필드 url: URL주소를 입력하는 필드 email: 이메일 주소를 입력하는 필드 tel: 전화번호 입력하는 필드 checkbox: 주어진 여러 항..

Universal selector 문서의 모든 요소에 적용할 때 사용 모든 하위 요소에 스타일을 한꺼번에 적용할 때 사용하며, * 를 사용함 {속성1: 값1; 속성2: 값2;} Type selector (tag selector, element selector) 특정 태그를 사용한 모든 요소에 스타일을 적용함 태그명 { 스타일 규칙 } Class selector 클래스 이름을 사용해 다른 선택자와 구별, 클래스 이름 앞에 반드시 .을 붙여야 함 .클래스명 { 스타일 규칙 } 태그 안에 class=“CLASS” 처럼 클래스 속성을 사용해 지정 Id selector 특정 부분을 선택새서 스타일을 지정할 때 사용, id 이름 앞에 #을 붙여야 함 #아이디명 { 스타일 규칙 } 클래스 선택자는 문서에서 여러번 적..

Server Web server를 말한다. 서버는 네트워크를 통해 클라이언트에 정보 혹은 서비스를 제공하는 컴퓨터를 말한다. 웹페이지, 앱 등을 저장한 컴퓨터 웹 서버 애플리케이션을 통해 개발된 애플리케이션 Client 요청을 보내는 주체를 말한다. Web browser Application Server Clinet에서 server로 요청을 보내면 응답을 주면 브라우저에 웹 문서가 출력된다. (웹 브라우저만이 클라이언트가 되는 것은 아니며, 서버도 다른 서버에 요청을 보낼 수 있다) 웹 프로그래밍 HTTP로 통신하는 클라이언트와 서버를 개발하는 것을 말한다. 웹 브라우저 웹페이지에 접근하기 위해 사용하는 애플리케이션을 말한다. 브라우저와 서버는 리소스를 주고 받는 형식을 미리 약속으로 (프로토콜) 정해두..

Block과 inline으로 content가 배치된 것을 normal flow라고 한다. 하지만, 이것만으로는 정교한 레이아웃의 형식을 구성할 수 없기 때문에 float, position 등을 사용해야 한다. Float Left, right 지정 가능 워드에서 글 중간에 이미지 배치하는 것과 유사한 개념이라고 생각하면 된다. 단을 나눌때에도 사용 가능하다. Clear: both; 공간이 남을 때 float를 해제한다. Position 기본 값은 position: static; Top, bottom, right, left로 위치 지정이 가능하다. 워드에서 글 앞에 이미지 배치와 유사한 개념이라고 생각하면 된다. Position: relative; 기본 위치에서 값만큼 이동한다. Position: absol..

웹페이지를 만들 때에는 콘텐츠의 논리적 흐름에 따라 문서의 구조를 짜야 한다. 페이지마다 반복되는 머리말 부분을 말한다. 제목이나 로고, 짧은 소개말 등이 포함된다. Navigation bar 다른 페이지로 이동할 수 있는 메뉴 버튼이나 링크 등을 표시한다. Header에 포함되기도 한다. 본문의 주요 콘텐츠 블럭을 말한다. 문서에서 딱 한번만 사용해야 한다. Hero section: 웹페이지의 이목을 집중시키는 부분으로, 주목도 높고 가독성 높게 구성한다. Main content: 웹페이지에서 가장 큰 부분을 차지하며, 주된 내용이 담기는 부분을 말한다. Side content: 메인에 담기지 못한 부가적인 컨텐츠나 정보를 제공하는 부분을 말한다. 주소, 카피라이트, 연락처 정보 등이 포함된다. Hea..

Block 줄바꿈이 일어난다. 안에 다른 블록 요소나 인라인 요소를 포함할 수 있다. 양 옆에 다른 요소가 올 수 없다. 크기를 가질 수 있다. 의미를 가지지 않는다. 제목, 단락 요소 등 하나씩 특정한 의미의 콘텐츠를 담는 요소와 차이가 있다. 생성된 요소를 묶는 기능이 있다. id나 class속성을 사용해 문서 구조를 만들거나, 스타일을 적용할 때 class를 부여해서 의미 부여 가능하다. Inline 줄바꿈이 일어나지 않는다. 안에 블록 요소를 포함할 수 없다. 크기를 가질 수 없다. (width가 적용되지 않는다) display: inline-block; 을 사용하면 해결할 수 있다. 참고: Display는 보여주는 것만 담당하기 때문에 HTML의 속성에는 영향을 주지 않는다 , , , , 등 요..

Box model 요소들이 페이지에 배치될 때 모든 요소는 각각의 사각형 상자로 표현되는데, 이를 box model이라 한다. block-level element 주로 레이아웃을 결정하는 HTML sectioning tag 태그를 사용해 요소를 삽입했을 때 화면 전체를 사용해 혼자 한 줄을 차지한다. (= 요소의 너비가 100%) 좌우로 다른 요소가 올 수 없다. 다른 block 요소를 가질 수 있고, inline도 포함될 수 있다. , , , , , 등 inline-level element width를 지정하지 않아도 컨텐츠 만큼만 영역을 차지한다. 나머지 공간에는 다른 요소가 올 수 있다. 다음에 오는 tag는 줄바꿈되지 않고, 기본 흐름상 오른쪽으로 붙는다. , , 등 참고) inline-block..

CSS reset 모든 브라우저에서 통일된 화면을 볼 수 있도록 기본값을 초기화 하는 방식이다. 브라우저마다 제공하는 유저 에이전트 스타일이 있음 기본 스타일이 유용할 때도 있지만, 각각의 브라우저는 고유한 렌더링 방식을 가지고 있기 때문에, CSS reset을 사용하거나 normalize를 적용하더라도 필연적으로 다르게 보이는 부분이 발생하게 된다. 해당 값을 원하지 않아 매번 새롭게 선언해줘야 할 때도 있다. 이를 이해한 상태에서 사용자가 불편감을 느끼지 않는 디자인의 통일성을 줄 수 있는 방향을 고민해야 한다. 최근에는 필요한 부분만 초기화를 하여 사용하기도 하고, CSS normalize라는 기법을 사용하기도 한다. normalize.css 브라우저 에이전트 스타일의 오차를 줄이고, 브라우저가 가..