할머니의 콤퓨타 도전기

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는 프린..

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 속성을 사용해 명시적으로 설..

HTML(HyperText Markup Language) 브라우저에서 실행가능한 가장 기본적인 파일 마크업 언어로 구조적으로 태그를 이용해 보여짐 상위 태그 상세설명 사용자에게 보여지는 ui 요소 없음 metadata (ex. 타이틀, 부가설명 ..) 사용자에게 보여지는 태그들로 이루어짐 Box vs Item Box Item Block vs Inline b , span tag는 inline. 다음 line으로 넘어가지 않음 div는 block level의 tag This is a sentence. That is .. This is a sentence. That is .. This is a sentence. That is .. label, input inline element Name: HTML eleme..

division의 약자로 웹사이트의 레이아웃을 만들 때 주로 사용 div는 웹페이지에서 논리적 구분을 정의 div 태그를 사용하여 각각의 블록(공간)을 알맞게 배치하고 css를 활용하여 스타일 적용 속성 style 의 스타일 지정 다른 속성들을 사용할 수 있게끔 해줌 width 의 가로 크기 지정 px(픽셀), %(비율) 단위로 지정 height 의 세로 크기 지정 px(픽셀), %(비율) 단위로 지정 border 의 테두리 굵기 지정 background-color 의 배경 색상 지정 float 의 정렬(좌, 우)를 하는 속성 가운데 정렬은 안됨 margin div의 정렬 기준 끝에서부터 여백을 주는 속성 margin-top, margin-bottom, margin-left, margin-right 예시