아스

[공부한 자료]

https://youtu.be/TAyLeIj1hMc  -> JavaScript - callback

https://youtu.be/Sn0ublt7CWM -> JavaScript - Promise

https://youtu.be/1z5bU-CTVsQ -> JavaScript - async & await

JS의 문법은 '비동기 처리'와 관련이 있다는 글을 정말 많이 보았다. 
'비동기 처리'란 브라우저를 지원하는 js의 언어 특성상, 코드를 실행하다 중간에 시간이 걸리더라도, 브라우저에 응답을 띄워야 하기 때문에 시간이 걸리는 부분에서 기다리지 않고 다음 코드를 실행하는 js의 문법 특성이다. 

비동기 처리

웹 브라우저와 서버는 서로 즉각적으로 통신해야 한다. 그러므로 만약에 js 언어로 통신하던 중 일부 코드에서 시간이 오래 걸리는 상황이 있을 경우, 해당 코드가 실행되기까지 계속 기다린다면 즉각적인 통신이 어려울 것이다. 따라서 시간이 추가적으로 걸리는(즉각적으로 반응하지 않는) 부분이 있을 경우, 그 부분과 이후 부분을 병렬적으로 처리하며 통신하는 방법을 사용한다. 이를 비동기 처리라고 한다. 

js에서 비동기 처리가 필요한 이유는 많다. 

예를 들어, 검색어를 입력하자마자 연관 검색어를 보여주는 기능의 경우, 서버와 웹 브라우저가 비동기적으로 통신하기 때문에 가능한 기능이다. 만약 비동기 처리가 없다면, 페이지를 새로고침하지 않으면 아무런 기능도 사용할 수 없었을 것이다. 

* 웹 브라우저와 서버는 js를 통해서 비동기 통신을 하는데, 이를 AJAX(Asynchronous Javascript And Xml)라고 한다. 

비동기 처리의 단점

다만 비동기 처리의 특성상, 예를 들어 함수 A가 먼저 실행되고 함수 B가 실행될 때, 만약 함수 B가 함수 A의 리턴 값을 필요로 하는데 함수 A가 값을 리턴하지 않았다면(실행이 완료되지 않았다면) 문제가 발생할 수 있다. 

JS에선 이러한 비동기 처리 상황에 대비해서 3가지의 방법(문법)이 있다. 

세 종류 모두 현재 사용하는 문법이며, 여러 문법을 같이 사용할 수도 있다. 

1) 콜백 함수(callback function)
2) Promise
3) async, await

세 가지 문법에 대해서 각각 살펴보자. 

1) callback function

함수 A가 다른 함수 B의 매개변수로 들어간 뒤 나중에 호출될 때, 함수 A를 callback function(나중에 호출된다는 의미)이라고 한다. 
js 언어만 callback이 가능한 것은 아니다. java 등 많은 언어에서 callback function을 사용할 수 있다. 
+ 사용할 수 있는 기준? 함수를 매개변수로 받을 수 있어야 한다. 

* but 변수의 값으로 함수를 받을 수 있는 대표적인 언어는 javascript이다. <-> java는 불가능

let funct = function(elem){
	console.log(elem);
};

callback function은 처음 보면 낯설 수 있다. 낯선 이유는 아마도:
1) 익명 함수에 익숙하지 않아서
2) arrow function 문법에 익숙하지 않아서(1번과 비슷)

그래서 오늘은 간단한 callback 함수 예시인 배열의 .filter 함수를 통해서 기존에 알고 있던 함수를 callback function으로 변환하는 과정을 살펴보겠다. 

[1]

함수 중에서는 다른 함수를 매개변수로 요구하는 함수가 있다. 이 경우, 우선 함수를 선언 및 정의한 뒤, 해당 함수를 매개변수로 필요로 하는 다른 함수에 넣어 주는 방식을 사용한다. 

const words = ['data', 'structure', 'algorithm', 'computer', 'math'];
let result;

function callback(element){
    return element.length > 6;
};

result = words.filter(callback);
console.log(result);

배열에서 사용하는 .filter 함수는 매개변수로 또 다른 함수를 필요로 한다. (이때, 이 함수는 반드시 true/false를 리턴하는 함수여야 한다는 조건이 있다.) 

따라서 callback이라는 함수를 사전에 정의한 뒤, filter 함수의 매개변수로 함수를 넣어줄 수 있다. 

[2]

그런데 위 함수처럼 정말 실행이 간단하거나, 한 번밖에 사용하지 않는 함수는 굳이 이름을 붙이고 선언하기 번거로울 때가 많다. 이 경우 '익명 함수'를 사용한다. 

익명 함수란, 함수를 선언할 때 붙이는 'function' 이라는 키워드를 붙이지 않고, 이름도 붙이지 않는 함수이다. 이름이 없고 function 키워드를 사용하여 선언하지 않았기 때문에 여러 번 재사용될 수 없다. 

result = words.filter((element)=>{
    return element.length > 6;
});
console.log(result);

앞서 선언된 callback 함수에서 function과 이름을 뺀 부분을 그대로 filter() 안의 매개변수에 넣었다. 

그리고 매개변수와 함수 몸체(body)를 구분하기 위해서 중간에 => 화살표를 선언해 주었다. 이를 arrow function이라고 한다. 

[3]

익명 함수의 매개변수가 딱 하나일 때는 매개변수를 둘러싼 괄호()를 제거할 수 있다. 

또한 함수 안의 코드가 한 문장일 때에는 중괄호{}도 생략할 수 있다. 

result = words.filter(word => word.length > 6);
console.log(result);

2) Promise

JS에서 표준화된 비동기 처리를 하기 위해 사용하는 객체이다. 

JS에서 비동기처리를 하는 함수는 Promise 타입의 인스턴스를 리턴한다. 바꿔 말하면, Promise 타입을 리턴하는 함수는 비동기 처리를 사용하는 함수라고 봐도 좋다. 

Promise로 어떻게 '표준화된' 비동기 처리를 할 수 있는 걸까?

Promise는 then()과 catch()라는 2개의 메소드를 통해서 비동기 처리를 한다. 

예를 들어, 비동기처리를 하는 함수 A가 있다. 

만약 A가 오류 없이 실행된다면, A는 Promise 타입의 인스턴스를 반환할 것이다. 

그럼 그 인스턴스를 .then() 메소드로 받아서 추가적인 작업을 할 수 있다. 

반면에 오류가 발생한다면, .catch()를 통해 오류를 받을 수 있다. (=오류를 매개변수로 받아서, 그에 대한 추가적인 작업/처리를 할 수 있다.)

재밌는 것은, then()과 catch() 모두 매개변수로 콜백함수를 받는다. 즉 비동기 함수가 실행된 뒤, then()이나 catch() 메소드를 통해서 비동기 처리가 오류 없이 진행되었을 때/또는 오류가 발생하였을 때 어떤 작업을 수행할 것인지를 then()이나 catch() 메소드에 함수를 매개변수로 넘겨줌으로써 알려줘야 한다. 

또한, then()의 메소드 안에서 return 문을 사용한다면, then()함수도 Promise 타입의 인스턴스를 리턴한다. 이렇게 되면 then() 뒤에 작성되는 함수에서도 또 .then()을 사용하여, 첫 번째 then() 메소드에서 리턴된 Promise에 대해서 추가로 작업을 할 수 있게 된다. 이를 Promise chaining이라고 한다. 

function asynchronous(){
	// asynchronous processing...
}

asynchronous()
	.then(result=>{
    	console.log(result.json); // result processing
    })
    .catch(err=>{
    	console.log(err.stack);	// error processing
    })

3) async & await

Promise는 함수 안에 함수가 복잡하게 내장된 콜백 지옥 문제를 해결할 수 있다는 장점이 있다. 그러나 Promise도 여러 번 사용한다면 코드가 복잡해질 수 있다. (여러 번의, 긴 promise chaining이 발생할 수 있다.)

따라서, js에서는 비동기적 코드도 동기적인 코드와 똑같이 작성할 수 있도록 하는 방법으로 async & await 문법을 만들었다. 

비동기적 처리를 하는 함수의 앞에 await 예약어(키워드)를 붙이고, await를 사용하는 해당 함수를 다른 함수로 감싼 뒤, 감싼 함수 앞에다 async 키워드를 붙이면 바로 사용할 수 있다. 

async 키워드를 붙인 함수는 Promise 인스턴스를 리턴한다. 또한 이 함수 안에서는 비동기 처리를 하는 함수가 포함되어 있음을 알 수 있다. 

즉 async 키워드는 '이 함수 안에는 비동기 처리를 하는 함수가 포함되어 있다'라고 선언하는 역할을 한다. 

그렇게 async 키워드로 선언을 하고 나서야 그 안에서 await을 사용하여, 비동기적 함수를 동기적인 방식으로(즉 순차적으로) 사용할 수 있는 것이다. 

async 키워드가 붙은 함수 안에서는, 순차적으로(=동기적으로) 코드가 실행된다. 

function timer(time){
    return new Promise(function(resolve){
        setTimeout(function(){
            resolve(time);
        }, time);
    });
}

async function run(){
    var time = await timer(1000);
    console.log('time: '+ time);
    time = await timer(1000+time);
    console.log('time: '+ time);
    time = await timer(1000+time);
    console.log('time: '+ time);
};

run();

또한, async & await 키워드와 promise를 같이 사용할 수도 있다. 

console.log('parent start');
run().then(()=>{
    console.log('parent end');
});

run() 함수는 promise를 리턴하는 비동기(async)함수이다. 그러므로 이 함수가 리턴하는 promise의 then() 메소드 안에 있는 코드는 run() 함수가 오류 없이 실행된 다음에, 순차적으로 실행된다. 

또한, async 함수 안에 return 문을 선언하여 async 함수에서 리턴 값을 받아서 변수에 할당할 수 있다. 

async 함수는 별도의 return문이 없는 경우 Promise 타입의 인스턴스를 반환하지만, return 문을 선언하는 경우 다른 값도 리턴할 수 있다. 다만 이 경우에도 함수 내에서는 비동기적 처리를 한다. 

async function run2(){
    var runTime = await run();
    console.log(`runtime: ${runTime}`);
};

run2();

[생활코딩 CSS 강의 중 마지막 - Semantic UI 부분]

참고한 사이트:

1. 자바스크립트가 필요한 컴포넌트의 사용법 - Semantic UI (opentutorials.org)

2. Dropdown | Semantic UI (semantic-ui.com)

1. 라이브러리의 개념

library란, 무언가를 만들 때 공통적으로 많이 사용되는 것들을 한데 모아서, 재사용하기 쉽게 만들어 놓은 것.

여기에서는 라이브러리로 Semantic UI와 Bootstrap를 소개했다.

Semantic UI (semantic-ui.com)  이 사이트의 모든 요소가 Semantic UI로 만들어졌다.

Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)

사람들이 가장 많이 사용하는 라이브러리로 알려져 있다. 

2. Semantic UI 적용하는 기본설정 따라 해 보기

설치 방법에는 복잡하지만 기본적인 방법과, 간단하지만 본질적이지는 않아 나중에 어려움이 있을 수 있는 방법이 있는데, 여기서는 후자를 사용했다.

: 그냥 semantic UI 홈페이지에서 다운로드를 누르고, 현재 사용하는 html 에디터에서 Include in Your HTML에 있는 소스 코드를 복사해서 붙여 넣으면 끝.

예제로 버튼을 만들어 보았다.

<head>
    <link rel="stylesheet" type="text/css" href="semantic/Semantic-UI-CSS-master/semantic.min.css">
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="semantic/Semantic-UI-CSS-master/semantic.min.js"></script>
</head>
<body>
    <button class="ui button">
      Semantic UI
    </button>
    <button>
    Default
    </button>
</body>

이 코드를 입력해서 아래처럼 나왔다. 버튼이 총 두 개다.

오른쪽이 가장 기본적인 버튼인데, 화려하지 않은 정말 기본 디자인이다. 그런데 button 태그에 class 선택자를 지정했더니 왼쪽 버튼처럼 모양이 바뀐 것을 볼 수 있다. 

-> 이는 우리가 link 태그로 불러온 semantic.min.css 파일에 "ui button"이라는 클래스에 할당된 버튼 서식(?)이 따로 존재하기 때문에 가능하다. 파일을 불러오지 않고 class만 지정한다고 바뀌는 게 당연히 아니다.

Q. 버튼을 직접 만드는 건 매우매우 어려울 것 같은데, 여러 버튼 디자인을 사용하고 싶다면 라이브러리를 떠돌아 다니면 되는 것인지 궁금하다.

(A). 후속 강의를 들어 본 결과 그런 것 같다... 하지만 요즘은 여러 UI들이 많이 나와서 그나마 다행. 아마 내가 생각한 것의 대부분은 인터넷 어딘가에 돌아다니지 않을까 싶다.

3. Semantic UI 잘 사용하는 법

1. Semantic UI의 사이드바

: 사이드바에는 Semantic UI로 구현할 수 있는 여러 기능들이 있다. 각 기능을 누르면 해당 기능을 구현하면 어떤 모습이 되는지를 보여준다. 이걸 참고해서 원하는 기능을 사용하면 된다.

2. 원하는 기능을 가져오는 방법

1) Include in your HTML에서 미리 해당 css 파일과 javascript파일을 link 태그로 가져온다.

2) 해당 기능의 Example 코드를 복사 붙여넣기한다.

=> 2)까지 하면 실행되는 기능이 있고, 실행이 안 되는 기능이 있다.

실행이 안 되는 기능의 경우, javascript의 기능이 필요해서 그렇다. 즉 javascript를 initialize(초기화)해야 한다. 3)으로!

* 이런 기능은 보통 '움직임'을 포함하는 경우가 많다!

3) 보통 이런 기능의 경우, 페이지에 4가지의 탭이 있다. (Definition / Examples / Usage / Settings)

여기서 Usage에 들어가서, javascript 코드를 복사해 줘야 한다.

복사할 때는 script 태그 만들고 그 안에 넣어줘야지, 그냥 넣어주면 반영이 안 된다!

b/c html에서 script태그의 역할 중 하나는, css나 javascript등 다른 언어? 프로그램?을 불러올 때 script 태그 안의 코드는 그 다른 언어로 시행하겠다! 라고 선언하는 것이기 때문에, 이 선언을 안 해주면 html이 해당 코드를 javascript 방식으로 처리하지 못한다.

<사용예시>

1. Dropdown

