본문 바로가기

html

[CSS, HTML] display(디스플레이) inline, inline-block, block inline 줄 바꿈 없이 나란히 배치되는 속성을 의미합니다 대표적인 , , 태그가 있습니다 AAA BBB CCC inline-block inline-block으로 지정된 요소들은 기본적으로 inline의 속성을 가지지만 가로와 세로를 block처럼 지정해 줄 수 있습니다 span { display: inline-block; width: 200px; height: 200px; background-color: rgb(118, 83, 29); } block 전후의 줄 바꿈이 있고 다른 엘리먼트를 밀어내고 한 줄을 차지합니다 대표적으로 , , 가 있습니다 div, h1, p{ background-color: yellow; } AAAA BBBB CCCC 더보기
[HTML] Emmet (div박스 여러 개 만들기) ! VS CODE를 기준으로 작성됨 우리는 보통 html에서 div태그를 여러 개 만들어 쓰는 경우가 많다 그럴 때 마구잡이 식으로 div태그를 필요할 때마다 만들거나 혹은 div태그를 복붙 복붙 해서 사용하곤 한다 그럴 때 유용하게 사용할 수 있는 것이 바로 Emmet이다. HTML div.wrap>div 이렇게 입력하고 엔터 혹은 탭키를 눌러보면 우리가 흔히 아는 div에 class="wrap"가 지정된 레이아웃을 만들 수 있다 여기서 > 표시는 바로 밑 자식 요소라는 뜻 HTML div.wrap>div.content*3 이런 것도 가능하다 대충 무슨 뜻일까? 그렇다 wrap이라는 클래스의 자식 요소들 content를 3개 추가해주었다 그냥 필요할 때마다 div를 만들어서 사용할 수 있지 않은가? 아.. 더보기