crongro/qna.css

## qna.css
:root {
    font-size: 16px;
    --line: 1px solid #dad3d3
}

li {
    list-style: none
}

h1 {
    font-size: 2.5rem;
    font-weight: 700
}

h2 {
    font-size: 2rem
}

h3 {
    font-size: 1.5rem
}

#main-header {
    display: flex;
    justify-content: space-between;
    height: 4rem;
    background: #842d25;
    padding: 1rem 3rem;
    color: #fff;
    font-family: fantasy
}

#main-header>* {
    height: 4rem;
    line-height: 4rem
}

#main-header>h1 {
    position: relative;
    top: 50%;
    transform: translateY(-50%)
}

.main-wrap {
    padding: 3rem;
    overflow: hidden
}

.qna {
    background-color: #f5f1ef;
    margin-top: 3rem
}

.qna+.qna {
    margin-top: 3rem
}

.new-question-btn {
    width: 7rem;
    height: 3rem;
    font-size: 1rem;
    border-radius: .3rem;
    background-color: #2e9a52;
    float: right;
    margin-bottom: 1rem;
    box-shadow: 1px 2px #d0e2cf;
    cursor: pointer;
    color: #fff
}

.qna-wrap {
    clear: both
}

.qna-title {
    padding: 2rem
}

.question {
    border-top: var(--line);
    border-bottom: var(--line);
    padding: 3rem 2rem
}

## qna.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./styles/reset.css">
    <link rel="stylesheet" href="./styles/qna.css">
    <title>Ajax Test</title>
    <script src="qna.js" defer></script>
</head>

<body>
    <header id="main-header">
        <h1>STACK OOOOVERFLOW &#x1f64b; </h1>
    </header>

    <div class="main-wrap">
        <button class="new-question-btn">새로운질문</button>
        <ul class="qna-wrap">
            <li class="qna">
                <div class="qna-title">
                    <h2>자바는 왜 객체지향 언어로 태어났을까요?</h2>
                </div>
                <div class="question">
                    <p> 자바초보 입니다. 자바를 배우려고 하면 객체지향 프로그래밍 언어부터 알아야 한다고 합니다. 이부분이 잘 와닿지 않고 어려습니다.. </p>
                </div>
            </li>

            <li class="qna">
                <div class="qna-title">
                    <h2>자바는 왜 객체지향 언어로 태어났을까요?</h2>
                </div>
                <div class="question">
                    <p> 자바초보 입니다. 자바를 배우려고 하면 객체지향 프로그래밍 언어부터 알아야 한다고 합니다. 이부분이 잘 와닿지 않고 어려습니다.. </p>
                </div>
            </li>
        </ul>

    </div>

</body>

</html>

## qna.js
//정적데이터 관리
const URL = {
    "INIT": "http://localhost:3000/api/questions",
    "LOGIN": "http://localhost:3000/api/login",
}


//login example
function login() {
    fetch(URL.LOGIN, {
        "method" : "post",
        headers: {'content-type': 'application/json'},
        body: JSON.stringify({user:'crong'})
    })
    .then( (res) => res.json())
    .then( (result) => console.log("login result is ", result))
}


//template literal로 html 문자열 만들기
function getTpl(obj) {
    return `<div>${obj.message}</div>`;
}

//렌더링
function renderQnA(data) {
    const target = document.querySelector(".xxxx");
    const resultHTML = getTpl({message:'hello world'});
    target.innerHTML = resultHTML;
}

function clickXXXHandler(e) {
    const target = e.target;
}

//Event 등록
function initEvents() {
    document.querySelector(".your-selector").addEventListener("click", doSomething);
}

document.addEventListener("DOMContentLoaded", () => {
    //initEvents();
})

