안녕하세요?
우중충하게 비가 오는 밤이네요
내일이 바로 처서라는데! 과연 이번 년도는 처서매직이 통할지,, 한번 지켜보자구요~!
오늘은 HTML과 CSS를 이용해 완전 간단한 20가지 랜덤 명언 생성기 페이지를 만들어볼거예요
그럼 바로 시작할까요?
렛츠고~
간단하게 HTML 파일 작성하기
우선 페이지가 노출될 수 있게 기본적인 틀을 지켜서 HTML 문서를 작성해볼거예요
이전에 제가 HTML의 기본 구조에 대해 설명한적이 있죠? [해당 포스팅]
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>20개의 랜덤 명언 노출기</title>
</head>
<body>
</body>
</html>이렇게 작성 완료했습니다
어때요? 이제 좀 익숙해지셨나요?
Body에 사용자가 직접적으로 볼 뷰 만들기
제가 사용자들에게 직접적으로 노출되는 부분은 <body> 태그안에 작성해야한다고 했었는데 기억나시나요?
우리는 복잡하게 하지않고 사이트의 Identity를 나타내는 완전 큰 타이틀 영역과 명언 텍스트와
명언 생성 버튼이 있는 main영역 , 그리고 저작권 정보나 제작자의 이름을 나타내는 하단 footer로 나누어서 구성해볼게요
<body>
<div>
오늘의 랜덤 명언
</div>
<main>
<div>명언 노출될 Text</div>
<button>
생성하기
</button>
</main>
<footer>
<div>제작자 : 무꾸씨</div>
</footer>
</body>
어때요? 아주 간단하게 필요한 부분만 구성하였는데 너무 쉬우신가요?
하지만 어떻게 합니까! 예제로 할만한 아이디어가 없는걸요?
꿋꿋하게 마저 진행해보겠습니다.
이제 저 딱딱한 View를 한번 CSS를 이용해서 꾸며볼게요
CSS 파일 작성하기
저는 각 태그마다 디자인이 필요한 부분에 class명을 지정해놓고,
외부 css 파일과 연결하여 디자인을 구성했어요
전에 html,css는 사람마다 스타일이 달라서 정답이 없고 여러가지 방법이 있다고 했었죠?
다른 방식을 사용한다고해서 내가 이상한가? 라는 생각은 하지 않아도 될거같아요 🤔
⚠️ 반박 시, 님 말이 맞음
letter.css
body {
margin: 0; // body의 기본 마진값을 0으로 초기화
display: flex; // body를 flexible하게
flex-direction: column; // 수직 방향으로 변경
height: 100vh; // viewport의 height에 맞게
font-family: 'Poor Story', cursive; // 폰트 설정
font-weight: 400;
}
.title {
background-color: #FFFFE0; // 배경색 설정
color: #98FB98; // Text 색상 설정
font-weight: bold; // 폰트를 굵게
font-size: 32px; // 폰트 사이트 설정
text-align: center; // Text를 중앙정렬
margin: 15px 15px; // 상하좌우 마진 15픽셀씩
padding: 30px; // 내부 padding은 30픽셀씩
border-radius: 15px 15px; // 모서리를 15px만큼 둥글게
border: 1px solid #F5DEB3; // 모서리를 1px 너비만큼 해당 색상으로
}
.main {
display: flex; // main 영역을 flexible하게
flex-grow: 1; // main이 차지하는 비중은 1
justify-content: center; // 주 축의 정렬기준을 가운데로
align-items: center; // 교차 축의 정렬기준을 가운데로
flex-direction: column; // 수직 방향으로 변경
}
.main button {
width: 150px; // 가로 크기 설정
height: 42px; // 세로 크기 설정
background-color: #6495ED; // 배경색 설정
border: 1px solid #87CEEB; // 모서리를 1px 너비로 색상설정까지
color: wheat; // Text 색상 설정
border-radius: 10px; // 모서리를 10px만큼 둥글게
margin-top: 30px; // 위 요소에서 30px만큼 위쪽으로 마진 줄 것
}
#letter {
display: none; // 생성 버튼을 누르기 전까지 뷰 숨기기
text-align: center; // 텍스트 가운데 정렬
font-size: 28px; // 폰트 사이즈 설정
line-height: 125%; // 줄간 설정
}
.footer {
background-color: #E6E6FA;
padding: 20px;
margin: 10px;
border: 1px solid #C8A2C8;
border-radius: 10px;
color: #9966CC;
text-align: center;
}이렇게 작성해서
HTML의 head 영역에서 import 시킵니다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>랜덤 명언 노출기 20선</title>
<link rel="stylesheet" href="./letter.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poor+Story&display=swap" rel="stylesheet">아 참! body 요소들에게 class명도 지정을 해야겠죠?
<body>
<div class="title">
오늘의 랜덤 명언
</div>
<main class="main">
<div id="letter"></div>
<button class="btn-show" onclick="randomLetter()">
생성하기
</button>
</main>
<footer class="footer">
<div>제작자 : 무꾸씨</div>
</footer>
</body>이렇게 해서 완성했습니다!
처음에 들어오면 생성하기버튼을 누르기 전까진 아무것도 노출되지 않다가,
생성하기 버튼을 누르는 순간 명언이 똭!!!
HTML을 보시면 알겠지만 onclick을 사용해서 저는 랜덤한 명언을 생성하기 위해 javascript를 사용했는데,
이번 예제에서는 다루지 않을거예요!
뷰를 그리기 위한 시간이였으니까요
그래도 혹시 몰라 전체 코드를 올리니 궁금하신 분들은 참고해주세요~
오늘은 여기까지 포스팅하겠습니다
감사합니다
안녕~
전체코드
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>랜덤 명언 노출기 20선</title>
<link rel="stylesheet" href="./letter.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poor+Story&display=swap" rel="stylesheet">
<script>
function randomLetter() {
const randomLetters = [
"성공은 실패 가능성과 패배의 위험을 무릅쓰고 얻어야 한다. 위험 없이는 성취의 보람도 없다.\n_레어크록 ",
"세상에서 가장 현명한 사람은 모든 사람으로부터 배우는 사람이다\n가장 사랑받는 사람은 칭찬하는 사람이다\n가장 강한 사람은 감정을 조절할 줄 아는 사람이다\n_탈무드",
"계획이 없는 목표는 한낱 꿈에 불과하다.\n_생텍쥐페리",
"좋은 성과를 얻으려면\n한 걸음 한 걸음이 힘차고 충실하지 않으면 안 된다\n_단테",
"인생의 목적과 그것을 성취하는 방법을 깨닫는 것,\n그것이 바로 지혜다.\n_톨스토이",
"성공의 비결은 단 한 가지,\n잘할 수 있는 일에 광적으로 집중하는 것이다_톰 모나건",
"하루에 3시간을 걸으면\n7년 후에 지구를 한 바퀴 돌 수 있다\n_사무엘 존슨",
"진정으로 웃으려면 고통을 참아야 하며\n나아가 고통을 즐길 줄 알아야 한다\n_찰리 채플린",
"단순하게 살아라\n현대인은 쓸데없는 절차와 일 때문에\n얼마나 복잡한 삶을 살아가는가?\n_이드리스 샤흐",
"먼저 자신을 비웃어라\n다른 사람이 당신을 비웃기 전에\n_엘사 맥스웰",
"지금 최선을 다하면\n미래는 알아서 잘 풀릴 것이다.\n_게리 베이너척",
"너를 건강한 자나 병자, \n불행한 자나 행복한 자,\n혹은 부자나 빈자로 만드는 모든 것은 \n오로지 너의 마음속에 있다. \n_에드먼드 스펜서",
"절대 어제를 후회하지 마라\n인생은 오늘의 나 안에 있고\n내일은 스스로 만드는 것이다\n_L. 론허바드",
"가장 큰 약점은 \n약점을 보일 것에 대한 두려움이다.\n_보쉬에",
"욕심이 있으면 참된 강함은 없는 것이다.\n사람에게 욕심이 있으면, \n반드시 그 욕심에 끌려서 \n자기의 지조를 잃게 되기 때문이다.\n_근사록",
"어리석은 자는 멀리서 행복을 찾고\n현명한 자는 자신의 발치에서 행복을 키워간다\n_제임스 오펜하임",
"문제점을 찾지 말고\n해결책을 찾으라 \n_헨리 포드",
"삶을 사는 데는 단 두 가지 방법이 있다. \n하나는 기적이 전혀 없다고 여기는 것이고\n 또 다른 하나는 모든 것이 기적이라고 여기는 방식이다. \n_알베르트 아인슈타인",
"인생에 뜻을 세우는데 있어\n 늦은 때라곤 없다 \n_볼드윈",
"너무 소심하고 까다롭게 자신의 행동을 고민하지 말라\n모든 인생은 실험이다\n더 많이 실험할수록 더 나아진다\n_랄프 왈도 에머슨"
];
const randomNum = Math.floor(Math.random() * 20);
document.getElementById("letter").style.display = "block";
document.getElementById("letter").innerText = randomLetters[randomNum];
}
</script>
</head>
<body>
<div class="title">
오늘의 랜덤 명언
</div>
<main class="main">
<div id="letter"></div>
<button class="btn-show" onclick="randomLetter()">
생성하기
</button>
</main>
<footer class="footer">
<div>제작자 : 무꾸씨</div>
</footer>
</body>
</html>
우동먹으려고 개발하는 김치나베우동 성장기