04_content 구분 & 문자콘텐츠
FrontEnd/HTML&CSS

04_content 구분 & 문자콘텐츠

728x90

오늘은 HTML의 콘텐츠들의 역할 및 사용법을 간단하게 공부했다.

 

header - 제목정보들
footer - 페이지 맨 하단
<h1> <h6> 6단계의 문서 제목 구현
aside - 광부부분? 오른쪽에 따로 되어져있는 부분
nav - navigation
address - 연락처 제공
위에 모두 블럭요소 (영역설정,레이아웃설정!)

 

우리가 책을 읽을때도 목차부터 해서 큰주제부터 작은주제로 나누어지듯이 사이트들도 만들어지게 된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./02_content.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li>메뉴1</li>
                <li>메뉴2</li>
                <li>메뉴3</li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h1>Section</h1>
            <article>
                <h2>article1</h2>
                <p>Contents...</p>
            </article>
            <article>
                <h2>article2</h2>
                <p>Contents...</p>
            </article>
            <article>
                <h2>article3</h2>
                <p>Contents...</p>
            </article>
        </section>
        <aside>
            Aside
        </aside>
    </main>

    <footer>
        <address>
            <a href="mailto:jmg081005@naver.com">jmg081005@naver.com</a>
            <a href="tel:+8201012345678">01012345678</a>
        </address>
    </footer>
    
</body>
</html>

 

위코드는 아주 간단하게 구조들의 틀만 나오게 한 코드이다. 큰 페이지의 골격이라고 보면되고

 

header {
    background: tomato;
    margin : 10px;
    padding : 10px;
}

header nav {
    display : flex;
}

header nav ul {

    list-style: none;
    margin : 10px;
}

header nav ul li {

}

main{
    display : flex;
}

section {
    width : 70%;
    background: tomato;
    margin: 10;
    padding: 10px;
    box-sizing: border-box;

}

section h1 {
    

}

article {
    background: yellowgreen;
    margin-bottom: 10px;
    padding: 10px;

}

article h2{

}

article p{

}

aside {
    width: 30%;
    background: tomato;
    margin: 10px;
    padding: 20px;
    box-sizing: border-box;

}

footer {

    background: tomato;
    margin : 10px;
    padding : 20px;

}

footer address{
    

}

footer address a {
    display : block;

}

아직 CSS를 배워보진 않았지만 간단한 예제로 살짝만 이해하면서 영역이 어떻게 나오는지정도만 확인했다.

 

각 영역별 구성

잘 나오는것을 확인할 수 있었다.

 

ol - ordered list
ul - undordered list
li - list item

 

위 세개를 공부했는데 약자가 내가 생각한 그대로였어서 놀랐다 ㅋㅋㅋ 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li >
            Apple
            <ul>
                <li>Apple</li>
                <li>Banana</li>
                <li>Mango</li>
            </ul>
        </li>
        <li>Banana</li>
        <li>Mango</li>
    </ul>

    <ol>
        <li value = "7">
            Apple
            <ol start ="4" type = "1" reversed>
                <li>Apple</li>
                <li>Banana</li>
                <li>Mango</li>
            </ol>
        </li>
        <li value = "99">Banana</li>
        <li>Mango</li>
    </ol>

</body>
</html>

ul은 순서를 구분할 수 있는데 파이썬 함수안의 key값들로 추가기능을 할 수있는거같은 기능들이 포함되어 있다. 

 

실행화면

코드와 실행화면을 한번씩만 보면 바로바로 이해가 될 것이다.

 

dl - description list
dd - definition Details
dl Definition Term

 

이번엔 dl 예제이다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>Coffee</dt>
        <dd>Coffee is a brewed drink prepared form roasetd</dd>
        <dt>Milk</dt>
        <dd>Milk is a  food</dd>
    </dl>
    
    <ul>
        <li>
            <dfn>Coffee</dfn>
            <p>Coffee is a brewed drink prepared form roasetd</p>
        </li>
        <li>
            <dfn>Milk</dfn>
            <p>Milk is a  food</p>
        </li>
    </ul>
</body>
</html>

큰 특징은 dl 안에는 dt,dd말고는 들어올 수가 없는것이 특징. 그래서 css로 꾸미기 어렵다고 한다. ul,li로도 구현이 충분히 가능하다는것이 특징!

 

p-문단
hr  / - 문단의 분리를 위해 설정
blockquote - 일반적인 인용문을 설정

 

마지막으로 p,hr, blockquote에 대한 개념을 정리했다. 문단이 어떻게 출력되는지를 담당한다.

 

말보다는 코드와 실행화면을 한번씩 보면 이해가 잘 될 것이다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>Document</title>
    <link rel="stylesheet" href="./05_p.css">
</head>
<body>
    <p>
        1. 동해물과 백두산이 마르고 닳도록 <br/> <!-- 줄바꿈 -->
        하느님이 보우하사 우리나라 만세
        무궁화 삼천리 화려 강산
        대한 사람 대한으로 길이 보전하세
    </p>

    <hr/>
    <p>
        2. 남산 위에 저 소나무 철갑을 두른 듯
        바람 서리 불변함은 우리 기상일세
        무궁화 삼천리 화려 강산
        대한 사람 대한으로 길이 보전하세
    </p>

    <p>
        3. 가을 하늘 공활한데 높고 구름 없이
        밝은 달은 우리 가슴 일편단심일세
        무궁화 삼천리 화려 강산
        대한 사람 대한으로 길이 보전하세
    </p>

    <p>
        4. 이 기상과 이 맘으로 충성을 다하여
        괴로우나 즐거우나 나라 사랑하세
        무궁화 삼천리 화려 강산
        대한 사람 대한으로 길이 보전하세
    </p>
    
</body>
</html>
hr {
    border: none;
    border-top: 2px dashed red;
    

}

각각 html과 css파일이다.

 

실행화면

br은 줄바꿈을 임의로 해주고, p를 사용하면 스페이스바는 먹지않고 출력된다! hr을 이용하면 문단의 분리를 가능하게 한다는 특징이 있다.

 

그렇다면 내가 쓴 그대로 사용하고싶으면 어떻게할까?? pre을 사용하면 된다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>Document</title>
    <link rel="stylesheet" href="./05_p.css">
</head>
<body>
    <pre>
         1. 동해물과       백두산이 마르고 닳도록 <!-- 탭키 등도 같이들어간다.-->
    하느님이 보우하사 우리나라 만세
    무궁화 삼천리 화려 강산
    대한 사람 대한으로 길이 보전하세
    </pre>

    <pre>1. 동해물과       백두산이 마르고 닳도록 <!-- 탭키 등도 같이들어간다.-->
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세</pre>
        
    
    
</body>
</html>

pre 실행화면

코드와 비교하면 내가 코드를 쉽게 보기위한 탭키까지 출력되는것을 알 수있다. 그래서 코드 두번째 단락처럼 하는것이 좋다.

728x90

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

06_멀티미디어(img,audio,video)  (0) 2021.10.31
05_HTML 인라인 요소  (0) 2021.10.31
03_HTML 블록과 인라인, 메타데이터  (0) 2021.10.28
02_css 첫걸음  (0) 2021.10.28
01_html 기초  (0) 2021.10.27