U_D

1.float 정리 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성 해보면서 알아야하지만.. 단순히 말하면 필요한 영역을 지정하고 각 div들을 float로 띄우게 되면 영역의 크기에 따라 옆으로 나열할 수 있게 하는 기능중 하나이다. float: left; float: right; float: none; float: inline-start; float: inline-end; left : 요소가 자신의 포함(containing) 블록의 좌측에 부동(float, 떠움직여)해야 함을 나타내는 키워드 right : 요소가 자신의 포함 블록의 우측에 부동해야 함을 나타내는 키워드 none : 요소가 부동하지 않아야 함을 나타내는 키워드 inline-start : 요소가 자신의 포함 ..

1. CSS Position이란? position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정 top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정 사용법은 기준을 잡는다. (예- position: relative;) 이동시킨다. (예- top: 50px;) 2. Position 속성 static : 기본 상태로 포지셔닝이 안된 기준 x 상태 relative : 요소의 현재 잡은 자리 기준 fixed : 현재 보고있는 브라우저 기준 absolute : 가장 가까운 포지셔닝이 된 조상(Ancestor) 요소가 기준 stickey : 스크롤 영역 기준 3. 요소 위치 속성 Position의 기준에 맞춰 네가지의 방향을 설정할 수 있다. top : 요소의 position 기..

태그 이름 /* 모든 태그 */ h1 { color: orange; } 클래스/아이디 /* 'important'라는 클래스를 갖고 있는 모든 태그 */ .important { color: orange; } /* 'favorite'라는 아이디를 갖고 있는 태그 */ #favorite { color: blue; } 자식 (children) /* 'div1' 클래스를 갖고 있는 요소의 자식 중 모든 태그 */ .div1 i { color: orange; } 직속 자식 (direct children) /* 'div1' 클래스를 갖고 있는 요소의 직속 자식 중 모든 태그 */ .div1 > i { color: orange; } 복수 선택 /* 'two' 클래스를 가지고 있는 태그 모두와 'four' 클래스를 가지..

HTML 요소의 레이아웃을 결정하는 가장 중요한 속성 중 하나 'display' 1. display의 종류 모든 요소는 딱 한 개의 display 값을 갖고 있습니다. 가질 수 있는 display의 종류는 1) display: none; 화면에서 사라집니다. 크기 자체도 차지하지 않습니다! 2). display: block; 일반적으로 설정하지 않아도 div가 갖게되는 기본값. (태그에 따라 기본값이 다를 수 있습니다.) 기본적으로 width 가 자신의 컨테이너의 100% 가 되게끔 합니다. 쉽게 말하자면, 가로 한 줄을 다 차지하게 됩니다. *기본 display 값이 block인 경우 , , , , , 3) display: inline; 컨텐츠를 딱 감쌀정도의 크기. block태그와 다르게 줄바꿈이 되..