[프론트엔드 입문] 인라인, 블록 요소
<태그>내용</태그>
열린태그(시작하는태그)
/닫힌태그(종료태그)
tag = 요소(element)
내용=contents (요소의 내용)
<태그><태그>내용</태그></태그>
부모요소 / 자식요소
<태그><태그><태그>내용</태그></태그></태그>
상위(조상)요소 / 하위(후손)요소 (부모요소 / 자식요소)
들여쓰기 (Indent) : Tab
내어쓰기 (Outdent) : Shift Tab
2.
열리고 닫히는 태그 없이, 종료태그 없는 태그
= 빈 태그(empty tag)
empty tag 작성방식 (html5)
① <태그> : 작성 편리하나 빈 태그 인지 못하고 닫힌 태그 찾으려고 하는 경우 모르는 태그일 때 헷갈릴 수 있음
vue.js 등 이용시에는 /안붙이면 문제 생기는 경우도 많아서 <태그/>를 더 자주 사용하는 게 좋은 편
② <태그/> :
<tag 속성attribute="값value"> </tag>
>> 기능의 확장
tag 전체 요소의 기본적 역할을 attribute 로 확장
예시
<img/>
어떤 이미지 삽입할 지, 어딨는지 안나와있음
<img src="./cat.jpg" alt="고양이"/>
src 이미지의 경로 alt 이미지의 이름 (alternate text 대체 텍스트)
<태그 속성="값">내용</태그>
<input type="text"> 사용자가 무언가를 입력하는 태그, text 자리엔 어떤 타입을 입력할 건지 지정>내용</태그>
열린태그(시작하는태그)
/닫힌태그(종료태그)
tag = 요소(element)
내용=contents (요소의 내용)
<태그><태그>내용</태그></태그>
부모요소 / 자식요소
<태그><태그><태그>내용</태그></태그></태그>
상위(조상)요소 / 하위(후손)요소 (부모요소 / 자식요소)
들여쓰기 (Indent) : Tab
내어쓰기 (Outdent) : Shift Tab
2.
열리고 닫히는 태그 없이, 종료태그 없는 태그
= 빈 태그(empty tag)
empty tag 작성방식 (html5)
① <태그> : 작성 편리하나 빈 태그 인지 못하고 닫힌 태그 찾으려고 하는 경우 모르는 태그일 때 헷갈릴 수 있음
vue.js 등 이용시에는 /안붙이면 문제 생기는 경우도 많아서 <태그/>를 더 자주 사용하는 게 좋은 편
② <태그/> :
<tag 속성attribute="값value"> </tag>
>> 기능의 확장
tag 전체 요소의 기본적 역할을 attribute 로 확장
예시
<img/>
어떤 이미지 삽입할 지, 어딨는지 안나와있음
<img src="./cat.jpg" alt="고양이"/>
src 이미지의 경로 alt 이미지의 이름 (alternate text 대체 텍스트)
<태그 속성="값">내용</태그>
3.
<input type="text"> 사용자가 무언가를 입력하는 태그, text 자리엔 어떤 데이터 타입을 입력할 건지 지정
데이터 타입, text 사용자에게 체크 여부를 입력 받음
<input type="checkbox"/>
4.
글자와 상자 (layout 구조 짜는 요소들)
요소가 화면에 출력되는 특성, 크게 2가지로 구분됨
① 인라인 요소(inline) : 글자를 만들기 위한 요소들
포함한 콘텐츠 크기만큼 자동으로 가로사이즈, 세로사이즈 모두 줄어드는 성질을 가짐
② 블록(Block) 요소 : 상자(레이아웃)을 만들기 위한 요소들
① 인라인 요소(inline)
<span>Hello</span>
<span>World</span>
Hello World (요소가 수평으로 쌓임, 엔터 x / 그리고 span 태그는 글자로 인식되어 띄어쓰기 됨)
span 대표적인 인라인 요소.
본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도
e.g.
<span style="width: 100px;">Hello</span>
<span style="height: 100px;">Hello</span>
둘 다 작성해도 반응이 없을 것 >> 글자영역은 가로세로 사이즈 지정 불가!!!!!
요소의 내/외부 여백을 지정하는 css 속성에서도 마찬가지로, 좌우(수평)으로는 적용되지만,
위 아래 여백은 적용 불가!!!
e.g.
<span style="margin: 20px 20px;">Hello</span> (요소 외부 여백 지정)
<span style="padding: 20px 20px;">World</span> (요소 내부 여백 지정)
인라인요소는 자식요소로 블록요소를 사용할 수 없다.
인라인요소는 자식요소로 인라인요소는 사용 가능하다.
e.g. <span><div></div></span> 불가.
e.g. <span><span></span></span>
② 블록(Block) 요소 : 상자(레이아웃)을 만들기 위한 요소들
<div>Hello</div>
<div>World</div>
대표적인 블록 요소.
본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을설정하는 용도
인라인 요소와 달리 부모 요소의 크기만큼 자동으로 늘어나려는 성질을 가짐.
그리고 반대로 수직으로 쌓이는 특성
(반면 세로는 인라인처럼 자동으로 포함콘텐츠 크기만큼 줄어들려는 성질)
<div style="width: 100px;">Hello</div>
<div style="height: 100px;">World</div>
글자와 달리 상자이므로, 요소의 가로너비, 세로 너비 지정 css 속성 사용 가능
<div style="margin: 20px;">Hello</div>
<div style="padding: 40px;">World</div>
모두 위아래좌우 모두 적용 잘 됨.
시각적으로 제어하는 부분에서 블록요소가 더 유용
블록요소는 자식요소로
블록요소와 인라인요소 모두 사용 가능. (제약사항 적은 편!)