이렇게 Text라고 쓰여진 버튼? 을 누르면 위/아래로 선택할 수 있는 콤보 상자처럼 나오는 기능이 Dropdown이다. 이 기능은 '움직임'이 있어서 그런지 javascript를 initialize해야 사용할 수 있다.

1) 코드 복사하기

2) javascript initialize시키기 : script 태그를 밑에 추가하고, 이런 코드를 추가한다.

<script>
    $('.ui.dropdown').dropdown();
</script>

이 코드는 javascript의 문법대로 실행된다.

$ 뒤의 () 안에는 어떤 대상에다 코드를 적용할 것인지를 명시하고, 뒤에는 메소드(함수)를 호출한 것이다.

즉 javascript에 있는 dropdown 함수를 불러와서 class가 ui dropdown인 엘리먼트들에 해당 기능을 적용했다.

3) 기존 기능을 변경하는 방법

: Semantic UI를 사용하면서 원하는 점과 조금 다를 수 있다.

ex) dropdown의 목록이 좀 더 천천히 내려왔으면 좋겠다 등등

-> 그런 세부사항들은 4가지 탭 (Definition / Examples / Usage / Settings) 중에서 Settings에서 설정 가능하다.

이런 식으로 각 기능들이 있다. 가운데는 default value이고, 오른쪽엔 설명, 왼쪽에는 해당 속성의 이름이 나와 있다. 즉 이 속성을 변경하고 싶으면 duration 값을 다르게 바꿔 주면 된다.

<script>
    $('.ui.dropdown').dropdown({duration:1000});
</script>

 dropdown 기능의 세부사항을 지정하는 것이므로, dropdown 메소드 안에 {}를 넣고, {(속성명):(값)} 으로 지정한다.

1. 코드 경량화(= minify 하기)

: 꼭 필요한 작업은 아님. 웹사이트의 규모가 크거나, 방문자가 많은 경우에 효과 있는 처리.

경량화 하는 방법도 여러 가지가 있음!

1. HTML/CSS editor에 코드 경량화(code minifier) 프로그램 설치하기

나는 Bracket editor을 사용했다. 다른 editor에도 이와 비슷한 경로로 경량화를 할 수 있을 것이다!

=> JS CSS Minifier 를 설치한다.

* 이때, 경량화 할 코드가 들어있는 파일은 CSS 형태의 파일로 저장한다!

b/c html이 확장자인 파일에 minify를 적용하면 아무 일도 일어나지 않는다!

해당 파일을 열어 놓은 상태에서, [편집]-[Minify]를 누르면 

=> 기존파일명.min.css 라는 파일이 새로 생성된다. 이 파일을 열어보면 기존의 css파일과 똑같은 코드가 있는데, 다만 여백과 공백이 모두 사라져서 최소화된 형태로 남아 있다.

(단축키 : Ctrl + Alt + M)

+ 개별 파일뿐만 아니라 프로젝트 단위로도 경량화를 할 수 있다.

[편집]-[Minify Project] 를 누르면

=> 해당 파일이 들어있는 프로젝트에 속한 모든 css파일이 경량화된다.

(단축키 : Ctrl + Alt + A)

2. 코드 경량화 해 주는 사이트 활용하기

: http://adamburgess.github.io/clean-css-online/

↑여기에서 왼쪽 부분에 기존 코드를 입력하면, 오른쪽 부분에 경량화된 코드가 나온다.

3. 에디터 등 다른 프로그램을 거치지 않고, 명령 프롬프트에서 실행하기

(생각보다 복잡해서 생략!)

2. CSS 뛰어넘기(Preprocessor)

0. preprocessor의 개념

CSS는 표준화된 기술이다. 어느 한 집단에서 만들어서 배포(X), 위원회가 있고 다양한 논의를 통해 기술을 확정(O)

CSS에 다른 문법을 추가하자는 논의가 있었는데, 그것이 있으면 편해지기도 하지만 반면 CSS를 더 복잡하게 만들 수 있어서 CSS에 새롭게 넣지는 못했다.

그러나 위원회 등 공식적 기관이 아닌, 일부 개인과 집단들은 이 문법을 통해 다른 것들을 만들어 내기도 했는데,

그것이 바로 preprocessor이다.

즉 '표준화되거나 수용되지는 않았지만, 기존 CSS문법을 벗어나지 않는 선에서 변환되면서도 더 많은 기능을 수행할 수 있는 문법으로 코드를 작성하는 기술?도구?'이다.

ex. 문제상황

<!-- 기존의 CSS 코드 -->
body {
  font: 14px/1.5 Helvetica, arial, sans-serif;
}
body #logo {
  border-radius: 5px;
}

<!-- Stylus를 사용해서 작성한 코드 -->
body {
  font: 14px/1.5 Helvetica, arial, sans-serif;
  #logo {
    border-radius: 5px;
  }
}

코딩의 극단적 상황 : #logo 와 같은 id selector가 수십 개 있다고 생각해 보자.

그냥 body 태그 안에 적으면 될 일 이지만, CSS에서는 그렇게 할 수 없고 꼭 body #logo 순으로 일일이 body를 앞에 명시해줘야 한다. -> 귀찮음

그래서 Stylus 라는 preprocessor를 만들었는데, 이 Stylus에서는 #logo를 body{} 안에 넣기만 하면 앞에 body라고 언급해 주지 않아도 된다.

이럴 때, Stylus preprocessor를 이용해서 간단하게 코드를 작성하고, 그 다음에 해당 Stylus 파일을 그대로 웹브라우저에 적용할 수 없으므로, 그때 다시 CSS형식으로 컴파일 해 주면 된다.

1. 에디터에서 preprocessor 이용해서 코드 간단히 작성하기

1. 해당 Stylus를 editor에서 사용할 수 있게 하기 위해서, 확장 프로그램을 설치해야 한다.

-> [확장 프로그램 아이콘] 누르고, 'stylus' 검색해서 "Stylus Auto Compiler" 설치하기.

=> 그러면 이제 editor에서 stylus 형태의 파일을 저장하고 사용할 수 있다.

2. Stylus의 확장자는 styl임. => 파일이름.styl 으로 html editor에 파일을 하나 만든다.

(1번 없이 2번 작업이 불가능)

3. 해당 stylus의 간단한 문법을 사용해서 코드를 작성한다.

2. preprocessor을 이용해서 작성한 코드를 다시 컴파일하기

컴파일(compile) : 하나의 언어로 쓰여진 문서를 다른 언어로 옮기는 것.

(여기서는 Stylus로 쓰인 문서를 CSS 형식으로 옮긴다.) 두 가지 방법이 있다.

방법1) 에디터(editor)를 이용해서 컴파일

1. 해당 파일이름.styl 파일을 저장하면, 저장하면서 동시에 파일이름.css 이라는 파일이 하나 더 생긴다.

2. 그 파일은 stylus로 작성된 코드를 css형식으로 컴파일시킨 파일이다.

3. 웹브라우저에 해당 코드를 적용시키려면 2번 파일(css형식)을 사용해야 한다.

: html>head>link^body 에서, link href = "파일이름.css" 라고 명시해 준다.

-> 실행시키면 Stylus preprocessor로 작성해서, css 형식으로 변환된 파일이 html 웹브라우저에 나타난다.

** 사실 Stylus 기능은 유용하다고 생각하지만, 지금 나의 입장에서는 크게 사용할 일이 없을 것 같다... 

=> 나중에 필요할 때 다시 보기로 하고, 우선 넘어가자-->>

3. fontello

1. 소개

: 웹페이지에 아이콘을 삽입할 수 있게 해 주는 기능/사이트

: Fontello - icon fonts generator

↑ 여기 가면 여러 아이콘들을 다운로드 받을 수 있다. 

fontello는 여러 아이콘 개발자들이 만든 아이콘을 한 군데에 모아 놓은 라이브러리 느낌으로 보면 된다.

스크롤을 내리면 각 섹션별로 이름이 있는데, 각 아이콘들을 만든 제작자를 기준으로 구분해 놓았다.

1-2. 아이콘 다운로드 받기

1) 원하는 아이콘 여러 개를 동시에 선택하고, 우상단의 Download 버튼을 누른다.

2) 다운로드 된 파일을 열면 demo.html 파일이 있는데, 열어보면 내가 다운로드 받은 아이콘들이 웹페이지에 사용될 경우 어떤 모양인지를 볼 수 있고, + show codes를 누르면 각 아이콘들이 html 파일에서 사용될 때 쓸 수 있는 코드도 볼 수 있다.

3) 다운로드 된 파일을 열면 css 파일 안에 fontello.css 또는 fontello-embedded.css 파일이 있는데, 후에 이 파일을 html파일의 link 태그를 이용해서 불러올 것이다.

-> 그러므로 이 css파일 전체를 복사해서 내가 사용하는 에디터의 디렉토리 파일로 옮겨 준다!

(*강의에서는 fontello.css 주소를 link 태그에 넣었는데 나는 그렇게 하면 안 되고 fontello-embedded.css 파일을 넣어야 아이콘이 떴다. 하나 해서 안 되면 다른 파일로 시도하면 될 것 같다.)

2. 사용법

css파일을 내가 사용하는 에디터의 현재 디렉토리 파일에 넣은 상태에서 작업을 시작한다.

* 모든 과정은 에디터에서 다 이뤄진다!

* 두 가지 방법이 있다.

방법 1.

<!doctype HTML>
<html>
<head>
    <link rel="stylesheet" href="css/fontello-embedded.css">
    <style>
        body{
            font-family: "fontello";
        }
    </style>
</head>
<body>
    &#xf09e;   // 해당 아이콘의 코드 이름
</body>
</html>

방법 2.

<!doctype HTML>
<html>
<head>
    <link rel="stylesheet" href="css/fontello-embedded.css">
</head>
<body>
    <i class="icon-rss"></i>   // 해당 아이콘의 이름
</body>
</html>

2-2. 아이콘 +a

당연하겠지만, 아이콘을 불러올 수 있다면 해당 아이콘에게도 우리가 기존에 알고 있던 css서식을 적용할 수 있다.

ex1) 아이콘에서 color 속성을 지정한다면, 해당 아이콘의 색이 바뀌어서 나온다.

ex2) 아이콘에서 font-size도 지정할 수 있다. 아이콘도 font의 일종으로 취급하는 것 같다.

(그래서 아이콘 라이브러리 사이트 이름이 fontello인듯)

=> 그 외의 text-align 등, 일반 글자에 적용되는 서식이라면 다 아이콘에 적용된다고 해도 무방할 것 같다.

3. fontello 기본 원리와 확장

3-1. 작동 원리

복잡한 설정을 하지 않았는데 어떻게 fontello가 잘 작동할까? fontello를 사용하는 데 쓴 코드들 중 크게 두 가지 부분에서 fontello의 작동원리를 알아보자.

* 원리는 모두 위에서 불러온 css/fontello.css 또는 css/fontello-embedded.css 파일에 있다.

1) font-family: "fontello";

불러온 fontello-embedded.css 파일을 열어보면, 맨 위의 @font-face 라는 선택자가 { } 로 묶여져 있다.

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?56489907');
  src: url('../font/fontello.eot?56489907#iefix') format('embedded-opentype'),
       url('../font/fontello.svg?56489907#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

즉 이 @font-face를 사용하려면 font-family를 font-family: "fontello"; 로 지정해야 하는 것이다.

아래의 src url은, 각 웹 브라우저마다 폰트를 처리하는 규격 등이 달라서 각각을 정의해 준 것이다.

2) <i class="아이콘 이름"></i>

마찬가지로 fontello-embedded.css 파일에 들어가서 해당 아이콘 이름을 Ctrl + F로 검색해 보면,

.icon-rss:before { content: '\f09e'; } /* '' */

이런 식으로 다운로드 받은 아이콘마다 서식 지정이 되어 있다.

위 코드는 해당 i태그를 사용하고 content라는 속성 값으로 "\f09e"를 지정한다면 icon-rss라는 이름의 아이콘을 지정하는 것과 같은 효과를 낸다는 말이 된다.

그렇다면 이 뒤에 붙은 :before는 무엇일까?

해당 css파일의 앞 부분을 보면 이런 코드가 있다.

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;

^은 문자열의 앞/뒤 부분을 나타낸다.

1) "문자열"^ : "문자열"로 시작하는 모든 문자열을 의미

2) ^"문자열" : "문자열"로 끝나는 모든 문자열을 의미

그러므로 class^="icon-" 의 의미는 class가 "icon-"으로 시작하는 모든 선택자에 해당하는 사항이라는 의미이다.

뒷 줄에는 font-family: "fontello"; 라고 되어 있는데, 즉 윗 줄의 조건을 만족하면 font-family: "fontello"; 서식을 적용하겠다, 즉 해당 코드를 아이콘으로 나타내게 하겠다는 의미이다.

=> 그러므로 i 태그의 class를 사용해서 아이콘을 나타낼 때, 아이콘 이름은 다 icon-으로 시작하므로 이름을 맞게만 입력한다면 font-family: "fontello"; 서식이 자동 적용되는 것이다.

3-2. 확장편

fontello의 아이콘들을 이용해서 할 수 있는 더 다양한 것들을 알아보자.

1) :before , :after => 특정 선택자/텍스트의 앞/뒤에 css서식 적용하기

:hover 처럼 style 태그 안의 선택자 뒤에 :before 또는 :after를 입력하고 { }를 열어서 CSS 서식을 작성하면 된다.

<!doctype HTML>
<html>
<head>
    <link rel="stylesheet" href="css/fontello-embedded.css">
    <style>
        #now{
            font-size : 100px;
            text-align : center;
            margin-top : 30px;
            color : limegreen;
            background-color : black;
        }
        #back:before{
            font-family: "fontello";
            content: "AB";
            font-size : 100px;
            color : deeppink;
        }
    </style>
</head>
<body>
    <i class="icon-rss" id="now"></i>
    <i class="icon-videocam"></i>
    <i class="icon-user-plus"></i>
    <i class="icon-flight"></i>
    <i class="icon-home"></i>
    <div id="back">CSS</div>
</body>
</html>

만약 이렇게 작성한다면, 

이런 결과가 나올 것이다!

2) animation 효과

: 아이콘을 넣었는데, 이 아이콘이 움직이게 하고 싶다면 사용하는 효과.

방법

1) link 태그를 하나 더 만들고, href 안에 "css/animation.css" 라고 입력한다.

= css 폴더 안의 animation css 파일을 불러온다.

2) 효과를 적용하고 싶은 선택자의 class명에 animation-(적용하고 싶은 효과)를 입력한다.

: 이때, 어떤 효과를 적용할지는 animation.css 파일을 보고 효과명을 그대로 입력해야 적용된다.

