1. 인라인요소 :  크기는 컨텐츠의 너비값

- 한줄에 여러개 배치, 상하마진 못가짐, 기본 너비값은 컨텐츠의 너비값

- span, a, small, em, b, br, audio, video, s, u, mark, q, strong, sup, sub, i, big, del, label

(서식을 꾸미는 요소)

 

 

2. 블록요소 : 크기값 지정가능 

- 크기값을 지정할 수 있음, 한줄에 한개만 배치, 상하좌우마진 모두 가짐, 기본 너비값은 100%

- div, ul, ol, li, h, hr, form, dl, dt, dd, p, table, header, article, footer, section, nav, details, summury, center,

 

3. 인라인블록 : 크기값 지정가능, 기본크기는 컨텐츠의 너비값

한줄에 여러개 배치

상하좌우마진 모두 가짐

- img, input, button, fontawesome icon

 

기본값 position: static;

 

어떤 요소이건 position: absolute 또는 fixed가 적용되면 인라인블록으로 변함.

before after는 기본적으로 인라인요소

 

 

 

absolute 일 때 display: inline-block;을 또 쓸 필요 x

 

		.main_txt {
			position: relative;
			display: inline-block;
		}
		.main_txt:after {
			content: '';
			position: absolute;
			width: 100%;
			height: 5px;
			left: 0;
			bottom: 0;
			background: orange;
		}

'Web > HTML CSS 퍼블리싱' 카테고리의 다른 글

부모요소의 값을 상속하는 inherit  (0) 2022.02.07
폰트사이즈 em, rem 정리  (0) 2022.02.07
Hamburger Menu (+, ~ 선택자 이용)  (0) 2021.07.22
iframe, a target속성  (0) 2021.07.22
앵커 (anchor) 만들기  (0) 2021.07.22

- 인라인 요소

 

    크기값 x 
    한줄에 여러개 배치
    상하마진 못가짐
    기본 너비값은 컨텐츠의 너비값

<head>
    <style>
        span {
            border: 1px solid #000;
            width: 100px;
            height: 100px;
            margin: 20px;
        }
    </style>
</head>
<body>
	<div>1. inline</div>    
    <span>Inline</span>
    <span>Inline2 </span>
</body>

크기값x 좌우마진만 갖는다.

 

 

- 블럭 요소

 

    크기값 o

    한줄에 한개만 배치

    상하좌우 마진 가짐

    기본 너비값 100%

 

div {

    width: 100%;

이렇게 기본 너비값을 써줄 필요가 없음!

}

<head>
    <style>
       .block {
            border: 1px solid red;
            width: 100px;
            height: 100px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div>2. block</div>
    <div class="block">Block</div>
    <div class="block">Block2</div>
</body>

 

 

- 인라인 블럭

크기값 o

한줄에 여러개 배치

상하좌우 마진 가짐

기본 너비값은 컨텐츠의 너비값 

img, input, button, fontawesome icon 

 

h1은 block요소이지만 display: inline-block으로 바꿔서 img옆에 붙게 된다.

<head>
    <style>
        img {
            margin: 20px;
            width: 300px;
            height: 300px;
        }
        h1 {
            border: 1px solid blue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <img src="img/face-02.jpg" alt="">
    <img src="img/face-02.jpg" alt="">
    <h1>block elements</h1>
</body>

 

- 포지션 

position: static; // 기본값

어떤 요소이건 position: absolute; fixed; 가 들어가면 모든 요소는 인라인 블럭으로 바뀐다.

position: absolute;

/* display: inline-block; 의미가 없음, absolute면 인라인블럭이 된다. */ 

'Web > CSS' 카테고리의 다른 글

CSS 변수 var() 사용하기  (0) 2022.02.09
CSS calc() 산술식(사칙연산)  (0) 2022.02.07
[animation] 도형로딩 애니메이션 #2  (0) 2021.08.02
[animation] 도형로딩 애니메이션 #2  (0) 2021.08.01
UIKit #1 사용법, Accordion 컴포넌트  (0) 2021.07.27

+ Recent posts

티스토리툴바