본문 바로가기

카테고리 없음

web programming note 1

<!DOCTYPE html> <!--HTML5문서임을 브라우저에 알리는 지시어로 첫 줄에 입력-->
<HTML>
<HEAD> <!--메타 태그, 자바스크립트 코드, CSS 스타일 시트 등-->
<TITLE>페이지 타이틀</TITLE>
</HEAD>
<!--헤드와 바디 사이에는 아무것도 입력 X-->
<BODY> <!--문서 본문-->
    <h1 title="마우스 올릴 시 설명문(툴팁)출력">가장 큰 제목</h1> <!--h 는 제목을 뜻하는 heading 줄임말-->
    <h6>가장 작은 제목</h6>
    <p>문단은 paragraph 여러 단락으로 나눌 수 있다.</p>
    <hr> <!--수평선-->
    <br> <!--다음 줄로 넘어감. HTML에서는 Enter키 여러 번 입력해도 하나의 빈칸으로 처리되어 다음 줄로 넘어가지 못함-->
    <p>엔티티나 코드를 사용해 문자, 기호, 심볼을 입력할 수 있다.</p>
    <pre>&lt;pre&gt;태그를 사용하면
                    사용자가 입력한 빈 칸 그대로
                    띄어져 출력된다.</pre>
    <!--블록 태그 : <p> <h1> <div> <ul>         항상 새 라인에서 시작, 블록 단위 공간을 차지
        인라인 태그 : <strong> <a> <img> <span> 블록에 삽입되어 블록 콘텐츠의 일부를 표현-->
    <div style="background-color:khaki; padding:20px;">
        여러 태그들을 블록으로 묶는 컨테이너.
        블록 전체에 동일한 스타일 적용하는 단위처럼 다루고자 쓰인다.
        &lt;span&gt;태그는 <span style="color:indigo">텍스트 일부분을 제어할 때 사용</span>한다.
    </div>
</BODY>
</HTML>

 

<!--메타 데이터 : 데이터를 설명하는 데이터 <base> <link> <script> <style> <title> <meta>-->

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>페이지 타이틀</TITLE>
<meta name="author" content="저작자" charset="UTF-8"> 
<!--메타 데이터는 name과 content 속성 쌍으로 구성. charset인코딩 방식 지정-->
<base href = "http://www.mysite.com/score/"> <!--base URL 지정-->
</HEAD>
<BODY>
    <a href="math.html">수학</a> <!--http://www.mysite.com/score/math.html로 처리-->
    <a href="science.html" target="_blank" download>과학</a>
    <!-- target 속성 _blank : 새 윈도우에서 열기
					 _self : 현재 윈도우
                     _parent : 부모 윈도우
                     _top : 브라우저 윈도우
         download 속성으로 다운로드 링크 만들 수 있다.-->
    <img src = "url. 필수 항목" alt = "이미지 출력할 수 없는 경우 출력되는 문자열. 필수 항목" width="폭" heigth="높이">
    
</BODY>
</HTML>

 

리스트

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>리스트 만들기</TITLE>
</HEAD>
<BODY>
    <pre>순서 있는 리스트 ol 
         순서 없는 리스트 ul
         정의 리스트 dl
         리스트 아이템 li - li종료 태그 생략 가능
    </pre>
    <ul>
        <li>음식 리스트
            <ul>
                <li>스파게티</li>
                <li>크루아상</li>
            </ul>
        <li>라면 만들기
            <ol type="1">
                <li>물 끓이기
                <li>면과 스프 넣기
                <li>파 썰어 넣기
                <li>맛있게 먹기</li>
            </ol>
    </ul>
    <dl>
        <dt><strong>용어1</strong></dt>
        <dd>설명1</dd>
        <dt><strong>용어2</strong></dt>
        <dd>설명2</dd>
    </dl>
</BODY>
</HTML>