html2

codepen.io

 

https://www.jsdelivr.com/package/npm/reset-css

jsDelivr - A free, fast, and reliable CDN for Open Source

css-reset html로  불러오기

 

 

    div>ul>li*4{$} 

  <div>

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

        </ul>

    </div>

 

 

 

 

<>태그

 

요소:<태그명 속성="속성값">내용 </태그명>

 

상위태그 ,부모자식태그, 하위태그

 

빈 태그:

내용을 가질 수 없음

열린태그 끝에 /삽입여부는 혼용금지

 

<meta charset="UTF-8" >

<img src="" alt=""/>

<input type:"text" />

<input type:"checkbox" />

 

 

 

요소가 화면에 출력되는 어떠한 특성

글자(Inline)

상자(Block)

 

 

HTML에서는 요소의 특성을 2가지로 구분

Inline: 글자를 다루기 위한 요소, 같은 인라인 요소만 자식요소로 포함가능 (블록요소는 자식요소로 포함불가)                     

 

<span>

단순 영역 설정용,글자를 다루는 요소  style속성으로 좌우여백지정만 가능

 

 

<span>hello </span>

<span>world </span>

hello world 코드상의 줄바꿈은 요사 사이 띄어쓰기로 인식

 

 

block:상자(레이아웃)을 다루기 위한 요소 -div:단순 영역 설정용

 

블록요소는 부모요소의 가로너비만큼 최대한 늘어나려는 성징(세로길이는 줄어드려는 성질)

블록 요소는 요소가 수직으로 쌓임

(인라인요소와 다르게) 블록 요소는 가로/세로 너비 지정 가능

<div style="width:100px;">hello</div>

<div style="height: 40px;">world</div>

style="margin:"10px;" //외부여백지정

style="padding:"10px;" //내부여백지정 

 

>>

hello

world

 

 

<h1>오늘의 날씨</h1>

heading의 약어로 1~6(중요도)까지, 제목을 나타내는 블록요소임

 

<p>중부 호우......남부 열대야.....</p>

paragraph의 약어 , 블록요소로 내용에 문장들을 담음

 

<img src="img/weather.jpg" alt="12호 태풍"/>

인라인요소

src속성="경로"

alt속성="대체 텍스트"

 

 

<ul>,<ol>과 <li> : 한 세트여서 함께 사용하는 블록요소

 

<ul> 순서가 없는 리스트, 무조건 <li>태그를 자식요소로 포함  

 

 

 

<a> </a>

인라인요소

다른 페이지(혹은 같은 페이지)로 이동하는 하이퍼링크 지정(=링크 걸 때) 사용

 

<a href="https://www.google.com" target="_blank"> Google </a>

 

target속성은 어느 탭에서 열 지 결정, 

"_blank"는 새로운 탭에서 열기

"_self" 현재 창에서 열기

"_parent"부모프레임에서 새 웹페이지가 열림

(A에서 B를 열고 B에서 _parent로 열면 A에서 열림)

 

"_top"
최상위 프레임에서 열립니다

 

<span></span>

인라인요소

특별한 의미 없이 텍스트 구분용 (CSS적용 범위) 

<p>

 <span>동해물</span>과 백두산이 마르고 닳도록

</p>

 

<br />

빈 태그,줄바꿈 

 

<input />

빈 태그

인라인 요소이지만 일부는 블록 요소의 특성을 가진 요소로 인라인-블록요소라 함

 

블록요소처럼 가로/세로 너비, 상하좌우 여백 지정가능

 

사용자에게 데이터를 입력 받을 때 사용,

type속성으로 데이터형식 지정

value속성으로 미리 원하는 입력값을 지정

placeholder속성으로 힌트 지정

disabled 속성을 추가하면 비활성화 

<input type="text" placeholder="이름을 입력할 수 없음" disabled  /> 

 

 

type="checkbox"방식

        <label>

            <input type="checkbox" checked disabled />라벨임..

        </label>

 

<label>태그로 <input />태그를 감싸면(Wrapping) 라벨태그 안의 다른 요소(텍스트)를 선택해도 <input/>에 영향을 줌

 

 

 

   <label>

            <input type="checkbox" checked disabled />라벨임..

        </label>

 

 

type="radio"방식

 

<label>

            <input type="radio" name="fruits" />사과..

        </label>

 

       

        <label>

            <input type="radio" name="fruits" checked disabled />바나나..

        </label>

 

동일 name속성으로 묶인 radio버튼 중 하나만 선택가능함 

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

<table> </table>

행과 열의 집합인 표 생성

 

  <table>

            <tr>

                <td>A</td>

                <td>B</td>

            </tr>

            <tr>

                <td>C</td>

                <td>D</td>

            </tr>

        </table>

전역속성 -모든 태그에 적용가능한 속성

title="설명"

 

style="스타일"

css 인라인 선언방식 

 

class="요소의 이름"

 

id="중복불가 고유명"

 

CSS

body{

}

 

.blue(클래스명) {

color:green;

}

#abc(id명){

color:red;

}

 

 

<태그 data-이름="데이터"> </태그>

<div data-fruit-name="apple">사과</div>

<div data-fruit-name="banana">바나나</div>

 

const elements =document.querySelectorAll('div')

elements.forEach(element=>{

   console.log(element.dataset.fruitName)

})

?