1. HTML
2. CSS
2.1. CSS 선언방법
- inline은 별도의 우선순위를 갖지만, internal 과 external은 우선순위가 동등하기에 겹치는 선언이 있을 경우 나중에 선언된 속성이 반영된다.
1. inline
- HTML 태그 안에 적용, 다른 CSS파일에 적용한 것보다 가장 먼저 적용
<p style="border:1px solid gray;color:red;font-size:2em;">2. internal
- style 태그로 지정, 구조와 스타일이 섞여 유지보수가 어렵다.
- 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없다.
<head>
<style>
p {
font-size : 2em;
border:1px solid gray;
color: red;
}
</style>
</head>
<body>
<div>...</div>
</body>3. external
- 외부파일(.css)로 지정하는 방식, link 태그로 추가한다.
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>...</div>
</body>
</html>2.2. 상속과 우선순위 결정
- 상위에서 적용한 스타일은 하위에도 반영된다.
- 단, box-model이라고 불리는 크기와 배치 관련 속성들은 하위 엘리먼트로 상속되지 않는다. (width, height, margin, padding, border 등)
- 같은 선택자(selector)라면 나중에 선언한 것이 반영된다.
span { color : red; }
span { color : blue; } /* blue 가 반영된다*/- 선택자의 표현이 구체적인 것이 있다면 구체적인 것이 먼저 적용된다.
body > span { color : red; } /* red 가 반영된다*/
span { color : blue; } - css 적용은 id(#) > class(.) > element 순으로 지정된다 : 캐스캐이딩(cascading)
#a{ color : red; } /* id */
.b{ color : blue; } /* class */
div{ color : green; } /* element */2.3. CSS Selector
- id, class 요소 선택자와 함께 활용
#myid { color : red }
div.myclassname { color : red }- 그룹 선택 (여러 개 셀렉터에 같은 style을 적용해야 한다면)
h1, span, div { color : red }
h1, span, div#id { color : red }
h1.span, div.classname { color : red }- 요소 선택 (공백) : 자손요소
아래 모든 span태그에 red색상이 적용됨
<div id="jisu">
<div>
<span> span tag </span>
</div>
<span> span tag 2 </span>
</div>#jisu span { color : red }- 자식 선택 (>) : 자식은 바로 하위엘리먼트를 가리킴
아래는 span tag 2만 red 색상이 적용된다.
<div id="jisu">
<div>
<span> span tag </span>
</div>
<span> span tag 2 </span>
</div>#jisu > span { color : red }- n번째 자식요소를 선택 (nth-child)
아래는 첫번째 단락에 red 색상이 적용된다.
- E:nth-child(n)는 부모의 n번째 자식인 E 요소
- E:nth-of-type(n)은 같은 유형의 n번째 형제인 E요소
<div id="jisu">
<h2>단락 선택</h2>
<p>첫번째 단락입니다</p>
<p>두번째 단락입니다</p>
<p>세번째 단락입니다</p>
<p>네번째 단락입니다</p>
</div>#jisu > p:nth-child(2) { color : red }2.4. Element가 배치되는 방법 (Rendering)
display(block, inline, inline-block)
- display 속성이 block 이거나 inline-block의 경우 코드는 위에서 아래로 쌓이듯이 채워진다
- display 속성이 inline의 경우 왼쪽에서 오른쪽으로, 그리고 위에서 아래쪽으로 빈자리를 차지하며 흐른다. 높이와 넓이를 지정해도 반영되지 않는다
position(static, absolute, relative, fixed)
- position 속성을 사용하면 상대적/절대적으로 어떤 위치에 엘리먼트를 배치하는 것이 수월해진다.
- position 속성의 기본 상태는 static으로 순서대로 배치된다.
- absolute는 기준점에 따라서 특별한 위치에 위치 (top / left / right / bottom 으로 설정)
✔ 기준점은 상위엘리먼트로 단계적으로 찾아가는데 static이 아닌 position을 기준으로 한다.
✔ 전혀 다른 곳에 위치할 수 도 있으므로 top, left 값은 0px, 0px 이라도 꼭 주는 편이 좋다. - relative는 블럭처럼 원래 자신이 위치해야 할 곳을 기준으로 이동 (top / left / right / bottom로 설정)
- fixed는 viewport(전체화면) 좌측, 맨 위를 기준으로 동작
float(left, right)
- 원래 flow에서 벗어날 수 있고 둥둥 떠다닐 수 있다.
- float은 일반적인 배치에서 벗어난 형태로 특별히 배치된다.
- 뒤에 block 엘리먼트가 float 된 엘리먼트를 의식하지 못하고 중첩돼서 배치됨
- 레이아웃에서 clear(left, right, both) 속성을 통해 float인 엘리먼트들을 인식하게 할 수 있다.
footer {
background-color : #eee;
clear:left;
}- 부모는 float자식을 인식하지 못함(속성이 상속되지 않음). overflow 속성을 통해 float자식을 인식하게 할 수 있다.
#wrap {
overflow:auto;
margin:20px 0px;
}Margin과 Padding
- 위 / 오른쪽 / 아래 / 왼쪽 엘리먼트와 본인 간의 간격
- Margin: 바깥여백
- Padding: 안쪽여백
<style>
div {
border: 1px solid #333333;
}
div.ma {
margin: 10px 20px 30px 40px;
}
div.pa {
padding: 10px 20px 30px 40px;
}
</style>Box-sizing
- padding 속성을 늘리면 엘리먼트의 크기가 달라질 수 있는데 box-sizing 속성을 border-box로 설정하면 엘리먼트의 크기를 고정하면서 padding 값만 늘릴 수 있다.
div {
width:100px;
height:100px;
border:1px solid red;
padding:0px;
font-size:0.8em;
}
.box-content {
box-sizing:content-box; /* 기본설정 */
}
.box-border {
box-sizing:border-box;
}엘리먼트의 크기
- block엘리먼트의 크기는 기본적으로는 부모의 크기만큼을 가진다.
EX)width:100%부모의 크기만큼을 다 갖는 것
CSS-grid & Flex
CSS Flex
https://studiomeal.com/archives/197
CSS Grid
https://studiomeal.com/archives/533
3. JavaScript
3.1. 변수, 연산자, 타입
변수
- var, let, const로 선언할 수 있다.
- var 의 경우 변수명이 중복으로 페이지에서 선언되어도 정상작동
- const, let 은 중복변수명이 존재할 경우 오류발생
- cosnt 는 java 의 final 속성과 유사하고 선언과 동시에 값할당을 해야함
- let 은 선언이 후 값할당이 자유로움
var a = 2;
var a = "aaa";
var a = 'aaa';
var a = true;
var a = [];
var a = {};
var a = undefined;연산자
//or 연산자 활용
const name = "crong";
const result = name || "codesquad"; //or에서 왼쪽 상황을 만족하면 오른쪽을 확인하지 않는다.
console.log(result);
var name = "";
var result = name || "codesquad";
console.log(result);- && (AND) 연산자의 경우 양쪽모두 확인 후 오른쪽 것을 처리한다. (확인)
삼항연산자 (확인)
3.3. 함수
함수의 선언
- 함수는 여러개의 인자를 받아서, 그 결과를 출력한다.
- 파라미터의 갯수와 인자의 갯수가 일치하지 않아도 오류가 나지 않는다.
// 함수의 호출, 함수 선언문
function printName(firstname) {
var myname = "jisu";
return myname + " " + firstname;
}
console.log(printName()) //name is undefined
//선언되어있고 할당되지 않은 파라미터(매개변수)는 undefined라는 값을 갖게 된다. 함수표현식
- 변숫값에 함수 표현식을 담아놓은 방식
- 함수는 아래 inner와 같이 표현할 수도 있다.
function printName(firstname) {
var result = inner();
console.log("name is " + result);
var inner = function() {
return "inner value";
}
}
printName();
//TypeError: inner is not a function
//호이스팅(Hoisting)
- 자바스크립트는 함수가 실행되기 전에 함수 안에서 필요한 변수값들을 미리 다 선언한다. (자바스크립트 파서 내부적으로 끌어올려서 처리)
- 위의 코드에서 inner는 변수로 선언되었으나 값이 할당되기 전 실행됐으므로 undefined 기본값이 할당된 상태이다.
반환값
- 자바스크립트 함수는 반드시 return값이 존재하며 return값이 없을 때는 기본 반환값인 'undefined'가 반환된다.
- 자바스크립트에서는 void타입이 없다.
인자 (arguments)
- 함수가 실행되면 arguments라는 특별한 지역변수가 존재한다.
- 자바스크립트 함수는 선언한 파라미터보다 더 많은 인자를 보낼 수도 있는데 이때 넘어온 인자를 arguments로 배열의 형태로 하나씩 접근할 수 있다.
- 배열타입은 아니므로 배열의 메서드를 사용할 수 없다.
- 함수의 인자값이 바뀐다던지, 의도를 알 수 없다던지 등 변경에 약한 코드가 될 수 있으므로 arguments를 조심히 써야 한다.
function a() {
console.log(arguments);
}
a(1,2,3); // { '0': 1, '1': 2, '2': 3 }
function a() {
for(var i=0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
a(1,2,3);
//1
//2
//3
function a() {
if(arguments.length < 3) return;
console.log('my name is', argument[1])
}
a(1,"jisu");
// 3개 미만의 인자가 들어와서 아무 값이 없는 것을 리턴했으므로 함수에서 반환값이 없다. Arrow function
- 간단하게 함수를 선언할 수 있는 문법
function getName(name) {
return "Kim " + name ;
}
//위 함수는 아래 arrow함수와 같다.
var getName = (name) => "Kim " + name;
병아리 분석가