<link rel="stylesheet" href="css/animation.css">

<i class="icon-home animate-spin"></i>

이렇게 class명의 icon 이름 적용한 코드 바로 뒤에 이어서 효과명을 쓴다.

해당 animate-spin 효과는 회전 효과로, 적용하면 아이콘이 빙글빙글 도는 효과를 낼 수 있다. (로딩 이미지에 적합할듯)

4. fontello 폰트 만들기

: 정확히는 다른 이미지를 아이콘으로 만드는 방법.

* 이 방법 역시 fontello 웹사이트를 이용해야 가능하다.

* 아무 이미지나 아이콘으로 바꿀 수 없고, 벡터 이미지를 바꿀 수 있다!

+ 벡터 이미지는 Noun Project: Free Icons & Stock Photos for Everything (thenounproject.com) 여기서 받을 수 있다.

<방법>

1. thenounproject 사이트에서 원하는 벡터 이미지를 다운로드 받는다.

2. 다운로드 받은 이미지를 fontello의 아이콘들이 나오는 페이지에서 'Custom Icons' 영역에 드래그한다.

3. 그러면 해당 벡터 이미지를 아이콘 형식으로 다운 받아서 사용할 수 있다.

만약 fontello에서 기존에 다운로드 받았던 아이콘들을 알 수 없다면?

1. Download webfont 버튼 왼쪽으로 두 칸 옆의 연장 버튼 클릭하고 Import 버튼 누르기

2. 파일 선택창에서 config.json 파일을 불러오면, 그동안 내가 선택했던 아이콘들을 모두 볼 수 있다.

그래픽

5) SVG

: 직접적인 그래픽과 상관은 없지만, SVG파일도 CSS에서 효과를 주는 대상이기 때문에 있는 챕터.

1. SVG파일이란?

Vector file로, 기존의 bitmap 이미지와 비교할 때 차이가 있다.

bitmap : 작은 점으로 이미지를 표현. 확대하면 계단 효과 등 깨짐 발생 -> png 

vector : 이미지를 선과 점의 연결로 표현. 확대해도 깨짐 발생 X -> svg

2. SVG / PNG 파일 다운받아서 CSS에 불러 오기

1. SVG / PNG 이미지 다운받기:

thenounproject.com/ 여기서 이미지 아이콘 무료 다운로드 가능!

2. <img> 태그를 사용해서 나타낸다. 확장자만 다르다.

<img src="파일이름.svg" alt=""> 

<!doctype HTML>
<html>
<head>
   <meta charset="utf-8">
    <style>
        img{
            width:200px ; margin : 20px ;
        }
    </style>
</head>
<body>
    <h1>SVG:Vector</h1>
    <img src="people1.svg" alt="five of us">
    <h1>PNG:Bitmap</h1>
    <img src="people2.png" alt="five of us">
</body>
</html>

전혀 차이 없는 두 개의 이미지가 만들어지지만, 확대를 한다면 PNG 파일만 깨짐이 발생한다.

+ SVG / PNG 파일의 장점

: background에서 color과 image가 충돌하지 않는다.

<!doctype HTML>
<html>
<head>
    <style>
        body{
            background-image : url('people1.svg') ;
            height : 300px ;
            background-size : contain ; 
            background-color : lightgreen ;
            background-repeat : repeat ;
            }
    </style>
</head>
<body>
</body>
</html>

3. SVG 이미지 직접 만들기

1. 기존 SVG 파일을 bracket 등 html editor에 나타내보면 <svg> 태그가 있는데, 이를 그대로 복사한다.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 64 80" enable-background="new 0 0 64 64" xml:space="preserve">
	</svg>

<svg> 와 </svg> 태그 사이에 있는 코드가 SVG 이미지가 될 것이다.

해당 코드에는 복잡한 요소가 많은데, 다 지우고 width와 height 속성만으로도 svg 이미지를 나타낼 수 있다.

<svg width="210" height="210">
    <rect x="5" y="5" width="200" height="200" style="stroke:red ; fill:blue ; stroke-width:10px"></rect>
    </svg>

각 svg 태그 안 코드의 의미:

+ 유용한 사이트 소개

1) SVG를 심화학습하고 싶다면?

tutorials.jenkov.com/svg/index.html

2) SVG를 배워서 어디다 쓰는지 알고 싶다면?

codepen.io/search/pens?   여기에서 'SVG' 검색하기

오랜 Project : Bracket 에서 디렉토리 외부의 이미지파일을 img태그로 불러오는 방법

모션그래픽

: CSS 코드로 그래픽/애니메이션 작업을 하는 방법

(물론 전문적 작업을 위해서 포토샵 등 다양한 tool을 쓰는 것도 좋음)

* transform 속성은 이 속성이 적용되는 element의 display 상태가 block 또는 inline-block 일 때만 적용된다.

transition

1) transition 이란?

: 효과를 부드럽게 적용할 수 있는 속성.

이 속성만 적용해도 간단한 변환 효과를 애니메이션처럼 보이게 할 수 있다.

ex) 어떤 효과를 1초간 적용 -> 해당 효과가 연속상으로 이어지는 것 처럼 보임

<!doctype HTML>
<html>
<head>
    <style>
        a{
            font-size:3rem ; 
            display:inline-block ; 
            transition:property : all ; 
            transition-duration : 1s ;
        }
        a:hover{
            transform:translate(20px, 20px) ;
            font-size : 2rem
            color : lightgreen ;
        }
    </style>
</head>
<body>
    <a href="#">Click</a>
</body>
</html>

+ <a href="#"> : 해당 a 링크/태그를 클릭해도 어떤 웹사이트로 이동하지 않게 함.

2) transition 세부사항

developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions 여기에 자세한 설명있음!

1. transition-property

: 어떤 element, 요소에 transition 효과를 적용할지

2. transition-duration

: transition 효과를 얼마(초/분)동안 지정할지

3. transition-delay

: transition 효과를 얼마(초/분) 후 부터 나타나게 할지

4. transition-timing-function

: www.w3schools.com/cssref/css3_pr_transition-timing-function.asp 에 세부설명 있음.

ex) ease-in : 초반에 느린 transition 효과 적용 / ease-out : 후반에 느린 transition 효과 적용

step(n, start/end) : transition 효과를 초반/후반에 n단계로 적용

5. transition : 위 모든 속성들을 한 번에 나타내기

적용할 element {

   property(적용대상)  duration(적용시간)  delay(지연시간)  timing-function(함수효과적용)

}

**transition 효과를 사용해서 작은 효과를 구현해 봄.

<!doctype HTML>
<html>
<head>
    <style>
        .rainbow{
            margin : 10px ; width : 100% ; justify-content : center ; height : 100px ; font-size : 2rem ; font-weight : bold ;
            align-items : stretch ;
            display : flex ;
            transition : all 2s ;
            
        }
        #one:hover{height : 50px ; background-color : red ; font-size : 3rem }
        #two:hover{height : 100px ; background-color : orange ; font-size : 3rem}
        #three:hover{height : 150px ; background-color : yellow ; font-size : 3rem }
        #four:hover{height : 200px ; background-color : lawngreen ; font-size : 3rem }
        #five:hover{height : 250px ; background-color : lightcyan ; font-size : 3rem }
        #six:hover{height : 300px ; background-color : deepskyblue ; font-size : 3rem }
        #seven:hover{height : 350px ; background-color : mediumpurple ; font-size : 3rem }
    </style>
</head>
<body>
    <div class="rainbow">
        <div id="one" class="rainbow">Red</div>
        <div id="two" class="rainbow">Orange</div>
        <div id="three" class="rainbow">Yellow</div>
        <div id="four" class="rainbow">Green</div>
        <div id="five" class="rainbow">Skyblue</div>
        <div id="six" class="rainbow">Navy</div>
        <div id="seven" class="rainbow">Purple</div>
    </div>
</body>
</html>

유지보수

1. link & import

좋은 코드를 만드는 방법 중 하나 : 중복을 제거하는 것!

중복을 제거하면서 코드를 효율적으로 수정할 수 있는 방법이 link 와 import 이다.

사용하는 방법

여러 개의 웹페이지의 디자인/스타일에서 겹치는 코드만 복사해서 새 페이지에 복사한다.

후에 이 디자인 서식을 사용한다면 이 새 페이지에서 끌어와서 사용할 것이다.

* 이때, 디자인서식이 들어있는 새 페이지의 확장자는 .css 이다!

/*  스타일 적용하는 파일  */
h1{
    background-color : black ; color : limegreen ;
    transition : all 1s ;
}
h1:hover{
    background-color : white ; color : orangered ; text-align : right ;
}

<!-- 1페이지 -->
<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="index1.css">    
</head>
<body>
    <h1>page1</h1>
</body>
</html>

<!-- 2페이지 -->
<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="index1.css">
</head>
<body>
    <h1>page2</h1>
</body>
</html>

2가지의 방법

어떤 양식으로 코드를 끌어오는지에 따라서, 방법이 두 가지로 나뉜다: (결과는 같다)

2-1) link

: HTML 태그를 사용할 때. <head> 태그 안에 사용한다.

<head>
    <link rel="stylesheet" href="index1.css">    
</head>

2-2) import

: style 태그 안에 사용할 때. css 형식을 따를 때. <head> 태그 안 <style> 태그 안에 사용한다.

    <style>
        @import url('index1.css')
    </style>

1. 배경(background)

1) 배경의 세부 속성들(순서대로)

1. background-color : 색깔

2. background-image : 특정 이미지를 배경에 적용할 때.

   background-image : url("이미지 경로.확장자")

3. background-repeat : 배경 이미지의 경우, 바둑판식으로 반복될지를 결정하는 속성

   1. : no-repeat : 이미지 반복 안 함

   2. : repeat-x : 가로 방향으로만 반복나열

   3. : repeat-y : 세로 방향으로만 반복나열

   4. : repeat[기본값] : 가로 세로 반복(바둑판식)

4. background-attachment : 배경이미지가 화면에 어떻게 붙어 있을지를 결정함

   1. scroll[기본값] : 화면 스크롤하면 배경 영역과 같이 배경이미지도 이동

   2. fixed : 화면 스크롤하면 배경 영역은 움직이지만 배경 이미지는 고정

5. background-position : 배경이미지가 화면에서 어디에 위치할지를 지정

   여러 값이 있으나, left top / left bottom / center 등으로 많이 표현됨.

6. background-size : 배경이미지가 화면에서 얼마만큼의 영역을 차지할지를 지정.

   1. cover[기본값] : 배경이미지가 배경화면을 다 덮음. 가로/세로가 맞지 않을 경우, 일부가 삐져나올 수 있음.

   2. contain : 배경이미지가 배경화면을 벗어나지 않음. 가로/세로가 맞지 않으면 일부 공간이 빌 수 있음.

2) 간단하게 나타내는 방법

border와 비슷하다.

background : color image repeat attachment position size   순서대로 나열!

* color와 image는 둘 다 나타낼 수 있다. 다만 image가 color보다 앞에 적용되므로, image가 불투명하다면 color를 가릴 수 있다.

2. 필터(filter)

이미지와 텍스트 등 element에 '효과'를 적용하는 것.

css-playground.com/  에서 다양한 필터 효과를 직접 적용해볼 수 있음!

1) 필터 적용하기 : 간단한 버전

적용할 element { filter : 적용할 필터(세부사항) }

2) 간단한 필터 예시

1. blur : 이미지/텍스트를 흐리게 만들어주는 필터

blur ( px 단위 ) 로 입력. px이 클수록 blur 효과가 커짐.

2. grayscale : 이미지를 흑백으로 만들어주는 필터

grayscale ( 0% ~ 100% 사이 단위 ) 로 입력. 100%이면 완전 흑백.

* 여러 필터를 동시에 적용할 수 있다!

  <head>
    <style>
        img:hover{
            filter: grayscale(50%) ;
            filter: blur(10px)
        }
    </style>
  </head>
  <body>
      <img src="C:\Users\USER\Desktop\WEB\image\facebook.jpg" width=100%>
  </body>

* 효과 부드럽게 적용시키기

transition : 적용대상 적용시간

transition : all 1s ;  <!-- 모든 대상에 대해서, 1초동안 해당 효과를 천천히 적용시킴 -->

3) 기타 필터 적용해보기

여기서 css-playground.com/view/224/hours-by-columns 의 게시물의 코드를 사용해서, 모바일 형식으로 된 원본 코드를 조금 변형해서 여행 플래너 형식으로 코드를 구성해 보았다.

<html>
<body>
    <div class="ground">
        <div class="mobile">
           <div class="main-frame">
            <div class="year">
               <div class="year-title">
                   2021
               </div>
               <div class="week-title">
                        Singapore
                    </div>
                <div class="week">
                    <div class="week-day">
                        <div class="day">
                            <div class="day-title">
                                <div class="first-level">
                                    <div class="day-number">
                                        1
                                    </div>
                                    <div class="second-level">
                                        <div class="day-month">
                                            April
                                        </div>
                                        <div class="day-name">
                                            Universal <br> Studio
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="hours-box">
                                <div class="hours">
                                    <div class="hour">09:00</div>
                                    <div class="list">Global Station</div>
                                </div>
                                <div class="hours">
                                    <div class="hour">12:00</div>
                                    <div class="list">Lunch at Marvel's</div>
                                </div>
                                <div class="hours">
                                    <div class="hour">19:30</div>
                                    <div class="list">Firework Festival</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="week-day">
                        <div class="day">
                            <div class="day-title">
                                <div class="first-level">
                                    <div class="day-number">
                                        3
                                    </div>
                                    <div class="second-level">
                                        <div class="day-month">
                                            April
                                        </div>
                                        <div class="day-name">
                                            Merlion <br> Park
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="hours-box">
                                <div class="hours">
                                    <div class="hour">08:00</div>
                                    <div class="list">Breakfast Buffet</div>
                                </div>
                                <div class="hours">
                                    <div class="hour">12:00</div>
                                    <div class="list">Busking</div>
                                </div>
                                <div class="hours">
                                    <div class="hour">17:00</div>
                                    <div class="list">Watch Sunset</div>
                                </div>
                                <div class="hours">
                                    <div class="hour">19:00</div>
                                    <div class="list">Sightseeing</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="week-day">
                        <div class="day">
                            <div class="day-title">
                                <div class="first-level">
                                    <div class="day-number">
                                        4
                                    </div>
                                    <div class="second-level">
                                        <div class="day-month">
                                            April
                                        </div>
                                        <div class="day-name">
                                            Gardens <br> by the Bay
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="hours-box">
                                <div class="hours">
                                    <div class="hour">08:00</div>
                                    <div class="list">Photo at waterfall</div>
                                </div>
                                <div class="hours">
                                    <div class="hour">12:00</div>
                                    <div class="list">Ferris Wheel</div>
                                </div>
                                <div class="hours">
                                    <div class="hour">14:00</div>
                                    <div class="list">Bird Show</div>
                                </div>
                                <div class="hours">
                                    <div class="hour">16:00</div>
                                    <div class="list">Picnic</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="week-title">
                        Japan
                    </div>
                <div class="week">
                    <div class="week-day">
                        <div class="day">
                            <div class="day-title">
                                <div class="first-level">
                                    <div class="day-number">
                                        8
                                    </div>
                                    <div class="second-level">
                                        <div class="day-month">
                                            April
                                        </div>
                                        <div class="day-name">
                                            Tokyo
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="hours-box">
                                <div class="hours">
                                    <div class="hour">09:00</div>
                                    <div class="list">Ichiran Ramen</div>
                                </div>
                                <div class="hours">
                                    <div class="hour">11:00</div>
                                    <div class="list">Shopping</div>
                                </div>
                                <div class="hours">
                                    <div class="hour">14:00</div>
                                    <div class="list">Spa</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="week-day">
                        <div class="day">
                            <div class="day-title">
                                <div class="first-level">
                                    <div class="day-number">
                                        9
                                    </div>
                                    <div class="second-level">
                                        <div class="day-month">
                                            April
                                        </div>
                                        <div class="day-name">
                                            Tokyo
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="hours-box">
                                <div class="hours">
                                    <div class="hour">12:00</div>
                                    <div class="list">Eat Sushi</div>
                                </div>
                                <div class="hours">
                                    <div class="hour">19:00</div>
                                    <div class="list">Sightseeing</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</body>
