프로그래밍 공부 노트

inline display 속성이 inline으로 지정된 엘리먼트는 줄 바꿈 없이 컨텐츠가 옆으로 나란히 나열된다. 대표적으로 <span> 태그가 inline 속성을 가진 태그이다. display: inline 속성을 사용할 때 주의할점이 있는데 width와 height 속성을 적용하더라도 무시된다. inline  속성은 무조건 해당 컨텐츠 크기만큼 width와 height가 고정이기 때문이다. 또한 margin과 padding 속성운 좌우에만 적용이 가능하고 상하에는 적용하더라도 무시된다. block display 속성이 block으로 지정된 엘리먼트는 해당 컨텐츠가 한줄을 모두 차지해 다른 컨텐츠가 줄바꿈이 되도록한다. 대표적으로 <div> 태그가 block 속성을 가진 태그이다. display: block 속성을 사용할 때는 inline 속성과 달리 width, height 그리고 margin, padding 속성이 좌우상하 모두 적용 가능하다. inline-block display 속성이 inline-block으로 지정된 엘리먼트는 위 두 속성(inline, block)을 하이브리드한 속성이다. 외부적으로 보여지는 표현되는 방식은 inline 속성과 같이 동작하지만 block 속성에서만 적용할 수 있었던 witdh, height, margin, padding 속성 적용이 가능하다. 즉, 외부적으로는 inline 속성처럼 동작하지만 내부적으로는 block 속성처럼 동작한다. 대표적으로 <button>, <input>, <select> 태그 등이 있다.

display 속성을 이용하면 블록 레벨 요소도 인라인 레벨 요소로 변경이 가능하며 반대로도 변환이 가능하다. display 속성의 경우 여러 경우에 사용되지만 일반적으로 세로로 출력되는 목록을 가로 네비게이션 메뉴로 바꿀때 사용한다. { display : block; } 블록 레벨 요소는 해당 컨텐츠의 크기가 아닌 해당 컨텐츠가있는 해당 행을 모두 차지하며 다른 컨텐츠가 추가되면 줄바꿈이 발생하게 된다. { display : inline; } 인라인 레벨 요소는 해당 컨텐츠의 크기 만큼만 화면에서 차지한다. 그래서 추가적으로 컨텐츠가 추가되어도 같은 행에 출력될 수 있다. 예시로 보면 <! DOCTYPE html > < html lang = "ko" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < title > Document </ title > < style > #block img { display : block ; margin : 5px ; } </ style > </ head > < body > < p > inline 방식 </ p > < div id = "inline" > < img src = "./images/pic.png" alt = "초록색 사진" /> < img src = "./images/pic.png" alt = ...