• 굵게 표시하는 <strong>과 <b> 태그, 기울임체 <em>, <i>태그

 

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>제주 이색 여행지</title>

    <style>

        p { 

            font-size:16px;  /* 글자 크기 */  

            line-height:25px;  /* 줄 간격 */

        }

    </style>

</head>

<body>

    <h2>제주 이색 여행지 - 이중섭 거리</h2>

    <p>

        <strong>주말</strong>마다

        <b>서귀포문화예술디자인 시장</b>이 열린다.

    </p>

    <p>

        <em>'아트마켓'</em>이라고도 부른다.

        <i>문화예술체험 </i>문화예술체험을 할 수 있다.<br>

        작가들이 만든 예술품을 판매하기도 한다.</p>

</body>

</html>

 

 

  • 인용문 <q>, <q cite>

 

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>웹 접근성(Web Accessibility)</title>

</head>

<body>

    <h1>웹 접근성</h1>

    <p>웹의 창시자인 팀 버너스 리 (Tim Berners-Lee)의 <q cite="http://www.w3.org/standards/webdesign/accessibility">웹의 힘은 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.</q>라는 말로 웹 접근성을 설명한다. </p>

</body>

</html>

 

 

  • <mark>: 형광펜 효과, <span>, <div>: 영역 묶기

 

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>제주 이색 여행지</title>

</head>

<body>

    <h2>야외 텐트를 닮은 =<mark>"테쉬폰"</mark></h2>

    <p>

        아일랜드 출신... 

        <span style="color: blue">국내 근현대 건축사의 한 페이지</span>라고 평가한다.

    </p>

</body>

</html>

 

  • <ruby>, <rt>: 동아시아 글자에 주석 표시

<!doctype html>

<html lang="ko">

    <head>

        <meta charset="utf-8">

        <title>Ruby</title>

    </head>

    <body>

        <p>루비(Ruby)는 1995년, 일본의 프로그래머인 마츠모토 유키히로 (<ruby>松本行弘<rt>まつもとゆきひろ</rt></ruby>)가 만든 프로그래밍 언어입니다.</p>

    </body> 

</html>

 

 

 

저작자표시 비영리 변경금지

'Learning > HTML&JavaScript' 카테고리의 다른 글

폼 관련 태그들  (0) 2020.07.14
이미지와 하이퍼링크  (0) 2020.07.14
표 제목(<caption>, <figure>, <figcaption>), 표 구조 정의(<thead>, <tbody>, <tfoot>), 열 스타일(<col>, <colgroup>)  (0) 2020.07.07
목록태그(<ul>,<li>,<ol>), 설명목록(<dl>,<dt>,<dd>), 표를 만드는 태그(<table>,<tr>,<td>,<colspan>)  (0) 2020.07.07
HTML 편집기 다운로드, 기본 문법, 이미지 및 특수기호 삽입, <hr>, <blockquote>, <pre>태그  (0) 2020.07.07

  • 웹 페이지 구성 3요소

    • 웹 페이지의 구조, 내용-HTML 태그

    • 모양-CSS

    • 행동 및 응용 프로그램-Javascript

  • HTML은 텍스트 뿐만 아니라 이미지, 링크 등을 자유롭게 표현가능

 

  • 비주얼 스튜디오 코드에서 Live Server를 마켓플레이스에서 다운로드

 

 

  • 작업하려는 컴퓨터 공간에 HTML 폴더를 만들고 VSC에서 새파일 만들기-다른 이름으로 저장-문서 확장자는 HTML 설정

    • 편집기에서 ! 치고 키보드 TAB 누르면 (에밋 기능) 문서 포맷이 자동완성된다.

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>첫번째 웹프로그램</title>

</head>

<body>

    <h1>시간이란</h1>

    <p>내일 죽을 것 처럼 오늘을 살고<br>

    영원히 잘 것처럼 내일을 꿈꾸어라.</p>

</body>

</html>

 

 

    • viewport:자동으로 휴대폰이나 태블릿 사이즈에 맞춰서 웹사이트를 출력

    • width=device-width: 디바이스에 맞춰 가로사이즈를 변환

 

 

  • 이미지 삽입

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>첫번째 웹프로그램</title>

</head>

<body>

    <h1>시간이란</h1>

    <p>내일 죽을 것 처럼 오늘을 살고<br>

    영원히 잘 것처럼 내일을 꿈꾸어라.</p>

</body>

</html>

 

 

  <h1>&amp; 웹 개발 기초＆</h1>

  • <hr>과 <blockquote>

 

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <h1>제주 이색 여행지</h1>

    <h2>야외 텐트를 닮은 건축물 "테쉬폰"</h2>

    <p>아일랜드 출신 임피제 신부가 1954년 제주에 오면서 목장 숙소로 짓기 시작한 후 사료공장, 성당으로 활용됐습니다.</p>

    <p>제주에서 점차 다른 지방으로 보급됐지만 현재 제주에만 건축물이 남아있는데, 

    국내 근현대 건축사의 한 페이지를 보여주는 가치를 지닌다고 전문가들은 평가합니다.</p>

    <hr>

    <blockquote>성이시돌목장은 제주특별자치도 제주시 한림읍 금악리에 있는 목장이다. 특히 이시돌목장은 제주 지역 최초의 전기업목장(全企業牧場)으로 

    1961년 11월 말 제주시 한림읍 금악리에 세워 양돈 사업을 실시하였으며 면양을 사육하였던 것으로 알려져 있다.

    이시돌목장의 특색있는 건축양식으로 테쉬폰도 유명하다. (출처:향토문화전자대전)   

    </blockquote>

</body>

</html>

 

 

 

  • <pre>는 들여쓰기

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <h2>로컬 스토리지(Local Storage)를 저장하는 함수

    로컬 스토리지(Local Storage)를 저장하는 함수 : </h2>

    <pre>

     function savetheLocal(){

          var second = document.getElementById("second");

          var thevalue = second.value;

          localStorage.setItem(1, thevalue);

          gettheLocal();

     }   

    </pre>

</body>

</html>

저작자표시 비영리 변경금지

'Learning > HTML&JavaScript' 카테고리의 다른 글

폼 관련 태그들  (0) 2020.07.14
이미지와 하이퍼링크  (0) 2020.07.14
표 제목(<caption>, <figure>, <figcaption>), 표 구조 정의(<thead>, <tbody>, <tfoot>), 열 스타일(<col>, <colgroup>)  (0) 2020.07.07
목록태그(<ul>,<li>,<ol>), 설명목록(<dl>,<dt>,<dd>), 표를 만드는 태그(<table>,<tr>,<td>,<colspan>)  (0) 2020.07.07
<strong>, <br>, <q>, <q cite>, <mark>, <span>, <div>, <ruby>, <rt>  (0) 2020.07.07

+ Recent posts

티스토리툴바