티스토리 뷰

KH 정보교육원 [ Java ]

KH 57일차 - CSS 기본 다지기3

monimoni 2022. 5. 18. 17:44

1.    웹의 특징

-      전 세계의 컴퓨터를 연결한다.

-      HTTP(Hyper Text Transfer Protocol) 프로토콜을 사용한다.

-      HTML(Hyper Text Markup Language)로 작성된 문서를 연결한다.

-      텍스트, 그래픽, 오디오, 비디오, 프로그램 파일 등의 멀티미디어 서비스 제공한다.

+ 반응형 웹 : 웹 서버에서 제공되는 정보가 다양한 기기에 맞춰 제공되는 웹 환경

 

2.    마크업 언어

-      마크업 언어 : 웹에서 사용되는 문서가 어떻게 구조화되는 가를 나타내는 언어

-      유형 :

-      1 ) 구조적 마크업 : 문서의 구성 방식을 표현한 것

-      2 ) 유형적 마크업 : 문서를 시각적으로 표현한 것

-      3 ) 의미적 마크업 : 데이터 내용 자체에 관한 것

 

3.    HTML5

-      HTML5의 구조적 설계 (***) :

-      1 ) <header> : 머리글처럼 페이지의 상단에 표시하는 부분

-      + HTML5 문서의 머리말 영역으로 중요한 정보를 표시한다. ( 제목, 로고 등 )

-      2 ) <footer> : 꼬리말처럼 페이지의 하단에 표시하는 부분

-      + 저작권 정보나 회사 정보 등과 같이 사이트의 자세한 정보를 표시한다.

-      3 ) <article> : 본문 내용을 표시하는 부분

-      + 독립된 주요 콘텐츠 영역을 의미하며, 하나의 section 안에 여러 개의 article 태그를 사용할 수 있다.

-      4 ) <section> : 문장의 그룹처럼 세부 내용을 그룹화할 때 사용하는 부분

-      + 문서의 영역을 구성할 때 사용하며, header/article/footer 태그를 포함할 수 있다.

-      5 ) <aside> : 본문에 관련된 주석처럼 별도의 내용을 분리하여 보여줄 때 사용

-      + 주요 콘텐츠 외의 남은 콘텐츠를 표시해 준다.

-      6 ) <nav> : 내비게이션을 표시하는 부분

-      + 웹 사이트 내에 분류된 다른 영역으로 이동할 때 사용한다.

-      HTML5의 특징 :

-      구조적 설계 지원 및 그래픽 / 멀티미디어 기능 강화

-      CSS3지원 및 자바스크립트 지원

-      다양한 API 제공 및 모바일 웹 지원

 

4.    URL과 URI

-      URL ( Uniform Resource Locator ) : protocol://domain:port/resourcepath?query_String

-      URI ( Uniform Resource Indicator ) : /resourcepath?query_String

-      + Protocol scheme : 1. HTTP(80번 포트) 2. HTTPS(암호화 통신, 443번 포트)

 

5.    HTML5 태그의 종류

-      1 ) 미리 정의되어 있는 태그 : 사용자가 변경할 수 없으며, 사용 용도에 맞게 사용

-      미리 정의된 태그의 종류 : 구조 기술 태그, 멀티미디어 태그

-      2 ) 사용자 정의 태그 : 사용자가 태그를 직접 설계하고, HTML문서에 포함해 작성

-      사용자 정의 태그의 종류 : 의미적 태그, 비의미적 태그

-      + 사용자 정의 태그를 작성할 때에는 일반적인 의미로 해석할 수 있도록 포함관계를 설정하거나 동등 관계로 설정이 가능해야 한다.

-      Ex. 정상적인 포함관계 : 회사 > 부서 > 팀 ( o )

-      Ex. 비정상적인 포함관계 : 팀 > 회사> 부서 ( x )

 

6.    태그의 속성

-      속성은 태그의 종속적인 정보를 표현하기 위해 사용한다.

-      태그 없이 단독으로 사용할 수는 없으며, 속성=”값”의 형태로 작성된다.

-      Ex. <시작태그 속성=”값”> 내용 </ 끝태그>

-      + 속성에는 style(Inline Stylesheet)도 있기에 해당 태그에 직접 스타일을 지정할 수도 있지만, 사용을 지양하는 것이 좋다.

 

7.    하이퍼링크

-      <a> 태그

