웹페이지 기초 (8)

Wishtree·2021년 5월 16일
0

HTML

1. 기본문법

요소

<tag>내용</tag>

<시작,열린 태그> 요소의 내용 <종료,닫힌 태그>

2. 부모와 자식


겉을 감싸고 있는 것이 부모 요소
내용과 앞 뒤에 있는 것이 자식 요소

들여쓰기를 통해 시각적으로 구분한다.
들여쓰기 tab
내어쓰기 shift +tab


상위/조상 요소
부모요소도 포함하는 개념으로 기준으로부터 상위에 있는 요소를 말함

하위/후손 요소
자식요소도 포함하는 개념으로 기준으로부터 하위에 있는 요소를 말함

3. 빈 태그

<tag> --> html1,2,3,4,5
<tag/> --> xhtml/html5

Html5는 둘 다 가능함
빈태그 뒤에 / 붙이면 바로 식별하기 쉬움

<태그 속성=”값”>내용</태그>

<img src="이미지 경로 " alt="대체텍스트"/>

4. 인라인과 블록

인라인 : 글자를 만들기 위한 요소
블록 : 상자를 만들기 위한 요소

1) 인라인 요소



요소가 수평으로 쌓임
줄바꿈하는 행위가 띄어쓰기가 됨.

<span style="width: 200px;">wishtree</span>
<span style="height: 200px;">wishtree</span>

글자요소는 가로 세로 사이즈를 조절할 수 없다.
여백 또한 위 아래는 불가능하고 좌우만 가능하다.
인라인 요소 안에는 블록 요소를 사용할 수 없다.

2) 블록 요소


요소가 수직으로 쌓임
부모요소의 크기만큼 자동으로 늘어남
가로세로 사이즈를 지정할 수 있음.
내부 외부 여백도 지정가능하다.
블록 요소안에는 인라인 요소도 넣을 수 있다.

profile
The interactive storytelling web service <Wishtree> is an open source project run by Team Noob. We share tips for effective non-face-to-face teamwork and service development process. Hope it helps a little to the world suffering from corona.

0개의 댓글