HTML5 기초 | textarea 태그, MDN, CKEDITOR

textarea 태그

텍스트에리어 태그는 사용자에게 글을 입력받을 때 쓰는 태그이다. 아래 body 의 textarea 태그를 확인한다.

지금 html을 학습중이라면 스타일 시트는 html 과 따로 사용하기 보다는 항상 같이 사용하는 것을 권장한다.

두개의 코드가 분리된 것이라기 보다는 하나로 어우러져서 웹을 표현하는 것이다.

html 학습을 먼저 시작하면 style 태그도 만지작 거리게 되는데, 개별 html태그에 style 태그를 넣어서 사용하는 것은 별로 권장되지 않는다. 문서의 구조를 읽기가 더 혼란 스럽다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    label,
    textarea {
        font-size: 1em;
        letter-spacing: 1px;
        }
    textarea {
        padding: 10px;
        line-height: 1.5;
        border-radius: 5px;
        border: 1px solid #ccc;
        box-shadow: 1px 1px 1px #999;
        }
    label {
        display: block;
        margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <label for="content">내용을 입력하세요</label>
    <textarea id="content" name="content" rows="10" cols="45">
        여기에 내용을 입력할 수 있다.
        </textarea>
</body>
</html>

HTML 을 공부하는 가장 좋은 방법중의 하나는 MDN 네트워크를 사용하는 것이다. 웹개발에 있어서는 마이크로소프트의 MSDN 에 비견될 정도로 문서화가 잘 되어 있다. 자바스크립트와 HTML CSS 등 웹개발에 관한 광범위한 예제와 가이드가 들어있다. 문서의 양은 십수년동안 쌓여서 어마어마하게 많기 때문에 getting started 가이드라인을 따르는 것을 추천한다. 한글 번역도 상당수 진행되었다.

Web과 함께 시작하기

전문적인 웹사이트를 생성하기 위해서는 매우 많은 작업이 필요합니다. 그러니 웹 개발이 처음이라면, 처음은 작게 시작해보세요. 지금 당장 Facebook을 만들 수는 없지만, 자신만의 간단한 온라��

developer.mozilla.org

HTML 태그 자료는 거의 번역이 된 것 같다. 간혹 번역이 100프로 안되어 있는데 오픈 소스이므로 자율적으로 참여자가 번역해줘야한다. 구글 아이디로 로그인하면 편집이 가능하니 시간이 되는 분들은 초보자들을 위해 번역에 참여하면 좋을 것 같다. 한 두 문장만 번역해도 그게 다 모여서 전체를 이루게 된다. 부담가질 필요 없다.

MDN textarea 태그

CKEDITOR

CKEDITOR는 무료로 사용가능한 HTML CSS 편집기 이다. 플러그인에 대해서는 라이센스가 필요한 것도 있다. 직접 설치하려면 수고스러울 것이다. 여기서는 간단히 CDN만 실행시켜 본다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 자습하기</title>
    <style>
    @font-face {
        font-family: 'Cafe24Oneprettynight';
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Oneprettynight.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
        body{
            font-family: 'Cafe24Oneprettynight';
            font-weight: 500;
            font-size: 1.2em;
            line-height: 120%;
            width: 500px;
        }

    </style>
        <script src="https://cdn.ckeditor.com/ckeditor5/21.0.0/classic/ckeditor.js"></script>
</head>
<body> 
    <h1>ckeditor Test</h1>
    <div id="editor" >
        <p>This is some sample content.</p>
    </div>
    <script>
        ClassicEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

https://ckeditor.com/ 웹사이트

CKEditor | Smart WYSIWYG HTML editor | Collaborative rich text editor

Rock-solid, free WYSIWYG editor with collaborative editing, 200+ features, full documentation and support. Join Microsoft, Mozilla, Adobe and 20k+ other companies.

ckeditor.com

* select option 태그

여러개의 목록에서 선택이 가능한 옵션이다.

    <label for="pet-select">Choose a pet:</label>
    <select name="pets" id="pet-select">
        <option value="">--Please choose an option--</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
        <option value="parrot">Parrot</option>
        <option value="spider">Spider</option>
        <option value="goldfish">Goldfish</option>
    </select>