-       : 다른 사이트 혹은 같은 문서 내 다른 위치로 이동할 때 사용한다.

-       : href 속성 값에 URL을 입력해 원하는 곳으로 이동할 수 있다.

-       : 만약 href의 URL이 준비되지 않았다면 #을 통해 막을 수 있다.

-       : target 속성을 통해서 링크를 클릭했을 때 웹 사이트가 열릴 창을 지정할 수 있다.

-       : target 속성에는 _blank(새로운 창), _self(현재 창), _parent(부모 창), _top(전체 영역)이 있다.

-       : ex ) < a href = “URL” target = “_blank” >

 

8.    정의형 목록 (***)

-      각 항목을 정의하기 위한 목록으로 <dl>태그를 사용한다.

-      정의한 각 항목은 <dt>태그를, 각 항목에 대한 설명은<dd>태그를 사용하며, <dd>태그는 tab키가 들어가 있는 상태로 출력이 된다.

[ 1. HTML5의 작성규칙 ]

 

<!DOCTYPE html>
<html lang="ko">

<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">
    <!-- meta 태그는 브라우저에게 정보를 전달해 주는 역할을 한다. -->

    <title>HTML5의 작성 규칙</title>
</head>

<body>
    1. html:5를 통해 문서의 기본 구조를 생성하였다.
    <br>
    2. 태그는 대소문자를 구분하지 않지만, 통상적으로 소문자로 작성하게 된다.
    <br>
    2-1. HTML5 문서는 소문자로 작성할 것을 권장한다. ( 대문자로 작성해도 같은 결과가 나오기는 한다. )
    <br>
    3. 본문 내      연속된     공백이나 엔터는 하나의 공백만 인정이 된다. (엔
    터를              누른다고 하여도 다음줄로 바뀌지 않고 하나의 공백이 생긴다.)
    <br>
    3-1. 즉, HTML5에서는 엔터, 탭, 스페이스 바와 같은 화이트 스페이스 키보드 값을 인식하지 않기에, HTML5에서는 특수문자를 사용해야 한다.
    <br>
    3-2. 공백이 필요할 때에는 &nbsp;를 사용하고 엔터키가 필요할 때에는 br태그를 사용해야 한다. ( p태그도 사용할 수 있다. )
    <p></p>
    4. p태그를 사용하면 새로운 문단이 생기는 것이기 때문에, p태그 안에 아무 것도 작성하지 않으면 위와 같이 하나의 빈 문장이 생기는 것처럼 된다.
    <p></p>
    5. 태그는 반드시 시작과 끝태그를 쌍으로 사용해야 하며, 태그들을 뒤섞으면서 사용하면 안된다.(**)
    <br>
    5-1. 예를 들어, head태그 title태그 head끝태그 title끝태그 이렇게 사용하면 안된다.
    <br>
    6. 태그는 아래와 같이 시작과 끝태그를 축약해서 사용할 수도 있다.(하지만 사용하지 않는 것이 좋다.)
    <p/>
    7. 주석은 컨트롤 + /를 누르면 형식에 맞게 자동생성된다.
    <br>
</body>

</html>
더보기

[ 출력 결과 ]

HTML5의 작성 규칙 1. html:5를 통해 문서의 기본 구조를 생성하였다.
2. 태그는 대소문자를 구분하지 않지만, 통상적으로 소문자로 작성하게 된다.
2-1. HTML5 문서는 소문자로 작성할 것을 권장한다. ( 대문자로 작성해도 같은 결과가 나오기는 한다. )
3. 본문 내 연속된 공백이나 엔터는 하나의 공백만 인정이 된다. (엔 터를 누른다고 하여도 다음줄로 바뀌지 않고 하나의 공백이 생긴다.)
3-1. 즉, HTML5에서는 엔터, 탭, 스페이스 바와 같은 화이트 스페이스 키보드 값을 인식하지 않기에, HTML5에서는 특수문자를 사용해야 한다.
3-2. 공백이 필요할 때에는  를 사용하고 엔터키가 필요할 때에는 br태그를 사용해야 한다. ( p태그도 사용할 수 있다. )

4. p태그를 사용하면 새로운 문단이 생기는 것이기 때문에, p태그 안에 아무 것도 작성하지 않으면 위와 같이 하나의 빈 문장이 생기는 것처럼 된다.

5. 태그는 반드시 시작과 끝태그를 쌍으로 사용해야 하며, 태그들을 뒤섞으면서 사용하면 안된다.(**)
5-1. 예를 들어, head태그 title태그 head끝태그 title끝태그 이렇게 사용하면 안된다.
6. 태그는 아래와 같이 시작과 끝태그를 축약해서 사용할 수도 있다.(하지만 사용하지 않는 것이 좋다.)

7. 주석은 컨트롤 + /를 누르면 형식에 맞게 자동생성된다.

[ 2. 포함관계 ]

 

<!DOCTYPE html>
<html lang="ko">

<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>포함관계를 들여쓰기로 정리하기</title>
</head>

<body>
    <p>문서의 구조를 명확하게 작성해야 한다. 들여쓰기나 줄 바꿈을 통해 소스코드의 가독성을 높이는 것이 좋다.</p>
    <p>주로 들여쓰기를 통해서 포함관계를 나타내기도 한다.</p>
    <p>outline(개요)탭을 보면 현재 문서의 포함관계를 알아볼 수도 있다.</p>
    <p>개발자 도구의 elements탭에서도 포함관계를 확인할 수 있다.</p>
    <!-- elements 탭을 보면 라이브서버가 자동으로 작성한 자바스크립트 코드를 볼 수 있다. -->
</body>

</html>
더보기

[ 출력 결과 ]

포함관계를 들여쓰기로 정리하기

문서의 구조를 명확하게 작성해야 한다. 들여쓰기나 줄 바꿈을 통해 소스코드의 가독성을 높이는 것이 좋다.

주로 들여쓰기를 통해서 포함관계를 나타내기도 한다.

outline(개요)탭을 보면 현재 문서의 포함관계를 알아볼 수도 있다.

개발자 도구의 elements탭에서도 포함관계를 확인할 수 있다.

[ 3. 미리 정의된 요소 - hr태그 ]

 

<!DOCTYPE html>
<html lang="ko">

<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>미리 정의된 요소</title>
</head>

<body>
    <!-- h1+hr+p+strong+br -->

    <h1>문서의 제목</h1>
    <hr>문서의 구분선
    <p>단락 구분</p>
    <strong>중요한 문장</strong>
    <!-- strong 태그 안에 있는 문장을 굵게 표시해 준다. -->
    <br>

    <hr>구분선 연습1
    <p></p>
    구분선 연습2 <hr>
    <!-- hr태그는 문서의 구분선을 생성해 주는 태그로 hr이 붙는 위치에 수평선을 그어준다. -->
    <!-- hr태그는 끝태그가 존재하지 않기에 <hr>만 작성해 주면 된다. -->
    <!-- hr태그는 블록 요소이기에 하나의 행을 모두 차지한다. -->

</body>

</html>
더보기

[ 출력 결과 ]

미리 정의된 요소

문서의 제목

문서의 구분선

단락 구분

중요한 문장
구분선 연습1

구분선 연습2

[ 4. 사용자 정의 태그 (**) ]

 

<!DOCTYPE html>
<html lang="ko">

<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>사용자 정의 태그(***)</title>
</head>

<body>

    <company name="삼성">KH 정보교육원
        <department deptno="1">영업부</department>
        <department deptno="2">취업부
            <team>강사팀</team>
            <team>취업지원팀</team>
        </department>
    </company>
    <!-- 사용자 정의 태그는 기본적으로 인라인 요소로 생긴다. -->

    <p data-role="100">Lorem, ipsum dolor.</p>
    <!-- data-role나 deptno와 같이 사용자 정의 속성을 만들 수도 있다. -->

</body>

</html>
더보기

[ 출력 결과 ]

사용자 정의 태그(***) KH 정보교육원 영업부 취업부 강사팀 취업지원팀

Lorem, ipsum dolor.

[ 5. 미리 정의된 속성 - img태그의 alt 속성 ]

 

<!DOCTYPE html>
<html lang="ko">

<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>미리 정의된 속성 사용하기</title>
</head>

<body>

    <h1>미리 정의된 속성을 사용한 사례</h1>

    <img src="https://picsum.photos/id/684/600/400"
    border="1" width="200" height="130" alt="Welcome" title="환영합니다!">
    <!-- border은 이미지 주위의 테두리를 만들어 준다. (하지만 사용하지 않는 것이 좋다.) -->
    <!-- alt는 이미지를 표시할 수 없는 브라우저의 경우 alt에 적힌 내용을 대신 보여준다. -->
    <!-- title은 사진에 마우스를 올려 놓았을 때, 해당 텍스트를 표시해준다. -->
    
    <a href="https://www.naver.com/" target="_blank" title="클릭하세요!">네이버 링크</a>

