[React] 글쓰기 페이지 만들기 - input 태그

Write.js

import './Write.css';
import Header from './Header.js';

function Write() {
  return (
    <div>
        <Header/>
        <div className='write__title'>
            <textarea type="text" placeholder="제목을 입력하세요." autofocus/>
        </div>
        <div className='write__content'>
            <textarea type="text" placeholder="내용을 입력하세요."/>
        </div>
        <button className='submit__button'>완료</button>
    </div>
  );
}

export default Write;

- 글을 길게 써야 하는 경우 <input>이 아닌 <textarea> 태그 사용

- placeholer로 글 쓰기 전 띄워지는 글 정의

- autofocus로 페이지 접속 시 자동 커서 설정

Write.css와 결과

.write__title {
    margin: 5% 10%; // 위 아래 조금씩 흰 공백 주기
    height: 30px;
}

.write__content {
    margin: 10% 10% 2% 10%;
    height: 300px; // 제목칸보다는 높이가 길게 설정
}

// 제목 & 내용 입력칸
textarea {
    width: 90%;
    height: 90%;
    padding: 5%;
    font-size: 15px;
    border: 0; // 검은 테두리 선 삭제
    border-radius: 15px; // 모서리가 둥글게
    outline: none;
    background-color: rgb(233, 233, 233);
}

// 제출 버튼
.submit__button {
    float: right; // 오른쪽 정렬
    width: 70px;
    height: 40px;
    margin: 0 10%;
    border-radius: 15px;
    border: 0;
    background-color: #D9D9D9;
}

참고

[220404_TIL] input 의 width, height 를 부모요소에 맞추기, span 태그 자동 줄바꿈 못하게 하기

 

글자를 입력하는 곳, <input type = "text">에 대해서 [html]

 

input text 태그를 예쁘게 디자인하는 법