본문 바로가기

┏◈ 홈페지.블로거

HTML연습장

HTML연습장 만들기

안녕하세요? 父母子女칼럼 이은태 입니다
우리가 문서를 작성하기 위해 워드프로세서를 사용하듯이 HTML을

작성하기 가장 기본적인 에디터는 윈도우의 메모장인바 이곳에

연습장을 만들어 놓으면 기초를 튼튼히 해주고 언제 어디서나 HTML

문서를 만들 수있으며 다른 사람의 소스를 분석할 힘을 키운다는

점에서 개인적으로는 가장 추천하고 싶습니다.
그럼 지금부터 내연습장을 하나 준비하기로 합시다
이는 HTML을 배워도 연습을못한다면 안되기 때문이죠
자 ..어려워 검내지 마시고 지금부터 아래 설명대로만 따라해봅니다

위의 그림과 같이 하셔서 시작->프로그램->보조프로그램->

메모장을불러옵니다.

메모장에 아래와 같이 타이핑하세요(복사해 넣으셔도 됨)<head><title>HTML연습장 </title>
                <style type="text/css">.another_category {
    border: 1px solid #E5E5E5;
    padding: 10px 10px 5px;
    margin: 10px 0;
    clear: both;
}

.another_category h4 {
    font-size: 12px !important;
    margin: 0 !important;
    border-bottom: 1px solid #E5E5E5 !important;
    padding: 2px 0 6px !important;
}

.another_category h4 a {
    font-weight: bold !important;
}

.another_category table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100% !important;
    margin-top: 10px !important;
}

* html .another_category table {
    width: auto !important;
}

*:first-child + html .another_category table {
    width: auto !important;
}

.another_category th, .another_category td {
    padding: 0 0 4px !important;
}

.another_category th {
    text-align: left;
    font-size: 12px !important;
    font-weight: normal;
    word-break: break-all;
    overflow: hidden;
    line-height: 1.5;
}

.another_category td {
    text-align: right;
    width: 80px;
    font-size: 11px;
}

.another_category th a {
    font-weight: normal;
    text-decoration: none;
    border: none !important;
}

.another_category th a.current {
    font-weight: bold;
    text-decoration: none !important;
    border-bottom: 1px solid !important;
}

.another_category th span {
    font-weight: normal;
    text-decoration: none;
    font: 10px Tahoma, Sans-serif;
    border: none !important;
}

.another_category_color_gray, .another_category_color_gray h4 {
    border-color: #E5E5E5 !important;
}

.another_category_color_gray * {
    color: #909090 !important;
}

.another_category_color_gray th a.current {
    border-color: #909090 !important;
}

.another_category_color_gray h4, .another_category_color_gray h4 a {
    color: #737373 !important;
}

.another_category_color_red, .another_category_color_red h4 {
    border-color: #F6D4D3 !important;
}

.another_category_color_red * {
    color: #E86869 !important;
}

.another_category_color_red th a.current {
    border-color: #E86869 !important;
}

.another_category_color_red h4, .another_category_color_red h4 a {
    color: #ED0908 !important;
}

.another_category_color_green, .another_category_color_green h4 {
    border-color: #CCE7C8 !important;
}

.another_category_color_green * {
    color: #64C05B !important;
}

.another_category_color_green th a.current {
    border-color: #64C05B !important;
}

.another_category_color_green h4, .another_category_color_green h4 a {
    color: #3EA731 !important;
}

.another_category_color_blue, .another_category_color_blue h4 {
    border-color: #C8DAF2 !important;
}

.another_category_color_blue * {
    color: #477FD6 !important;
}

.another_category_color_blue th a.current {
    border-color: #477FD6 !important;
}

.another_category_color_blue h4, .another_category_color_blue h4 a {
    color: #1960CA !important;
}

.another_category_color_violet, .another_category_color_violet h4 {
    border-color: #E1CEEC !important;
}

.another_category_color_violet * {
    color: #9D64C5 !important;
}