</body>
</html>
더보기

[ 출력 결과 ]

미리 정의된 속성 사용하기

미리 정의된 속성을 사용한 사례

Welcome 네이버 링크

[ 6. 사용자 정의 속성 (**) ]

 

<!DOCTYPE html>
<html lang="ko">

<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>사용자 정의 속성 사용하기</title>
</head>

<body>
    <!-- company[locarion=서울]+p*6+staff[id=mem1]+hr+p*6+staff[id=mem2]+hr -->

    <company locarion="서울">KH 정보 교육원<br>
        <department title="영업부 멤버 보기">
            <a href="#mem1">영업부</a>
        </department>
        <br>
        <department title="취업부 멤버 보기">
            <a href="#mem2">취업부</a>
            <!-- 엥커 태그를 활용하여, 지정된 태그로 움직일 수 있다. (이 경우 같은 문서내 id로 mem2인 staff태그로 움직인다.) (****) -->
            <!-- vs코드에서도 컨트롤을 누르고 앵커를 누르면, 해당 위치로 이동할 수 있다. -->
        </department>
    </company>

    <p>-</p>
    <p>-</p>
    <p></p>
    <p>-</p>
    <p>-</p>
    <p>-</p>

    <staff id="mem1">영업부 사원 이름
        <hr>
        <member position="과장">박지혜</member>
        <member>홍민성</member>
        <member hidden="hidden">최미래</member>
        <!-- hidden은 브라우저에 보이지 않는다. -->
    </staff>

    <hr>

    <p>-</p>
    <p>-</p>
    <p>-</p>
    <p>-</p>
    <p>-</p>
    <p>-</p>

    <staff id="mem2">취업부 사원 이름
        <hr>
        <member position="과장">김서울</member>
        <member hidden="hidden">나하늘</member>
        <member>홍현성</member>
    </staff>

    <hr>

</body>

</html>
더보기

[ 출력 결과 ]

사용자 정의 속성 사용하기 KH 정보 교육원
영업부
취업부

-

-

-

-

-

영업부 사원 이름
박지혜 홍민성

-

-

-

-

-

-

취업부 사원 이름
김서울 홍현성

[ 7. 레이아웃 (**) ]

 

<!DOCTYPE html>
<html lang="ko">

<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>레이아웃</title>
</head>

<body>

    <!-- 헤더 부분 -->
    <header>
        <center>
            <h1>문서의 주제목</h1>
        </center>
        <!-- center태그는 현재 사라진 태그로, 웹페이지의 중앙에다가 콘텐츠를 중앙정렬시켜주는 태그이다. -->
        <!-- 하지만 사라진 태그인 경우, 이제 받아들이지 않는 브라우저가 있을 수 있으니 사용하지 않는 편이 좋다. -->
        <nav>메뉴1</nav>
        <nav>메뉴2</nav>
    </header>

    <hr>

    <!-- 본문 부분 -->
    <section>
        <article>
            <header>
                <h2>부제목1</h2>
            </header>

            <p>이곳은 부세션 영역입니다.</p>
        </article>

        <article>
            <header>
                <h2>부제목2</h2>
            </header>
            <!-- header을 사용해야지 검색봇이 기능을 잘 할 수 있다. -->

            <p>이곳은 부세션 영역입니다.</p>
        </article>

        <article>
            <hgroup>
                <h2>대그룹</h2>
                <h3>중그룹</h3>
                <h4>소그룹</h4>
            </hgroup>
            <!-- hgroup은 제목태그를 모아준다. (현재는 사라진 태그이다.) -->
            <!-- 사라진 태그일지라도 브라우저에서는 처리해준다. -->
        </article>
    </section>
    <!-- 주요 콘텐츠가 3개 존재한다는 의미이다. -->

    <!-- 부가 정보 부분 -->
    <aside></aside>

    <hr noshade="noshade" width="500px">
    <!-- hr태그에 noshade 속성을 주어 구분선의 음영을 없애줄 수 있다. -->
    <!-- width 속성을 통해서 구분선의 가로 길이를 지정해 줄 수 있다. -->

    <!-- 사이트 정보 부분 -->
    <footer></footer>

</body>

</html>
더보기

