# display
[CSS] 레이아웃(Lay-out) -Display 편(inline, inline-block, block)
block 속성 : 대부분의 HTML elements들은 대부분 block 속성으로 되어 있다. <header> , <footer>, <p>, <li>, <table>, <div> 등이 대표적이다. 이 요소들은 웹브라우저 상에서 좌우를
[CSS] 레이아웃 속성(position, display)
CSS에는 많은 레이아웃 속성이 존재한다. 이 중 position, display 두 가지 속성에 대해 다루어 보고자 한다. position property 우리는 position 속성을 사용하여 박스 모델을 다양한 레이아웃으로 표현할 수 있다. 이 중 relat
[TIL] CSS - Display
🖌️Display >* block, inline, inline-block* html이 모든 요소는 웹 브라우저에 어떻게 보이는가를 결정짓는 display라는 속성을 가지고 있다 (정확히는 body 내부에 들어오는 요소들) 기본적으로 inline 혹은 block 속성을
[CSS] 요소 정렬_display:flex
요소를 배치하는 스타일 속성으로 position 외에 display:flex를 이용할 수 있다. 부모요소에 적용하고 속성을 지정하면 자식요소의 블럭의 크기를 똑같이 조정할 수 있다.{justify-content:속성값 }양끝의 여백이 요소간의 여백의 1/2라는 점에서
화면 표시(display, block, inline, inline-block), 위치지정(position)
display none: 보이지 않게 visibility: 보이게(생략해도됨,default값) block:박스형태의 공간,가로로 꽉채운다. inline:컨텐츠를 작성하는 공간,자기 자신의 크기를 가진다. 크기를 설정 할 수 없음. inline-block: 박스형태의 컨
[CSS]레이아웃(display/box model/position)
display 속성은 웹 페이지에서 요소가 어떻게 보여지는지 나타낸다. 블록 요소는 항상 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다. 기본적으로 블록 속성값을 갖는 <div>, <p>, <h>, <ul>, <
TIL16) CSS 마스터..하고싶다...
요즘 til쓰는것에 현타가 왔다. 고작 16번째 인데 나란인간..쉽게 질리는 인간이다..쓰기 싫다기 보다는 쓰고 싶은데 잘쓰고 싶다. 썸네일도 만들고 하고싶은데 기깔나는 아이디어가 안나온다...계속 고민중이다... 가장중요한것 중하나가 flex는 두가지 요소로 나누어진
Flex로 display 해버리기 [flex-direction]
Flex에는 Flex items와 Flex container가 있다.flex의 속성들을 flex-items를 flex-container를 기준으로 어떻게 배치할 것인가에 대한 설정이 필요하다. 따라서 모든 flex 속성은 flex-container에 작성한다.flex-
transition에 display none을 대체하여 사용하는 방법
작업을 하면서 시각적으로 요소가 변화해야 하는 상황이 생기게 되는데 초반에는 기능적인 부분만 중점으로 생각하여 transition이라는 것을 잘 사용하지 않았었다. 하지만 시각적으로도 부드럽게 변화하는 모습을 구현하기 위해 해당 속성을 사용하게 되었고, display를
display: flex
display: flex 기본 세로 정렬에서 안에 있는 내용 물을 가로로 정렬할 수 있도록 도와줌 justify-content: 종류 center 모든 요소들 중간 정렬 flex-end 마지막 정렬 flex-start 시작 정렬 space between 간격을 만
Display(Block, Inline, Inline-block)
요소를 어떻게 보여줄지를 결정block : 블록 박스inline : 인라인 박스inline-block : block과 inline의 중간 형태기본적으로 가로 영역을 모두 채움block 요소 다음 태그는 다음 줄로 변경됨 ex) header, footer, p, li,
미디어 쿼리 사용하기
미디어 쿼리 사용하기 image 미디어 쿼리 사용하기 image미디어 쿼리 사용하기 image미디어 쿼리 사용하기 image 미디어 쿼리 사용하기 image 미디어 쿼리 사용하기 image
position, display 정리
사용하면서도 항상 헷갈리던 css의 position과 display 속성에 대해서 정리한다. 요소를 한 줄로 배치하고 싶을 때 무지성으로 display: inline-block을 때려넣곤 했다. block, inline, inline-block의 차이에 대해 정확하
