TIL020_210412

JIYOON·2021년 4월 13일

CSS JavaScript html

TIL

목록 보기

20/42

🍊 감상

giphy

공부의 시작과 끝은 무조건 복습!
복습하니 확실히 내용 정리가 잘 된다

📙 열품타 코딩 시간 10hour
👍🏼 -
👎🏼 -

🚀 목표

Udemy에서 Javascript 강좌 수강하기 (332/682)
커밋 연속 30일 달성하기 (6/30, 4.12 완료)
드림코딩 자바스크립트 기초 강의 완강 (5/23)
복습: TIL003-TIL014

📣 복습: The Web Developer Bootcamp

Web

인터넷: 컴퓨터가 서버와 클라이언트로 연결되어 정보 주고 받음
url: 컴퓨터 네트워크와 검색 메커니즘에서의 위치를 지정하는 웹 리소스에 대한 참조, 컴퓨터 네트워크 상의 자원이 어디 있는지 알려주기 위한 규약, 인터넷 주소
통신 프로토콜: 컴퓨터나 원거리 통신 장비에서 메시지를 주고 받는 양식과 규칙의 체계
HTTP: 프로토콜, 통신규약 -> 컴퓨터가 다른 컴퓨터와 메시지를 주고 받을 수 있다, W3 상에서 정보 주고받을 수 있는 프로토콜, 클라이언트와 서버 사이에 이루어지는 요청/응답 프로토콜
하이퍼텍스트: 하이퍼링크를 통해 독자가 한 문서에서 다른 문서로 접근할 수 있는 텍스트
웹: 컨텐츠들이 하이퍼텍스트로 묶인 집합
HTML: 하이퍼텍스트 마크업 언어, 구조적 문서
마크업 언어: 태그를 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지
W3(WWW): 웹, 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전세계적인 정보 공간
웹 브라우저: 웹 서버에서 navigate하며 쌍방향 통신하고 html 문서나 파일을 출력하는 소프트웨어, http 소프트웨어 에이전트 (e.g. 크롬, 엣지, 오페라, 사파리, 파이어폭스)

HTML

<tag attribute=""> // <태그 속성="속성값'></태그> (elements(요소))

자주 쓰이는 태그