</html>

바꾼 요소들:

1. 화면 크기를 위해서 mobile과 main frame의 width와 height을 대폭 늘려서 지정하였다.

2. 기존 양식은 날짜와 시간만 있고 '할 일' 영역은 없었는데, 여기에 '할 일' 영역을 추가하였다.

여기서 flex 형식이 많이 사용되어서 주의해야 했다. 가령 컨텐츠는 나라를 기준으로는 column으로 정렬되지만, 그 안에서의 날짜를 기준으로는 row로 정렬되고, 또 하루 날짜 안에서의 시간과 할 일은 column으로 정렬되지만, 그 안의 시간과 할 일은 row로 정렬되었다. 

3. flex 형식을 지정할 때는 지정할 단위에서 '가장 바깥에 있는 element'에다 지정해야 하는데, 이를 찾는 것이 조금 까다로웠다.

=> CSS 구조가 복잡할 시 레이아웃 맵을 그려놓거나, 배경색으로 각 div 요소의 영역과 포함관계를 뚜렷이 구분하면서 작업하면 덜 헷갈릴 것이다.

아쉬웠던 점:

아직 JavaScript 등을 모르다 보니, 해당 글은 코드에 직접 작성한 것이다. 그래서 코드가 불필요하게 길어지고, 어디에 입력할지를 정확히 찾기 어려웠다. 스크립트 언어를 배워서 편하게 작성할 수 있다면 더 좋을 것 같다.

3. 혼합(blend)

: 이미지와 이미지를 혼합해서 새로운 이미지를 만들어내는 기법!

어떤 이미지를 혼합하느냐에 따라서, 두 가지 모드가 있다. 

1. background-blend-mode : 배경 이미지끼리 혼합

여기서의 배경 이미지 두 개: background-color & background-image

<!doctype HTML>
<html>
<head>
    <style>
        .blend{
            height:500px ; background-color : lightgreen ; border: 5px solid black ; background-size : cover ;
            background-image : url('html.jpg') ; background-blend-mode:color ;
        }
    </style>
</head>
<body>
    <div class="blend"></div>
</body>
</html>

background-blend-mode 를 설정해야만 blend 효과를 볼 수 있고, 아니라면 이미지가 색상보다 우선한다!

background-blend-mode 의 여러 value

: www.w3schools.com/cssref/pr_background-blend-mode.asp여기서 더 자세히 알 수 있다.

color, color-burn, color-dodge, darken, difference ... 등 다양한 value가 있다!

color-burn이나 color-dodge는 기본색과 배경 '색깔'의 색으로만 이미지를 만드는 것 같고, difference는 보색효과와 유사한 느낌이다.

2. mix-blend-mode : 배경 이미지와 텍스트끼리 혼합

꼭 텍스트와 이미지를 혼합해야 하는 것은 아니다. developer.mozilla.org/ko/docs/Web/CSS/mix-blend-mode 에서는 여러 class를 지정하고 각 class에 원을 할당해서 mix-blend-mode 를 사용한 예시를 보여준다.

그리고 과정이 좀 까다로웠는데, <생활코딩> 강의의 방식을 그대로 따라해야만 적용이 되었다... 

1) 아래처럼 body 태그 전체에 background-image를 적용하면 mix-blend-mode 효과가 나타난다.

<!doctype HTML>
<html>
<head>
    <style>
        body{
            background-image : url('netflix.jpg') ; background-size : contain ;
        }
        .blend{
            font-size : 2rem ; 
            color : limegreen ; 
            font-weight : bold ; 
            mix-blend-mode : screen ; 
        }
    </style>
</head>
<body>
    <div class="blend">
        <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, autem.</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, officia tenetur alias corporis voluptatum molestias molestiae, autem fugiat asperiores architecto nobis! Vero perspiciatis quisquam atque, deleniti, nostrum obcaecati tenetur animi dolorem iusto officia, eos praesentium veniam, voluptatibus? Officiis, hic molestiae! Illo, nam, exercitationem. Numquam tempora tenetur odit ducimus alias, obcaecati voluptate soluta temporibus omnis quasi, nemo, reprehenderit minus at recusandae.</p>
    </div>
</body>
</html>

2) 그러나 background-image를 <div>태그의 class 에 적용하면 이 효과가 나타나지 않는다.

<style>
        .blend{
            background-image : url('netflix.jpg') ; background-size : contain ;
            font-size : 2rem ; 
            color : limegreen ; 
            font-weight : bold ; 
            mix-blend-mode : screen ; 
        }
    </style>

3) 방법을 알아냈다.

-> body 태그에 적용하면 되고 개별 class에 적용하면 안 되었던 이유는 포함관계 때문인 것 같다.

body태그가 class보다 큰/포괄적인 개념이므로, 포괄적인 body 태그에 이미지를 먼저 적용하고, 그 안의 div class에 텍스트를 적으면 가능했지만, level이 같고 동일한 class에 background-image와 텍스트 속성을 둘 다 적용해버리면 되지 않았던 것이다.

=> 바깥의 태그/element에 background-image 를 적용시키고, 더 안쪽의 element에 텍스트와 background 속성을 적용하면 문제없이 적용된다. 이렇게!

<style>
        .blend1{
            background-image : url('netflix.jpg') ; background-size : contain ;
        }
        .blend2{
            font-size : 2rem ; 
            color : limegreen ; 
            font-weight : bold ; 
            mix-blend-mode : screen ; 
        }
    </style>
</head>
<body>
    <div class="blend1">
        <div class="blend2">
        <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, autem.</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, officia tenetur alias corporis voluptatum molestias molestiae, autem fugiat asperiores architecto nobis! Vero perspiciatis quisquam atque, deleniti, nostrum obcaecati tenetur animi dolorem iusto officia, eos praesentium veniam, voluptatibus? Officiis, hic molestiae! Illo, nam, exercitationem. Numquam tempora tenetur odit ducimus alias, obcaecati voluptate soluta temporibus omnis quasi, nemo, reprehenderit minus at recusandae.</p>
        </div>
    </div>
</body>
</html>

4. 변형(transform)

element의 크기, 위치, 모양 등을 변경하는 속성!

여러 효과를 섞어서 사용할 수 있다.

transform : 효과이름 (세부사항) 

rotate , scale , translate , transform , skew 등 여러 종류가 있다.

1) scale : element의 확대/축소

scale을 적용할 방향(x,y축)과, 숫자로 확대/축소 비율을 지정할 수 있다.

2) rotate : element의 회전

3) translate : element를 지정 방향으로 움직임

4) skew : element를 늘임/줄임으로 왜곡

5) origin : element의 origin(기준점)을 설정하고, 이를 기준으로 1)~4) 의 효과를 적용가능

6) matrix : element에 더 다양한 효과를 줄 수 있는 옵션이지만, matrix(행렬) 개념을 알고 있어야 함.

그런데 효과가 잘 적용되지 않는다.... 다른 문제가 있는 것 같은데 나중에 원인을 찾아봐야겠다.

+ transform 효과로 문 닫기 & matrix 속성으로 다양한 효과 적용해보기가 목표.

CSS transform library 라고 검색:

elrumordelaluz.github.io/csshake/#1 이런 라이브러리에서 다양한 CSS transform 효과를 체험할 수 있다!

1. flex의 기타 속성들 정리

: 모든 내용은 Flexbox playground (codepen.io)를 참고했다.

[1] 전체 element에 적용되는 속성

1) flex-wrap

flex의 기본 설정 : 같은 row/column에 배정된 컨텐츠의 총 너비/높이의 합이 컨테이너 전체의 너비/높이의 합보다 크다면(높이가 지정된 경우), flex-direction 이 설정된 경우 그냥 한 row/column에 컨텐츠를 나타낸다.

flex-wrap에는 3가지 값이 있다

1. flex-wrap : nowrap => 기본값.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>EXAMPLE</title>
    <style>
        body{
            width:500px <!-- content 전체의 너비 지정 -->
        }
        .content{
            display:flex ; 
            flex-direction : row ; 
            flex-wrap : nowrap
        }
        header{
            border-bottom: 5px solid gray ; text-align : center ;
        }
        footer{
            border-top : 5px solid gray ; text-align : center ;
        }
        nav{
            border-right: 5px solid gray ; width:200px ; color : hotpink
        }
        aside{
            border-left : 5px solid gray ; width:200px ; color : orange
        }
        main{
           width:200px ; color : deepskyblue
        } <!-- main+nav+aside 너비를 하면 body에서 지정한 너비보다 큼! -->
    </style>
  </head>
  <body>
          <header>Lorem ipsum dolor sit amet.</header>
          <div class="content">
              <nav>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, culpa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, eveniet. </nav>
              <main>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima sint quod repellendus a inventore ullam quidem cupiditate iure dolor in! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ipsum possimus voluptates, ipsam exercitationem assumenda labore est voluptate commodi, voluptas! </main>
              <aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, quis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, quidem. </aside>
          </div>
          <footer>Lorem ipsum dolor sit amet.</footer>
  </body>
</html>

2. flex-wrap : wrap => 너비/높이가 초과된 컨텐츠부터 아래 row/ 오른쪽 column에 배치

flex-wrap : wrap

3. flex-wrap : wrap-reverse => 너비/높이가 초과된 컨텐츠부터 위 row / 왼쪽 column에 배치

flex-wrap : wrap-reverse

2) align-items

: 같은 row/column에 있는 컨텐츠들을 어떻게 배치할지를 결정. 

flex-direction : row 인 경우 컨텐츠들의 상하정렬 , 

flex-direction : column 인 경우 컨텐츠들의 좌우정렬을 결정.

5가지 값을 가짐:

1. align-items : stretch

=> 기본값. 컨텐츠들의 너비/높이가 컨테이너에 지정된 너비/높이만큼 늘어남

2. align-items : flex-start

=> 컨텐츠들의 내용이 컨테이너의 맨 위/왼쪽부터 시작하고, 컨텐츠의 양에 따라 너비/길이가 달라짐

3. align-items : flex-end

=> 컨텐츠들의 내용이 컨테이너의 맨 아래/오른쪽부터 시작하고, 양에 따라 끝나는 지점이 달라짐

4. align-items : center

=> 컨텐츠들이 중앙에 배치됨.

5. align-items : baseline

=> 컨텐츠들이 끝나는 부분이 일직선상에 맞춰지도록 컨텐츠가 배치됨.

3) justify-content

: 같은 row / column에 있는 컨텐츠들을 어떻게 배치할지를 결정.

* 다만 align-items 와 담당하는 정렬 방향이 다름!

flex-direction : row 인 경우 컨텐츠들의 좌우정렬 ,

flex-direction : column 인 경우 컨텐츠들의 상하정렬을 결정.

4) align-content

align-content - CSS: Cascading Style Sheets | MDN (mozilla.org) 여기서 보충설명 참고함.

* align-items 와의 차이? 

align-content : 본문 요소들이 많아서 multi columns/rows 상태일 때 적용된다.

align-items : 같은 row/column 안의 본문 요소들에게만 적용된다.

[2] 개별 element에 적용되는 속성

1) align-self

: align-items 의 개별 버전.

한 row/column의 item을 모두 한 방향으로 정렬했지만 일부 element만 다른 정렬 방식을 적용하고 싶을 때 사용.

align-items 에 쓰인 값들을 사용할 수 있다.

        #ending{
            display:flex ; align-self:flex-end ; color:forestgreen ;
        }
        <div id="ending">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus quasi impedit, rem consequuntur odio nulla recusandae officiis. Error voluptate aut maiores voluptates, iusto aspernatur, hic mollitia, dolorum, at sint repellendus!</div>

2) flex 축약형 버전

: border의 여러 속성들을 한 번에 나열하는 것처럼(ex. border: 1px solid gray), flex도 가능하다.

1. 형식

적용할 element {flex-shrink flex-grow flex-basis}

* flex-grow , flex-shrink 는 정수, flex-basis는 100%가 최대인 % 단위

.content:nth-child(2){
	display:flex ;
    flex: 1 0 50%
}

3) order

flex element 사이에 보여질/배치될 순서를 지정할 수 있다.

보통은 입력된 순서대로 보여지는 것이 일반적이지만, 그렇지 않을 경우에 주로 사용한다.

ex) 검색엔진에서는 앞에 나오는 내용이 더 검색 순위에 중요하게 작용하는 경우가 많은데, 이를 대비해서 <main> 태그 안의 내용을 앞에다 입력하고 싶다. 그런데 디스플레이 상으로는 <nav>와 <aside> 사이에 보이게 하고 싶을 때.

* order 는 정수 단위로 가능. order 를 따로 제시하지 않는다면 가장 먼저 제시되는 element의 order는 0이다.

* order 값이 작을수록(음수도 가능) 먼저 배치된다.

