반응형 HTML2 display(block/inline/inline-block) display html태그를 통해 만든 요소들은, 초기설정된 디폴트 값 만큼 웹 화면상에서 제각각 일정 크기의 공간을 차지한다. display 속성을 사용하면 엘리먼트가 화면상에서 보여지는 방식을 변경할 수 있다. display 속성을 통해 부여할 수 있는 여러가지 속성값 중 가장 기본이 되는 세 가지가 (block/inline/inline-block)이다. block div태그,p태그로 감싸여진 엘리멘트는, 웹 화면 상에서 부모요소의 가로길이 100%만큼의 영역을 차지하도록 디폴트 값이 설정되어 있다. 이러한 성질을 갖는 요소들을 두고 block 속성을 갖는다고 표현한다. 'display:block;'속성의 엘리먼트는 width, height, padding, margin 값을 변경할 수 있다.(inl.. 2022. 9. 24. position(static/relative/absolute/fixed) 사용하는 이유 웹 제작을 하며 레이아웃을 배치하거나 객체 위치를 변경해야 하는 경우가 있는데, html/css에서는 객체가 xy좌표계 상에 위치하고 있는 것처럼 다룬다. ex) 상하좌우 방향으로 객체가 이동하길 원하는 만큼 픽셀단위로 'top:100px,left:50px'와 같이 값을 주는 식 이때 좌표계 개념을 사용하는 만큼, '왼쪽으로 50px 이동시킨다'라고 했을 때 어디를 기준으로 50px 만큼 이동시킬 것인지 그 기준점을 명확히하는 것이 중요하다. 객체마다 좌표계 기준점을 부여하고자 사용하는 개념이 바로 position 속성이다. 개별 속성 설명 css를 통해, 객체에게 position 속성인 [static/relative/absolute/fixed]중 하나를 부여하면, 그에 맞게 좌표계 기준점.. 2022. 9. 24. 이전 1 다음 반응형