웹 브라우저에서 사용할 수 있는 메모장 앱을 만들어 보자 #1 ~ 독학으로 어디까지 만들 수 있을까 ~

3988 단어 HTMLCSS
프로그래밍 초보자입니다.
개발 비망록으로 쓰고 있습니다.

HTML·CSS를 처음으로 공부하는 사람으로 무엇으로부터 손을 붙여 좋을지 모르는 방향입니다.
나도 초보자이므로, 잘못된 점이 있다고 생각합니다만, 양해 바랍니다.

목표



메모장 앱을 만드는 것.

최종적인 전체의 이미지도는, 아직 굳어지지 않았습니다만, 이하 사이트를 참고로 할 예정.
htps : // 미메모. 이오/m/네 w

첫 번째 완성도





html의 코드는 다음과 같습니다.

memo.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>memo</title>
    <link rel="stylesheet" href="style01.css">
</head>
<body>
    <h1>memo</h1>
    <input type="text" placeholder="タイトル">
    <input type="text" placeholder="忘れないうちにメモる">
</body>
</html>

css의 코드는 아래와 같습니다.

style01.css
@charset "UTF-8";

h1{
    font-size: 50px;
    color: coral;
}

input{
    font-size: 3em;
}

배운 것



문자가 입력할 수 있는 테두리 만들기


 <input type="text">

문자 입력 프레임 내에 회색 문자 표시



placeholder 태그를 사용합니다.
placeholder 태그 뒤에 표시할 문자를 넣습니다.
<input type="text" placeholder="タイトル">

다른 파일의 CSS 로드



css에 대한 파일을 만듭니다.
.css 확장자를 사용하여 css 파일을 만들 수 있습니다.

html 파일 내에서
<link rel="stylesheet" href="style01.css">

와 입력.

내 경우에는 memo.html에 입력합니다.

href 뒤에 작성한 CSS 파일 이름을 지정합니다.

문자 입력 input의 테두리를 넓히다



CSS로
input{
    font-size: 3em;
}

와 입력.

입력 위치는 변경할 위치를 지정합니다.

{}의 괄호로 둘러싸여 font-size로 프레임을 확장했습니다.

다음 번부터하고 싶은 일



・「잊지 않는 사이에 메모한다」의 테두리를 「타이틀」테두리보다 크게 한다
・입력한 문자를 굵은 문자로 하거나, 글머리 기호로 입력할 수 있도록 한다
매개변수 전달
파이썬 소개

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage