2강. 고급 문서 만들기

블록태그, 인라인태그, img태그, ol,ul,li태그

​

1) 블록 태그 vs 인라인 태그

​

1. 블록 태그 = 블록 태그는 항상 새 라인에서 시작하고 브라우저의 왼쪽 끝에서 오른쪽 끝까지 블록 공간을 차지한다.

( <p> , <h1> , <div> , <ul> )등이 있다.

​

2. 인라인 태그 = 인라인 태그는 블록에 삽입되어 블록 콘텐트의 일부를 표현하는데 이용된다.

( <strong>, <a>, <img>, <span> )

​

 

블록태그인 div와 , 인라인태그인 span을 사용하여 코드를 작성했습니다.

이해가 쉽도록 css를 활용하여 배경색을 넣었습니다.

차이점을 이해하셨나요?

div는 블록 공간을 모두 차지하지만, span은 콘텐트의 일부만 차지합니다.

​

 

이러한 성질을 이용해서 블록태그안에 span을 이용하여 일부분에 특별한 모양을 줄 수 있습니다!

​

​

​

2) 이미지 삽입 <img>

img 태그를 이용하면 HTML 문서에 이미지를 갑입할 수 있습니다. < BMP, GIF, PNG, JPG(JPEG), animated-GIF >

 

src = 이미지 파일의 URL (필수 속성)

alt = 이미지가 없거나 손상되는 등 이미지를 출력 못할때 출력되는 문자열 (필수속성)

width = 이미지의 폭

height = 이미지 높이

​

​

​

3) 리스트 만들기 <ol>,<ul>,<dl>

ol = 순서 있는 리스트

ul = 순서 없는 리스트

dl = 정의 리스트

​

1. ol

 

ol의 경우는 순서가 있는 리스트이므로 type속성을 통해 마커를 설정할 수 있다. 디폴트는 숫자이다.

​

2.ul

 

ul의 경우 마커의 모양이 도트로 표시된다.

​

 

 

3.dl

 

dl은 용어와 설명을 하나의 아이템으로 나열하는 리스트이다. 정의 리스트 전체는 dl을 사용하며, 각 아이템에서 용어는 dt, 설명은 dd로 표현한다.

​

​

​

2강에서 소개한 내용 모두 이해하셨나요?!

연습문제 나갑니다~

​

 

스타일 부분은 이렇게 작성하시면 됩니다!(나중에 따로 사용법 올릴거에요)

코드로 작성하면서 연습해보세요.

​

혹시나 궁금한 점은 댓글로 남겨주세요!