WEB/HTML5

HTML5 - layout, css, selector

jomericano 2022. 6. 2. 18:28 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML5 레이아웃 관련 태그</title>
    <style>
        div, span {border : 1px dashed red;}
    </style>
</head>
<body>
    <h1>html5 레이아웃 관련 태그</h1>
    <h2>블록 / 인라인 요소</h2>
    <p>html의 모든 요소는 기본적으로 display속성에 의해 웹브라우저를 통해 어떻게 보여질지
        결정되어 있음 </p>

    <p> display 속성값이 block인 경우
        요소의 너비가 100%이고 새로운 라인에 배치되며,
        width, height속성으로 크기를 임의로 바꿀수 있음(p, div, h, ul, ol, form)</p>

    <p> display 속성값이 inline인 경우
        요소의 너비가 내용에따라 달라짐, margin, inline
        width, height속성으로 크기를 임의로 바꿀수 없음 (span,문자관련 태그 img, a)</p>

    <div style="width: 50% ">"Hello World!!"</div>
    <div style="width: 50% ">"Hello World!!"</div>
    <hr>
    <span>시간은 금이라구 친구</span>
    <span>시간은 금이라구 친구</span>

    <h2>div vs span</h2>
    <p>다른 요소들을 하나로 묶어 레이아웃을 구성하는데 주로 사용</p>
    <p>또한 관련 요소들을 하나로 묶어 스타일을 일괄적으로 적용할때도 사용</p>

    <p>반면 span은 텍스트 요소들을 하나로 묶어 스타일을 일괄적으로 적용할때 사용</p>

    <div>아이디: <input type="text">
         <span style="color: red"> 8~18자 영문소문자, 숫자만 사용할수있습니다.</span></div>

    <p>블록요소와 인라인 요소를 함께 사용할때는 반드시 블록요소를 먼저 사용하고, 그안에
        인라인 요소를 포함시켜야 한다.</p>
    <p>html 온라인 문법검사기로 소스를 적절하게 사용했는지 알아볼수 있음 validator.w3.org</p>

    <p>시간은 <span style="color:gold">금</span>이라고 친구!</p>
    <span>시간은 <p style="color:gold">금</p>이라고 친구!</span>

    <h2>레이아웃 </h2>
    <img src="img/layout.jpg" >

    <p>레이아웃은 웹페이지에 여러 구성요소를 효과적이고 보기좋게 배치하는 것을 의미함</p>
    <p> 레이아웃 구성방법은 1. 테이블을 이용  2. div태그를 이용+css  3. html 레이아웃 태그 +css </p>


    <div id="header"></div>
    <div id="main"></div>
    <div id="footer"></div>


    <h2>html5 레이아웃 태그</h2>
    <p>html5에서는 웹페이지 레이아웃 구성을 위해 별도의 태그를 제공</p>
    <p>기존 태그와 달리 의미가 내포된 태그이기 때문에 시멘틱semantic 태그라 함</p>

    <p>header : 문서의 상단영역 머릿글 정의, 사이트의 중요정보 로고, 타이틀 나타낼때</p>

    <p>nav:사이트의 탐색메뉴를 정의, 사이트에서 제공하는 컨텐츠에 접근하기 위한 다양한 종류의 메뉴를
        배치할때 사용(gnb, lnb,snb, fnb)</p>
    <p>footer: 문서의 하단영역 머릿글 정의, 하단영역, 일반적인 정보(저작권,회사정보,관리자) 나타냄</p>

    <p>section: 사이트의 문서영역을 지정할때 사용, 하위 요소로 header, article 등을 포함</p>

    <p>article: 사이트의 컨텐츠 하나를 정의할 때 사용, 사이트의 성격에 따라 여러개의 article이 존재</p>

    <p>aside: 사이트의 짜투리 컨텐츠광고 를 정의할 때 사용</p>

    <P>html5 레이아웃 태그를 이용한 레이아웃</P>

    <header></header>
    <nav></nav>
    <div id="container">
        <div id="main2">
        <section><article></article></section>
        <aside></aside>
        </div>
    </div>
    <footer></footer>




</body>
</html>

 

저작자표시