## reset.css
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	min-width: 1080px;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
	:root {
	font-size: 16px;
	--line: 1px solid #dad3d3
	}

	li {
	list-style: none
	}

	h1 {
	font-size: 2.5rem;
	font-weight: 700
	}

	h2 {
	font-size: 2rem
	}

	h3 {
	font-size: 1.5rem
	}

	#main-header {
	display: flex;
	justify-content: space-between;
	height: 4rem;
	background: #842d25;
	padding: 1rem 3rem;
	color: #fff;
	font-family: fantasy
	}

	#main-header>* {
	height: 4rem;
	line-height: 4rem
	}

	#main-header>h1 {
	position: relative;
	top: 50%;
	transform: translateY(-50%)
	}

	.main-wrap {
	padding: 3rem;
	overflow: hidden
	}

	.qna {
	background-color: #f5f1ef;
	margin-top: 3rem
	}

	.qna+.qna {
	margin-top: 3rem
	}

	.new-question-btn {
	width: 7rem;
	height: 3rem;
	font-size: 1rem;
	border-radius: .3rem;
	background-color: #2e9a52;
	float: right;
	margin-bottom: 1rem;
	box-shadow: 1px 2px #d0e2cf;
	cursor: pointer;
	color: #fff
	}

	.qna-wrap {
	clear: both
	}

	.qna-title {
	padding: 2rem
	}

	.question {
	border-top: var(--line);
	border-bottom: var(--line);
	padding: 3rem 2rem
	}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="./styles/reset.css">
	<link rel="stylesheet" href="./styles/qna.css">
	<title>Ajax Test</title>
	<script src="qna.js" defer></script>
	</head>

	<body>
	<header id="main-header">
	<h1>STACK OOOOVERFLOW 🙋 </h1>
	</header>

	<div class="main-wrap">
	<button class="new-question-btn">새로운질문</button>
	<ul class="qna-wrap">
	<li class="qna">
	<div class="qna-title">
	<h2>자바는 왜 객체지향 언어로 태어났을까요?</h2>
	</div>
	<div class="question">
	<p> 자바초보 입니다. 자바를 배우려고 하면 객체지향 프로그래밍 언어부터 알아야 한다고 합니다. 이부분이 잘 와닿지 않고 어려습니다.. </p>
	</div>
	</li>

	<li class="qna">
	<div class="qna-title">
	<h2>자바는 왜 객체지향 언어로 태어났을까요?</h2>
	</div>
	<div class="question">
	<p> 자바초보 입니다. 자바를 배우려고 하면 객체지향 프로그래밍 언어부터 알아야 한다고 합니다. 이부분이 잘 와닿지 않고 어려습니다.. </p>
	</div>
	</li>
	</ul>

	</div>

	</body>

	</html>
	//정적데이터 관리
	const URL = {
	"INIT": "http://localhost:3000/api/questions",
	"LOGIN": "http://localhost:3000/api/login",
	}


	//login example
	function login() {
	fetch(URL.LOGIN, {
	"method" : "post",
	headers: {'content-type': 'application/json'},
	body: JSON.stringify({user:'crong'})
	})
	.then( (res) => res.json())
	.then( (result) => console.log("login result is ", result))
	}


	//template literal로 html 문자열 만들기
	function getTpl(obj) {
	return `<div>${obj.message}</div>`;
	}

	//렌더링
	function renderQnA(data) {
	const target = document.querySelector(".xxxx");
	const resultHTML = getTpl({message:'hello world'});
	target.innerHTML = resultHTML;
	}

	function clickXXXHandler(e) {
	const target = e.target;
	}

	//Event 등록
	function initEvents() {
	document.querySelector(".your-selector").addEventListener("click", doSomething);
	}

	document.addEventListener("DOMContentLoaded", () => {
	//initEvents();
	})
	/* http://meyerweb.com/eric/tools/css/reset/
	v2.0 \| 20110126
	License: none (public domain)
	*/

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {
	display: block;
	}
	body {
	line-height: 1;
	min-width: 1080px;
	}
	ol, ul {
	list-style: none;
	}
	blockquote, q {
	quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
	content: '';
	content: none;
	}
	table {
	border-collapse: collapse;
	border-spacing: 0;
	}