개발관련 기억하고 싶은 문장들 HTML & CSS ver.

HTML은 원래 위에서 아래로, 블록 수준 요소들을 순차적으로 나열하며 내용을 표시합니다.

inline 성질을 갖도록 하는 CSS property는 display와 float이 있습니다.

absolute 값을 갖게 되면, 내용의 크기만큼만 가로크기가 됩니다.

left: 50%;으로 부모 너비만큼의 50%를 이동시켜주세요.
부모의 50%이라는 의미는, 부모가 100px이었다면, 이미지가 left: 50px으로 이동했다는 뜻입니다. 사과이미지의 왼쪽시작선이 50px에서 시작하게 되죠. 그래서 사과가 차지하는 영역은 50%+20px입니다. 한가운데 지점에서 이미지가 시작하고 20px만큼 차지했으니 이미지의 중심점이 한가운데가 아닌것입니다. 다시 사과이미지의 반만큼 왼쪽으로 이동시키면 이제 한가운데로 이동하게 됩니다. margin-left: -10px;를 추가해주세요.

layout이란 웹사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것이다. 공간을 분할할 때는 먼저 행을 구분한 후, 행 내부 요소를 분리하는 것이 일반적이다.

An article tag should make sense on its own, and it should be possible to distribute it independently from the rest of the web site.

Can we use the definitions to decide how to nest those elements? No, we cannot! So, you will find HTML pages with section elements containing article elements, and article elements containing section elements.

영역 구분 태그 모음
https://www.w3schools.com/html/html5_semantic_elements.asp

float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 부모를 벗어나는 경우가 있다.

aside을 좌측정렬, section을 우측 정렬한다. 이때 float 프로퍼티 요소를 감싸는 wrap 요소에 clearfix을 부여하여 float 프로퍼티가 선언된 두개의 자식 요소를 포함하는 부모 요소의 높이가 정상적인 값을 가지지 못하는 문제를 해결해야 한다.

브라우저는 박스 모델의 크기(dimension)와 프로퍼티(색, 배경, 모양 등), 위치를 근거로 하여 렌더링을 실행한다.

웹디자인은 콘텐츠를 담을 박스 모델을 정의하고 CSS 프로퍼티를 통해 스타일(배경, 폰트와 텍스트 등)과 위치 및 정렬을 지정하는 것이라고 할 수 있다.

width와 height 프로퍼티는 요소의 너비와 높이를 지정하기 위해 사용된다. 이때 지정되는 요소의 너비와 높이는 콘텐츠 영역을 대상으로 한다.
이는 box-sizing 프로퍼티에 기본값인 content-box가 적용되었기 때문이다. box-sizing 프로퍼티에 border-box를 적용하면 콘텐츠 영역, padding, border가 포함된 영역을 width / height 프로퍼티의 대상으로 지정할 수 있다.

width와 height 프로퍼티의 초기값은 auto로써 이것은 브라우저가 상황에 따라 적당한 width와 height 값을 계산할 것을 의미한다.
예를 들어 block 요소의 경우, width는 부모 요소의 100%, height는 콘텐츠의 높이(+ 약간의 여분)가 지정된다.

width와 height 프로퍼티를 비롯한 모든 박스모델 관련 프로퍼티(margin, padding, border, box-sizing 등)는 상속되지 않는다.

margin 프로퍼티에 auto 키워드를 설정하면 해당 요소를 브라우저 중앙에 위치 시킬 수 있다.

fixed 프로퍼티은 부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표 프로퍼티(top, bottom, left, right)을 사용하여 위치를 이동시킨다. 스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.

The next option for the CSS position property is absolute, which locks the element in place relative to its parent container. Unlike the relative position, this removes the element from the normal flow of the document, so surrounding items ignore it.
One nuance with absolute positioning is that it will be locked relative to its closest positioned ancestor. If you forget to add a position rule to the parent item, (this is typically done using position: relative;), the browser will keep looking up the chain and ultimately default to the body tag.

Percent is a measurement unit relative to the containing block.