평행우주 : world 1

Flexbox로 레이아웃 잡기 display: flex 분석하기 부모 박스요소에 display: flex를 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성방법 기본값으로, display: flex가 적용된 부모 박스의 자식 요소는 왼쪽부터 차례대로 이어 배치 html box1 box2 box3 css #outer { display: flex; border: 1px dotted red; padding: 10px; } .box { border: 1px solid green; padding: 10px; } 결과 "display: flex"가 적용된 빨간 박스 내의 자식요소는 왼쪽부터 차례대로 배치됨 Flex 요소에 방향 지정하기 (flex-direction) flexbox는 박스가 수직으로 분할되는..

와이어프레임(Wireframe) 웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계로 가장 큰 목적은 화면 영역 구분 말 그대로 "와이어로 설계된 모양"을 의미하며, 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것 전환 효과나, 애니메이션, 사용자 테스트같은 스타일링 요소나 UX(사용자 경험, User Experience)는 제외 따라서 인터페이스를 그림으로 표현하는 형식 대신, 각 영역에서 사용할 주요 태그를 메모하는 형식으로 와이어프레임을 짜는 것이 좋음 목업(Mock-up) 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성하는 것 예를 들어 트위터 클론코딩에 앞서, 트윗 작성자, 트윗 내용, 작성한 날짜 등을 HTML 문서 내에 하드코딩하는 방식 레이아웃 리셋 H..

셀렉터 h1 { } div { } 전체 셀렉터 * { } Tag 셀렉터 section, h1 { } ID 셀렉터 #only { } class 셀렉터 .widget { } .center { } attribute 셀렉터 (암기할 필요는 없습니다) a[href] { } p[id="only"] { } p[class~="out"] { } p[class|="out"] { } section[id^="sect"] { } div[class$="2"] { } div[class*="w"] { } 후손 셀렉터 header h1 {} 자식 셀렉터 (후손 셀렉터와의 차이를 반드시 알고 있어야 합니다) header > p { } 인접 형제 셀렉터 section + p { } 형제 셀렉터 section ~ p { } 가상 클래스 a..

CSS Dinner : CSS selectors 관련 학습 https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 1분코딩 : CSS Flex 익혀보기 https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com GRID GARDEN : CSS grid layout 관련 학습 https://..

html에서 js를 포함할 때 어떻게 해야 효율적일까요? 안에 가 있는 경우 parsing html > blocked (fetching js > executing js) > parsing html(page is ready) 스크립트를 헤드에 포함하게 되면 사용자가 웹사이트를 보기까지 오랜 시간이 걸리는 구조 안 (끝쪽)에 가 있는 경우 pasing html >(page is ready) fetching js > executing 페이지가 js에 의존적인 경우 사용자가 유의미한 정보를 얻으려면 오랜 시간이 걸림 안에 가 있는 경우 parsing html (fetcing js) > blocked (executing js) > parsing html (page is readty) js 다운받는 시간 절약 ht..