crongro · January 23, 2019 06:11
diff --git a/qna.css b/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
 }
diff --git a/qna.html b/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>
diff --git a/qna.js b/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();
 })
diff --git a/reset.css b/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;
	}