디케이

대부분 사이트는 전체 레이아웃이 수직 구성이며 ‘위-아래’로 스크롤 하여 사용합니다. 레이아웃을 구성할 때 가장 많이 사용하는 요소(Elements)들이 기본적으로 블록(Block) 개념으로 표시(Display)되며 이는 뷰(View)에 수직(위에서 아래로)으로 쌓이기 때문에 수직 구성은 상대적으로 쉽게 만들 수 있습니다. 하지만 수평(왼쪽에서 오른쪽으로) 구성의 경우는 상황이 조금 다릅니다. 문제는 수평 구조를 만드는 속성이 명확하지 않았기 때문인데, 그래서 많은 경우 나 float 혹은 inline-block 등의 도움을 받았습니다. 하지만 이러한 방법들은 다양한 문제(Clear, White space 등, 해결은 가능하지만..)를 가지고 있기 때문에 결국 수평 레이아웃 구성의 차선책일 뿐이며, 이제..

position 속성 정리 종류absolute, fixedrelativestatic너비본질겹침허용이동 최대한 줄어든다. 그대로 유지 그대로 유지 유령화, 유령의집화 유령의집화 사람화 겹치는게 가능 겹치는거 불가능 겹치는거 불가능 top, left, right, bottom으로 이동 - -

display 속성 정리 종류inline-block, inlineblocknone너비본질line 사용정렬 최소한으로 줄어든다. 최대한으로 넓어진다. 없어진다. 글자화 블록화 - 한 줄에 최대한 여러개가 나온다. 한 줄을 무조건 혼자 쓴다. - 부모의 text-align에 의해서 정렬 스스로 margin-left, margin-right를 사용해서 정렬 - 예외 a, img, span 엘리먼트는 기본적으로 display가 inline 이다. inline요소에는 width, height, margin, padding 속성이 제대로 적용되지 않는다.

HTML 관계 부모/자식 형/동생 태그 인라인 계열 span(div에서 display만 inline인 태그, 인라인 계열의 기본 태그) a : 링크 img : 이미지 블록 계열 기본 div(구분, 적절한 태그가 생각나지 않을 때, 모르면 div, 블록 계열의 기본태그) nav(내비게이션, 보통 메뉴 감쌀 때) section(섹션) article(아티클, 게시물) 제목 h1, h2, h3, h4, h5, h6 목록 ul, li : 순서 없는 목록 ol, li : 순서 있는 목록 CSS 노말라이즈 해당 엘리먼트에 기본적으로 적용되어 있는 디자인을 없애서 다시 평범하게 만든다. a, body, ul, li, ol, li, h1, h2, h3, h4, h5, h6 은 사용하기전에 노말라이즈 해야 한다. 선택자 ..