# inline block

noweaj31

display: inline; > text만큼의 공간만 차지하고 줄바꿈을 하지않는다. width와 height / margin,padding / line-height 사용불가. display: block; > 무조건 한줄로 공간을 차지한다. display: inli

john_with_smile

display 속성 display는 요소를 어떻게 보여줄지 결정한다. 주로 쓰이는 요소 > none : 보이지 않음 > block : 블록 박스 > inline : 인라인 박스 > inline-block block과 inline의 중간 형태 1.none 요소를

yj05037

상하 여백 존재좌우 여백 존재요소사이 줄바꿈있음기본너비는 부모너비요소 사이 공백 없음너비와 높이를 명시해야 적용됨상하 여백 없음좌우 여백 있음요소사이 공백 있음요소사이 줄바꿈 없고기본 너비는 자신이 차지하는 그 너비(필요한 만큼만 가짐)너비와 높이를 명시하지 않아도 됨

vancouver

inline-block,block

yeonn

01 HTML element 01-1 block element 대부분의 element(요소)는 block 요소이다. block요소는 해당 요소의 전체 가로 넓이를 모두 포함해, 따로 스타일을 적용하지 않으면 이 요소 옆에 다른 요소를 붙여 넣을 수 없다. 다음은

119kyh

인라인요소 크기값을 지정못함 한줄에 여러개 배치 상하마진 못가짐 기본 너비값은 컨텐츠의 너비값 span, a, small, em, b, br, audio, video, s, u, mark, q, strong, sup, sub, i, big, del, label 블록요

arch-spatula

간단한 대답은 <ul></ul> 혹은 <ol></ol> 태그로 목록임을 알려주고 자식태그로 <li></li>는 개별 항목이라 알려주자는 합의 때문에 그렇습니다. 웹 접근성을 제공하기 위해 활용합니다. <ul></ul>은 uno

magnacut

display 표현 중 기본적인 속성을 배워보자

x5foddl

float: left 요소를 붕 띄워서 왼쪽 정렬clear: bothfloat 다음에 오는 요소에게 주면 float로 발생하는 이상한 현상 해결 가능.header { width: 100%; / 부모 태그 width의 100% / height: 50px;

kurong

float, clear : left, overflow: : hidden, ::after

wjddms0501

[CSS] Display – block, inline, inline-block

imyoox

block inline inline-block

woongdev

display: inline 으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 대표적인 엘리먼트로 <span>, <a>, <em> 태그 등이 있습니다.여러 개의 inline 엘리먼트들을 다음과 같이 마크업하면 줄 바

moon-tree

VScode

jswtncapetnc

오늘은 display 속성, Selector, box-sizing 속성에 대해서 살펴보겠습니다.

mike7643

inline 요소 어떠한 내용물을 포장지로 꽁꽁 싸매어 그 공간만을 차지하는 것. 일정한 바깥 형태나 껍데기가 없고 페이지의 흐름에 따라 다른 텍스트나 컨텐츠와 어우러져 배치된다. width/height 속성을 무시한다. -> margin과 padding 속성의 좌우

jin_jin_dev

position 속성과 마찬가지로 우리는 웹 페이지를 디자인 할 때 display 속성을 굉장히 많이 사용한다.HTML의 각 태그는 inline, block 등 각각 지정된 레벨의 display 속성이 있다.예를 들어 대표적으로 inline 속성에는 <span>,

ehrud1031

라는 마음에, 몇 개를 테스트 해보게 되었다.강쥐 사진은 우리 강아지 귀여운 망고다..아무튼이상하게 img태그에 display : block;을 줘도 위의 h1의 block 속성처럼 영역을 다 차지하지 않는것이다..그래서 궁금함에 구글링해본 결과h태그 안에 있는 텍스트

southbig89

상기와 같이 display를 inline 및 inlinde-block으로 했을경우 생기는 공백 이유와 없애는 방법을 알아보자 이유 우리는 엔터가 들어간 부분에 아무런 문자가 없다고 생각하지만, 실제로는 줄바꿈 문자가 들어가 있다 CSS는 이러한 줄바꿈 문자를 공백 문자와 동일하게 처리한다 코드에 줄바꿈이 있으면, 출력결과에서 span 또는 div(...

rowooncoding

inline-block을 쓰는 이유와 불편한점, 이점을 알아보겠다효과를 주면 가로배치가 잘 되지만 보다시피 공백이 생긴다이 공백은 왜 생기는 것일까?인라인 이라는 개념을 알아야 한다인라인 이라는것은 우리가 사용하는 텍스트를 이야기한다이 텍스트는 기본적인 방향이 가로 방