<!DOCTYPE html>
<html>
  <head>
    <style>
        .container{display:flex ; flex-direction:column ; text-align:center;}
        .content{display:flex ; flex-direction:row}
        nav{border-right : 5px solid gray ; padding:20px ; flex-basis:200px ;
            order:0}
        main{order:1}
        header{ border-bottom : 5px solid gray ;}
        aside{border-left : 5px solid gray ; padding:20px ; flex-basis:200px ;
            order:2}
        footer{border-top : 5px solid gray}
    </style>
  </head>
    <body>
      <div class="container">
          <header><h1>KSY</h1></header>
          <div class="content">
              <main><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ab rerum delectus repellat nihil, facere quasi cupiditate natus, dolore itaque cumque magni assumenda molestiae perferendis excepturi soluta pariatur tenetur voluptatum fugiat porro fugit dolores, vel eveniet nobis! Hic eligendi temporibus, at aspernatur accusantium necessitatibus, corporis explicabo adipisci in tempora numquam consectetur beatae eos dolorem totam magnam voluptates cupiditate autem a nulla repudiandae enim. Obcaecati atque quae rerum dicta maxime adipisci accusamus, saepe pariatur, similique, nesciunt repellat! Perspiciatis dolor, quam sint eos optio fugiat tenetur modi magni cupiditate. Esse, repellendus, eaque impedit hic incidunt cum nisi omnis perferendis labore nostrum earum!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque fuga, magnam voluptatem possimus soluta qui aliquid recusandae sunt repudiandae, ipsa labore laboriosam dicta! Fugiat delectus quo aliquid distinctio at eligendi accusantium esse iure, quis qui inventore voluptates porro enim, saepe, eaque, praesentium! Ducimus recusandae ex aliquam quisquam numquam possimus fugit sit, nihil, culpa vitae optio laudantium voluptatem. Suscipit sint vitae architecto, amet eligendi, modi at vel, maxime veritatis sapiente sequi! Dolorem nesciunt ipsa tempore quibusdam similique dolorum odit voluptatem reiciendis porro! Iste voluptatibus iusto ab, architecto, ipsum totam. Sapiente aliquid odit eos hic, atque laboriosam nemo eius reprehenderit! Pariatur, assumenda.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aspernatur, incidunt iste, sapiente rerum eum fugiat maxime neque praesentium, adipisci non. Doloremque recusandae, numquam aperiam non soluta illum ab, a voluptate necessitatibus porro nobis voluptatibus animi molestias alias accusantium deserunt consequatur molestiae vitae? Quam maxime distinctio minima molestias sequi laborum itaque ipsa, dolores facilis iure sed hic impedit perspiciatis, quos. Hic reiciendis eligendi cumque sunt dolorem harum, quo? Nostrum impedit dolorem et cupiditate ratione quaerat corporis ad tempora cum facere! Optio, magni iure natus consectetur est facilis maxime atque, ratione nisi qui vero voluptatem reprehenderit voluptas, minus provident omnis accusamus.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, natus tenetur voluptas minus tempore cupiditate. Totam architecto quaerat veniam consequuntur, praesentium assumenda, doloribus reiciendis qui ducimus, incidunt deleniti. Consectetur, molestias, dolorem! Enim obcaecati, necessitatibus ducimus quae a, praesentium harum nisi repellendus atque, doloremque quod ut ipsum, fugiat sit! Animi quos ratione id consequuntur ipsam unde et accusamus reprehenderit voluptatem velit, modi mollitia quasi ex, eum esse temporibus, cupiditate, quaerat rem facere eligendi pariatur iusto. Fugit error sed accusantium possimus totam id voluptate in cumque, quibusdam quidem? Laborum, consectetur nulla dolorum porro eos sed ab, sit illo molestias eaque alias distinctio!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur officiis nostrum nobis excepturi quibusdam itaque. Mollitia consectetur error suscipit ipsam obcaecati consequatur, dignissimos autem! Adipisci itaque harum dignissimos numquam corporis quod tenetur omnis aliquid reprehenderit perferendis iure ut temporibus eveniet perspiciatis beatae, iste quia eum distinctio doloremque voluptatem fuga ipsum dolores ab. Temporibus at, nostrum ipsa libero, adipisci rem nam in quod unde beatae explicabo neque quisquam dicta enim a cumque optio est eos voluptate molestiae? Quo quaerat, impedit, quia asperiores molestiae, aspernatur delectus recusandae dolorem adipisci iste natus nisi illum alias nobis accusantium voluptate animi excepturi officiis error in.</p>
              </main>
              <nav><ol><li>HTML</li><li>CSS</li> <li>JavaScript</li></ol></nav>
              <aside><ul><li>A</li><li>B</li><li>C</li> <li>D</li></ul></aside></div>
          <footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, aut.</footer> </div>
  </body>
</html>

2. media query : 어떤 조건에 따라 화면의 디자인을 다르게 하는 기술

1) media query 의 형식

* @media : media query가 시작함을 알려주는 역할

    <style>
        @media (width:600px){
            body{
                background-color : red ;  <!-- 너비가 600px일 때 배경색을 빨강으로 지정 -->
            }
        }      
    </style>

보통은 특정 width가 되었을 때가 아니라, 특정 width 이상/이하일 때로 범위를 지정한다.

+ width, height 다 지정 가능

: max-width , min-width , max-height , min-height ... etc.

ex) max-width : 1000px => 최대 너비가 1000px일 때 = 너비가 1000px 이하일 때 서식 적용 

ex) min-height : 800px => 최소 높이가 800px일 때 = 높이가 800px 이상일 때 서식 적용

2) 우선순위

    <style>
        @media (max-width:600px){
            body{
                background-color : red ;   <!-- 조건1 -->
            }
        }
        @media (max-width:1200px){
            body{
                background-color : green ;  <!-- 조건2 -->
            }
        }        
    </style>

여러 개의 media 조건이 있고, 그 조건의 범위가 중첩될 경우, CSS에서는 우선순위에 따라 처리한다.

CSS는 구체적이고 세부적인 조건일수록 높은 우선순위를 가지고,

또한 복잡성/세부적인 정도가 같다면(같은 level이라면) 아래에, 나중에 작성된 조건이 우선순위가 높다!

그래서 이 경우, 의도는 ~600 : red , 601~1200 : green 이었지만, 막상 결과는 ~1200 : green 으로 적용된다.

=> 더 우선순위를 높이고 싶은 조건이 있다면, 그 조건을 동일 level에서 가장 아래에 배치해야 한다!

3) media query 응용

: flex와 media query를 적용해서, 모바일 환경에서의 디스플레이를 따로 지정해 보기.

나의 경우, 너비 600px을 기준으로 media query를 적용하였다.

<!DOCTYPE html>
<html>
  <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>EXAMPLE</title>
    <style>
        .container{
            display:flex ; flex-direction:column ; text-align:center;
        }
        .content{
            display:flex ; flex-direction:row
        }
        nav{
            border-right : 5px solid gray ; padding:20px ; flex-basis:200px ;
            background-color : darkorange
        }
        header{
            border-bottom : 5px solid gray ; background-color:lime
        }
        aside{
            border-left : 5px solid gray ; padding:20px ; flex-basis:200px ; 
            background-color : deeppink
        }
        footer{
            border-top : 5px solid gray
        }
        main{
            background-color : lightskyblue
        }
        @media (max-width:600px) {
            .container{
                    display:flex ; flex-direction:column ; text-align:center;
                    background-color : black
                }
            .content{
                display:flex ; flex-direction:column
            }
            nav{
                border-bottom : 5px solid gray ; padding:20px ; flex-basis:50px ;
                border-right : 0px ; color : darkorange ; background-color : black
            }
            header{
                border-bottom : 5px solid gray ; color:lime ; background-color : black
            }
            main{
                border-bottom : 5px solid gray ; color:lightskyblue ; background-color : black
            }
            aside{
                border-left : 0px ; flex-basis : 40px ; color : deeppink ; background-color : black
            }
            footer{color : white ; background-color : black}
        }
    </style>
  </head>
  <body>
      <div class="container">
          <header><h1>KSY</h1></header>
          <div class="content">
              <nav><ol><li>HTML</li>
              <li>CSS</li>
                  <li>JavaScript</li></ol></nav>
              <main><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ab rerum delectus repellat nihil, facere quasi cupiditate natus, dolore itaque cumque magni assumenda molestiae perferendis excepturi soluta pariatur tenetur voluptatum fugiat porro fugit dolores, vel eveniet nobis! Hic eligendi temporibus, at aspernatur accusantium necessitatibus, corporis explicabo adipisci in tempora numquam consectetur beatae eos dolorem totam magnam voluptates cupiditate autem a nulla repudiandae enim. Obcaecati atque quae rerum dicta maxime adipisci accusamus, saepe pariatur, similique, nesciunt repellat! Perspiciatis dolor, quam sint eos optio fugiat tenetur modi magni cupiditate. Esse, repellendus, eaque impedit hic incidunt cum nisi omnis perferendis labore nostrum earum!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque fuga, magnam voluptatem possimus soluta qui aliquid recusandae sunt repudiandae, ipsa labore laboriosam dicta! Fugiat delectus quo aliquid distinctio at eligendi accusantium esse iure, quis qui inventore voluptates porro enim, saepe, eaque, praesentium! Ducimus recusandae ex aliquam quisquam numquam possimus fugit sit, nihil, culpa vitae optio laudantium voluptatem. Suscipit sint vitae architecto, amet eligendi, modi at vel, maxime veritatis sapiente sequi! Dolorem nesciunt ipsa tempore quibusdam similique dolorum odit voluptatem reiciendis porro! Iste voluptatibus iusto ab, architecto, ipsum totam. Sapiente aliquid odit eos hic, atque laboriosam nemo eius reprehenderit! Pariatur, assumenda.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aspernatur, incidunt iste, sapiente rerum eum fugiat maxime neque praesentium, adipisci non. Doloremque recusandae, numquam aperiam non soluta illum ab, a voluptate necessitatibus porro nobis voluptatibus animi molestias alias accusantium deserunt consequatur molestiae vitae? Quam maxime distinctio minima molestias sequi laborum itaque ipsa, dolores facilis iure sed hic impedit perspiciatis, quos. Hic reiciendis eligendi cumque sunt dolorem harum, quo? Nostrum impedit dolorem et cupiditate ratione quaerat corporis ad tempora cum facere! Optio, magni iure natus consectetur est facilis maxime atque, ratione nisi qui vero voluptatem reprehenderit voluptas, minus provident omnis accusamus.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, natus tenetur voluptas minus tempore cupiditate. Totam architecto quaerat veniam consequuntur, praesentium assumenda, doloribus reiciendis qui ducimus, incidunt deleniti. Consectetur, molestias, dolorem! Enim obcaecati, necessitatibus ducimus quae a, praesentium harum nisi repellendus atque, doloremque quod ut ipsum, fugiat sit! Animi quos ratione id consequuntur ipsam unde et accusamus reprehenderit voluptatem velit, modi mollitia quasi ex, eum esse temporibus, cupiditate, quaerat rem facere eligendi pariatur iusto. Fugit error sed accusantium possimus totam id voluptate in cumque, quibusdam quidem? Laborum, consectetur nulla dolorum porro eos sed ab, sit illo molestias eaque alias distinctio!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur officiis nostrum nobis excepturi quibusdam itaque. Mollitia consectetur error suscipit ipsam obcaecati consequatur, dignissimos autem! Adipisci itaque harum dignissimos numquam corporis quod tenetur omnis aliquid reprehenderit perferendis iure ut temporibus eveniet perspiciatis beatae, iste quia eum distinctio doloremque voluptatem fuga ipsum dolores ab. Temporibus at, nostrum ipsa libero, adipisci rem nam in quod unde beatae explicabo neque quisquam dicta enim a cumque optio est eos voluptate molestiae? Quo quaerat, impedit, quia asperiores molestiae, aspernatur delectus recusandae dolorem adipisci iste natus nisi illum alias nobis accusantium voluptate animi excepturi officiis error in.</p>
              </main>
              <aside><ul><li>A</li>
              <li>B</li>
              <li>C</li>
                  <li>D</li></ul></aside>
          </div>
          <footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, aut.</footer>
      </div>
  </body>
</html>

1. 좁은 화면(600px 미만)

2. 넓은 화면

너비가 좁을 경우는 display : flex ; flex-direction : column 으로 지정함으로써 모든 컨텐츠를 수직으로 배열하였다.

3. multi column

: 신문처럼 여러 개의 단(column)으로 구성된 배치를 하고 싶을 때 사용하는 방법/레이아웃.

1) 속성

1. column-count : column이 몇 개로 표시될지를 결정

- column의 개수를 유지하는 대신 너비는 전체 창 너비에 따라 달라진다.

2. column-width : 한 column의 width를 결정

- column의 너비를 유지하는 대신 개수는 전체 창 너비에 따라 달라진다.

3. column-gap : column과 column 사이의 간격을 결정

* column-count 와 column-width는 독립적이다!

    <style>
        .container{
            display:flex ; flex-direction:column ; text-align:center;
        }  
        .content{
            column-count:3
            column-width : 400px
        }
    </style>

이 경우, CSS에서는 column의 개수가 3개를 초과하지 않으면서 column의 너비가 400px보다 좁아지지 않도록 조절한다.

2) 우선순위

multi column에서는 기본값으로 column 구분이 제일 우선적이다.

column이 적용된 element 안에 있다면 기본 설정으로는 column 안에 갇혀서 그 규격을 따라야 한다.

<-> 만약 제목 등의 태그를 사용하는데 특정 태그/element가 column의 제약에 갇히지 않게 하고 싶다면?

column-span:all 

h2{column-span : all}

1. box-sizing

: box model 을 사용할 때 지정하는 속성 중 하나로, 기존 box model 사용 시의 불편함을 없애려고 만들었다.

기존의 문제점

holy grail layout 등을 만들면서 box model을 사용하여 padding, border, width 등을 지정할 때, html 태그의 width가 여러 float 속성을 적용한 요소들의 width의 합과 맞아떨어져야 보기좋은 레이아웃이 만들어지는데, 이때 각 요소들의 border과 margin 값을 고려하여(추가로 더해서) width 값을 예상해야 하는 불편함이 있었다.

ex) element1의 width는 300, border는 10, element2의 width는 400, border는 15, margin은 20일 경우

-> html태그의 width는 300 + 10*2 + 400 + 15*2 + 20*2 = 790으로 지정해야 오차가 없다.

특히 다음의 세 가지 경우에 width 값을 계산하기 복잡했다.

경우1) 두 element의 border 값이 다를 경우

