vscode를 이용해 html기초를 배웠다.

각종 글자관련태그와 목록관련태그를 우선으로 배웠고 이를이용해 기초연습을 해보았다.

03_글자,목록태그연습문제

((디지털컨버전스)공공데이터 융합 웹 애플리케이션 개발자 양성과정

담당 강사 : ***

이메일:****

---

• 프로그래밍언어
• Java
• 데이터 베이스
• Oracle
• 화면 구현
1. HTML5
2. CSS3
3. JavaScript
4. JQuery
5. Ajax
• 서버 개발 기술
1. JDBC
2. Servlet
3. JSP
• 프레임워크
1. Spring
2. MyBatis

</ul>

---

표 연습문제!

05_표 연습문제

<style>
    .tb4 thead {
        background-color: aqua;
    }

    .tb4 tbody th {
        background-color: orangered;
    }
    .tb4 tfoot th {
        background-color: orangered;
    }

    .tb4 tbody td {
        background-color: orange;
    }

    .tb4 tfoot td {
        background-color: yellow;
    }

</style>

        <tr>
            <td>01-468</td>
            <td>가을</td>
            <td>200,000원</td>
            <td>1068</td>
        </tr>

        <tr>
            <td>01-468</td>
            <td>가을</td>
            <td>200,000원</td>
            <td>1068</td>
        </tr>

        <tr>
            <td>01-468</td>
            <td>여름</td>
            <td>200,000원</td>
            <td>1068</td>
        </tr>

        <tr>
            <td>01-468</td>
            <td>봄</td>
            <td>200,000원</td>
            <td>1068</td>
        </tr>
        
        
    </tbody>

    <tfoot>
        <tr>
            <th colspan="3" >총합</th>
            <td>1,420,000원</td>
            <td>8468</td>
            
        </tr>
    </tfoot>
</table>



============================

영역관련 테그 연습

06_영역관련태그

<style>
    div {
        border: 1px solid black;

    }

    #div1 {
        background-color: red;

    }
    #div2 {
        background-color: yellow;

    }
    #div3 {
        background-color: green;

    }

span {
border: 1px solid black;
}

#span1{
background-color: red;
}

#span2 {
background-color: yellow;
}

#span3 {
background-color: green;
}

</style>

영역을 나누는 형식(성질)

<pre>
    <h3>block 형식</h3>

• 공간을 수직분할
• 크기를 지정하는 width, height 속성을 사용 할 수 있음

ex) p/pre (문단 나누기), h1~h6 (제목 영역 나누기)
hr(수평선 넣어서 화면 나누기), div(영역 나누기)

</pre>

<pre>
    <h3>inline 형식</h3>

• 공간을 수평분할
• 크기를 지정하는 width, height 속성을 사용 할 수 없음

ex) strong/b, em/i
mark, span(한줄을 나누는 용도)

</pre>

<hr>

<h2>block(div) / inline(span) 차이점 1 : 줄바꿈(개행)</h2>
<h3>div 태그</h3>
<p>
    block 형식의 태그는 한 줄을 모두 차지하기 때문에 <br>
    뒤에오는 내용은 다음줄에 작성이 된다.
</p>
<!-- # : id를 의미 -->
<div id="div1">첫번째 영역</div>
<div id="div2">두번째 영역</div>
<div id="div3">세번째 영역</div>

<hr>

<h3>span 태그</h3>
<p>
    inline 형식 태그는 한 줄 내에서 일정한 칸을 차지하기 때문에<br>
    뒤에오는 내용은 줄이 바뀌지 않고 옆에 붙는다.
</p>

<span id="span1">첫 번째 영역</span>
<span id="span2">두 번째 영역</span>
<span id="span3">세 번째 영역</span>

<hr>

<h2>block(div) / inline(span) 차이점 2 : 영역 지정 방식</h2>

<ul>
    <li>block : 사각형 박스 형태로 영역을 지정</li>
    <li>inline : 내부에 작성된 내용(Content) 단위로 영역을 지정</li>
</ul>

<div style = "background-color: chartreuse;">
    동해물과 백두산이 마르고 닭도록<br>
    하느님이 보우하사 우리나라 만세<br>
    무궁화 삼천리 화려강산<br>
    대한사람 대한으로 길이 보전하세
</div>

<span style="background-color: aqua;">
    동해물과 백두산이 마르고 닭도록<br>
    하느님이 보우하사 우리나라 만세<br>
    무궁화 삼천리 화려강산<br>
    대한사람 대한으로 길이 보전하세
</span>
<span style="background-color: aqua;">
    동해물과 백두산이 마르고 닭도록<br>
    하느님이 보우하사 우리나라 만세<br>
    무궁화 삼천리 화려강산<br>
    대한사람 대한으로 길이 보전하세
</span>

<hr>

<h2>block(div) / inline(span) 차이점 3 : 크기 지정(width / height)</h2>

<ul>
    <li>block : 크기 지정 가능</li>
    <li>inline : 크기 지정 불가능</li>
</ul>

<h3>div 태그</h3>

<div style="width: 200px; height: 200px; background-color: coral;">TEST</div>
<div style="width: 200px; height: 200px; background-color: coral;">TEST</div>

<h3>span 태그</h3>
<span style="width: 200px; height: 200px; background-color: coral;">TEST</ㄴ>
<span style="width: 200px; height: 200px; background-color: coral;">TEST</span>

<hr><hr><hr>

<h2>iframe 태그</h2>

<p>
    웹 문서 내부에 다른 웹문서를 추가하는 태그 <br>
    iframe 태그 == inline 형식이지만 크기 지정 가능
</p>

<iframe src="04_표관련태그.html" width="800px" height="1000px"></iframe>

<hr>
<iframe width="560" height="315" 
src="https://www.youtube.com/embed/kbofeRRGsB4?autoplay=1&mute=1" 
title="YouTube video player" frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

하수정 컬렉션
제품리스트	코드	분류	가격	구매가능개수