[HTML] 단락 나누기 2

Notice

모든 글은 PC에 최적화가 되어있습니다.

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

재유's

[HTML] 단락 나누기 2 본문

IT Story/　: : HTML5

[HTML] 단락 나누기 2

Stella_NY 2019. 1. 10. 09:48

페이지 영역 나누기 DIV

개념적으로만 나눈다.

-> HTML에서는 디자인이 적용되지 않음

중첩해서 사용할 수 있으며 모든 종류의 HTML 태그 포함 가능

용도에 따라 시멘틱 요소로 세분화 할 수 있다.

- header, section, article, nav, aside, hgroup 등...

대부분의 웹 사이트가 시멘틱 요소를 디테일하게 사용하지 않는다.

화면상에서 직선 긋기

<hr />

HTML 코드에서는 띄어쓰기나 줄바꿈을 아무리 많이 사용하더라도 브라우저상에서는 띄어쓰기 한칸으로 표시된다.

줄바꿈

<br />

띄어쓰기(공백) 특수 문자 :  

들여쓰기

 <BLOCKQUOYE>~</BLOCKQUOYE>


이번엔 들여쓰기<br />
앞에 있는 줄 기준으로 들여쓰기! (바로앞)<br />
<blockquote>들</bolockquote>
<blockquote>여</bolockquote>
<blockquote>쓰</bolockquote>
<blockquote>기</bolockquote>

여기서 에러가나는데... 왜나는 거징... 실행은 되는데.. 확인해 봐야겠네영.. ㅎㅎㅎ

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>

<body>
    <!-- 사이트 전체 영역(정렬, 사이트 폭 설정 등의 용도)-->
    <div id="container">
        <!-- 사이트 상단 영역 (로고, 메인메뉴 등)-->
        <div id="header">
            <h1> 우리 사이트 </h1>
        </div>
        <hr />
        <!-- 사이트 내용 영역 (사이트바, 내용등)-->
        <div id="content">
            <!-- 왼쪽 사이트 바 역역-->
            <div id="sidebar">
                <h2> 메뉴 선택하기 </h2>
                <ul>
                    <li>메뉴1</li>
                    <li>메뉴2</li>
                    <li>메뉴3</li>
                </ul>
            </div>
            <!-- 영역간의 구분선-->
            <hr />
            <!-- 오른쪽 본문 영역-->
            <div id="main">
                <!-- 제목 -->
                <h1>웹 접근성이란?</h1>
                <!-- 소제목-->
                <h2> 장애에 구애 없이 모든 사람들이 정보를 공유할 수 있는 인터넷 공간 만들기</h2>
                <!-- 본문 -->
                <p>
                    월드 와이드 웹 컨소시엄 .... 생략 ....
                </p>
                <!-- 인용문-->
                <blockquote>
                    <p> 월드 와이드 웹 (World Wide Web)을 창시한 .... 생략 ....</p>
                </blockquote>
            </div>
        </div>
        
        <hr />
        <!-- 사이트 하단 영역(카피라이트, 주소 등)-->
        <div id="footer">
            <address>
                copyright©jaeu0608.tistory.com/
            </address>    
        </div>
    </div>
</body>

</html>

학원에서 한 예제!

저작자표시

'IT Story > 　: : HTML5' 카테고리의 다른 글

[HTML] 표 그리기 (0)	2019.01.10
[HTML] 링크태그 <a> (0)	2019.01.10
[HTML] 단락 나누기 (0)	2019.01.09
[HTML] HTML의 기본 (0)	2019.01.09
[HTML] 웹페이지의 이해 (0)	2019.01.09

공유하기 링크

페이스북
카카오스토리
트위터

'IT Story/　: : HTML5' Related Articles

Comments

재유's

[HTML] 단락 나누기 2 본문

[HTML] 단락 나누기 2

'IT Story > : : HTML5' 카테고리의 다른 글

티스토리툴바

'IT Story > 　: : HTML5' 카테고리의 다른 글