<html>
  <head>
    <style>
        #red{border:10px solid red ; padding:10px ; margin:10px ; width:150px ; box-sizing:content-box}
        #blue{border:30px solid blue ; padding:10px ; margin:10px ; width:150px ; box-sizing:content-box}
    </style>
  </head>
  <body>
        <div id="red">Ryan</div>
        <div id="blue">Ryan</div>
  </body>
</html>

경우2) 두 element의 padding 값이 다를 경우

#red{border:10px solid red ; padding:10px ; margin:10px ; width:150px ; box-sizing:content-box}
#blue{border:10px solid blue ; padding:30px ; margin:10px ; width:150px ; box-sizing:content-box}

경우3) 두 element의 margin 값이 다를 경우

#red{border:10px solid red ; padding:10px ; margin:10px ; width:150px ; box-sizing:content-box}
#blue{border:10px solid blue ; padding:10px ; margin:30px ; width:150px ; box-sizing:content-box}

=> 이 경우마다 width를 직접 margin, padding, border 값을 고려해서 계산해야 했으므로 이 문제를 해결하기 위해서 box-sizing 속성이 추가되었다.

그러면 box-sizing 속성은 정확히 무엇인가?

위의 문제는 width 속성이 'border를 포함하지 않은 컨텐츠만의 너비'를 기준으로 했기 때문에 발생했다.

위 사진에서처럼, width의 기본값 속성은 정확히 말하면 border 안의 content(하얀 부분) 이므로, 빨간 선처럼 문서의 시작점에서부터 500px의 거리를 재면 당연히 이 상자는 너비를 초과한다.

그러나 box-sizing 속성에서 다른 값을 기준으로 하면, 어떤 값의 경우 문서의 시작점부터 border 끝까지의 너비를 width의 기준으로 삼을 수도 있다.

이처럼 box-sizing은 무엇을 기준으로 width 속성을 결정할 것인지를 직접 지정할 수 있게 해 준다.

* 다만 width가 꼭 content의 순수 너비는 아니다. 위처럼 다른 속성값(value)을 사용한다면, 가령 '시작점부터 box 끝의 "거리"' 처럼, "거리"의 의미로 사용될 수도 있다.

이 속성은 2가지 값을 가진다:

1) box-sizing:content-box

: 기본값. width를 border, margin, padding을 일절 포함하지 않은 content만의 너비라고 지정.

-border를 설정하면 상자의 너비가 달라짐.

-width가 content 영역의 너비라는 의미로 사용됨.

2) box-sizing:border-box

: width를 border를 포함한 element의 너비라고 지정.

-border를 설정해도 상자의 너비가 달라지지 않음. 대신에 안의 content 영역이 줄어듬.

-width가 시작점부터 border의 끝까지의 거리라는 의미로 사용됨.

2. flex

: 레이아웃을 쉽게 잡기 위해 사용하는, 레이아웃을 위해서 고안된 도구.

cf) position, float 속성을 이용해도 레이아웃을 구현할 수 있지만, flex는 레이아웃을 제 1 목적으로 만든 도구이다.

특징

: 항상 같이 다니는 부모-자식 관계의 element가 있다.

<container>
	<item>
    </item>
</container>

부모 <container> 과 자식 <item>은 항상 같이 다닌다.

그리고 각 태그에는 서로 다른 속성을 부여할 수 있다.

* 이때 둘은 부모-자식 '태그' 가 아니라 '요소들(elements)'이다.

실제로 구현하려면 id나 class의 이름을 저렇게 정의하거나, 혹은 이름도 다르게 지정해도 된다. 중요한 것은 부모-자식 관계의 태그가 있어야 flex를 사용할 수 있다는 것이다.

적용하기

적용하려면 바깥(부모) 태그의 display 속성값이 flex로 되어있어야 한다.

<html>
<head>
   <meta charset="utf-8">
    <style>
        .container{
            display:flex ; <!-- 이 속성이 있어야 flex 사용가능 -->
            width : 200px ; height:200px ; background-color:lightblue
        }
        .item{
            background-color:lightpink ; border:1px solid white ; text-align:center
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
        <div class="item">D</div>
        <div class="item">E</div>
        <div class="item">F</div>
        <div class="item">G</div>
    </div>
</body>
</html>

우선은 flex 속성 중, 부모 태그에 적용되는 속성을 먼저 알아보자.

1. flex-direction 속성

여기서 display:flex 속성 아래에 바로 direction, 즉 방향을 설정할 수 있다.

이 속성은 부모 태그에 지정한다!

**단, display 속성값이 flex가 아니라면 적용되지 않는다.

flex-direction 속성의 경우 4가지 값을 가질 수 있다. 각 값에 따라 글자가 써지는 방향이 달라진다!

: row , row-reverse , column , column-reverse. 

1) row : 기본값. 왼쪽부터 글자가 써짐.

 .container{
            display:flex ; 
            flex-direction: row ;
            width : 200px ; height:200px ; background-color:lightblue
        }

2) row-reverse : 오른쪽부터 글자가 써짐. 글자가 써지는 방향이 반대 방향!

* text-align : right 이랑은 다름. 얘는 아예 글자의 순서도 반대가 되어버림.

flex-direction : row-reverse

3) column : 위쪽부터 글자가 써짐.

flex-direction : column

4) column-reverse : 아래쪽부터 글자가 써짐.

flex-direction : column-reverse

다음은 flex 속성 중, 자식 태그에 사용되는 속성을 알아볼 것이다.

1. flex-basis 속성

: 개별적 자식 태그에 적용 가능함. flex : display 속성이 이미 적용된 상태에서, 몇몇의 자식 태그 요소에게만 너비/길이값을 부여해주는 속성이다.

만약 flex-direction 속성이 적용되어 있다면, 값이 row 이면 너비, column이면 높이 값으로 적용된다.

        .item{   <!-- 개별 item 요소의 너비(row이므로)를 40px으로 증가 -->
            background-color:lightpink ; border:1px solid white ; text-align:center;
            flex-basis:40px

이렇게 자식 태그 전체에 적용할 수도 있고, 

        .item:nth-child(2){
            flex-basis:200px
        }

이렇게 하나의 개별 요소에만 적용할 수도 있다.

* 이때, nth-child(N)에서, flex-direction 방향의 순서에 따라 N번째 요소에 적용된다.

ex)

        .container{
            display:flex ; 
            flex-direction : row-reverse;  <!-- flex-direction 방향 다르다면? -->
            height:300px ; background-color:lightblue
        }
        .item{
            background-color:lightpink ; border:1px solid white ; text-align:center;
        }
        .item:nth-child(2){
            flex-basis:200px
        }

flex-direction 방향이 row-reverse인 경우, 맨 오른쪽부터 1번째, 2번째, ... 이렇게 순서가 매겨진다.

이때 .item : nth-child(2) 라면, 오른쪽으로 세었을 때를 기준으로 2번째 요소에 해당 속성이 적용되는 것이다.

2. flex-grow 속성

: 위의 경우는 컨텐츠의 너비/높이값이 화면 전체(여기서는 부모 태그의 영역)를 채우기 부족해서 여백이 항상 남았다.

만약 너비/높이에서의 여백을 없애고 컨텐츠 영역으로 고르게 채우고 싶을 때 이 속성을 사용한다.

* display : flex 인 상태에서만 사용가능!

* flex-grow 속성은 양수 값을 가질 수 있다.

경우1) 전체 자식태그에서 flex-grow : 0 => 기본값

경우2) 전체 자식태그에서 flex-grow : 1 => 전체 너비/높이를 모든 자식태그 요소가 골고루 나눠 가짐

        .item{
            background-color:lightpink ; border:1px solid white ; text-align:center;
            flex-grow:1
        }

경우3) 일부 자식태그에서 flex-grow : 1, 나머지는 0 => 일부 자식태그가 전체 너비/높이를 나눠 가짐

        .item:nth-child(2n+3){
            flex-grow:1
        }

경우4) flex-grow 의 값이 2 이상이라면?

ex) A의 flex-grow : a , B의 flex-grow : b 인 경우,

나머지 요소들은 원래 컨텐츠 너비만큼만 차지.

A는 나머지 여백의 a/(a+b) 만큼, B는 b/(a+b) 만큼만 차지.

* 3개 이상의 요소들이어도 마찬가지! ex) a/(a+b+c)

        .item:nth-child(3){
            flex-grow:1
        }
        .item:nth-child(4){
            flex-grow:3
        }

3. flex-shrink 속성

전제조건이 있다.

경우1) 기본값 : 모든 요소가 flex-shrink : 0 인 경우

=> 어떤 요소도 창이 줄어들 때 너비/높이가 줄어들지 않는다.

경우2) 하나의 요소가 flex-shrink : 1인 경우

=> 창이 작아지면 해당 요소의 너비/높이만 이에 비례해서 줄어든다.

        .item:nth-child(1){
            flex-basis:600px ; flex-shrink:1
        }    

경우3) 몇 개의 flex-shrink 값이 2 이상인 경우

flex-grow 와 비슷. 서로 파이를 나눠 먹는 것과 같다.

=> A의 flex-shrink : a , B의 flex-shrink : b 인 경우, A는 줄어든 면적의 a/(a+b) , B는 b/(a+b) 만큼 줄어든다.

        .item:nth-child(1){
            flex-basis:300px ; flex-shrink:1
        }
        .item:nth-child(2){
            flex-basis:300px ; flex-shrink:4
        }

3. flex 속성으로 holy grail layout 구현하기

아까 언급한 flex-direction , flex-basis , flex-grow , flex-shrink 속성을 이용하면 float 과 position을 사용하는 것보다 더 쉽게 레이아웃을 구현할 수 있었다.

<html>
<head>
   <meta charset="utf-8">
    <style>
        .container{
            display:flex ; 
            flex-direction:column ;
            text-align:center ;
        }
        .content{
            display:flex ;
        }
        header{border-bottom: 1px solid black ; padding-left:20px}
        footer{border-top : 1px solid black ; padding:20px}
        .content nav{border-right : 1px solid black}
        .content aside{border-left : 1px solid black}
        nav,aside{flex-basis : 400px ; flex-shrink:1}
    </style>
</head>
<body>
    <div class="container">
       <header>
           <h1>WELCOME</h1>
       </header>
        <div class="content"><nav><ul>
            <li>Corporis</li> <li>fugit</li> <li>maxime</li> <li>ut</li> <li>veniam</li> <li>quo</li> <li>dolorum</li> <li>repellendus</li> <li>ab</li> <li>soluta</li> <li>voluptates</li> <li>velit</li></ul>
        </nav>
        <segment>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id cum autem pariatur debitis quae delectus eum temporibus animi quis ad, rerum doloremque non distinctio, minus enim, nihil. Dolores officiis, iusto commodi. Harum, accusamus quas pariatur autem odio sequi tempore obcaecati ab commodi, optio assumenda, unde et tenetur quisquam beatae doloribus. Porro hic odio molestias doloremque, vitae laborum voluptatibus quam deleniti placeat. Explicabo consequatur sit nemo animi reiciendis amet ratione quod possimus fuga eos ab, minima aspernatur voluptatum iure aperiam, dolorum, porro totam saepe. </p><p>Aut beatae, deleniti fugit commodi quis distinctio doloribus culpa est recusandae, illum magni itaque magnam a corrupti nam id, dolorum sapiente iste quidem non, velit error reiciendis. Laborum sint veniam sunt in impedit temporibus architecto deleniti dicta tempore, repudiandae dolor facilis aliquid ea distinctio. Assumenda magnam ratione laudantium eligendi molestias quo, natus voluptatum quos ullam rerum unde vel debitis consequuntur porro, ipsam repellat aliquid saepe maxime impedit asperiores fugiat cupiditate dolores beatae. Sequi quas a culpa magnam voluptates quibusdam, consequatur odit inventore fuga suscipit molestiae sed rem quaerat voluptatem velit, mollitia nemo, animi adipisci.</p> <p>Sapiente dignissimos enim reiciendis, iure? Doloribus nostrum officiis placeat temporibus mollitia assumenda quis tempore accusantium eius vitae laboriosam saepe deserunt nihil accusamus impedit, omnis nobis ab cupiditate iste repellendus facilis inventore! In quisquam maxime molestias itaque nam nobis eligendi, rem ullam autem alias quos deleniti, culpa quas dolores illum animi labore repellendus ab! </p>
        </segment>
        <aside>
             Nisi mollitia praesentium id cumque est repellat hic, animi, qui natus assumenda nihil repudiandae asperiores neque laudantium soluta.
        </aside></div>
        <footer>
            GOODBYE
        </footer>
    </div>
</body>
</html>

1. <brackets> 프로그램

: Editor의 일종으로, Atom보다 편리한 기능들이 들어있는 HTML, CSS, Javascript 등에 사용할 수 있는 에디터이다.

=> 앞으로는 이 에디터를 쓸 것 같다.

여기에 Emmet 추가 프로그램을 설치하면 대략 5가지 이상의 기능을 편리하게 쓸 수 있다.

2. 레이아웃

2-1. 인라인 VS 블럭레벨

: 태그의 종류이다.

<html>
<head>
    <style>
        h1,a{border:1px solid deepskyblue}
    </style>
</head>
<body>
    <h1>Hello User</h1>   
    Welcome to  <a href="https://google.com" target="_blank">Search</a> Engine!
</body>
</html>

위처럼 <h1> 태그는 따로 줄바꿈을 하지 않았는데도 한 줄을 혼자 사용하고, <a> 태그의 테두리는 다른 태그들의 영역과 한 줄에 같이 표시된다. 이 차이가 인라인과 블럭레벨의 차이이다.

위처럼 기본값이 인라인인 태그가 있고 블럭레벨인 태그가 있다.... 그러나 이를 바꿀 수 있다!

=> <style> 태그 문법에서 display 속성을 이용하면 가능하다.

<html>
<head>
    <style>
        h1{border:1px solid indianred ; display:inline}
        a{border:1px solid indianred ; display:block}
    </style>
</head>
<body>
    <h1>Hello User</h1>   
    Welcome to  <a href="https://google.com" target="_blank">Search</a> Engine!
</body>
</html>

이번에는 a 태그가 한 줄을 전부 사용하고, h1 태그는 다른 요소/태그들과 한 줄을 공유하고 있다. 

2-2. Box Model

인라인과 블럭레벨과도 연관되어 있다. 각 요소들 사이의 간격과 관련이 있다. 

더보기

1. box model에는 크게 디섯 가지 요소가 있다.

1) border : 테두리. margin과 padding 사이의 간격을 의미

