HTML의 태그들(2)

● <div>태그

웹 사이트의 레이아웃(전체적인 틀)을 만들 때 사용한다

div 태그의 속성

• style : div 태그의 스타일을 지정한다

            (style="스타일 지정 속성" => 같은 속성의 값은 띄어쓰기를 해서 구분하고
                                     다른 속성의 값은 세미콜론(;)으로 구분한다

• width, height : div 태그의 가로 크기와 세로 크기를 지정한다

                      (px 단위와 % 단위로 지정이 가능하다)

• border : div 태그의 테두리의 굵기를 정한다
• float : div 태그를 정렬한다

            (left, right 값이 있고 기본 값은 left이다)

• margin : div 태그를 정렬 기준 끝에서부터 다른 태그와 div 태그 간에 여백을 준다

실행 코드

 

실행 결과

● <span>태그

주로 div 태그, p 태그와 함께 웹 페이지의 일부분에 스타일을 적용시키기 위해 사용한다

div 태그와 span 태그의 차이점은 display 속성이 각각 Block, Inline이라는 점인데, div 태그는 블럭 단위로 속성을 부여하고
span 태그는 라인 단위로 속성을 부여한다

(Block 태그와 Inline 태그에 대해서는 여기 참조)

https://crazycat-liebling.tistory.com/5?category=785841

 

실행 코드

 

실행 결과

div 태그는 블럭 태그이기 때문에 창의 전체 폭을 차지하고
span 태그는 인라인 태그이기 때문에 콘텐츠의 크기만큼 자리를 차지한다

● <ol>태그

Ordered List. 숫자나 알파벳 등 순서가 있는 목록을 만드는데 사용한다

ol 태그의 속성

• type : ol 태그의 글머리표 스타일을 지정해 준다

        - 1 : 아라비아 숫자(1, 2, 3,...). 기본 값이다
     - A : 알파벳 대문자(A, B, C,...)
     - a : 알파벳 소문자(a, b, c,...)
     - I : 로마 숫자 대문자(I, II, III,...)
     - i : 로마 숫자 소문자(i, ii, iii,...)

• start : ol 태그의 시작 값을 임의로 지정한다

실행 코드

 

실행 결과

● <ul>태그

Unordered List. 순서가 필요없는 목록을 만드는데 사용한다

ul 태그의 속성

• type : ul 태그의 글머리표 스타일을 지정해 준다

        - disc : 속이 꽉 찬 검은 원형(●)
     - circle : 속이 빈 원형(○)
     - square : 속이 꽉 찬 사각형(■)

실행 코드

 

실행 결과

● <li>태그

List. 목록을 만드는 태그이다

이 태그는 단독으로 쓰이지 않으며 <ol> 혹은 <ul> 태그 안에 쓰인다
li 태그는 단순히 리스트 나열 뿐만 아니라 메뉴 등을 만들 때도 사용한다

이중 리스트를 만들기 위해서는 <ul>이나 <ol> 하위에 다시 <ul>이나 <ol> 태그를 쓰면 된다

실행 코드

 

실행 결과