๋ชฉ๋กWEB/HTML+CSS+JS (20)
์ฐ์ ๊ธฐ๋ก ๐ช
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/I1AbR/btq85eP727J/rqoZRnfBrsKcJWNH1cq4FK/img.png)
ํ์ด๋จธ ํจ์ setTimeout(ํจ์,์๊ฐ) : ์ผ์ ์๊ฐ ํ ํจ์ ์คํ setInterval(ํจ์,์๊ฐ) : ์๊ฐ ๊ฐ๊ฒฉ๋ง๋ค ํจ์ ์คํ clearTimeout() : ์ค์ ๋ Timeout ํจ์๋ฅผ ์ข ๋ฃ clearInterval() : ์ค์ ๋ Intervalํจ์๋ฅผ ์ข ๋ฃ //setTimeout, clearTimeout ์ฌ์ฉ ์์ const timer = setTimeout(() => {console.log("HI!")},3000) const h1El=document.querySelector('h1') h1El.addEventListener('click', () => { clearTimeout(timer) }) //setInterval, clearInterval ์ฌ์ฉ ์์ const interval=setInt..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/cX4VEv/btq8ZOMaUuH/NK5BWaJRUGoFX6kbKO9h90/img.png)
๊ธฐ๋ณธ์ ์ธ ํจ์ ์์ฑ๋ฒ //ํจ์ ์ ์ const double=function(x,y){ return x*2 } //ํจ์ ํธ์ถ console.log('double :',double(7)) ํ์ดํ ํจ์ //ํจ์์ ์ถ์ฝํ //ํ์ดํ ํจ์๋ฅผ ์ด์ฉํด ๊ฐ๋จํ๊ฒ ํจ์๋ฅผ ์์ฑํ ์ ์๋ค. //const [ํจ์์ด๋ฆ] = [(ํจ์ ์ธ์- ํ๋์ด๋ฉด ๊ดํธ ์๋ต๊ฐ๋ฅ)] => [ํจ์๊ฐ ๋ฐํํ ๋ด์ฉ] const doublearrow = x => x*2 console.log('doublearrow :',doublearrow(7)) //const [ํจ์์ด๋ฆ] = [(ํจ์ ์ธ์- ์์ผ๋ฉด ๊ดํธ)] => [ํจ์๊ฐ ๋ฐํํ ๋ด์ฉ] const sh = x => ({name:'kite'}) console.log('sh :',sh(7)) ์ฆ์ ์คํํจ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bhpzz6/btq16RaYpWW/7OqTa8CLSgzJdQqODEpKO1/img.png)
JS๋ก ์ด๊ฒ์ ๊ฒ ํด๋ณด๋ค๊ฐ document.write()ํจ์๋ฅผ ์ฌ์ฉ์ ์ธ์ ๋ ์๋ก์ด ํ์ด์ง์ ์ถ๋ ฅ๋๊ณ , ์ธ์ ๋ ํ์ฌ ํ์ด์ง์ ์์ฑ๋๊ธธ๋ ๊ถ๊ธํด์ ์์๋ดค๋ค. document.write()์ document.writeln() ์ฐ์ document.write()ํจ์์ ๋ํด ์์๋ณด์. ๋ง ๊ทธ๋๋ก ๊ดํธ ์์ ๋ค์ด๊ฐ์๋ ๊ฒ์ ํ์ด์ง์ "์ฐ๋(์ถ๋ ฅํ๋)" ํจ์์ด๋ค. ์๋ ์์ ๋ฅผ ๋ณด๋ฉด ์ดํดํ ์ ์๋ค. ์๋์ ๊ฐ์ด ๊ธ์๋ฅผ ์จ์ฃผ๋ ํจ์์ด๋ค. document.write()ํ๋ฉด document.writeln()ํจ์๋ ์๋ค. writeln()ํจ์๋ ์ ๋ ฅํ ๊ฐ์ "\n"์ ์ถ๊ฐํ์ฌ ์ ๋ ฅํด์ค๋ค. ๊ทธ๋ฌ๋ ์ค์ ๋ก ์ฌ์ฉํด๋ณด๋ฉด ์ค๋ฐ๊ฟ์ด ์๋๋ผ ํ์นธ์ฉ ๋์ด์ฐ๊ธฐ๋์ด ์ถ๋ ฅ๋๋ ๊ฒ์ ๋ณผ ์ ์๋ค. ์ ์ฝ๋๋ฅผ ๋ณด๋ฉด ๋ฅผ ์ฌ์ฉํด์ผ๋ง ์ค๋ฐ๊ฟ์ด ๋๋ค๋ ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/cW6kwk/btq0Ub7LsCW/r1N8CcyHk8DX2TuWo57VsK/img.png)
CSS ์ ํ์์ ๋ํด ๊ณต๋ถํ๋ค s1 s2 : s1์์์ ํฌํจ๋ s2์์๋ฅผ ์ ํํ๋ค. (ํ์ ๊ด๊ณ) s1>s2 : s1์์์ ์ง๊ณ ์์ ์์์ธ s2๋ฅผ ์ ํํ๋ค.(์์๊ด๊ณ) ๋ผ๊ณ ๋์์๋ ๋ถ๋ถ์ ๋ดค๋๋ฐ ๋ฌธ๋ ๊ถ๊ธํด์ ธ์ ์ฐพ์๋ดค๋ค. ๊ฒฐ๋ก ๋ถํฐ ๋งํ์๋ฉด ์์(์์)์ด ๋ ์์ ๋ฒ์์ด๋ค. ์์์ด๋ผ๊ณ ์ค๋ช ๋์ด ์๋ ๊ธ๋ ์๋๋ฐ ์์์ด ๋ ์ง๊ด์ ์ผ๋ก ๋ฐ์๋ค์ด๊ธฐ ์ฌ์ด ๊ฒ ๊ฐ๋ค. ์ฆ ์์์ ๋ฐ๋ก ์ ํ ํ๊ทธ ๋ฐ๋ก ์๋ ๊ณ์ธต์ ์๋ ๊ฒ๋ค, ํ์์ ์ ํ ํ๊ทธ ์์ ๋ค์ด๊ฐ ์๋ ๋ชจ๋ ๊ฒ ์ด๋ผ๊ณ ์๊ฐํ๋ฉด ๋ ๊ฒ ๊ฐ๋ค. ๋ฐ๋ก ์์ ๋ฅผ ๋ณด๋๋ก ํ์. hi hd sg ๋ฆฌ์คํธ ์ ๋ฆฌ์คํธ1 ๋ฆฌ์คํธ ์ ๋ฆฌ์คํธ2 ๋ฆฌ์คํธ ์ ๋ฆฌ์คํธ3 he hello ์ ์ฝ๋๋ฅผ ์คํ์ํค๋ฉด ์๋์ ๊ฐ๋ค. ์ด๊ฑด ๋ญ ์ฌ์ด ๋ด์ฉ์ด๋ผ ๋ณ๋ก ์ด๋ ค์ธ ๊ฒ์ด ์์ ๊ฒ์ด๋ค. CSS ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/cAMczQ/btqTp25kU4u/6boPKiQNoPXzku4a4QwPFK/img.gif)
https://www.youtube.com/watch?v=e56H5n1SvEs&t=2s ์ ๊ฐ์๋ฅผ ๋ณด๊ณ ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋๋ฅผ ํตํด ์ค์ต์ ์งํํ์๋ค. HTML 1. ํ์ผ ์์ฑํ๊ธฐ index.html, main.js, style.cssํ์ผ์ ๊ฐ๊ฐ ์์ฑํ๋ค. VScode์์๋ !+ํค๋ฅผ ๋๋ฅด๋ฉด html์ ๊ธฐ๋ณธ ๊ตฌ์กฐ๊ฐ ์๋์์ฑ๋๋ค. ์ด์ ๊ฐ์ด div.wrap์ bodyํ๊ทธ์ ์ ๋ ฅํ ๋ค ํค๋ฅผ ๋๋ฅด๋ฉด ๋ก ์๋ ์์ฑ์ด ๋๋ค. 2. ์์ด์ฝ ํฐํธ ์ฌ์ฉํ๊ธฐ ๊ตฌ๊ธ์ material icon์ด๋ผ๊ณ ๊ฒ์ํ๋ฉด ๋งจ ์์ ์๋์ ๊ฐ์ ๋งํฌ๊ฐ ๋ฌ๋ค. https://material.io/resources/icons/?style=baseline Material Icons Get Material Icons material.io ๋ค์ด๊ฐ์ ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/ej7dto/btqTqJFvvbs/9MIEBXEWRk572jDLq8ZmQK/img.png)
์ฒซ๋ฒ์งธ ์์์ ๋ณด๊ณ ์๋์ ๊ฐ์ด ํ์ฌ ์๊ฐ์ ๋ณด์ฌ์ฃผ๋ ์ฝ๋๋ฅผ ์์ฑํ๋ค. 00:00 //clock.js const clockContainer = document.querySelector(".js-clock"); clockTitle=clockContainer.querySelector("h1"); function getTime(){ const date=new Date(); const minutes=date.getMinutes(); const hours=date.getHours(); const seconds=date.getSeconds(); clockTitle.innerText=`${hours}:${minutes}:${seconds}`; } function init(){ getTime(); } init() ์ฌํ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/Y9SNV/btqToxekrra/Z9qijutEkSzsm8JGGI8lI0/img.png)
https://nomadcoders.co/javascript-for-beginners ๋ฐ๋๋ผ JS๋ก ํฌ๋กฌ ์ฑ ๋ง๋ค๊ธฐ - ๋ ธ๋ง๋ ์ฝ๋ Nomad Coders Javascript for Beginners nomadcoders.co ์ด๋ฒ์๋ ๋ฐ๋๋ผ ์คํฌ๋ฆฝํธ๋ฅผ ๊ณต๋ถํ ๊ฒ์ด๋ค. ํ์ต ๋๊ตฌ๋ Repl์ ์ฌ์ฉํ๋ค. ๋ค์ด๋ฐ์ ํ์๊ฐ ์๊ณ ์ฌ์ฉ๋ฒ๋ ๊ฐ๋จํ๋ค. https://repl.it/~ Log In Repl.it is a simple yet powerful online IDE, Editor, Compiler, Interpreter, and REPL. Code, compile, run, and host in 50+ programming languages: Clojure, Haskell, Kotlin, QBasic, F..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/4rU55/btqToyj7lve/MmU4CD9Uf0gVeqGX2XzMiK/img.png)
ํจ์ ๋ค๋ฅธ ์ธ์ด์ ํ์ฉ์ด ์ ์ฌํด์ ์ค์ต๋ง ํด๋ณด๊ณ ๋์ด๊ฐ๋๋ก ํ๊ฒ ๋ค. Function Basic Parameter & Argument Return ํจ์ ์ ์ ๋ฐฉ๋ฒ function(๋งค๊ฐ๋ณ์1, ๋งค๊ฐ๋ณ์2 ......){ ํจ์ ๋ด์ฉ; } ํจ์์ ๋ฆฌํดํ์ ๋ํด ์ดํด๋ณด์. Function Basic Parameter & Argument Return ์ด ์ฝ๋์์๋ ์ฃผ์์ฒ๋ฆฌํ ๋ถ๋ถ๋ง ๋์ฌ๊ฒจ ๋ณด๋ฉด ๋ ๋ฏ ํ๋ค. ์๋ฐ ์คํฌ๋ฆฝํธ๋ ๋ฌธ์์ ์ซ์๋ฅผ ๋ํ๋ฉด ์ซ์๋ฅผ ์ซ์๋ฅผ ๋ฌธ์๋ก ๊ฐ์ฃผํ๊ธฐ ๋๋ฌธ์ +๋ฅผ ๋ง์ ์ด ์๋ ๋ฌธ์๊ฒฐํฉ์ฐ์ฐ์๋ก ์ฌ์ฉํ๋ค. ๊ฐ์ฒด ์ด๋ฒ์๋ ๊ฐ์ฒด๋ฅผ ์์ฑํ๊ณ , ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๊ณ , ๋ ๊ทธ ๋ฐ์ดํฐ์ ์ ๊ทผํด ๋ณผ ๊ฒ์ด๋ค. ๊ฐ์ฒด๋ฅผ ์์ฑํ๋ ๋ฐฉ๋ฒ + ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๋ ๋ฐฉ๋ฒ var coworkers={ "programmer":"e..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/kAP3e/btqTyBTogl2/6ij88hPzFbBcMk2e2tR46K/img.png)
https://opentutorials.org/course/3085/18879 ์กฐ๊ฑด๋ฌธ ์๊ณ - ์ํ์ฝ๋ฉ ์กฐ๊ฑด๋ฌธ ์๊ณ 2017-12-02 00:14:09 opentutorials.org ์ฌ๊ธฐ์ ๋ถํฐ ๊ณต๋ถ ์์์ด๋ค. ์กฐ๊ฑด๋ฌธ ๊ธฐ์ด ์กฐ๊ฑด๋ฌธ์ ๋ค๋ฅธ ํ๋ก๊ทธ๋๋ฐ์ ํด๋ดค๋ค๋ฉด ๋ด์ฉ์ด ๊ฐ์์ ์ค์ต๋ง ํด๋ณด๊ณ ๋์ด๊ฐ๋ค. Conditional statements Program If-true If-false ์กฐ๊ฑด๋ฌธ ํ์ฉ WEB HTML CSS JavaScript JavaScript JavaScript (/หdสษหvษหskrษชpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and inte..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/btv6tu/btqTrSWpHla/QMXKXxZk7enUkTlfw4AjI0/img.png)
๋ฐ์ดํฐ ํ์ - ๋ฌธ์์ด๊ณผ ์ซ์ ์ซ์(Number) -์ฐ์ฐ ๊ฐ๋ฅ + : ๋ํ๊ธฐ - : ๋นผ๊ธฐ * : ๊ณฑํ๊ธฐ / : ๋๋๊ธฐ ๋ฌธ์์ด(String) -๋ฐ์ดํ๋ก ๋ฌถ์ด์ค์ผํจ -str.length -> ๊ธ์์ ๋ฆฌํด -str.toUpperCase() -> ๋ชจ๋ ๋๋ฌธ์๋ก ๋ฐ๊ฟ์ค -str.indexOf('์ฐพ์ ๋ฌธ์') -> ์ฐพ๊ณ ์ ํ๋ ๋ฌธ์๊ฐ ๋ช๋ฒ์งธ ์๋ฆฌ์ ์๋์ง ์๋ ค์ค ์์ 'Hello world'.indexOf('O') //๋๋ฌธ์ O // -1๋ฆฌํด (๊ฐ์ ์ฐพ์ ์ ์๊ธฐ ๋๋ฌธ) 'Hello world'.indexOf('o') //์๋ฌธ์ o // 4๋ฆฌํด (์ฒซ๋ฒ์งธ ์๋ฆฌ๋ฅผ 0์ผ๋ก ํด์ ์๋ฌธ์o๊ฐ 4๋ฒ์งธ ์๋ฆฌ์ ์๊ธฐ ๋๋ฌธ) ์๋ ๋งํฌ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ณผ ์ ์๋ค. https://developer.mozilla.org/ko/d..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bmCpiS/btqTwXo4f3O/ABKAoNT9tc79G8h5JZvjF0/img.png)
https://opentutorials.org/course/3085 WEB2 - JavaScript - ์ํ์ฝ๋ฉ ์์ ์๊ฐ ์ด ์์ ์ https://opentutorials.org ๋ฅผ ๋ง๋ค์ด๊ฐ๋ฉด์ JavaScript์ ๋ํ ์ง์๊ณผ ๊ฒฝํ์ ๋์์ ์ฑ์๋๋ฆฌ๊ธฐ ์ํ ๋ชฉ์ ์ผ๋ก ๋ง๋ค์ด์ง ์์ ์ ๋๋ค. ์์ ๋์ ์ด ์์ ์ ์น ํ์ด์ง๋ฅผ ์ฌ์ฉ์์ ์ opentutorials.org ์๋ฐ ์คํฌ๋ฆฝํธ ๊ฐ์๋ ์ ๋งํฌ์์ ๋ณผ ์ ์๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด ๋ด์ฉ์ ํ๊ทธ๋ก ๊ฐ์ธ์ฃผ์ด์ผ ํ๋ค. ๊ธ์ ์ฐ๋ ค๋ฉด ์๋์ ๊ฐ์ด ํ๋ค. HTML hello world 1+1 HTML์ 1+1์ ์ ๋ ฅํ๋ฉด ๊ทธ๋๋ก ์ถ๋ ฅํ์ง๋ง ์๋ฐ์คํฌ๋ฆฝํธ๋ ์๋์ผ๋ก 2๋ผ๊ณ ๊ณ์ฐํ์ฌ ์ถ๋ ฅํ๋ค. ์ด๋ฒคํธ ์ด๋ ๊ฒ ์์ ๊ฐ์ด ์น ๋ธ๋ผ์ฐ์ ์์ ํน์ ํ ์ผ์ด ๋ฐ์ํ์ ๋ ๊ทธ๊ฒ์ ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/cHzv8Z/btqTp2you3f/Tm0XAwHrG88q70p6KG0nGk/img.png)
https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io ์ด๊ณณ์์ ์ ํ์ ๊ฒ์์ ์งํ ํ ์ ์๋ค. A B : A์์ ์๋ ๋ชจ๋ B๋ฅผ ์ ํํ๋ค. B๋ ๋ค๋ฅธ ์์์ ๋ด๋ถ์ ์๊ธฐ ๋๋ฌธ์ ์์์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค. -> #A B :์ ๊ฐ์ด ์ ํ์๋ผ๋ฆฌ ์์ ์ ํ์๋ก ๋ฌถ์ ์ ์๋ค. A.B : ๋ชจ๋ A์ค์์ ํด๋์ค๊ฐ์ด B์ธ ํ๊ทธ ์ ํ * : ์ ์ฒด ์ ํ A* : A์์ ์๋ ๋ชจ๋ ์์ ์ ํ A+B : A์ ์ธ์ ํ B์ ํ(ํ๋๋ง) A~B : A์ ์ธ์ ํ B์ ํ(์ฌ๋ฌ๊ฐ ์ ํ ๊ฐ๋ฅ) A>B : Aํ์์ ๋ชจ๋ B์ ํ A:first-child : ์ด ์นํ์ด์ง์์ ์ฒซ๋ฒ์งธ๋ก ๋ฑ์ฅํ๋ A์ ํ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/ozJXP/btqToxZQg4a/izknShl0aBFMLWuAmeTVG1/img.png)
์ค๋์ ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ถ๋ถ๋ถํฐ ๊ณต๋ถ ์์์ด๋ค. https://opentutorials.org/course/3086/18323 ๋ฐ์ํ ๋์์ธ - ์ํ์ฝ๋ฉ ๋ฐ์ํ ๋์์ธ๊ณผ ๋ฏธ๋์ด ์ฟผ๋ฆฌ ์๊ฐ ๊ฐ์ ์์ค์ฝ๋ ๋ณ๊ฒฝ์ฌํญ ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ด์ฉํด์ ๋ฐ์ํ ๋์์ธ ๊ตฌํํ๊ธฐ ๊ฐ์ ์์ค์ฝ๋ ๋ณ๊ฒฝ์ฌํญ opentutorials.org ๋ฏธ๋์ด ์ฟผ๋ฆฌ ๊ธฐ๋ณธ๊ฐ๋ ๋ฐ์ํ ์น์์ ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ ์ฃผ๋ก ๊ธฐ๊ธฐ์ ํ๋ฉด ํฌ๊ธฐ์ ๋ฐ๋ฅธ ๋ฐฐ์น๋ฅผ ํ ๋ ์ฌ์ฉํ๋ค๊ณ ํ๋ค. Responsive ์ฒ์์ ์ด๋ฐ ์ฝ๋๊ฐ ์๋ค๊ณ ํ์. ์ด ์ฝ๋์ ์คํ ๊ฒฐ๊ณผ๋ ๋ค์๊ณผ ๊ฐ๋ค. ์ด๋ ์ฐฝ์ ํฌ๊ธฐ๊ฐ ์์์ง๋ฉด Responsive์ ๊ฐ์ธ๊ณ ์๋ ํ ๋๋ฆฌ๋ฅผ ์์ ๋ณด๋๋ก ํ์. ์ค๊ฐ์ ์๋ ์ฝ๋๋ฅผ ์ถ๊ฐํด์ค๋ค. @media(max-width:880px){ div{ display:none; }..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/cbwieE/btqTtrxvNFm/JMiDabEsUefzMayCSBbNY0/img.png)
div ์ span ํ๊ทธ divํ๊ทธ๋ block level element์ด๊ณ spanํ๊ทธ๋ inline element์ด๋ค. ์๋ ์ฝ๋์ ์คํ ๊ฒฐ๊ณผ๋ฅผ ๋ณด์. NAVIGATION ARTICLE ์ ๊ธฐ์ div๋ฅผ span์ผ๋ก ๋ฐ๊ฟ์ฃผ๋ฉด? ์๋์ ๊ฐ์ด ๋๋ค. grid ๊ธฐ๋ณธ๊ฐ๋ ์ ๋ฆฌ CSS์ grid๊ธฐ๋ฅ์ ์ด์ฉํ๋ฉด ๋ค์ํ ๋ ์ด์์๋ค์ ๋ง๋ค ์ ์๋ค. ์ ๋ฒ์๊ฐ์ ์ฐ๋ฆฌ๊ฐ ๋ง๋ค๊ณ ์ ํ๋ ์ฌ์ดํธ์์ CSS๊ด๋ จ ๊ธ์ ์นธ ์์ ๋๋ํ ๋ฐฐ์นํ๊ธฐ ์ํด ์ด ๊ธฐ๋ฅ์ ์ฌ์ฉํ ๊ฒ์ด๋ค. grid๊ธฐ๋ฅ์ ์ฌ์ฉํ๊ธฐ ์ํด์๋ ๋จผ์ ๋ฐฐ์นํ ์์ดํ ๋ค(๊ตฌ์ฑ์์, ์ฆ ๋ฐฐ์นํ๊ณ ์ถ์ ๊ฒ๋ค)์ ๊ทธ๋ฆฌ๋ ์ปจํ ์ด๋๋ก ๊ฐ์ธ์ค์ผ ํ๋ค. ์ง์ ์ฝ๋๋ฅผ ๋ณด๋๋ก ํ์. ๊ทธ๋ฆฌ๊ณ 7๋ฒ์งธ ์ค๋ถํฐ {}๋ก ๋ฌถ์ฌ์๋ ๋ถ๋ถ๋ค์ด ๋ฐฐ์น๋ฅผ ํ๋ ๋ถ๋ถ์ด๋ค. ๋จผ์ ๊ทธ๋ฆฌ๋๋ฅผ ์์ฑํ๊ธฐ ์ํด ์ปจํ ์ด..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bX8vQo/btqTyAAaDSy/p9XWDBrKkXIavGSBaRNvU1/img.png)
์ค๋์ WEB2 CSS - 8. ๋ฐ์ค๋ชจ๋ธ ๋ถ๋ถ๋ถํฐ ์ด์ด์ ๊ณต๋ถ๋ฅผ ํ ๊ฑฐ๋ค. ๋งํฌ๋ ์๋์ ์๋ค! https://opentutorials.org/course/3086/18319 ๋ฐ์ค๋ชจ๋ธ - ์ํ์ฝ๋ฉ CSS box model ์๊ฐ ๊ฐ์ ์์ค์ฝ๋ ๋ณ๊ฒฝ์ฌํญ ๋ฐ์ค ๋ชจ๋ธ์ ์จ๋จน๊ธฐ ๊ฐ์ ์์ค์ฝ๋ ๋ณ๊ฒฝ์ฌํญ opentutorials.org ์ฝ๋๋ ์ด์ํ์์ ์์ํ๋ค! CSSCascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. ์์ํ๊ธฐ์ padding, border, margin์ด ๊ฐ๊ฐ ์ด๋ ๋ถ๋ถ์ ๊ฐ๋ฆฌํค๋์ง ๋ณด๊ณ ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/Wx86R/btqTp3Ys2ST/IaoWy7coatusWHfmavvIbK/img.png)
http://opentutorials.org/course/3086 CSS ์ฌ์ฉํด๋ณด๊ธฐ ์ฒซ ์ค์ต์ anchor ํ๊ทธ๋ก ๋ฌถ์ธ ๋ถ๋ถ๋ค์ ๊ธ์จ๋ฅผ ๋ชจ๋ ๋นจ๊ฐ์์ผ๋ก ๋ฐ๊พธ๋ ๊ฒ์ด๋ค. ์์ ์๋ ํ๊ทธ๋ฅผ ์ด์ฉํ์๋ค๊ณ ํ๋ค. ์๋ ์ฝ๋์ ๊ฐ์ด ๋ง์ด๋ค. WEB HTML CSS JavaScript CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/YKQw1/btqPnbdrQKx/smnO40pR0rMsQSp8Usnai1/img.png)
๋ง์ง๋ง! ์ด์ HTML์ ํ, form ๋ถ๋ถ์ ์ ๋ฆฌํ ๊ฒ์ด๋ค. HTML - ํ https://opentutorials.org/course/2039/10949 ํ - table - ์ํ์ฝ๋ฉ ํ - table 2015-12-06 10:34:20 ์์ ์ด๋ฆ ์ฑ๋ณ ์ฃผ์ ์ต์งํ ๋จ ์ฒญ์ฃผ ์ต์ ๋น ์ฌ ์ฒญ์ฃผ ์์ ์ด๋ฆ ์ฑ๋ณ ์ฃผ์ ํ๋น ์ต์งํ ๋จ ์ฒญ์ฃผ 1000 ์ต์ ๋น ์ฌ ์ฒญ์ฃผ 500 ํฉ๊ณ 1500 ์์ ์ด๋ฆ ์ฑ๋ณ ์ฃผ์ ํ๋น ์ต์งํ ๋จ ์ฒญ์ฃผ opentutorials.org ์ฐ์ ์์ 1์ ๋ถ์ํด๋ณด์. ์ด๋ฆ ์ฑ๋ณ ์ฃผ์ ์ต์งํ ๋จ ์ฒญ์ฃผ ์ต์ ๋น ์ฌ ์ฒญ์ฃผ ํ๋ฅผ ๋ง๋๋ ค๋ฉด ์ฐ์ ์ ์ฒด๋ฅผ ํ๊ทธ๋ก ๊ฐ์ธ ์ฃผ์ด์ผ ํ๋ค. ๊ทธ๋ฆฌ๊ณ ๊ฐ์ ํ์ ๋ฐ์ดํฐ๋ค์ ํ๊ทธ๋ก ๊ฐ์ธ์ฃผ์ด์ผ ํ๋ค.(์ฌ๊ธฐ์ r์ row๋ฅผ ์๋ฏธํ๋ค.) ๊ทธ๋ฆฌ๊ณ ๊ฐ ๋ฐ์ดํฐ๋ค์ ๋ก ๊ฐ์ธ์ค๋ค...
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bxV891/btqPaWbvBJf/2b4u8NkrBKhMl57RmRz0hk/img.png)
์ค๋์ https://opentutorials.org/course/3084/18891 ์นํธ์คํ (github pages) - ์ํ์ฝ๋ฉ --- ์ง์ ์น์๋ฒ๋ฅผ ์ด์ํ๋ ์ผ์ ์ฝ์ง ์์ ์ผ์ ๋๋ค. ์ฐ์ ์ปดํจํฐ๊ฐ ์์ด์ผ ํ๊ณ ์, ์ปดํจํฐ๊ฐ ๋์ฅ๊ณ ์ฒ๋ผ ํญ์ ์ผ์ ธ ์์ด์ผ ํฉ๋๋ค. ์น์๋ฒ๋ผ๋ ํ๋ก๊ทธ๋จ์ ๋ฐฐ์์ ์ค์นํด์ผ ํฉ๋๋ค. ๋ ์ธํฐ๋ท opentutorials.org ์ฌ๊ธฐ๋ถํฐ ๊ณต๋ถ๋ฅผ ์์ ํ ๊ฒ์ด๋ค. ์ฐจ๊ทผ์ฐจ๊ทผ ๋ฐ๋ผํด๋ณด์. ์ฐ์ ํ ์ผ์ 1. ๊นํ๋ธ ๊ฐ์ 2. ์ ์ฅ์(repository)์์ฑ 3. ํ์ผ ์ ๋ก๋ 4. ๋งํฌ ์์ฑ ์ด๋ค. ๊นํ๋ธ ๊ฐ์ ์ ์ด๋ฏธ ๋์ด์์ด์ ์๋ตํ๊ฒ ๋ค. ์ ์ฌ์ง์์ ์ด๋ก์ New๋ฒํผ์ ๋๋ฅธ๋ค. ์ด์ 1๋ฒ์๋ ์ ์ฅ์ ์ด๋ฆ, 2๋ฒ์๋ ์ ์ฅ์์ ๊ณต๊ฐ ์ฌ๋ถ๋ฅผ ๊ธฐ์ ํ ๋ค 3๋ฒ์๋ ๋นจ๊ฐ ๋ฐ์ค๋ถ๋ถ์ ์ฒดํฌํ๊ณ ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/qvleP/btqO0TTfSP3/YkfzDutss3xtjvwOFJXGU0/img.png)
์ ๋ฒ์ ํ๋ ๋ด์ฉ์ ์ด์ด์ HTML๊ณต๋ถ๋ฅผ ์ด์ด์ ํ๋๋ก ํ์! ์ด๊ฑด ์ง๋๋ด์ฉ ๋ณต์ต..... ๋ฌธ์๊ฐ ๊นจ์ง๋ ๊ฒฝ์ฐ๊ฐ ์๋ค๋๋ฐ ๊ทธ ์ด์ ๋ ์นํ์ด์ง๊ฐ ์ ์ฅํ ๋ฌธ์ ํํ๋ฐฉ์๊ณผ ์น ๋ธ๋ผ์ฐ์ ๊ฐ ์นํ์ด์ง๋ฅผ ํด์ํ๋ ๋ฐฉ์์ด ์ผ์นํ์ง ์๊ธฐ ๋๋ฌธ์ด๋ค. ์ ์ฌ์ง์์ ์ค๋ฅธ์ชฝ ์๋๋ฅผ ๋ณด๋ฉด UTF-8์ด๋ผ๊ณ ์ฐ์ฌ์๋๋ฐ ์ด๋ ์ด ์นํ์ด์ง๊ฐ UTF-8๋ก ์ ์ฅ๋์๋ค๋ ๋ป์ด๋ค. ์ฆ ์น๋ธ๋ผ์ฐ์ ์ UTF-8๋ก ์ด๋ผ๋ ์ง์๋ฅผ ๋ด๋ ค ์ฃผ์ด์ผ ํ๋ค. ์ด๊ฒ์ด ๋๋ฒ์งธ ์ค์ ์๋ ๊ฐ ์๋ฏธํ๋ ๊ฒ์ด๋ค. ๋ ๊ณต๋ถํ๋๋๋ก ๋ฅผ ์ฒซ์ค์ ์จ์ฃผ๊ณ ๋ก head์ bodyํ๊ทธ๋ฅผ ๊ฐ์ธ์ฃผ๋๋ก ํ์. ์ด๋ฒ์๋ ๋งํฌ๋ฅผ ํ๋ฒ ๋ฃ์ด๋ณด์! ๋งํฌ๋ฅผ ๋ฃ์ ๋๋ ๋ก ๊ฐ์ธ์ค๋ค. a๋ anchor์ ์ฝ์์ด๋ค. anchor์ ๋ป์ ์๋ฏธํ๋๋ฐ ์ ๋ณด์ ๋ฐ๋ค์ ์ ๋ฐํ๋ค๋ ์๋ฏธ๋ผ๊ณ ํ๋ค. ์๋ ๊ทธ๋ฆผ์..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bcsqbA/btqOSxvmufi/jUezLdWOVxL58foUG0GOF0/img.png)
๋์๋ฆฌ์์ ์งํํ๋ ํ๋ก์ ํธ๋ฅผ ์์ํ๊ฒ ๋์๋ค. ๋๋ ์น์ด ์ฒ์์ด๋ผ์ ์ด๋ ๊ฒ ๊ณต๋ถํ ๊ฑฐ๋ฆฌ๋ฅผ ์ฃผ์ จ๋๋ฐ ์ผ์์ผ๊น์ง๋ผ ์ฌ์ฌ ์์ํด๋ณด๋ ค ํ๋ค! ๊ฐ์๋ ์๋ ๋งํฌ์์ ๋ณผ ์ ์๋ค. https://opentutorials.org/course/3084 WEB1 - HTML & Internet - ์ํ์ฝ๋ฉ --- ์ฐ๋ฆฌ๋ ์ง๊ธ๋ถํฐ ์ฝ๋ฉ ์น ์ธํฐ๋ท ์ปดํจํฐ๋ผ๋ ๊ฑฐ๋ํ ์ฃผ์ ์ ๋ํ ํํ์ ์์ํ ๊ฑฐ์์. ์ด ์ฌํ์ ์์ํ๊ธฐ์ ์์์ ํ๊ฐ์ง ์ค๋น๊ฐ ํ์ํ๋ฐ์. ๋ฐ๋ก ์ฐ๋ฆฌ๋ค์ ์์๋ ฅ์ ๋๋ค. ์ง๊ธ๋ถํฐ ์ฌ opentutorials.org ์ค์ตํ๊ฒฝ์ ์ค๋นํ๋ ๊ณผ์ ์ ์ฐ์ atom์ ๊น๋ ๊ฒ์ผ๋ก ์์ํ๋ค. ๊ตฌ๊ธ์ ๊ฒ์ํ๋ฉด ์ฝ๊ฒ ๋ค์ด๋ฐ์ ์ ์๋ค. ๊ฐ์์์๋ file - open folder์ ํ๋ ์์ ํด๋ ์ฐฝ์ด ์๊ธฐ๋๋ฐ ๋๋ ์์๊ฒจ์..