[ 출력 결과 ]

레이아웃

문서의 주제목

부제목1

이곳은 부세션 영역입니다.

부제목2

이곳은 부세션 영역입니다.

대그룹

중그룹

소그룹

[ 8. pre 태그 (***) ]

 

<!DOCTYPE html>
<html lang="ko">

<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>pre tag 연습(***)</title>
</head>

<body>
    <header>
        <center>
            <h2>&lt; pre &gt; 태그</h2>
        </center>
    </header>

    <section>
        <article>
            <pre>
                ### 풀스택 개발자 양성을 위한 웹 프로그래밍 ###

                    HTML5 & CSS3 & JavaScript & JQuery

                        < 가격 : 35,000원 >
            </pre>
            <!-- pre 태그는 내가 작성한 그대로 웹 페이지에 출력하게 된다. ( 엔터키도 되고, 특수기호도 된다. ) -->
            <!-- 앞에 들여쓰기 한 부분도 그대로 적용된다. -->
        </article>
    </section>

    <hr size="10" align="left" width=90% noshade="noshade">

    <footer>
        <small>&copy; KH정보교육원 &reg; 2017</small>
        <!-- small 태그는 폰트의 크기를 작게 해준다. -->
        <!-- &copy는 저작권 표시를 해주고, &reg는 등록상표를 표시해 준다. -->

        <code>String name = "Pororo";</code>
        <!-- code태그는 해당 코드를 표시해 준다. -->
    </footer>

</body>

</html>
더보기

[ 출력 결과 ]

pre tag 연습(***)

< pre > 태그

                ### 풀스택 개발자 양성을 위한 웹 프로그래밍 ###

                    HTML5 & CSS3 & JavaScript & JQuery

                        < 가격 : 35,000원 >
© KH정보교육원 ® 2017 String name = "Pororo";

[ 9. 하이퍼 링크 (***) ]

 

<!DOCTYPE html>
<html lang="ko">

<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>하이퍼링크</title>
</head>

<body>
    <header>
        <center>
            <h2>&lt; 하이퍼링크 관련 태그 &gt;</h2>
        </center>
    </header>

    <section>
        <article>
            <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Golde33443.jpg/280px-Golde33443.jpg" target="_blank">W3C 사이트(blank window)</a>
            <!-- _blank는 새로운 창에 띄워준다. -->
            <p></p>
            <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Golde33443.jpg/280px-Golde33443.jpg" target="_self">W3C 사이트(self window)</a>
            <!-- self는 현재 창에 띄워준다. -->
            <p></p>
            <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Golde33443.jpg/280px-Golde33443.jpg" target="_parent">W3C 사이트(parent window)</a>
            <!-- parent는 부모 창에 띄워주는데, 부모가 없다면 자동으로 self로 바뀌어서 실행된다. -->
            <p></p>
            <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Golde33443.jpg/280px-Golde33443.jpg" target="_top">W3C 사이트(top window)</a>
            <!-- top은 top창에 띄워준다. -->
            <p></p>
        </article>
    </section>
</body>

</html>
더보기

[ 출력 결과 ]

하이퍼링크

< 하이퍼링크 관련 태그 >

[ 10. 페이지 내에서 이동 (**) ]

 

<!DOCTYPE html>
<html lang="ko">

<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>inside page link(현재 패이지 내에서 이동하기)</title>
</head>

