벨로그에 올리는 글 전체공개 되는 줄 몰랐는데 검색하면 내 글이 보이는거였다.. =͟͟͞͞(꒪ᗜ꒪ ‧̣̥̇)
이제 여기다가 이상한 말 안 쓰고 정상적인 말만 적어야지..
이번에 정리할 내용들은 분량이 너무 많아서 이걸 언제 다 정리하나 막막합니다.
하지만 어쩌겠어요~ 일단 해야지~~
- 왼쪽에서 오른쪽으로 (수평으로) 쌓인다.
- 줄 바꿈 시 띄어쓰기의 효과가 있다.
- 가로와 세로의 크기가 콘텐츠의 크기에 맞춰 줄어든다.
- style 속성인 width와 height가 적용되지 않는다.
- margin과 padding이 좌-우 여백에만 적용된다.
- 자식으로 block요소를 사용할 수 없다.
<span> <div> </div> </span> - X
<span> <span> </span> </span> - O
- 위에서 아래로 (수평으로) 쌓인다.
- 가로 : 부모요소의 크기에 맞춰 늘어난다.
- 세로 : 부모요소의 크기에 맞춰 줄어든다.
- style 속성인 width와 height가 적용된다.
- margin과 padding이 상-하, 좌-우 모두 적용된다.
- 자식으로 Inline요소와 block요소 모두 사용 가능하다.
<div> <div> </div> </div> - O
<div> <span> </span> </div> - O
의미를 가지고 있지 않다.
수의 크기와 중요도는 반비례한다. (숫자가 작을수록 글씨가 커짐)
이미지를 삽입하지만, Inline요소이다.
- src : 이미지의 경로
- alt : 이미지 대체 이름 (text)
-> src와 alt 둘 다 필수속성
ol태그와 반대의 의미를 가지고 있다.
ul태그의 자식 요소로, ul태그는 li태그를 1개 이상 가져야한다.
의미를 가지고 있지 않다.
빈태그여서 <br>
혹은 <br/>
로 쓴다.
- href : 하이퍼링크 (경로)
- target : "_blank"
-> href 경로가 새로운 탭에서 열림
inline요소지만 block요소의 특징을 가짐
- type : 데이터 타입
- value : 미리 입력한 값
- place holder : 입력할 값에 대한 힌트
- disable : 값 명시 안 함 (비활성화)
(기능요소 : input ,,,)
label 요소로 감싸서 표현한다.
checked : 이미 체크된 상태로 표시
<label>
<input type : "check box"/> cat
</label>
-> ㅁ cat
<태그 title = "설명"> </>
: 요소의 정보, 설명을 보여줌
<태그 style = "스타일"> </>
: 요소에 적용할 css를 지정
<태그 class = "이름"> </>
: 요소를 지칭하는 중복 가능한 이름
ex)
<span class : "R"> 장미 </span> | css : .R {color:"red"}
<태그 id = "이름"> </>
: 요소를 지칭하는 고유한 이름
ex)
<span class : "B"> 하늘 </span> | css : #B {color:"blue"}
<태그 data - 이름 = "데이터"> </>
: 요소에 데이터를 지정 (=잠시 저장 )
ex)
<div data-fruit-name = "apple"> 사과 </div> <div data-fruit-name = "banana"> 바나나 </div> ---------------------------------------------------- [JS] const els = document.querySalectorAll('div') els.foreach (el => { console.log(el.dataset.fruitName) }) ---------------------------------------------------- console 값 -> apple / banana