개발새발 블로그

'HTML'에 해당되는 글 24건

  1. [HTML5] 연습 문제
  2. [HTML5] 목록 관련 태그
  3. [HTML5] 글자 관련 태그
  4. [HTML5] 처음 시작

[HTML5] 연습 문제

컴퓨터/HTML5 
 <!-- 연습문제 -->
    <h1>학습내용</h1>
    <ul>
        <li>프로그래밍 언어
            <ul>
                <li>java</li>
            </ul>
        </li>
        <li>데이터베이스
            <ul>
                <li>Oracle</li>
            </ul>
            <li>화면구현
                <ol start="3">
                    <li><u><mark>HTML5</mark></u>
                        <ol><li>글자관련태그
                            <ul>
                                <li>h1-h6태그</li>
                                <li>sub, sup태그</li>
                            </ul>
                        </li>
                        <li> 목록관련태그</li>
                        </ol>
                    </li>
                    <li>CSS3</li>
                    <li>JavaScript</li>
                    <li>JQuery</li>
                </ol>
            </li>
            <li>서버 개발 기술
                <ol type="i">
                    <li>JDBC</li>
                    <li>Sevlet</li>
                    <li>JSP</li>
                    <li>AJAX</li>
                </ol>
            </li>
            <li>프레임워크
                <ol type="a">
                    <li>MyBatis</li>
                    <li>Spring</li>
                </ol>
            </li>
        </li>
        
    </ul>

    
</body>
</html>
저작자표시 비영리 변경금지 (새창열림)

'컴퓨터 > HTML5' 카테고리의 다른 글

[HTML5] 이미지 및 멀티미디어 관련 태그  (0) 2024.06.26
[HTML5] 표 관련 태그  (0) 2024.06.26
[HTML5] 목록 관련 태그  (0) 2024.06.24
[HTML5] 글자 관련 태그  (0) 2024.06.24
[HTML5] 처음 시작  (0) 2024.06.24
,

[HTML5] 목록 관련 태그

컴퓨터/HTML5 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>목록관련태그</title>
</head>
<body>
    <!-- li : list목록 들여쓰기 안됨. 블릿기호의 기본값 disc로 표현 -->
    <li>목록1</li>
    <li>목록2</li>

    <h1>ul : 순서가 없는 목록 태그</h1>

    <!-- ul > li 들여쓰기, 블릿기호의 기본값으로 표현 -->
    <ul>
        <li>HTML5</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuary</li>
    </ul>

    <h3>중첩으로도 사용 가능</h3>
    <ul>
        <li>HTML5
            <ul>
                <li>글자 관련 태그
                    <ul>
                        <li>h# 태그</li>
                        <li>p, pre 태그</li>
                        <li>b, i 태그</li>
                    </ul>
                </li>
                <li>목록 관련 태그</li>
            </ul>
        </li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuary</li>
    </ul>

    <br>

    <!-- type 속성을 이용하여 불릿기호 변경 가능 -->
    <ul type="circle">
        <li>HTML5</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuary</li>
    </ul>

    <br>

    <ul type="square">
        <li>HTML5</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuary</li>
    </ul>

    <br>

    <ul type="none">
        <li>HTML5</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuary</li>
    </ul>
   
    <hr>

    <h1>ol : 순서가 있는 목록 태그</h1>
    <ol>
        <li>HTML5</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuary</li>
    </ol>

    <!-- ul과 마찬가지로 중첩으로 사용 가능-->
    <!-- type 속성을 이용하여 숫자기호 변경 가능 -->
    <!-- start 속성을 이용하여 시작숫자 변경 가능 -->
    <ol type="I">
        <li>HTML5</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuary</li>
    </ol>

    <ol type="i" start="3">
        <li>HTML5</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuary</li>
    </ol>

    <ol type="A"> <!-- 소문자도 가능 -->
        <li>HTML5</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuary</li>
    </ol>

    <hr>
저작자표시 비영리 변경금지 (새창열림)

'컴퓨터 > HTML5' 카테고리의 다른 글