<body>
    <header>
        <center>
            <h2>&lt;책갈피 기능&gt;</h2>
        </center>
    </header>

    <section>
        <article>
            <a href="#user">[이름]</a> &nbsp;
            <a href="#addr">[주소]</a> &nbsp;
            <a href="#tel">[전화번호]</a> &nbsp;
            <a href="#foot">[참고]</a> &nbsp;
            <!-- id를 통해서 해당 태그로 이동할 수 있다. ( a태그가 아니더라도 id가 지정되어 있으면, 이동할 수 있다. ) -->
            <!-- user처럼 id가 아닌 name으로 지정해도, 이동이 가능하다. ( 하지만 id를 사용하는 것이 좋다. ) -->
        </article>

        <p></p>
    </section>

    <!-- 1. -->
    <p>정보 영역</p>
    ... 생략
    <p>정보 영역</p>

    <p><a name=user>홍민성</a></p>
    <a href="#top">[TOP]</a>
    <!-- top이라는 id를 가지고 있는 것이 없는데, 실제로 누르면 위로 올라가게 되어 있는데 -->
    <!-- 이는 top이라는 id를 가지고 있는 것이 없다면, 자동으로 위로 올라가게 된다. (top만이 가능하다. 다른 id는 불가능하다.) (*) -->
    <!-- 그렇기에 top의 경우, 따로 id로 지정하지 않는다.(**) -->

    <p></p>

    <a href="#bottom">[BOTTOM]</a>
    <!-- 하지만 bottom의 경우 id를 지정하지 않으면, 이동이 불가능하다. -->

    <!-- 2. -->
    <p>정보 영역</p>
    ... 생략
    <p>정보 영역</p>

    <p><a id="addr">서울 강남구 신사동</a></p>
    <a href="#top">[TOP]</a>

    <!-- 3. -->
    <p>정보 영역</p>
    ... 생략
    <p>정보 영역</p>

    <p><a id="tel">032-1234-5678</a></p>
    <a href="#top">[TOP]</a>

    <!-- 4. -->
    <p id="foot">정보 영역</p>
    ... 생략
    <p>정보 영역</p>
    <!-- 이처럼 id를 a태그가 아닌 다른 태그에 지정해도 이동이 가능하다.(**) -->

</body>

</html>
더보기

[ 출력 결과 ]

inside page link(현재 패이지 내에서 이동하기)

<책갈피 기능>

정보 영역

... 생략

정보 영역

홍민성

[TOP]

[BOTTOM]

정보 영역

... 생략

정보 영역

서울 강남구 신사동

[TOP]

정보 영역

... 생략

정보 영역

032-1234-5678

[TOP] ... 생략

정보 영역

[ 11. 정의형 목록 (**) ]

 

<!DOCTYPE html>
<html lang="ko">

<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>목록(***)</title>
</head>

<body>
    <!-- 정의형 목록 -->
    <section>
        <article>
            <h2>정의형 목록</h2>

            <dl>
                <dt>첫번째 아이템</dt>
                <dd>- HTML5</dd>
                <dd>- HTML6</dd>
                <dd><img src="https://picsum.photos/id/684/200/100" alt=""></dd>
                <!-- 이처럼 목록에 텍스트만 들어갈 수 있는 것이 아니라, 이미지도 들어갈 수 있다. -->
                <dt>두번째 아이템</dt>
                <dd>- CSS3</dd>
                <dt>세번째 아이템</dt>
                <dd>- JavaScript</dd>
            </dl>

        </article>
    </section>
</body>
</html>
더보기

[ 출력 결과 ]

목록(***)

정의형 목록

첫번째 아이템
- HTML5
- HTML6
두번째 아이템
- CSS3
세번째 아이템
- JavaScript

[ 12. 테이블 - caption 태그 ]

 

<!DOCTYPE html>
<html lang="ko">

<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>테이블</title>

    <style>
        table{
            border-collapse: collapse;
            text-align: center;
        }

        table caption{
            font-weight: bold;
        }
    </style>
</head>

<body>
    <section>
        <article>
            <table border="1" style="width: 50%;">
                <caption> 행 통합 테이블 </caption>
                <!-- caption은 테이블의 제목을 나타낼 수 있다. -->
                <!-- caption의 위치는 어디에 지정해도 테이블의 위에 제목이 나타나게 된다. -->
                <!-- 단, table 태그 안에는 작성해야 한다. -->

                <thead>
                    <tr>
                        <th>1열</th>
                        <th>2열</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                </tbody>

                <tbody>
                    <tr>
                        <td>3</td>
                        <td>4</td>
                    </tr>
                </tbody>

            </table>
        </article>
    </section>
</body>

</html>
더보기

[ 출력 결과 ]

테이블
행 통합 테이블
1열 2열
1 2
3 4

 

 

 

728x90

'KH 정보교육원 [ Java ]' 카테고리의 다른 글

KH 59일차 - CSS 기본 다지기 5 ( 선택자 ) (*****)  (0) 2022.05.20
KH 58일차 - CSS 기본다지기 4 (***)  (0) 2022.05.19
KH 56일차 - CSS 기본 다지기 2 (***)  (0) 2022.05.17
KH 55일차 - HTML / CSS 기본 다지기  (0) 2022.05.16
KH 54일차 - HTML5 (***)  (0) 2022.05.13
댓글
«   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
최근에 올라온 글
Total
Today
Yesterday
공지사항