one Book a Day

//일부 예시일 뿐 공통 컨벤션은 아님.

폼태그 (form tag) user의 의견이나 정보를 알기 위할 때 사용 한다. 입력된 데이터를 한번에 서버로 전송, 전송한 데이터는 웹 서버가 처리하고, 결과에 따른 도 다른 웹 페이지를 보여준다. 동작방법 폼이 있는 웹 페이지를 방문 내용 입력 데이터를 웹 서버로 전송 서버는 받은 폼 데이터 처리를 위해 웹 프로그램으로 전송 데이터 처리 처리 결과에따른 새로운 html 웹서버로 전송 웹서버는 받은 html페이지 브라우저로 전송 브라우저는 받은 html 렌더링 폼태그 속성 action : 폼을 전송할 서버 쪽 스크립트 파일을 지정 name : 폼을 식별하기 위한 이름 지정 accept-charset : 폼 전송에 사용할 문자 인코딩 지정 target : action에서 지정한 스크립트 파일을 현재 창이..

meta tag 란? 웹 페이지의 보이지 않는 정보를 제공. 페이지에 대한 설명, 제작자, 크롤링 정책 등. SEO는 search engine optimization으로 ,meta tag를 이용해 description, keywords, author, subject, classification등의 정보를 표기할 수 있으며, 검색엔진은 이런 정보를 적극적으로 활용한다. name은 메타요소가 어떤 정보의 형태를 가지고 있는지 알려주고 content는 실제 메타데이터의 컨텐츠이다. lang속성 지정해야하는 이유(스크린리더가 지정된 언어를 인지해서 읽음) 만약 lang속성이en이고 중간에 한글내용이 있다치면 span lang="ko"로 문자열태그 처리하면 한글로 읽어준다. / 인코딩 지정집합 UTF-8(한국어 ..

Clean CSS clean modular Reusable Ready for growth CSS 구축 Think : about Layout of your webpage or app before writimg code Build : your layout in HTML and CSS with a consistent structure fornaming classes Architect : Create a logical architecture for your CSS with files and filders 1. Component-Driven Design(디자인에 대한 Thinking이 먼저.) modular building blocks that make up interfaces(컴포넌트 드리븐 디자인을 통해 페이..

CSS에서 사용하는 unit! 백분율, ems, rems,vh! 픽셀 이외의 단위를 사용할 떄마다 그것이 궁극적으로 px로 변한다는걸 알아야한다. 예측과 제어를 위해. 총 6단계 Declared value(author declared) - 선언된 값(140px, 66%) Cascaded value(after the cascade) - cascading으로 결정된 값 66% / font-size브라우저기본값16px Specified value(defaulting, if there is no cascaded value) 선언이 안된경우 initial value를 줌(padding의 경우 아무것도 원하지 않기 때문에 0px이 부여됨.) 부모에게서 상속 받을 수도 있음. Computed value(convert..

CSS HTML중요. 반응형 디자인 fluid layouts media queys responsive images correct units desktop-first vs mobile-first 유지가능하고 확장 가능한 코드작성 Clean easy-to-understand growth reusable how to organize files how to name classes how to strucure HTML 웹 성능 더 빠르고 크기를 작게 만드는 법.(사용자가 더 적은 데이터를 다운받아야함. Less HTTP requests less code compress code use a css preprocessor Less images Compress images 우리가 프로젝트를 하는동안 항상 자문해야될 것..

Rendering Tree 이후 Website rendering. CSS의 시각적 서식모델은 Dimensions of boxes: the box model Box type: inline, block, inline block Positioning schme: floats and positioning stacking context other elements in the rendertree(형제, 부모등) Viewport size, dimensions of images, etc. Box Model 웹 페이지의 레이아웃을 위해 알아야함. 요소가 어떻게 구성되는지 정의하는 요소 중 하나. 각각의 모든 요소는 웹페이지에서 사각형 상자로 볼수있다. 각 상자는 width height, padding 그리고 border..

영역과 기능에 따라 적절한 tag를 사용해야함(웹 접근성(web accessibility)과 SEO(검색엔진 최적화)를 위해) //영역구분이 확실해지면 그렇지 않은 문서보다 더 적절한 키워드가 추출됨 HTML5에서 새로 제공하는 시맨틱 태그들 본문의 주 내용이 들어가는 공간. 사이드에 위치하는 공간 // 본문과 직접 관련 없는 내용. 카테고리, 태그목록 등. 본문에서 주석 각주 figure안에서 부가설명. 독립적인 콘텐츠 문서 또는 섹션의 바닥//회사정보, 소유자 소셜미디어정보, 약관 등 문서. 부가정보 // header과 중첩불가. 헤더 // 문서 제목, 로고, 작성자, 작성일.(메타정보) // article이나 section내 부가정보 표현에도 씀. 콘텐츠//문서에 한번만쓰임. 본문. 콘텐츠 내용(a..

Component란? ​ 전체의 부분. ​ 하나의 덩어리라면? 높은 의존성을 가진다 재사용성이 낮다 규모가 큰 설계에 적용하기 어렵다. 프론트엔드에서 컴포넌트란? Ajax 이후로 사용자와 인터렉션 증가 -> 웹의 복잡도 증가 -> 복잡한 웹을 작게 나누기시작함. -> 웹을 효율적으로 설계할 수 있게 됨. 컴포넌트란? 엘리먼트 그룹을 반환하는 자바스크립트 함수 컴포넌트의 분리. Atomic Design 이란? 원자 : 유저 인터페이스를 구성하는 최소 단위의 블록. (ex. 버튼, 인풋, 폼같은 HTML태그들) 분자 : 원자가 모여 기능을 구현 유기체 : 원자, 분자, 유기체들의 조합(헤더영역) 하나 이상의 책임을 가짐. 템플릿 : 컴포넌트들을 배치하는 레이아웃. 단점 : 분리하는 기준이 모호. 원자 하나가..

JS는 싱글 쓰레드 자바스크립트의 메인 쓰레드인 이벤트 루프는 싱글 쓰레드이다. 하지만 이벤트 루프만 독립적으로 실행되지 않고 웹 브라우저나 NodeJS같은 멀티 쓰레드 환경에서 실행된다. 즉 JS는 싱글쓰레드지만 JS런타임은 싱글 쓰레드가 아니다. 싱글쓰레드로 병렬처리를 하는 방법. 기존 동기식 요청은 코드를 한줄 한줄 차례로 실행한다. 하지만 이렇게 되면 앞의 작업시간이 길수록 병목이 생기고 시간과 자원이 낭비된다. 요청이 완료될때까지 기다리지 않고 다른작업을 비동기 호출로 수행한다. JS의 비동기 런타임. Call Stack: 자바스크립트에서 수행해야 할 함수들을 순차적으로 스택에 담아 처리(메인 스택) Web API: 웹 브라우저에서 제공하는 API로 AJAX나 Timeout등의 비동기 작업을 실..