BlockChain

선택자

1. 클래스 선택자

2. id 선택자

선택자

 : 선택을 해주는 요소 , 이를 특정요소들을 선택하여 스타일을 적용할 수 있게 한다. 

클래스 선택자 

: 클래스에 속성 값을 가진 html 요소를 찾아 선택한다. 클래스 선택자는 클래스에 해당하는 요소앞에 .을 붙여준다.

.items {
  color: blueviolet;
}

id 선택자

: id에 속성 값을 가진 html 요소를 찾아 선택한다. id 선택자는 id에 해당하는 요소앞에 #을 붙여준다.

#root {
  background-color: aqua;
  color: #666;
}

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

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