[HTML5] 이미지 및 멀티미디어 관련 태그  (0) 2024.06.26
[HTML5] 표 관련 태그  (0) 2024.06.26
[HTML5] 연습 문제  (0) 2024.06.24
[HTML5] 글자 관련 태그  (0) 2024.06.24
[HTML5] 처음 시작  (0) 2024.06.24
,

[HTML5] 글자 관련 태그

컴퓨터/HTML5 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>글자관련태그</title>
</head>
<body>
   <!-- h관련 태그 <h1~h6>  : 제목표시 -->
    <h1>h1 태그 입니다</h1>
    <h2>h2 태그 입니다</h2>
    <h3>h3 태그 입니다</h3>
    <h4>h4 태그 입니다</h4>
    <h5>h5 태그 입니다</h5>
    <h6>h6 태그 입니다</h6>

    <!-- 존재하지 않는 태그 사용시 일반 글꼴로 인식 -->
    <h7>h7 태그 입니다</h7> 

    <hr> <!-- 수평선을 넣는 태그 -->

    <h3>문단을 나누는 태그 : p, pre</h3>
    <p>
        문단을 나누는 태그는 p태그와 pre태그가 있다.<br>
        p태그는 줄바꿈하고자 한다면 별도로 태그를 작성해야 됨<br>
        그리고     공백은 한개의 공백만 표시하기 때문에 별도의
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;기호를 기술해야 한다.<br>
        그리고&ensp;2칸 띄우기와&emsp;3칸띄우기도 있다.<br> <!-- 1칸 반 정도 -->
    </p>
    <p><!-- p>lorem : 의미없는 문단 넣기 -->
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, atque, 
        necessitatibus adipisci itaque eum accusantium sint voluptas veritatis ipsum quaerat laudantium. Impedit molestiae nostrum tenetur facere nisi asperiores error obcaecati?
    </p>
    <pre>
pre태그는 시작태그부터 종료태그까지 입력된 내용 그대로 출력해줌
줄바꿈이라든지 혹은     여러개의 공백을 그대로 인식
그래서 시를 적어보겠습니다.

        [산산조각 / 정호승]

        룸비니에서 사온
        흙으로 만든 부처님이
        마룻바닥에 떨어져 산산조각이 났다
        팔은 팔대로 다리는 다리대로
        목은 목대로 발가락은 발가락대로
        산산조각이 나
        얼른 허리를 굽히고
        서랍 속에 넣어두었던
        순간접착제를 꺼내 붙였다
        그 때 늘 부서지지 않으려고 노력하는
        불쌍한 내 머리를
        다정히 쓰다듬어 주시면서
        부처님이 말씀하셨다
        산산조각이 나면
        산산조각을 얻을 수 있지
        산산조각이 나면
        산산조각으로 살아갈 수가 있지 
    </pre>

    <hr>

    <h3>그 밖의 글자를 다루는 태그들</h3>

    일반글꼴 (태그로 감싸지 않는 텍스트)
    <br><br>

    <b>b: 글자를 굵게 표시하는 태그</b>
    <br><br>

    <strong> : 글자를 굵게 표시하는 태그 + 스크린리더(텍스트를 읽어주는 것. 강조해서 읽어줌)</strong>
    <br><br>

    <i>i : 글자를 기울여서 표시하는 태그</i>
    <br><br>

    <em>em(empasis) : 특히 강조할 때 글자를 기울여서 표시하는 태그</em>
    <br><br>

    <mark>mark : 형광펜</mark> 효과를 내는 태그
    <br><br>

    <u>u : 글자에 밑줄이 그어지는 태그</u>
    <br><br>

    <s>s : 글자에 취소선을 넣어주는 태그</s>
    <br><br>

    <small>small : 글자를 작게</small> 표현해 주는 태그
    <br><br>

    기본글자에 <sub>sub : 아래첨자</sub>를 나타내는 태그<br>
    <sup>sup : 위첨자</sup>를 나타내는 태그
    <br><br>

    abbr : 줄임말 표시 <br>
    <abbr title="hyper Text Markup Language"> HTML </abbr>란 월드 와이드 웹(World Wide Web)의 핵심 마크업 언어이다.
    <br><br>

    blockquote : 인용문
    <blockquote>크게 성공한 사람은 그 성공에 비례할 만큼의 큰 노력이 숨어 있다. - 로렌스</blockquote>

    <!-- 특수문자 입력 -->
    <!-- escaping 문자 -->
    <p> "특수문자" & <tag></tag> </p>
    &lt;p&gt; "특수문자" & &lt;tag&gt;&lt;/tag&gt; &lt;/p&gt; <br>
    &lt;p&gt; &quot;특수문자&quot; & &lt;tag&gt;&lt;&#47tag&gt; &lt;&#47p&gt;
    <br><br>

    <hr>

    <h3>글자 관련 태그 응용(태그를 중첩하여 사용 가능)</h3>
    <p>
        태그를 중첩으로 사용 가능하다.<br>
        <b><em>굵게, 기울임</em></b> 글꼴로 표현 가능하고,<br>
        <s>취소선, <mark> 형광펜</mark></s>을 넣어 글자를 표현할 수 있음
    </p>