<html>
	<head>
    	<meta charset="UTF-8" /> <!--문서 설명, 검색어, 문서 부호처리 방식-->
    	<title> 브라우저 툴바 상단 문서 제목 <title>
        <style type="text/css"> 
        	body {color:red;}</style> <!--internal 방식의 스타일-->
        </style>
        <script type="text/javascript"> 
        	alert('자바스크립트 연결, defer와 함께 사용하기'); 		
        </script>
        <link rel="stylesheet" href="style.css"/> <!--style sheet external 연결-->
    </head>
	<body>
    	<header> 웹 페이지 상단 영역 
        	<nav> 네비게이션 링크 그룹 </nav>
        </header>
        <hgroup>
    		<h1> 제목, 6까지 쓸 수 있음 </h1>
            <h2> hgroup은 제목-부제목의 다단계 제목 설정, 하지만 html5에서 삭제됨 </h2>
        </hgroup>
    	<p>문단, 단락 생성
        	<span> 인라인 요소, 특정 부분 스타일 적용, p 태그 안에 사용하기도 </span>
            <dfn> 용어가 처음 등장할 때 정의, 전문어 정의 - 부모 요소에 설명 포함 </dfn>
            <abbr title="약자의 뜻"> 약자, 마우스 올렸을 때 뜻 나타남 </abbr>
            <q> 짧은 인용구 </q>
            <b> 글씨를 굵게 </b>
            <strong> 글자 굵게 해서 텍스트 중요하게 </strong>
            <em> 특정 텍스트 강조, 이탤릭체 </em>
            <i> 이탤릭체 </i>
            <ins> 변경 후 추가된 내용 표시, 밑줄 </ins>
            <del> 변경 후 삭제된 내용 표시, 가운데 라인 </del>
            <br> 줄바꿈 태그
            <pre>
            	태그 안의 탭, 엔터, 스페이스 표현됨
            </pre>
            <p><sup>1</sup>/<sub>2</sub> + <sup>1</sup>/<sub>2</sub> = 1</p>
            <!--sup은 squared, sub은 baseline-->
            1 &lt; 6 <!--entity code 써주기-->
        </p>
        <blockquote>
        	다른 자원에서 인용한 일부 지정, 인용문, 들여쓰기 됨
            <cite> 저작물의 출처 표기, 그림, 책, 영화 이름 등, 이탤릭체 </cite>
        </blockquote>
        <ol><li> 순서가 있는 목록 </li></ol>
        <ul><li> 순서가 없는 목록 </li></ul>
        <dl> 용어 설명 목록
        	<dt> 용어의 제목 </dt>
            <dd> 용어 설명 </dd>
        </dl>
        <hr> <!--화면 가로지르는 라인-->
        <table>
        	<thead><th> th는 열의 제목 </th><th></th></thead>
            <tbody><th></th><td> td는 내용 </td></tbody>
            <tfoot><tr><td colspan="2"> tr로 행 생성 </td></tr></tfoot>
        </table>
        <code> 컴퓨터 코드의 일부분 나타냄 </code>
        <div> 레이아웃 분할, 블록 레벨 요소, 섹션 만들 때, 의미적 관계 없을 때
        	<img src="ddd.jpg" alt="ddd"> <!--이미지 삽입-->
        </div>
        <form>
        	<label for="dd"> 폼 양식에 이름 붙이는 태그 </label>
            <input type="text" id="dd">
            <textarea> 여러 줄의 텍스트 입력 </textarea>
        </form>
        <select name="job">
        	<option value="학생">학생</option>
        </select>
        <button type="button"> input타입과 달리 텍스트나 이미지 넣을 수 있음 </button>
        <source src="url">
        <!--절대 주소 혹은 상대 주소를 명시하여 재생할 미디어 파일 보여줌, 오디오, 비디오-->
        <iframe src="http://dd.com"> 인라인 프레임, 다른 문서 포함 </iframe>
        <figure>
          <audio src="http://dd.com"> 음성파일 재생 </audio>
          <video src="http://dd.com"> 영상파일 재생 </video>
          <figcaption> 사진, 비디오, 오디오 등 담는 컨테이너, 내용과 연관 </figcaption>
        </figure>
        <aside> 부차적 내용, 바깥 영역, 느슨하게 관련된 내용 </aside>
        <article> 본문 파악, 독자적으로 완성된 컨텐츠 </article>
        <section> 서로 관계있는 문서를 분리 </section>
        <main> 
        	body 요소의 주 콘텐츠를 정의한다, 직접적으로 중심 주제여야 하고 반복되는 내용은 안 됨, 문서 			내에 단 하나만 존재해야 하며 다른 article, aside, footer, header, nav의 자손 요소 안 			 됨 
        </main>
        <details>
        	<summary> summary가 details의 1대 자식 요소로 나와야 한다</summary>
            <p> details는 더보기/접기 기능의 영역을 감싼다 </p>
        </details>
        <time datetime="YYYY-MM-DDThh:mm:ssTZD|PTDHMS">
        <!--time tag로 요소의 날짜와 시간 데이터를 machine-readable 형태로 명시한다-->
        <footer>
       	꼬릿말, 문서의 정보
        <address> 글의 저자나 회사와 연락할 수 있는 정보 </address>
        </footer>
    </body>

style은 세 가지 방식으로 삽입 가능
1. inline: 태그 속성처럼 사용
2. internal: head에 style tag로 삽입
3. external: .css 저장 후 link 태그 사용

semantic web: 의미론적인 웹 -> SEO

CSS

selector

참고링크: 넥스트리

{ property: value; }