<html>
<head>
   <meta charset="utf-8">
    <style>
        #aa{display:block ; border : 10px solid forestgreen ;}
        #bb{display:block ; border : 20px solid gold ;}
    </style>
</head>
<body>
    <h1>Hello User</h1>   
    Welcome to  <a href="https://google.com" target="_blank">Search</a> Engine!
    <p id="aa">Υπάρχουν πολλές εκδοχές των αποσπασμάτων του Lorem Ipsum διαθέσιμες, αλλά η πλειοψηφία τους έχει δεχθεί κάποιας μορφής αλλοιώσεις, με ενσωματωμένους αστεεισμούς, ή τυχαίες λέξεις που <a href="https://google.co.kr">δεν</a> γίνονται καν πιστευτές.</p>   
    <p id="bb">Εάν πρόκειται να χρησιμοποιήσετε ένα κομμάτι του Lorem Ipsum, πρέπει να είστε βέβαιοι πως δεν βρίσκεται κάτι προσβλητικό κρυμμένο μέσα στο κείμενο. Όλες οι γεννήτριες Lorem Ipsum στο διαδίκτυο τείνουν να επαναλαμβάνουν <a href="https://google.co.kr">προκαθορισμένα</a> κομμάτια του Lorem Ipsum κατά απαίτηση, καθιστώνας την παρούσα γεννήτρια την πρώτη πραγματική γεννήτρια στο διαδίκτυο.</p>
</body>
</html>

2) margin : 주로 화면의 양 끝과 block element의 사이 간격을 의미

<html>
<head>
   <meta charset="utf-8">
    <style>
        #aa{display:block ; border : 10px solid forestgreen ;
        margin : 50px}
        #bb{display:block ; border : 10px solid gold ;
        margin : 100px}
    </style>
</head>
<body>
    <h1>Hello User</h1>   
    Welcome to  <a href="https://google.com" target="_blank">Search</a> Engine!
    <p id="aa">Υπάρχουν πολλές εκδοχές των αποσπασμάτων του Lorem Ipsum διαθέσιμες, αλλά η πλειοψηφία τους έχει δεχθεί κάποιας μορφής αλλοιώσεις, με ενσωματωμένους αστεεισμούς, ή τυχαίες λέξεις που <a href="https://google.co.kr">δεν</a> γίνονται καν πιστευτές.</p>   
    <p id="bb">Εάν πρόκειται να χρησιμοποιήσετε ένα κομμάτι του Lorem Ipsum, πρέπει να είστε βέβαιοι πως δεν βρίσκεται κάτι προσβλητικό κρυμμένο μέσα στο κείμενο. Όλες οι γεννήτριες Lorem Ipsum στο διαδίκτυο τείνουν να επαναλαμβάνουν <a href="https://google.co.kr">προκαθορισμένα</a> κομμάτια του Lorem Ipsum κατά απαίτηση, καθιστώνας την παρούσα γεννήτρια την πρώτη πραγματική γεννήτρια στο διαδίκτυο.</p>
</body>
</html>

3) padding : border 테두리와 그 안의 텍스트의 간격을 의미

<html>
<head>
   <meta charset="utf-8">
    <style>
        #aa{display:block ; border : 10px solid forestgreen ;
        padding : 50px}
        #bb{display:block ; border : 10px solid gold ;
        padding : 100px}
    </style>
</head>
<body>
    <h1>Hello User</h1>   
    Welcome to  <a href="https://google.com" target="_blank">Search</a> Engine!
    <p id="aa">Υπάρχουν πολλές εκδοχές των αποσπασμάτων του Lorem Ipsum διαθέσιμες, αλλά η πλειοψηφία τους έχει δεχθεί κάποιας μορφής αλλοιώσεις, με ενσωματωμένους αστεεισμούς, ή τυχαίες λέξεις που <a href="https://google.co.kr">δεν</a> γίνονται καν πιστευτές.</p>  
    <p id="bb">Εάν πρόκειται να χρησιμοποιήσετε ένα κομμάτι του Lorem Ipsum, πρέπει να είστε βέβαιοι πως δεν βρίσκεται κάτι προσβλητικό κρυμμένο μέσα στο κείμενο. Όλες οι γεννήτριες Lorem Ipsum στο διαδίκτυο τείνουν να επαναλαμβάνουν <a href="https://google.co.kr">προκαθορισμένα</a> κομμάτια του Lorem Ipsum κατά απαίτηση, καθιστώνας την παρούσα γεννήτρια την πρώτη πραγματική γεννήτρια στο διαδίκτυο.</p>
</body>
</html>

4) width : 테두리 상자(border)의 가로폭.

<html>
<head>
   <meta charset="utf-8">
    <style>
        #aa{display:block ; border : 10px solid forestgreen ;
        width : 500px}
        #bb{display:block ; border : 10px solid gold ;
        width : 1000px}
    </style>
</head>
<body>
    <h1>Hello User</h1>   
    Welcome to  <a href="https://google.com" target="_blank">Search</a> Engine!
    <p id="aa">Υπάρχουν πολλές εκδοχές των αποσπασμάτων του Lorem Ipsum διαθέσιμες, αλλά η πλειοψηφία τους έχει δεχθεί κάποιας μορφής αλλοιώσεις, με ενσωματωμένους αστεεισμούς, ή τυχαίες λέξεις που <a href="https://google.co.kr">δεν</a> γίνονται καν πιστευτές.</p>
    <p id="bb">Εάν πρόκειται να χρησιμοποιήσετε ένα κομμάτι του Lorem Ipsum, πρέπει να είστε βέβαιοι πως δεν βρίσκεται κάτι προσβλητικό κρυμμένο μέσα στο κείμενο. Όλες οι γεννήτριες Lorem Ipsum στο διαδίκτυο τείνουν να επαναλαμβάνουν <a href="https://google.co.kr">προκαθορισμένα</a> κομμάτια του Lorem Ipsum κατά απαίτηση, καθιστώνας την παρούσα γεννήτρια την πρώτη πραγματική γεννήτρια στο διαδίκτυο.</p>
</body>
</html>

5) height : 테두리 상자(border)의 세로폭. height를 고정했는데 텍스트의 양이 많으면 삐져나올 수 있다.

<html>
<head>
   <meta charset="utf-8">
    <style>
        #aa{display:block ; border : 10px solid forestgreen ;
        height : 50px}
        #bb{display:block ; border : 10px solid gold ;
        height : 100px}
    </style>
</head>
<body>
    <h1>Hello User</h1>   
    Welcome to  <a href="https://google.com" target="_blank">Search</a> Engine!
    <p id="aa">Υπάρχουν πολλές εκδοχές των αποσπασμάτων του Lorem Ipsum διαθέσιμες, αλλά η πλειοψηφία τους έχει δεχθεί κάποιας μορφής αλλοιώσεις, με ενσωματωμένους αστεεισμούς, ή τυχαίες λέξεις που <a href="https://google.co.kr">δεν</a> γίνονται καν πιστευτές.</p> 
    <p id="bb">Εάν πρόκειται να χρησιμοποιήσετε ένα κομμάτι του Lorem Ipsum, πρέπει να είστε βέβαιοι πως δεν βρίσκεται κάτι προσβλητικό κρυμμένο μέσα στο κείμενο. Όλες οι γεννήτριες Lorem Ipsum στο διαδίκτυο τείνουν να επαναλαμβάνουν <a href="https://google.co.kr">προκαθορισμένα</a> κομμάτια του Lorem Ipsum κατά απαίτηση, καθιστώνας την παρούσα γεννήτρια την πρώτη πραγματική γεννήτρια στο διαδίκτυο.</p>
</body>
</html>

 

2. inline display 와 border display에 따라서 적용되는 방식이 다르다

1) inline display의 경우, 4), 5)번인 width 와 height 속성이 적용되지 않는다.

2) margin의 기준이 '화면의 양 끝과 element의 사이' 가 아니라 '양 element의 간격'이다.

<html>
<head>
    <style>
        #aa{display:block ; border : 10px solid forestgreen ;
        height : 50px ; margin : 100px ; padding : 20px  ; width : 300px}
        #bb{display:inline ; border : 10px solid gold ;
        height : 50px ; margin : 100px ; padding : 20px  ; width : 300px}
    </style>
</head>
<body>
    <h1 id="aa">Hello User</h1> 
    <a id="bb" href="https://google.com" target="_blank">rabindranath</a> tagore
</body>
</html>

2-3. Position(포지션)

: box model에서 각 컨텐츠 사이의 간격을 설정했다면, position은 각 요소를 배치할 위치를 설정한다.

position은 속성이고, 4가지 종류가 있다.

1. static

: 기본값. position이 설정되지 않은 상태. 자신이 속한 부모 태그와의 위치를 기준으로 한 상태!

2. relative

: static인 상태와 비교했을 때 얼마나 움직이는지를 설정. 부모 태그와의 기본 위치를 기준으로 얼마나 움직일지를 설정.

얼마나 움직이는지는 해당 element를 위/아래/왼쪽/오른쪽 으로 몇 px 움직일지로 설정하는데,

이때 이런 top/bottom/left/right 의 값을 offset(오프셋)이라고 한다.

(* position:relative 를 지정하지 않고 offset 값만 지정하면 반영되지 않는다.)

1) 오프셋을 지정할 때, 이동하려고 하는 방향과 반대 방향으로 지정해야 한다!

ex) 해당 요소를 왼쪽으로 이동시키려고 하면 offset을 right으로 지정

2) offset 적용 시 우선순위가 존재한다.

: top > bottom , left > right 

ex) top 과 bottom 을 모두 지정한다면 top offset 값만 반영된다. left/right도 마찬가지.

<!DOCTYPE html>
<html>
  <head>
    <style>
      ol{border:3px dashed ; bordindexolor:deepskyblue}
        ul{text-align:center ; font-size:1rem}   
      #toright{position:relative ; left:150px}
      #toleft{position:relative ; right:150px}
      #totop{position:relative ; bottom:50px}
      #tobottom{position:relative ; top:50px}  
    </style>
  </head>
  <body>
   <ul>
    	<li id="totop">HTML</li>   <!-- 위로 이동 -->
    	<li id="toleft">CSS</li>   <!-- 왼쪽으로 이동 -->
    	<li style="font-weight:bold">JavaScript</li>   <!-- 아무 포지션 서식 적용 안 함 -->
    	<li id="toright">Python</li>   <!-- 오른쪽으로 이동 -->
    	<li id="tobottom">C</li>   <!-- 아래쪽으로 이동 -->
   </ul>
  </body>
</html>

3. absolute

: relative와는 다르게, 자신의 바로 위 부모가 아니라 자신의 부모 중 position 값이 static이 아닌 부모와의 위치를 기준으로 움직인다.

-> 그러므로 바로 위 부모와의 관계가 거의 끊긴다.

(그래서 border로 경계를 표시하면, 부모와 관계가 있을 때는 부모의 width를 따라가는 반면 관계가 끊긴다면 부모의 width를 따라가지 않고 딱 자신의 영역만큼으로 border의 너비가 제한된다. 소속이 애매해지기 때문임.)

cf) 만약 자신의 부모 태그(상위 태그)의 position 값이 전부 static이라면, 해당 태그의 offset 값은 최상위 태그인 <html> 태그의 위치를 기준으로 삼게 된다.

ex1) 기준 태그의 position 값이 absolute , 그 태그의 모든 상위 태그의 position은 static 일 때:

<html>
<head>
    <style>
        #parent{position:static}
        div{border:2px solid ; margin:20px ; text-align:center}
        #child{position:absolute ; left:0px ; top:0px ; background-color:coral}
    </style>
</head>
<body>
    <div>Coffee
        <div id="parent">Blended
            <div>Smoothie
                <div>Mango Smoothie</div>
                <div>Strawberry Smoothie</div>
            </div>
            <div>Frappchino
                <div>Mocha Frappchino</div>
                <div id="child">Zavachip Frappchino</div>
            </div>
        </div>
    </div>
</body>
</html>

: 해당 태그(Zavachip Frappuchino)는 offset 값이 상하좌우로 0px인데, 화면 맨 상단에 위치해 있으므로 <html> 태그를 기준으로 값을 정했음을 알 수 있다.

ex2) 기준 태그의 position 값이 absolute, html 다음으로의 상위 태그의(body 태그 제외) position이 absolute이고 나머지는 static일 때:

<html>
<head>
   <meta charset="utf-8">
    <title>Example</title>
    <style>
        #parent{position:absolute}
        div{border:2px solid ; margin:20px ; text-align:center}
        #child{position:absolute ; left:0px ; top:0px ; background-color:coral}
    </style>
</head>
<body>
    <div>Coffee
        <div id="parent">Blended
            <div>Smoothie
                <div>Mango Smoothie</div>
                <div>Strawberry Smoothie</div>
            </div>
            <div>Frappchino
                <div>Mocha Frappuchino</div>
                <div id="child">Zavachip Frappuchino</div>
            </div>
        </div>
    </div>
</body>
</html>

: 이번엔 기준값이 화면 좌상단이 아니라, #parent 가 적용된 Blended 부모 태그로 바뀌었다.

그런데 아까는 각 태그 요소들이 화면 폭을 다 채운 데에 비해, 지금은 position:absolute 인 Blended 요소를 포함한 하위 요소들은 화면 폭을 다 채우지 못한다.

        #parent{position:relative}

parent id의 속성을 relative로 바꾸면, Zavachip의 위치는 그대로이나 나머지 요소들은 다시 화면 폭을 그대로 채운다.

=> position:relative 와 position:absolute 의 차이는 단순히 자식 태그의 위치 기준이 바로 위의 부모 태그인지, position:static 이 아니면서 그나마 가장 가까운 부모 태그인지 만의 차이가 아닌 것이다. 화면상의 정렬에도 둘의 차이가 있다!

4. fixed

: 스크롤바를 내려도 해당 element를 지정한 위치에 고정시켜 주는 '속성'이다.

absolute, relative와 마찬가지로 left, top 등으로 위치를 지정한다.

absolute와 비슷한 점 : 사용하면 바로 위 부모 태그와의 관계가 끊긴다. -> 해당 태그/element의 영역이 딱 그 안의 텍스트만 포함하는 범위로 제한된다.

<html>
<head>
    <style>
        #fix{position:fixed ; left:10px ; top:10px ; background-color:black ; color:white}
        #plus{position:fixed ; right:20px ; top:50px ; background-color:black ; color:limegreen}
    </style>