</body>
</html>
저작자표시 비영리 변경금지 (새창열림)

'컴퓨터 > HTML5' 카테고리의 다른 글

[HTML5] 이미지 및 멀티미디어 관련 태그  (0) 2024.06.26
[HTML5] 표 관련 태그  (0) 2024.06.26
[HTML5] 연습 문제  (0) 2024.06.24
[HTML5] 목록 관련 태그  (0) 2024.06.24
[HTML5] 처음 시작  (0) 2024.06.24
,

[HTML5] 처음 시작

컴퓨터/HTML5 
<!-- html 주석 -->
<!DOCTYPE html> <!-- HTML 문서 형식 선언 : HTML5 형식이라는 걸 알려주는 태그-->
<html lang="en">
    <!-- <head>태그는 머리부 : 이 문서의 각종 정보와 제목, 설명, 스크립트, 스타일 등을 작성 -->
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="author" content="gildong">
        <meta name="generator" content="VSCode">
        <meta name="생성일" content="2024-06-24">
        <meta name="description" content="html5를 처음 배우는 문서">
        <title>처음 HTML5</title>
    </head>
    <body>
        HTML5를 처음 시작 합니다. <br>
         <!-- <br> : 줄바꿈 태그 -->
    HTML5는 HTML의 완전한 5번째 버전으로 월드 와이드 웹 (World Wide Web)의 핵심 마크업 언어이다. 2004년 7월 Web Hypertext Application Technology Working Group(WHATWG)에서 웹 애플리케이션 1.0이라는 이름으로 세부 명세 작업을 시작하였다.
    <br>
    HTML5는 HTML 4.01, XHTML 1.0, DOM 레벨 2 HTML에 대한 차기 표준 제안이다. 비디오, 오디오 등 다양한 부가기능과 최신 멀티미디어 콘텐츠를 액티브X 없이 브라우저에서 쉽게 볼 수 있게 하는 것을 목적으로 한다.
    <br>
    W3C는 2014년 10월 28일 HTML5 표준안을 확정했다고 발표했다.
    <br>
    이후 2016년 11월 1일 HTML5의 마이너 업데이트 버전인 HTML5.1 표준안을 확정, 2017년 12월 14일 HTML5.2 표준안을 확정했다. HTML5.3 표준안은 현재 작업 초안 단계로 진행 중이다.
    </body>
</html>
저작자표시 비영리 변경금지 (새창열림)

'컴퓨터 > HTML5' 카테고리의 다른 글

[HTML5] 이미지 및 멀티미디어 관련 태그  (0) 2024.06.26
[HTML5] 표 관련 태그  (0) 2024.06.26
[HTML5] 연습 문제  (0) 2024.06.24
[HTML5] 목록 관련 태그  (0) 2024.06.24
[HTML5] 글자 관련 태그  (0) 2024.06.24
,

티스토리툴바