할머니의 콤퓨타 도전기

float 이미지와 텍스트를 어떻게 배치할 것인지 정리하기 위해 나타난 아이 float: left 이미지가 왼쪽에 배치되고 텍스트가 이미지를 감싸면서 배치 flex 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성 continer를 꾸며줄 수 있는 속성 값들 display display: flex; flex-direction 기본값은 row row-reverse : 오른쪽에서 왼쪽으로 column column-reverse flex-wrap 기본값 nowrap item이 한줄에 붙어 있음 wrap 한 줄에 꽉 차면 다음 줄로 넘어감 flex-flow column nowrap flex-direction과 flex-wrap 합친 것 justif..

viewport 사용자가 웹페이지를 볼 수 있는 영역 기존 컴퓨터 화면을 휴대기기에서 보면 확대해서 봐야하는 불편함이 있음. 이를 해결하기 위해 각각 기기에 맞는 크기로 브라우저들이 크기를 인식해야 했음. 이 때 사용하는 태그가 뷰포트를 제어하는 뷰포트메타태그 html 문서에 대한 메타 데이터를 정의 항상 태그 내부에 있으며 일반적으로 문자 집합, 페이지 설명, 키워드 및 뷰포트 설정 지정 viewport 메타태그 width=device-width는 장치의 화면 너비를 따르도록 페이지 너비를 설정 initial-scale=1은 브라우저에서 페이지를 처음 로드할 때 초기 확대/축소 수준 설정 태그의 rel 속성은 현재 문서와 외부 리소스 사이의 연관 관계 명시 예를 들어, 속성값 alternate는 프린..

라이프 사이클 단계를 크게 나누면 인스턴스의 생성, 생성된 인스턴스를 화면에 부착, 화면에 부착된 인스턴스 내용이 갱신, 인스턴스가 제거되는 소멸로 구성 (부착 --> 갱신은 데이터가 변경되는 경우에만 거침) 인스턴스 생성! new Vue() 이벤트 및 라이프 사이클 초기화 beforeCreate 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계 data 속성과 methods 속성이 인스턴스에 정의되어 있지 않고, 돔과 같은 화면 요소에 접근 불가 화면에 반응성 주입 created data, methods 속성에 정의된 값에 접근하여 로직 수행 가능 인스턴스가 화면 요소에 부착되기 전이기 때문에 template 속성에 정의된 돔 요소로 접근할 수 없음 data 속성과 methods 속성..

display 속성 페이지의 레이아웃을 결정하는 속성 모든 HTML 엘리먼트는 display 값을 갖고 있으며 대부분 block이거나 inline display 속성 종류 block 기본적으로 하나의 줄을 차지하고 가능한 최대의 가로 넓이를 가짐 대표적인 태그에는 div, p, form, header, section 등이 있다. inline 특정 텍스트를 감싸하는 형태의 디스플레이 속성 대표적인 태그에는 span, a 등이 있다. inline-block 줄 바꿈 없이 다른 인라인 엘리먼트와 나란히 배치되는 디스플레이 속성 대표적인 태그에는 button이 있다 flex 화면의 비율을 기준으로 레이아웃을 구성할 수 있는 최신 레이아웃 속성 none 화면에 표지되지 않음 대표적으로 script 태그가 있다. ..

문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다. CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정한다. 하나의 박스는 이처럼 네 영역으로 이루어진다. Content, Padding, Border, Margin 영역이 있다. content area 글이나 이미지, 비디오 등 요소의 실제 영역을 포함한다. 배경색과 배경 이미지를 가지고 있기도 한다. box-sizing 속성의 값이 기본 값인 content-box block level의 요소인 경우, 컨텐츠 영역의 크기를 width, min-width, max-width, height, min-height, max-height 속성을 사용해 명시적으로 설..

classList 자바스크립트에서 클래스 이름을 조작하는 것 클래스를 조작하는 다양한 메서드를 쓸 수 있다 classList.add(): 클래스를 필요에 따라 삽입 classList.remove(): 클래스를 필요에 따라 제거 classList.contains(): 값이 존재하는지 체크 (True/False) classList.toggle(): 클래스 값이 있는지 체크하고 없으면 더하고 있으면 제거 function updateItems(items, key, value) { items.forEach((item) => { if (item.dataset[key] === value) { item.classList.remove("invisible"); } else { item.classList.add("invis..