universal, multiple(,), id(#), class(.), descendant( ), adjacent(+), direct(>)
attribute([type="text"])

하위 선택자와 자식 선택자

하위 선택자 section ul -> 모든 하위 요소에 스타일 적용
자식 선택자 section>ul -> 부모의 바로 아래 자식 요소에만 적용

인접 형제 선택자와 일반 형제 선택자

e+f adjacent sibling combinator, e 요소 뒤따르는 f 요소 -> 첫번째 동생요소에만 적용
e~f general sibling combinator, e 요소가 앞에 존재하면 f 선택 -> 모든 동생요소에 적용

pseudo-classes

참고링크: 넥스트리

box model

border 때문에 box size 커지는 문제 해결 -> box-sizing: border-box;

position property

static, relative, absolute, fixed, sticky

transition & transform

⭐️ responsive css & flexbox

grid

grid-template: 1fr 50px/20% 80%;
grid-column-start:3;
grid-column-end:5; /*마지막 수는 포함하지 않는다*/
grid-column-end: span 2;
/*grid-column: 3 / 5;*/
grid-column: 2/6;
grid-row: span 5;
/*grid-area: 1 / 2 / 6 / 6;*/
.box1 {align-self: start;}
.box4 {align-self: end;}
.box4 {justify-self: end;}

복습링크

javascript

string methods

" hello ".trim().toUpperCase()//"HELLO"
let tvShow = 'catdog';
tvShow.indexOf('cat'); //0
tvShow.slice(0,3); //'cat' -> new copy
tvShow.slice(3); //'dog; -> new copy
tvShow.replace('cat','dog'); //'dogdog' -> 첫번째만 바꿈
tvShow.repeat(3) //'dogdogdog'
`Total is: $${price*qty}`//template literals

math object

Math.PI //3.14159265
Math.round(4.9) //5 //Rounding a number
Math.abs(-456) //456 //Absolute value
Math.pow(2,3) //8 //Raises 2 to the 3rd power=2**3
Math.floor(3.999) //3 //Removes decimal
Math //object 볼 수 있음
Math.ceil(34.1) //35 //Round up
Math.random(); //0.328923749
Math.floor(Math.random()*10)+1; //1 to 10

boolean logic

parseInt(userInput) // string이 숫자로 변함

const day = prompt('Enter a day').toLowerCase();
if (day==='monday') {console.log("You are a baby");
} else if (day==='saturday') {console.log("You are a child");
} else if (day==='friday') {console.log("You are an adult");
} else {console.log ("You are a senior.");
}

array

array methods: push, pop, shift, unshift

let cats = ['blue', 'kitty']
let dogs = ['rusty', 'wyatt']
let party = cats.concat(dogs) //(4) ["blue", "kitty", "rusty", "wyatt"]
cats.includes('blue') //true
party.indexOf('kitty') //1 //첫번째만 찾는다
party.reverse() //["wyatt", "rusty", "kitty", "blue"]
party.slice(1) //["rusty", "kitty", "blue"]
party.slice(2,4) //["kitty", "blue"]
party.slice(-1) //["blue"]
party.splice(1,1) //["wyatt", "kitty", "blue"]
party.splice(1,0,"bruno") //["wyatt", "bruno", "kitty", "blue"]

레퍼런스가 변하지 않는다면 값은 변할 수 있다

객체

참고링크: poiemaweb

자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합
객체는 데이터를 의미하는 프로퍼티(property)와 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미하는 메소드(method)로 구성된 집합

모든 키는 string으로 변환됨 (symbol만 빼고)

person["lastName"] //Jagger
person.lastName //Jagger

ordered data : array
unordered data : object

const comments =[
{username: 'Tammy', text: 'lololol'. votes: 9},
{username: 'FishBoi', text: 'glub glub'. votes: 123}
]
comments[1].text //"glub glub"

loop

const animals = [ 'lions','tigers','bears'];
for (let i=0; i<animal.lenth; i++) {
console.log(i, animals[i]); }

let num = 0;
while (num<10) {
console.log(num);
num++;
}

const subreddits = ['cringe', 'books', 'funny', 'soccer', 'pics']
for (let i = 0; i < subreddits.length; i++) {
	console.log(`Visit reddit.com/r/${subreddits[i]}`)
}
for (let sub of subreddits) {
	console.log(`Visit reddit.com/r/${sub}`)
}

let total=0;
for (let score of Object.values(testScores)) {
	total+= score;
}
console.log(total / scores.length)

function

scope

lexical scope: 함수의 선언에 따라 상위 스코프가 결정된다

참고링크: suyeon bak

forEach

const numbers = [1,2,3,4,5]

numbers.forEach(function (el) {
	console.log(el)
})

// 이건 요즘의 더 새로운 방식, for을 이용해서 elment 불러오기

for (let el of numbers) {
	console.log(el);
}

map

참고링크: zerocho

//1
function cleanNames(arr) {
	const newArr = arr.map(function(name){
    	return name.trim();
	})
    return newArr;
}

//2
function cleanNames = arr => {
	const newArr = arr.map(function(name) {
    	return name.trim();
};

//3
function cleanNames = arr => arr.map(name => name.trim());

⭐️⭐️⭐️ this

함수 실행시에는 전역(window) 객체를 가리킨다.
메소드 실행시에는 메소드를 소유하고 있는 객체를 가리킨다.
생성자 실행시에는 새롭게 만들어진 객체를 가리킨다.

자바스크립트의 this는 호출하는 방법에 따라 결정된다
호출을 어떻게 했냐, 누가 했냐

호출한 놈(객체), 누가 실행했냐 === this

var someone = {
	name: 'codejong',
    whoAmI : function() {
    	console.log(this);
	}
};

someone.whoAmI(); //dot notation 방식으로 someone이 호출했으므로 someone이 this

var myWhoAmI = someone.whoAmI;
myWhoAmI(); //regular function call 방식으로 global(window)에서 실행했으므로 this는 window

<script>
var btn = document.getElementById('btn');
btn.addEventListener('click',someone.whoAmI);
// boom...button이 호출됨, 함수를 버튼에 넘겨준 것. 실행한 애는 버튼
</script>

bind(바인딩)

var bindedWhoAmI = myWhoAmI.bind(someone);
btn.addEventListener('click',someone.whoAmI); //someone

filter method

높은 평점을 가진 영화의 제목만 불러오기

movies.filter(m=>m.score>80).map(m=>m.title);

reduce method

복습링크
참고링크: zerocho
-> map 과 filter 같은 함수형 메서드를 reduce로 구현할 수 있다

map을 reduce로 만들기
filter을 reduce로 만들기
가장 작은 수 찾아내기
가장 평점이 높은 영화 찾기
-> 예제, 기억 안 나면 링크 참조

arrow function

traditional function은 함수가 실행되는 곳의 영향을 받는다
하지만 arrow functiondms 함수가 만들어진 곳에 scope된다

참고링크: WDS

normal function already create the variable with the function keword
function sum(a,b){ return a+b; }
but arrow function, we have to create own variable to store the function
let sum2 = (a,b) => a+b;

arrow function은 익명 함수에서 빛을 발한다

📣 드림코딩 자바스크립트 기초 강의:6-

참고링크: 드림코딩

6. Class 객체지향언어

class vs object
object-oriendted

class person{
	name; //property - 속성(field)
    speak(); //function - 행동(method)
}

property

참고링크: 생활코딩

어떤 값이 다른 값과 연관을 가지고 있을 때
문자열.length 에서 length를 프로퍼티라 한다
객체에 소속된 함수 -> 메서드 (e.g. cowokers.showAll())
객체에 소속된 변수 -> 프로퍼티 (e.g. var cowokers = { 'programmer':'egoing'} 에서 programmer
-> 같은 것이라도 맥락에 따라 부르는 것이 다르다

JIYOON

이전 포스트

TIL019_210411

다음 포스트