.another_category_color_violet th a.current {
    border-color: #9D64C5 !important;
}

.another_category_color_violet h4, .another_category_color_violet h4 a {
    color: #7E2CB5 !important;
}
</style>

                
                <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-a73de51e390cf13289fe07f231e058ab5f6b3814/static/style/revenue.css"/>
<link rel="canonical" href="https://absos7.tistory.com/849"/>

<!-- BEGIN STRUCTURED_DATA -->
<script type="application/ld+json">
    {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://absos7.tistory.com/849","name":null},"url":"https://absos7.tistory.com/849","headline":"HTML연습장","description":"출처: 방랑자HTML연습장 만들기 안녕하세요? 父母子女칼럼 이은태 입니다 우리가 문서를 작성하기 위해 워드프로세서를 사용하듯이 HTML을 작성하기 가장 기본적인 에디터는 윈도우의 메모장인바 이곳에 연습장을 만들어 놓으면 기초를 튼튼히 해주고 언제 어디서나 HTML문서를 만들 수있으며 다른 사람의 소스를 분석할 힘을 키운다는 점에서 개인적으로는 가장 추천하고 싶습니다. 그럼 지금부터 내연습장을 하나 준비하기로 합시다 이는 HTML을 배워도 연습을못한다면 안되기 때문이죠 자 ..어려워 검내지 마시고 지금부터 아래 설명대로만 따라해봅니다 위의 그림과 같이 하셔서 시작-&gt;프로그램-&gt;보조프로그램-&gt;메모장을불러옵니다. 메모장에 아래와 같이 타이핑하세요(복사해 넣으셔도 됨) 야호! 드디어 나의 연습장이 완성되었다^^..","author":{"@type":"Person","name":"함께나누는 아름다운세상","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"2006-12-07T11:57:00+09:00","dateModified":"2006-12-07T11:57:00+09:00","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}}
</script>
<!-- END STRUCTURED_DATA -->
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-a73de51e390cf13289fe07f231e058ab5f6b3814/static/style/dialog.css"/>
<link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-a73de51e390cf13289fe07f231e058ab5f6b3814/static/style/postBtn.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-a73de51e390cf13289fe07f231e058ab5f6b3814/static/style/tistory.css"/>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-a73de51e390cf13289fe07f231e058ab5f6b3814/static/script/common.js"></script>

                
                </head> <body >야호! 드디어 나의 연습장이 완성되었다^^
                <div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-a73de51e390cf13289fe07f231e058ab5f6b3814/static/script/common.js"></script>
<script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script>
<script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script>

                
                <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"979141-849","customProps":{"userId":"0","blogId":"979141","entryId":"849","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"849","entryTitle":"HTML연습장","entryType":"POST","categoryName":"┏◈ 홈페지.블로거","categoryId":"366829","serviceCategoryName":null,"serviceCategoryId":null,"author":"710127","authorNickname":"함께나누는 아름다운세상","blogNmae":"함께 나누는 아름다운 세상","image":"","plink":"/849","tags":[]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script>
<script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index.js"></script>
<script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/polyfills-legacy.js" nomodule="true" defer="true"></script>
<script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index-legacy.js" nomodule="true" defer="true"></script>

                </body></html>

되셨으면 혹 괄호를 빼먹거나 오타가없는지 다시한번 검토하시고

아래그림과 같아야 합니다

모든게 잘되셨어요.. 그럼 이제 저장할 차례입니다.
메모장의 제일위에서 두번째칸을보면 파일(F) 편집(E) 보기(V)

즐겨찾기(A) 라는게 보여요?
파일을 클릭하하시고 다른이름으로 저장을 클릭하세요


이렇게 창이뜨죠?

바탕화면폴드를 선택하세요

다음에 파일이름적는란에 아래와 같이 적으세요sample.html점을 빠트리면 안됩니다. 되셨나요?다음  파일 형식이있죠?여기서 반드시 모든 파일을 선택하셔야해요. 
옆의 세모꼴 뒤집어진거 클릭하면 나와요

그리고 바로옆에있는 저장을 누르세요수고하셨어요^^

컴퓨터 바탕화면을 보면

sample 이라고 생겼지요? 여기서 바로 1.sample을

더불 클릭하면 연습장창이 나옵니다

이렇게 나올겁니다

제일위 파란부분을 보세요. HTML연습장 이라고 되어있나요?
이젠 연습장이생겼으니 HTML을 당장 시작해 봅시다.
연습장 제일위에보면 파일(F) 편집(E) 보기(V) 도구(T) 가있어요.

찾으셨으요?
3번째 2.보기를 클릭하여 보면 도구모음 상태표시줄 탐색창

이렇게 쭉~있는데
밑에서 두번째보면 3.소스라는게 보이면 클릭 하세요.

새로운 메모장창 하나가 뜨죠?
이게 위에서 작성한 HTML문서(소스)의 원본입니다.
앞으로 이곳 메모장에서 HTML문서(소스)를 연습하거나

작성한후 HTML연습장의 새로고침을 클릭하여 실행된 화면을

확인하시면 됨니다.

이렇게 나와 있으면 실제로 실행되는 모습을 한번 연습해봅시다.
이젠 <body>와 </body>사이 안에 다음과 같이 적어 보세요.

<br><marquee> 움직일까?</marquee> 
여기선 우선 참고정도로<marquee> 는 글자를 오른쪽에서 왼쪽으로 움직여라는 
명령어 입니다움직일까? 는 자기가 쓰고싶은 문구를 넣으시면 됩니다</marquee> 는 명령어를 끝낸다는 말입니다한번 명령하면 반드시 명령어를 끝내어야 합니다.자 이젠 진짜 글자가 움직이는지 봐야겠죠?파일(F) 편집(E) 보기(V) 도구(T)에서 파일을 클릭해서 
위에서 네번째 저장을 클릭

다음에 sample.html의 메뉴에서 새로고침을 클릭합니다.

어때요? 이렇게 보이나요?야호! 드디어 나의 연습장이
완성되었다^^
움직일까?
이렇게 나온분은 성공입니다.혹 안되신분은 괄호나 스펠링이 틀리지 않았나 검토하고 
다시 해보셔요
다시 연습해봅니다. 보기에서 소스 클릭해서 메모장을 
불러옵니다<marquee>움직일까?</marquee>밑에 아래의 
태그들을 복사하여 다 적으세요
 <FONT size=2><FONT size=3><img src="http://icon.sie.net/image/etc/music/music01.gif" BORDER=0>♣Five - When The Lights Go Out♣<br><br><A HREF="http://column.dreamwiz.com/AUTH/column.cgi" TARGET="_blank"><img src="http://i.dreamwiz.com/dw/ko/aco/img/col/cs_1214_col.gif" border="0"></a></FONT></FONT>
파일에서 저장하고 sample.html에서 새로고침한후 다시보세요
움직일까?


♣Five - When The Lights Go Out♣

다시보는법을 모르시겠어요?

그렇다면 이글을 처음부터 다시 복습하세요

힘드셨어요? 걱정마시고 여기에선 위 연습장 사용방법만 
완전히 익혀두세요!
위방법이 복잡하고 번거롭다고요?
http://mysesang.com/buty/tag.html
위주소를 클릭하여 뜬 연습장창의 [파일] -> [보내기] -> [바탕화면에 바로가기만들기] 를 차래데로 클릭하여 보관하고 사용하세요~^!^oio

'┏◈ 홈페지.블로거' 카테고리의 다른 글

플래시 퍼 오는 법  (0) 2006.12.15
태그 총정리  (0) 2006.12.14
인터넷 달력 및 각종계산하기 모음  (0) 2006.12.12
음악 올리는방법  (0) 2006.12.07
태그연습장  (0) 2006.12.07