[인프런]html, css 기초

Jessie H·2022년 1월 25일

CSS div html inline block 블록타입 인라인타입 코딩공부 코딩기초

HTML & CSS

목록 보기

1/3

Html 주석 다는 법

<!-- 주석내용 -->

css 주석 다는 법

/*주석 내용*/

Block Element vs Inline Element

Block Element: 무언가를 담는 그릇

각 엘레먼트는 새로운 줄에서 시작 → 줄바꿈 생김
항상 가로로 풀로 차있다, but 크기 지정 가능 = width, height 지정 가능
다른 Block Element와 Inline Element를 모두 담을 수 있다
Vertical-align 불가능(이미 세로 배열이 기본 셋팅이니까),
text-align 불가능(얘는 뭔가는 담는 그릇이지, text 같은 담기는 내용이 아니기 때문)

Inline Element: 데이터를 제공하는 요소

다른 Inline Element만 담기 가능, Block Element 담기 불가능
각 엘레먼트는 바로 옆에 붙어서 시작한다 → 줄바꿈 x
width, height 불가
vertical-align(Inline Element 수직중앙 배열 시 사용)과 text-align(텍스트의 정렬방향; 왼쪽 정렬, 오른쪽 정렬 등)이 모두 작동

Block & Inline Element List : Kamang's IT Blog 참고

div

여러 요소를 묶어서 하나의 박스로 만들어 class, id 부여를 쉽게 할 수 있는 태그
메뉴바, 콘텐츠 박스, 슬라이드 만들 때 등 많이 쓰인다

태그에 클래스명 입력된 채로 여러개 만드는 법

"태그.class명$*만들갯수"

div.abc$*3
=<div class="abc1"></div><div class="abc2"></div><div class="abc3"></div>

/*div태그의 경우 div를 입력하지 않고 바로 .class명부터 입력해도 생성 가능*/

.jkl$*3
=<div class="jkl1"></div><div class="jkl2"></div><div class="jkl3"></div>

span.def$*2
=<span class="def1"></span><span class="def2"></span>

div css에

<style>
	.div {
    	display: inline-block;
    }

을 적용하면 Block 요소인 div가 나란히 배열되는 것을 알 수 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-sidth, initial-scale=1.0" />
    <title></title>
    <style>
      .box1 {
        display: inline-block;
        width: 300px;
        height: 100px;
        background-color: darkblue;
        color: white;
      }

      .box2 {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
    <div>block type VS inline type</div>
  </head>
  <body>
    자 이제 시작이야
    <div class="box1">이야이야호</div>
    <div class="box2">이개뭐람</div>
</html>