</head>
<body>
  <h1 style="text-align:center">KSY</h1>  <!-- 고정하지 않은 영역-->
   <h2 id="fix">CornSalad</h2>  <!-- 고정한 영역 1 -->
   <h4 id="plus">Most Delicious Appetizer Ever</h4>  <!-- 고정한 영역 2 -->
    <p style="margin-top:70px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex animi officia fugit molestias. Delectus odit, numquam reprehenderit eius adipisci illo, minus impedit voluptas excepturi aspernatur debitis labore, quasi dolore tempore. Reprehenderit voluptatibus accusantium consectetur sapiente sequi culpa eligendi totam aliquam libero, non modi nisi aperiam delectus ad sunt natus ex fuga quibusdam, debitis ratione est vel! Itaque eaque molestias fuga ab doloremque at, fugit ullam quia, debitis corporis ad, deserunt possimus distinctio qui? Perspiciatis explicabo optio aspernatur ducimus cum facere libero ab modi iure reiciendis perferendis praesentium voluptas voluptatibus, ullam, nemo veniam necessitatibus obcaecati tenetur similique consequatur voluptate.</p>
   
</body>
</html>

: 스크롤을 내리면 지정한 영역만 계속 고정되어 있다.

2-4. Float

1. float & clear

더보기

1) float 속성

이미지를 자연스럽게 배치하는 데 주로 사용하지만, 레이아웃에도 사용되는 '속성'.

정확히는 이미지 태그 <img>에 지정하면 해당 이미지와 영역이 겹치는 다른 element들로 하여금 해당 이미지의 영역을 비껴가게 해 준다.

-> 이미지를 왼쪽에, 해당 글은 바로 오른쪽에 배치하는 등의 연출이 가능하다.

 

float에는 2가지 값을 지정할 수 있다 : left 또는 right

left : 이미지를 왼쪽에 정렬

right : 이미지를 오른쪽에 정렬

 

2) clear 속성

 

float 속성을 무력화시킨다.

* float 속성은 img 태그(다른 element가 '피해가게 할' 대상)에 적용하지만, 

<-> clear 속성은 다른 태그('그 element를 피하는 대상') 에 적용한다. (ex. p 태그)

주로 <style> 태그 안 img 태그에는 float 속성을 일반적으로 적용하고, float 속성을 적용하고 싶지 않은 일부 단락에 clear 속성을 적용하는 것으로 보인다.

 

clear에는 3가지 값을 지정할 수 있다 : left , right , both

left : float의 값이 left인 경우에만 float 속성을 무력화

right : float의 값이 right인 경우에만 float 속성을 무력화

both : float의 값에 상관없이 float 속성을 무력화  -> 셋 중에 가장 많이 쓰임

<html>
<head>
   <meta charset="utf-8">
    <title>Example</title>
    <style>
        img{width:200px ; float:right ; margin:15px}    
    </style>
</head>
<body>
   <img src="C:\Users\USER\Desktop\WEB\image\start.jpg" alt="Start Now!" target="_blank"> 
   <!-- float만 설정, clear 는 설정 안 함-->
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae culpa, necessitatibus cum repudiandae, sit architecto voluptatum! Neque nulla possimus ex perspiciatis sunt, commodi, debitis saepe error nam reiciendis ut! Commodi nisi voluptatum tempora in perspiciatis, eum deserunt ratione? Doloremque autem aliquam eligendi deserunt iusto minima provident enim.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae culpa, necessitatibus cum repudiandae, sit architecto voluptatum! Neque nulla possimus ex perspiciatis sunt, commodi, debitis saepe error nam reiciendis ut! Commodi nisi voluptatum tempora in perspiciatis, eum deserunt ratione? Doloremque autem aliquam eligendi deserunt iusto minima provident enim.</p>
   <img src="C:\Users\USER\Desktop\WEB\image\start.jpg" alt="Start Now!" target="_blank">
   <!-- float와 clear 모두 설정되어서 float 설정이 무력화됨-->   
    <p style="clear:both">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae culpa, necessitatibus cum repudiandae, sit architecto voluptatum! Neque nulla possimus ex perspiciatis sunt, commodi, debitis saepe error nam reiciendis ut! Commodi nisi voluptatum tempora in perspiciatis, eum deserunt ratione? Doloremque autem aliquam eligendi deserunt iusto minima provident enim.</p>           
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae culpa, necessitatibus cum repudiandae, sit architecto voluptatum! Neque nulla possimus ex perspiciatis sunt, commodi, debitis saepe error nam reiciendis ut! Commodi nisi voluptatum tempora in perspiciatis, eum deserunt ratione? Doloremque autem aliquam eligendi deserunt iusto minima provident enim.</p>
</body>
</html>

위 이미지는 float 설정이 적용되어서 텍스트와 같이 나타나고, 아래 이미지는 float 속성이 적용되었지만 clear 속성으로 무력화되어서 기존의 html처럼 같은 줄에 텍스트와 이미지가 나타나지 않고 있다.

2. holy grail layout

: '최적의 구현' 이라는 의미로, 웹사이트를 가장 잘 나타내는 구현 방식을 찾는 것은 매우 어렵다는 뜻에서 나온 말인 듯 

보통 웹사이트는 이런 식의 구현을 많이 사용하는데, 이는 기존의 HTML 태그만을 사용해서는 불가능했고, CSS에 와서야 float, clear 등의 속성을 이용하면서 가능해졌다.

더보기

<holy grail layout> 만드는 방법

1) 각 태그에게 적절한 역할 부여하기

: header, navigation bar, main content, ad, footer 등 다양한 부분으로 이루어져 있는데, 각 영역의 내용을 태그로 구분해줘야 한다.

* 단 임의로 태그를 사용하고 id나 class를 정의하는 것보다 기존에 존재했고 여러 영역/구성의 의미를 담은 html 태그를 사용하는 것이 더 바람직하다.

b/c 태그에는 그 내용이 전체 본문에서 어떤 역할을 하는지가 포함되어 있다.

cf) 바람직하지 못한 경우 : 제목을 head 태그로 표현하지 않고 strong, font-size 등으로 겉으로만 제목처럼 보이게 하기

 

그런 의미에서 각 영역의 역할을 나타내기에 적절한 html 태그들이 있다:

* 이 태그들을 그냥 html에서 사용하면 전혀 구분되지 않는다. 이 태그는 '의미상' 사용하고, 이를 시각적으로 구분짓는 것은 2단계에서 할 일이다.

-<header> : header. 페이지의 맨 위에 오는 중요한 핵심 내용을 나타내는 부분을 담당하는 태그

-<nav> : navigation bar. 왼 쪽의 목차나 다른 페이지를 안내하는 영역을 담당하는 태그

-<article> : (꼭 이 태그를 쓰는 것만은 아님) 여러 내용이 있을 때, 각각 다른 주제로 글을 구분하기 위해 사용하는 태그

-<aside> : 부수적인 내용을 나타내는 태그

-<footer> : 글의 맨 마지막, 밑 부분에 나오는 영역을 담당하는 태그

 

2) 시각적으로 각 태그의 영역을 구분하기 : float , clear 속성 이용

[주의1] 레이아웃에서 같은 줄을 공유하는 부분은 navigation bar, main content, ad 영역이고 나머지 header이랑 footer 영역은 다른 영역과 너비를 공유하지 않게 해야 한다.

-> 위 세 영역에 float 속성을 적용한다.

+) 통상적으로 내용은 위->아래, 왼쪽->오른쪽으로 작성되므로 맨 왼 쪽에 오는 영역(navigation bar) 부터 float 효과를 주고, 방향을 left로 지정한다.

[주의2] 여러 영역이 삐져나오지 않기 위해선 float와 width를 같이 지정해야 한다.

[주의3] 마지막의 footer 영역은 float효과의 영향을 받으면 안 되므로, clear:both 속성을 이용해서 float 효과를 무력화시킨다.

[주의4] float 속성 적용한 세 영역을 구분하는 border를 설정하는데, 어떤 영역이 더 긴지에 상관없이 해당 border가 header과 footer 영역 사이를 모두 이을 수 있게 해야 한다.

[주의5] 창 사이즈를 조절하다가 간격이 좁아지면 float 속성이 깨지고 레이아웃이 흐트러진다.

-> 본문 전체의 너비를 고정시키는 방법을 사용할 수 있다.

* 창의 사이즈에 따라서 레이아웃의 크기가 자동 조절되는 것도 바람직하지만, 아직은 구현할 수 없다.

* 이때 border의 두께 값이 전체 테두리에 포함되지 않는다. 이를 고려해야 한다.

(페이지 우클릭 -> 검사 에서 각 영역의 width, border width를 확인할 수 있지만 너무 번거롭다.

=> box-sizing 방법은 border width를 각 영역의 width를 더할 때 같이 포함시키는 방법을 알려준다.)

ex) 한 영역의 너비가 300px, border가 50px이면 총 너비는 350px이므로 주의해야 한다.

* flex : 창의 넓이 등 다양한 변화 상황에서 레이아웃을 좀 더 쉽게 짤 수 있도록 도와준다. [심화과정]

* margin:auto 로 설정하면 해당 element를 가운데 정렬시키는 것과 같은 효과를 낼 수 있다!

 

<실습>

<html>
<head>
   <meta charset="utf-8">
    <title>Holy Grail Layout</title>
    <style>
        h1{text-align:center ; background-color:black ; color:white}
        .fix{width:700px ; border:1px solid black ; margin:auto}
        header{border-bottom:1px solid black ; text-align:center}
        nav{float:left ; border-right:1px solid black ; margin-right:0px ; width:150px ; padding:10px}
        article{float:left ; border-left:1px solid black ; border-right:1px solid black ; width:350px ; margin-left:-1px ; margin-right: 0px ; padding:20px }
        aside{float:left ; border-left:1px solid black ; width:100px ; padding:10px ; margin-left:0px}
        footer{clear:both ; border-top:1px solid black ; padding:20px ; text-align:center}
    </style>
</head>
<body>
<div class="fix">
<header><h1>Italian Food</h1><p>Qui eos a aut cum obcaecati sint sit, laborum. Autem, in neque.</p></header>
<nav><ul>
    <li>Pasta</li>
    <li>Pizza</li>
    <li>Risotto</li>
    <li>Salad</li>
    <li>Steak</li>
</ul></nav>
    <article><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid numquam iusto fugit quia ea ipsum sint earum alias tempore quibusdam, voluptatibus suscipit nisi, saepe et adipisci amet. Deleniti vitae nisi, ullam quod voluptatum doloremque facilis corrupti omnis, consequuntur blanditiis cupiditate itaque voluptatem minima odit quo soluta id sapiente! Voluptate dolore fuga autem sit omnis, consequatur quia pariatur qui non tenetur eum expedita provident a nisi repellat iste, sequi accusamus maiores molestias et labore ratione illo, minus perspiciatis. Architecto nemo itaque facilis nam excepturi reiciendis nostrum ducimus sunt rerum. Doloremque quidem veniam rem delectus, facere aliquam nam nemo quisquam? Laborum eos qui voluptatem, culpa amet officia in dicta, quibusdam numquam modi at repellendus fugiat est consequuntur porro illum dignissimos maiores deleniti? Deserunt assumenda dolorem provident fugiat, natus, modi facere itaque amet ipsum, omnis dolore, animi quis sed atque consectetur magni.</p><p> Accusantium ab numquam adipisci doloremque necessitatibus fugit minima, illum totam odit veniam ducimus voluptatem sunt tempora, culpa voluptates commodi vitae consequuntur ipsum dicta! Pariatur, voluptates, velit. Deserunt tenetur eum autem suscipit harum sequi reprehenderit totam officiis, quis corporis nam, exercitationem ut fugiat aperiam consequatur dicta eaque omnis qui quas, aut porro dolores a. Quos necessitatibus eius illum nesciunt et, fugit itaque est provident sunt eligendi non animi corporis officiis atque modi dolores nulla nemo, numquam excepturi, consectetur.</p><p> Asperiores, nihil excepturi. Nesciunt tenetur eaque voluptatem deleniti aperiam quisquam accusantium, maxime placeat voluptates velit expedita, cumque, obcaecati, quae repellendus. Et nulla, in cum nisi itaque ea, doloremque magnam deleniti dolore doloribus asperiores nobis ipsa aliquam corporis vero, rerum, hic accusamus.</p><p> Laborum provident cupiditate harum perferendis voluptate fuga laudantium animi et tenetur veniam, vitae maxime distinctio doloribus quisquam delectus unde tempora, sunt nam recusandae a saepe inventore. Minima, saepe. Culpa repellat qui totam similique earum aspernatur molestiae debitis atque aperiam vitae in excepturi expedita veniam adipisci, velit voluptatibus exercitationem asperiores nostrum quod distinctio. Alias, consectetur sed optio voluptatum recusandae, aliquid repellat deserunt consequuntur delectus vero, exercitationem facere quidem. Perspiciatis reprehenderit omnis sit ducimus voluptates, quasi recusandae a, eligendi, maiores labore ipsam natus laborum vero at dicta. Ipsa velit dolor quis asperiores illum obcaecati repudiandae dicta magni, adipisci fugit voluptate eaque, quos, assumenda aut. Nisi quas velit nihil voluptate culpa qui architecto, voluptatibus, esse minima corporis dicta pariatur eius. Amet corporis necessitatibus quia, inventore neque!</p><p> Voluptatem rem id architecto sed animi libero asperiores officia reprehenderit! Quae accusamus illo beatae et dignissimos dolore sed optio eligendi amet. Aliquam architecto ipsam facilis, exercitationem laboriosam dolor mollitia suscipit. Fugit quo, eum possimus. Corporis officiis, rerum facere sequi dolore sed iste, mollitia praesentium repellendus ratione est tenetur. Molestiae iure beatae, delectus quasi, ipsum at! Quasi eius minus ex, minima rem voluptates velit, non deleniti voluptas error, modi possimus qui iusto numquam vero, sed maiores! Nostrum, illo magnam iusto architecto id esse voluptatum repellat! Impedit fugiat quidem esse itaque. Hic inventore voluptatem id dolorem esse, voluptas perferendis, facilis autem voluptates nesciunt commodi ab dignissimos accusantium qui ex sequi tempora numquam, consequatur et nulla itaque non neque eius deserunt? Eveniet, necessitatibus.</p></article>
<aside> Nisi perferendis pariatur provident, blanditiis aliquam aspernatur expedita earum sit eos rerum voluptates vero, soluta laborum necessitatibus beatae non sequi nobis recusandae.</aside>
<footer>Molestias nisi vitae officia id, explicabo praesentium!</footer>
    </div>
</body>
</html>