반응형

1. 블록

 

2. 인라인

 

3. 속성에서 많이 사용하는 것들


1. 블록

display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다.

<p>, <div>, <h>, <ul>, <ol>요소는 display 속성값이 블록(block)인 대표적인 요소

 

1-1) <p>

 <p>문단을 출력하는 엘리먼트</p>

1-2. <div>

<div>블록 요소, 가장 많이 사용하는 엘리먼트</div>

1-3. <h>

<h1>제목을 출력하는 엘리먼트(위아래로 공백,블럭요소)</h1>

1-4. <ul>

: unordered list 로 순서가 숫자로 정해진 것이아니라 검은점 형태로 출력이 된다.

<ul>
    <li>아메리카노</li>
    <li>카페라떼</li>
    <li>핫초코</li>
    <li>차
        <ul>
            <li>녹차</li>
            <li>홍차</li>
            <li>자스민차</li>
        </ul>
    </li>
</ul>

1-5. <ol> 

: ordered list로 순서가 있는 리스트로 출력시 앞에 숫자형 리스트로 출력된다.

<ol>
    <li>아메리카노</li>
    <li>카페라떼</li>
    <li>핫초코</li>
</ol>

<ol type="A" start="10">
    <li>녹차</li>
    <li>홍차</li>
    <li>자스민차</li>
</ol>

 

 

 

2. 인라인

요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지한다.

<span>, <a>, <img>요소는 display 속성값이 인라인(inline)인 대표적인 요소이다.

 

2-1. <span>

 <span>한칸 띄어서 출력이 된다.</span>

2-2. <a>

<a href="http://www.r-blockchain.tistory.com">r-blockchain 블로그로 이동</a>

2-3. <img>

<img src="/html에그림이 링크 된다.png" alt="연결">

 

3. 속성에서 많이 사용하는 것들

id, class, alt 등이 있다.

3-1. id

: 특정한 엘리먼트를 나타내는 이름, 하나의 엘리먼트에 하나의 ID를 설정할 수 있다. 중복될 수 없음.

3-2. class

: 엘리먼트의 클래스 이름을 정하여 묶음으로 설정 가능

3-3. alt

: 파일을 가져오지 못했을 시 출력하는 텍스트

반응형

'블록체인 개발' 카테고리의 다른 글

이미지 관련 태그 & form 형식  (0) 2023.06.14
웹 브라우저란  (2) 2023.06.13
개발이란 ?  (0) 2023.06.12
블록체인 개발 기초 - CSS(선택자)  (0) 2023.06.08
WEB 개발 입문  (0) 2023.06.02

+ Recent posts