코드가 브라우저에 반영이 안되는 경우
- 서버 재시작
- 그래도 안되면 브라우저에서
Ctrl + F5 - 캐시 문제가 발생할 수 있으므로 캐시 비우기 및 강력 새로고침 ㄱㄱ
- 아님 그냥 라이브 서버 ㄱㄱ
HTML
- HTML에는 구조만
- HTML의 생김새는 CSS로
- HTML의 동작은 JavaScript로
Block level Vs. Inline level
Block level
- 행에 대한 마크업
<div>,<p>,<h1>,<form>,<table>, etc.
Inline level
- text에 대한 마크업
<span>,<a>,<img>,<input>,<label>, etc.
Semantic markup
<article>,<footer>이런 거<div id="article">로 쓰면 HTML reader가 읽을 때 그냥<div>로 읽음- 즉 크롤링이 안 돼서 검색 노출이 잘 안 될 수 있음
- 사실 화면에 보이는 건 (CSS가 붙지 않는 한) 똑같고, 그냥 논리적으로 구분하기 위한 용도
- 다음과 같은 구조
각 구역에 대한 설명은 W3Schools 참고.
<article>과 <section>
<article>은 독립적인, 본문과 다른 내용 중 자체적으로 어떤 주제를 포함하는 경우
Ex) 뉴스 기사, 블로그 포스팅, 기사 등<section>은 그 안에서 나뉘는 구역
메인 내용을 여러 개로 나눈 것
border-box Vs. content-box
- 전자는 너비, 높이에 border를 포함하고, 후자는 포함하지 않는다.
- 즉
border-box의width를 100px로 지정해도 실제 content가 차지하는 너비는 100px보다 작아질 수 있다.
<pre>
- 공백 여러 개 쓰면 다 적용됨(원래는 몇 개를 쓰든 한 개만 보여짐)
<form>
- stateless한 HTTP로 stateful한 서비스를 제공할 수 있게 된다.
- stateless는 상태 정보(접속자가 누구인지 등)를 저장하지 않는 것을 말한다.
- stateless한 경우 흔히 쓰이는 장바구니 기능도 제공할 수 없다.
- 장바구니 기능을 제공하려면 누구의 장바구니인지 알아야 되는데, 이를 위해서는 사용자 정보가 필요하다.
- 이 정보를 입력받기 위한 태그가
<form>태그.
Attributes
action"{{URL}}"- HTTP Request URL
"/{{URL}}"은 절대 경로,"{{URL}}"은 상대 경로- 보통 주소 안 헷갈리게 절대 경로로 함
method- GET
- POST(어차피 plaintext이라 보안 수준은 GET과 같음)
- 그외 HTTP request method
enctype"text/plain""multipart/form-data"- `"applictation/x-www-form-urlencoded"
<input>
class를 주는 건 CSS를 적용하기 위함
CSS; Cascading Style Sheet
- HTML은 구조를 표현한다.
- CSS는 HTML의 시각적 표현(Appearance)을 정의한다.
- 주석은
/**/뿐이다(#,//없음).
왜 쓰냐면
- 구조와 표현을 분리한다.
- 브라우저 호환성 이슈
어떻게 쓰냐면
- External
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>- Internal
<head>
<style type="text/css">
body { margin: 0; padding: 0}
p { color : red; }
</style>
</head>- Inline
<p style="color:red; border:1px solid #000:"> This is a paragraph. </p>- External이 유지보수에 좋다.
- 만약 계절마다 바꾸고 싶다면 css 파일을 미리 만들어두고
href만 변경하면 된다.
이걸 동시에 다 하면?
p {
color: red;
}
#aa {
color: yellow;
}
.bb {
color: blue;
}<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<title>CSS Page</title>
</head>
<body>
<p style="color:green">This is a paragraph.</p>
<p id="aa">This is a paragraph.</p>
<p class="bb">This is a paragraph.</p>
<p class="bb" id="aa">This is a paragraph.</p>
<p id="aa" class="bb">This is a paragraph.</p>
<p id="aa" class="bb" style="color: green">This is a paragraph.</p>
</body>
</html>
우선순위는 inline > id > class > Tag 순으로 높다.
Selector
p {
color: red;
}
#aa { /*원래는 [id=aa] {인데 id와 class만 축약할 수 있음*/
color: yellow;
}
.bb { /*원래는 [class=bb] {인데 id와 class만 축약할 수 있음*/
color: blue;
}
* { /* Wild card */
}
p, h1 { /*한 번에 여러 tag에도 적용할 수 있음 */
}
p h1 { /* p 태그 안의 모든 h1 */
}
p > h1 { /* p 바로 밑의 h1만 */
}JavaScript
- 예전에는
<head>안에 두도록 했지만 요즘은 다시<body>안의 맨끝에 두는 추세
변수
- 그냥
i=100으로 선언하면 무조건 global variable
var
undefined로 초기화됨- function scope
- 재선언 가능
var i = 10 // 가능
...
var i = 200 // 이것도 가능- 때문에 hoisting이 발생할 수 있음
let
var쓰다보니까 짜증나서 ES6부터let,const가 추가됨(hoisting 없음)let은 재선언 불가, block scope
고도로 발달한 공유는 메모와 구분할 수 없다