2022/05/06

jungkwanlee·2022년 5월 6일

코딩일지

목록 보기

30/108

1) 학습한 내용

HTML에서도 CSS를 사용할 수 있으며, CSS를 사용할 시 style태그를 작성한 다음에 아래와 같이 작성하면 된다.

<style>
        /* * : all 
        태그에는 display 속성을 표시: block 또는 inline */
        * {margin:0; padding:0; height: 100%;}
        header{width:100%; height:20%; background:yellow;}
        h1{width:15%; float:left;}
        nav{width:15%; height:10%; background: orange;float:right;}
        li{display: inline;}
        section{width:75%;height:75%;background: olive;float:left;}
       /* article{width:75%;height:35%; background: lightblue;float:left;}*/
        aside{width:25%; height:75%;background:plum;float:left;}
        footer{width:100%; height:5%; clear:both; background:pink;}
    </style>

여기서 CSS에 주석을 달 경우 HTML과 달리, /* */를 사용한다.

</head>
<body>
    <!--페이지나 섹션의 머리말을 표현.(제목, 간단한 소개 설명) 
    <section> , <article> 안에서도 사용 가능 
    <head> 랑 다르다. -->
    
        <header>
        <!-- 로고 -->
        <h1>
            <a href="#">logo</a>
            <img>
        </h1>
        <!-- 목차 -->
        <nav>
            <ul>
                <li>메뉴1</li>
                <li>메뉴2</li>
            </ul>
        </nav>
    
        </header>

태그는 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용한다. 요소를 사용하는 일반적인 예로는 메뉴, 목차, 인덱스 등이 있다. ``` section 영역 ``` article은 내용이 독립적이다. article 태그는 section과 다르게 독립적으로 존재할 수 있으며 재사용 할 수 있다.

section은 주제별로 구분한 그룹이다. 논리적으로 관계있는 요소 또는 문서를 분리할 때 사용한다.

<aside>aside 영역</aside>

aside태그는 본문 영역의 옆에 사용하는 태그

    <!-- 저자, 저작권, 주소, 연락처 -->
    <footer>footer 영역</footer>

태그는 문서나 특정 섹션(section)의 푸터(footer)를 정의할 때 사용

    <!-- div : division maker (영역만들기 ) => 블록이다!!
         비슷: span -->
    <!--div id="nav"></div>
    <nav></nav-->
    </body>

div태그는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들때 주로 사용한다.

2) 학습내용 중 어려웠던 점

이번 수업은 복습에 가까운 수업이다.

3) 해결방법

이미 배웠다해도 복습을 계속하는 것이 중요하다.

4) 학습소감

웹 개발자로 간다면 이미 배웠던 것도 계속해서 복습하는 것이 중요하다. 기술을 배우려면 연습을 해야하고 새로운 것이 나오면 그걸 습득해야 한다.

jungkwanlee

coding

이전 포스트

2022/05/52

다음 포스트