[HTML] 레이아웃 구성 태그(div, span)

[HTML] 레이아웃 구성 태그(div, span)Web_Frontend/HTML & CSS2021. 11. 18. 11:42@Yanako

Table of Contents

1. 홈페이지의 전체적인 레이아웃을 잡는 태그

1) div(division) 태그 : 웹사이트의 전테적인 틀(레이아웃)을 만들 때 주로 사용.

- 웹표준 테그(테이블 태그에서 표준화로 변화)

- 웹페이지에서 논리적 구분을 정의하는 태그.

- 블럭형식 태그(개행하지 않아도, div 태그가 끝나면 개행)

cf) 라인형식 태그(개행하지 않으면 개항이 되지 않음)

    <div>block_01</div>
    <div>block_02</div>
    <div>block_03</div>
    <div>block_04</div>
    <div>block_05</div>

(1) div 태그의 속성

① style : div 태그의 여타 속성을 지정 해주기 위한 속성

② width, hight : 높이와 너비 설정

③ border : 테두리 굵기 설정

④ background-color : 배경색 설정

⑤ float : 정렬기준 설정

⑥ margin : 정렬기준으로부터의 여백 설정

<html>
<body>
<div style="background-color:red">첫번째 영역</div>
<div style="width:100px; height:100px; background-color:#CF0">두번째 영역</div>
<div style="width:50px; height:50px; border:1px solid black; background-color:yellow">세번째 영역</div>
<div style="width:100px; height:50px; border:3px solid black; float:right">네번째 영역</div>
<div style="width:30; height:30px background-color:green; float:left; margin:30px;">다섯번째 영역</div>
</body>
</html>

2) span 태그 : 홈페이지 레이아웃 구성시 사용

- 라인형식 태그, 주로 css와 함께 쓰임

    <span>inline_01</span>
    <span>inline_02</span>
    <span>inline_03</span>
    <span>inline_04</span>
    <span>inline_05</span>
    
    <br /><br />
    <br /><br />
        
    <span style="background-color:red">span1</span>
    <span style="background-color:blue">span2</span>
    <span style="background-color:green">span3</span>

3) header 태그 : 헤더 테그(시멘틱 방식 div id="header"대체)

- 시맨틱 방식 : div 태그 대신 정형화된 태그를 사용함

-> 웹페이지에서 효율적으로 데이터 추출 가능

-> 협업에서 빠른 리뷰 가능

4) nav 태그 : 메뉴바 테그(시멘틱 방식 div id="nav"대체)

5) section 태그 : 컨텐츠 본문 태그(시멘틱 방식 div id="section"대체)

6) footer 태그 : 포터 태그(시멘틱 방식 div id="footer"대체)

<body>
    <header>
        <h1>MY HOMEPAGE</h1>
        <hr />
    </header>

    <nav>
        <ul>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JAVASCRIPT</li>
            <li>JQUERY</li>
        </ul>
        <hr />
    </nav>

    <section>
        <h1>What is HTML5?</h1>
        <p>HTML5 is goooooooooooooooooooooooooooooooooooooooooooooooooooooooood!</p>
        <hr />
    </section>

    <footer>
        <p>xxx주식회사 서울시 00구00동</p>
    </footer>
</body>

저작자표시

'Web_Frontend > HTML & CSS' 카테고리의 다른 글

[html,css] 웹개발 기본과 HTML & CSS (0)	2023.12.13
[CSS] CSS 기본 선택자(tag 선택자, 전체 선택자(*선택자), 혼합 선택자) (0)	2021.11.18
[HTML] 폼 태그(form) (0)	2021.11.18
[HTML] 동영상을 출력하는 태그(video) (0)	2021.11.18
[HTML] 이미지를 나타내는 태그(img) (0)	2021.11.04

@Yanako :: Yana's coding story였는데요, 우당탕탕 개발일지가 맞는것같

야나의 코딩 일기장 :) #코딩블로그 #기술블로그 #코딩 #조금씩,꾸준히

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

'Web_Frontend > HTML & CSS' 카테고리의 다른 글

티스토리툴바