들어가며:

  모든 사이트에 하나씩은 있는 팝업을 구현하는 방법에 대해서 설명을 하려고 합니다. 팝업을 열어주는 방법은 매우 간단하게 구현이 가능하지만, 오늘 하루 열지 않기, 하루 동안 열지 않기를 구현하기 위해서는 쿠키(cookie)를 사용해야 합니다. 쿠키는 간단하게 말하면, 하이퍼 텍스트의 기록서(HTTP)의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버에서 인터넷 사용자의 컴퓨터에 설치하는 작은 기록 정보 파일을 말합니다. 사용자의 접속을 기록으로 남길 수 있고, 사용자가 방문한 시간으로부터 30초, 10분 등 다양하게 쿠키를 저장하고, 만료(expire)를 시킬 수 있습니다. 만료를 시킨다는 내용은 그 시간 이후에 이 쿠키파일을 없애겠다 라는 말입니다. 여기까지 이해를 하셨으면, 하루동안 열지 않기, 오늘 하루 열지 않기를 어떻게 구현을 해야할지 감이 오실겁니다. 아래 소스 코드를 통해서 구현하는 방법에 대해서 설명하겠습니다.

사용 패키지:

  js.cookie의 라이브러리를 사용해서 구현을 할 생각입니다. javascript의 장점중에 하나가 무자비하게 많은 플러그인이 있어서 바로 가져다가 쓰면, 굳이 내가 구현을 하지 않아도 쉽게 구현이 가능합니다. [다운로드 받기]

소스코드:

home.ejs

  home.ejs에서는 cookie의 내용이 있는지 없는지 확인을 한 뒤에 팝업창을 띄워주는 역할을 합니다.

popup.ejs

  popup.ejs에서는 팝업 내용을 구현하시면 됩니다. 여기서 주의해야할 점은 <div id="popup" style="display:none"> 입니다. display의 option은 none과 block이 있는데 none은 화면에서 안보이게 하고, block은 화면에 보여줄때 사용합니다.

popup.js

  popup.js는 핵심적인 역할을 합니다. setCookie(), setCookieAt00()은 하루동안 열지 않기, 오늘 하루 열지 않기를 각각 구현한 내용입니다. 사용하고 싶은 부분의 주석을 하고 사용하면 됩니다. openWindow()와 closeWindow()는 팝업 즉 popup.ejs를 열고 닫는 역할을 하는 함수입니다. display의 옵션인 none과 block을 사용합니다.  


들어가며

  웹페이지를 구현하다 보면 데이터를 비동기 식으로 호출할때가 있습니다. 데이터를 요청하는 호출 이후에 페이지는 로딩은 됬는데, 데이터가 채워지지 않는 경우가 있습니다. 그렇기 때문에 사용자들에게 데이터를 호출하고 있는 상태입니다. 라는 페이지 로더를 구현을 해야합니다. 아래와 같은 그림 회전을하고, 데이터가 전부 로딩이 완료가 되면 로더는 화면에서 사라지고, 내가 사용자애들에게 보여주고자 하는 페이지를 보여주면 됩니다. 아래 예제는 html파일, css파일, 그리고 javascript파일을 작성했습니다. 참고해서 사용하고 싶은 곳에 로더를 구현해보세요.


로딩 페이지 (loading-page.html)

  아래는 로딩 페이지를 구현한 html파일입니다. div 태그로 loader, container를 생성을 합니다. loader는 위 그림과 같이 회전하는 그림을 보여주는 뷰이고, container에는 내가 추가하고자 하는 즉, 호출을 통해 불러온 데이터를 표시하는 뷰입니다. 현재는 style=display:none의 값으로 화면에 표시되지 않습니다.

css 파일 (style.css)

  위에 로더를 그려주는 css 파일입니다.

javascript 파일 (loading-page.js)

  loader와 container를 디스플레이에서 보여주는 시점을 지정해주시면 됩니다. loader의 경우에는 기존에 화면에 보여주고 있기 때문에 css의 함수를 통해 display에 none을 넣고, container에는 display block의 값을 넣어주므로서 뷰가 교차되서 보여집니다. css('property', 'value') 


[참고] http://www.w3schools.com/

  1. 2017.03.24 14:28

    비밀댓글입니다

    • 2017.03.25 10:22

      비밀댓글입니다

  2. 송주민 2017.04.26 11:03

    좋은소스 너무나 감사드립니다.. 근데 문제가 하나있어서 질문하나드려봅니다..
    loader 화면이 멈추지않고 container화면이 뜨지 않습니다.. jquery에서 추가로 작성해야할 명령이 있을까요ㅠㅠ.. 답글 부탁드릴게요~

    • 2017.04.27 15:23

      비밀댓글입니다

  3. 곰탱 2017.06.09 01:14

    저도 윗분과 같은 경우네요...
    로딩화면만 나오고 실제화면은 출력이 안됩니다...
    비밀댓글로 달아 놓으셔서 확인도 안되고...ㅠ.ㅠ

    • 2017.06.26 19:57

      비밀댓글입니다

  4. Joshua88 2017.06.26 14:04 신고

    좋은 소스 정말 감사합니다. 하지만...
    저도 윗분과 같은 경우입니다... 로딩화면은
    나오는데 본문이 안나옵니다.. 도움이 절실합니다... 부탁드려요~!

    • 2017.06.26 19:56

      비밀댓글입니다

  5. guswl1195 2017.08.11 17:06

    깔끔하게 정리잘해놓으셨네요~참고 잘하고있습니다~
    저도 따라해보다가 위에분처럼 로딩화면만 나오고 본문이 안나오네요ㅠㅠ
    궁금해서 미쳐버리겠습니다ㅠ_ㅠ부탁드려요~

  6. 호리 2017.11.20 15:13

    저도 윗분들과 같은 오류로 로딩만 나오고 안없어지는데 (본문이 안나오는데)
    도와주세요!!

  7. 123123213 2017.12.01 18:26

    저도 마지막 본문이 안 나오는데 어떻게 해야 되는건가요?
    답변좀 부탁드립니다!!!!

들어가며

  처음에 javascript, jQuery, ejs를 사용을 하다보면 각 역할을 유기적으로 연결하는게 참 어려운 문제라고 생각합니다. ejs에서 선언한 값을 어떻게 가져오는지, jQuery로 가져온뒤에 javascript에서는 어떻게 처리를 해야하는지도 감이 안올때가 있습니다. 간단한 예제중에 입력창에 입력을 받고, 입력한 데이터를 가져오는 버튼을 구현하면서 ejs와 jQuery, javascript를 전체적으로 연결하는 연습을 할 수 있습니다. 아래 예제는 입력창과 버튼을 ejs로 생성을 하고, javascript에서 jQuery를 이용해 input과  button의 reference의 값을 가져온 뒤에 이벤트를 바인딩하고 결과를 가져오는 예제입니다.

소스코드

search_view.ejs

  아래 소스코드는 우리가 실제로 보는 페이지를 나타냅니다. input과 btn을 이용해 생성하고 btn에는 js에서 값을 가져올 수 있도록 뒤에 value를 선언 합니다.


search.js

  _initView()에서는 위에서 선언한 input과 btn을 jQuery를 이용해 주소의 값을 가져옵니다. 주소를 가져온 뒤에 _bindEvent()의 함수를 통해서 btn을 클릭했을때의 이벤트를 가져오게 됩니다. 이 예제에서는 버튼을 클릭했을때, 입력값으로 넣은 검색키워드를 가지고와서 브라우저에 출력을 합니다.


  1. 킬킬 2016.08.18 19:18

    Ejs가 뭐에요??

    • 쌍쌍바나나 2016.11.09 11:15 신고

      ejs는 embedded javascript의 약자입니다. javascript로 동적 페이지를 생성하기 위해 사용하구요. jsp와 유사하다고 생각하시면 됩니다. :)

  2. 안녕하세요 2018.04.11 10:28

    저도 로딩화면만나오고 본화면이 안나옵니다 ㅜㅜ

들어가며

  JavaScript에서 웹 개발을 할때 Front의 코드를 구현할때 Ajax를 이용하면 쉽게 서버로부터 데이터를 받아오고, 전송을 할 수 있다. 아래 소스코드는 nodeJs와 같이 웹 서버 프레임워크가 설치가 되어있고, 서버가 실행이 되어 있어, 해당 요청 URL을 처리를 할 수 있는 상태가 필요하다. 

  전송하는 방법은 앞서 설명했던 HTTP Request를 사용하고, 보통은 HTTP GET을 통해 서버로부터 데이터를 받아오고, HTTP POST를 통해서 데이터를 전송하는 방법을 사용하지만. POST로도 데이터 전송이 가능하다는 점~

서버에서 Web Front로 데이터 전송

  서버로 부터 초기의 데이터를 Web Application으로 불러오는 소스코드입니다. ajax로 설정한 url을 요청을 하면 데이터가 전송이 되고 result로 결과 값이 전송이 됩니다. 만약 result가 있다면, 파싱해서 사용하시면 되고, 만약 데이터가 없다면 "불러오기 실패"의 에러 창을 띄워줍니다.

Web Front에서 입력된 데이터를 서버로 전송

  Front에 입력된 데이터를 서버로 데이터를 전송하는 소스코드 입니다. 전송하는 데이터는 params로 dict의 형태를 띄고 있습니다. 아무래도 dict의 형태는 json과 유사하기 때문에 data를 JSON.stringify(params)를 해줘야지만 json형태로 전송이 되고, 서버에서도 요청된 데이터를 파싱해서 사용이 가능합니다. 서버에서 데이터를 받은 이후에 응답을 했을때 성공을하면, "저장되었습니다. 결과가 없으면 "잠시 후에 시도해주세요", 만약 에러가 발생하면 "에러 발생"의 창을 띄워줍니다.



들어가며

  JavaScript를 하면서 가장 많이 사용하는게 Collection이 리스트라고 생각한다. 그 다음에는 Dictionary가 아닐까 싶다. 사실 Python을 할 때도 Dictionary는 매우 유용하게 자주 사용한다. Dictionary는 key, value의 pair로 저장하게 되는데 리스트에서 인덱스로 접근하는거와 다르게 key의 값으로 접근하기 때문에 원하는 값을 찾을때 빠르게 찾을 수 있는게 장점이다. 아래 예제 정도만 알면 Dictionary 구현은 쉽게 할 수 있지 않을까 싶다. 추가적으로 필요한 내용이 생각나면 바로바로 추가를 해야겠다.

소스코드


JSON APIs와 Ajax를 이용해 데이터 로딩 및 완료 된 데이터를 처리해 HTML 화면에 출력하는 예제


들어가며

  만약 날씨 정보와 같이 수시로 변하는 데이터를 HTML을 통해 화면에 출력을 해주고 싶다면 어떻게 해야할까요? 이처럼 고정값이 아닌, 항상 변하는 값을 HTML을 통해 출력해야 하기 때문에 로컬 파일이나, 클라우드에 있는 파일에서 값을 가져와 HTML페이지에 출력을 해줘야 합니다. 그렇다면 데이터를 어떻게 어디서 어떤 형태로 가져오는지 알아보겠습니다.

  APIs(Application Programming Interfaces)는 애플리케이션 사이에 소통하는 인터페이스를 말합니다. 우리가 흔히 말하는 Google APIs도 같은 애플리케이션 간에 소통하는 인터페이스를 제공합니다. 우리가 특정 URL로 데이터를 요청하고, 응답을 받습니다. 대부분의 Web APIs는 데이터를 요청/응답을 할때 JSON(JavaScript Object Notation)의 포맷을 사용해 통신을 합니다. 이번 포스팅에서는 javascript에서 데이터를 불러올 때 사용하는 기술인 Ajax를 이용해 로딩하고자 하는 JSON 포맷의 데이터를 로딩한 후에 HTML의 페이지에 보여주는 방법에 대해서 설명하겠습니다.

화면 구성

  화면을 구성하기 위해 index.html 파일을 작성했습니다. 화면 구성에 대해서 설명을 간단하게 드리면 Get Message라는 버튼을 만들고, 그 위에는 "The message will go here"이 있습니다. Get Message 버튼을 클릭하면 데이터를 불러오고, "The message will go here"의 공간에 HTML값을 변경하는 예제입니다. 

index.html

<div class="container-fluid">
  <div class="row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class="row text-center">
    <div class="col-xs-12 well message">
      The message will go here
   </div>
  </div>
  <div class="row text-center">
    <div class="col-xs-12">
      <button id="getMessage" class="btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

버튼에 이벤트 정의하기

  버튼을 누르면 이벤트를 발생시키기 위해서는 getMessage의 id를 갖고 있는 Element에 이벤트를 입력해야 합니다. $(document).ready() 함수는 페이지 소스가 모두 로딩이 완료가 되면, 최초 한번만 호출되는 함수입니다. 이 함수에서는 버튼을 만들고 클릭 이벤트를 넣는 등의 초기화 하는 작업을 하면 됩니다. 아이디가 getMessage를 가져오기 위해 #getMessage를 통해 가져오고 .on("click", function()){}을 통해 getMessage 버튼을 클릭했을때 호출되는 callback 함수를 정의합니다. class가 message인 값을 가져와서 "Here is the message"라는 텍스트로 변경해주는 예제입니다. 

 $(document).ready(function() {
    $("#getMessage").on("click", function(){
      $(".message").html("Here is the message");
    });
  });

JSON값 가져오기 및 출력하기


  /json/cats.json의 파일을 읽어와서 .message에 JSON의 값을 출력하는 예제입니다.  

 $(document).ready(function() {
    $("#getMessage").on("click", function(){
      $.getJSON("/json/cats.json", function(json) {
        $(".message").html(JSON.stringify(json));
      });
    });
  });

  이렇게 받은 JSON 데이터를 .forEach()를 통해 데이터 세부 항목에 접근이 가능합니다. 또한 filter를 통해 내가 원하지 않는 값을 제외하고 얻을 수 있습니다.

$(document).ready(function() { 
    $("#getMessage").on("click", function() {
      $.getJSON("/json/cats.json", function(json) {
        var html = "";
        json = json.filter(function(val) {
          return (val.id !== 1);
        })
        json.forEach(function(val) {          
          html += "<div class = 'cat'>"
          html += "<img src = '" + val.imageLink + "'>"
          html += "</div>"
        });
        $(".message").html(html);
      });
   });
});

[참고] www.freecodecamp.com - JSON APIs and Ajax

javaScript에서 배열은


Array


push() (가장 뒤에 삽입)

unshift() 가장 앞에 값을 삽입



pop() 가장 last에 있는 값을 출력하고 삭제

shift() 가장 앞에 있는 값을 출력하고 삭제


// Setup

var myArray = [["John", 23], ["dog", 3]];


// Only change code below this line.

var removedFromMyArray = myArray.shift();


var ourArray = ["Stimpson", "J", "cat"];

ourArray.shift(); // ourArray now equals ["J", "cat"]

ourArray.unshift("Happy"); 

// ourArray now equals ["Happy", "J", "cat"]




Function

// Example

function functionWithArgs(a, b) {

  console.log(a - b);

}

functionWithArgs(10, 5); // Outputs 5





global 변수를 만들기 위한 방법은 두가지가 있다. 
함수 밖에서 var를 이용하고 변수를 선언하거나
함수 내부에서 var 를 사용하지 않고 변수를 만들면 globe변수가 된다. 

// Declare your variable here
var myGlobal = 10;

function fun1() {
  // Assign 5 to oopsGlobal Here
  oopsGlobal = 5;
  return oopsGlobal;
}

// Only change code above this line
function fun2() {
  var output = "";
  if (typeof myGlobal != "undefined") {
    output += "myGlobal: " + myGlobal;
  }
  if (typeof oopsGlobal != "undefined") {
    output += " oopsGlobal: " + oopsGlobal;
  }
  console.log(output);
}

Global 변수 vs Local 변수



// Setup
var outerWear = "T-Shirt";

function myOutfit() {
  // Only change code below this line
  var outerWear = "sweater";
  // Only change code above this line
  return outerWear;
}

myOutfit();
// output is sweater


Equality Operation

1 == 1  true

1 == '1' true


strict equality operation 

1==='1' false


strict inequality operation

3 !== 3 false

3 !== '3' true



javascript에서 object를 사용하기 위해서는


// Example
var ourDog = {
  "name": "Camper",
  "legs": 4,
  "tails": 1,
  "friends": ["everything!"]
};

// 접근하기 위해서는
ourDog.name = "dog";
//또는
ourDog["name"] = "mungmung";

// 객체에 property를 생성하기 위해서
ourDog.bark = "mung-mung";
// 객체에서 property를 제거하기 위해서
delete ourDog.bark;

Object를 lookup할때 활용하기



 var result = {
    "alpha":"Adams",
    "bravo":"Boston",
    "charlie":"Chicago",
    "delta":"Denver",
    "echo":"Easy",
    "foxtrot":"Frank",
    "":undefined
  };
// result[val]로 접근
// result["alpha"]  "Adams" 출력

  switch(val) {
    case "alpha": 
      result = "Adams";
      break;
    case "bravo": 
      result = "Boston";
      break;
    case "charlie": 
      result = "Chicago";
      break;
    case "delta": 
      result = "Denver";
      break;
    case "echo": 
      result = "Easy";
      break;
    case "foxtrot": 
      result = "Frank"; 
  }



Object에 해당 property가 있는지 체크하기 위해서 아래와 같이 입력



myObj.hasOwnProperty(checkProp) // return true or false

function checkObj(checkProp) {
  // Your Code Here
  if (myObj.hasOwnProperty(checkProp)) {
    return myObj[checkProp];
  } else {
    return "Not Found";
  }
}


JavaScript의 객체는 JSON이다. 


var myMusic = [
  {
    "artist": "Billy Joel",
    "title": "Piano Man",
    "release_year": 1973,
    "formats": [ 
      "CS", 
      "8T", 
      "LP" ],
    "gold": true
  },
  {
    "artist": "Billy Joel",
    "title": "Piano Man",
    "release_year": 1973,
    "formats": [ 
      "CS", 
      "8T", 
      "LP" ],
    "gold": true
  } 
];



Regular Expression


단어 찾기

/the/gi

/ : regular expression의 시작

the : 찾을 키워드

g : global

i :ignore (uppercase or lower case)


숫자 찾기

/\d/g

/\d+/g

\d 숫자

+하나 또는 그이상의 숫자를 검색


// Setup
var testString = "There are 3 cats but 4 dogs.";

// Only change code below this line.

var expression = /\d+/g;  // Change this line

// Only change code above this line

// This code counts the matches of expression in testString
var digitCount = testString.match(expression).length;


/\s+/g 모든  whitespace를 검색

/\S/g 모든  whitespace를 제외하고 검색






Learning how Script Tags and Document Ready Work

jQuery는 JavaScript tool에서 가장 유명하다. 

jQuery를 사용하기 위해서는 첫번째로 scriptelement를 추가해야 한다.

document ready function을 생성하기.

<script>

  $(document).ready(function() {


  });

</script>

HTML의 코드 위에 작성해서 사용할 수 있다. 



Target HTML Elements with Selectors Using jQuery

jQuery는 항상 시작이 $로 시작이되고, selector를 이용해서 HTML의 element를 선택할 수 있다. 

 $("button").addClass("animated bounce");

를 하면  Animate CSS를 등록을 따로 해놓으면 웹페이지가 로딩될때 HTML의  element인 button을 선택해 animation을 실행한다.



Target Elements by Class Using jQuery

만약 Element를 class를 이용해서 접근하기 위해서는

$(".text-primary").addClass("animated shake");를 해주면 된다. 

앞서 말한것 처럼 .은 class 앞에 사용하고, text-primary인 class에 animated shake를 하겠다 라는 말이다. 


Target Elements by ID Using jQuery

Element를 ID를 이용해 접근하기 위해서는

 $("#target6").addClass("animated fadeOut");로 하면 된다. 

target6의 ID를 가진 Element는 animated fadeOut이 된다.



Target the same element with multiple jQuery Selectors

<script>

  $(document).ready(function() {

    $("button").addClass("animated")

    $(".btn").addClass("shake")

    $("#target1").addClass("btn-primary")

  });

</script>


button이라는 모든 element에 animated 클래스를 추가를 할 수 있다. 

btn 클래스에 모두 shake 클래스를 추가 

target1 ID에 btn-primary클래스를 추가

즉 selectors를 이용해 여러개의 elements를 한번에 선택이 가능하고, 클래스를 추가 할 수 있다.



그렇다면 클래스를 제거는 어떻게 할까?

$("#target2").removeClass("ban-default");

$("button").removeClass("btn-default");

로 클래스를 제거할 수 있다.


Change the CSS of an Element Using jQuery

$("#target1").css("color", "blue");를 통해 css의 property의 값도 변경이 가능하다. 




Disable an Element Using jQuery

.prop()를 통해 button을 disable해 사용자가 더이상 클릭을 하지 못하도록 만들 수 있다. 
$("#target1").css("color", "red").prop("disabled", true);



Change Text Inside an Element Using jQuery
html의 element값의 text를 변경이 가능하다. 
$("#target4").html("<em>#target4</em>") 



Remove an Element Using jQuery

.remove()를 통해 element 제거가 가능하다. 

$("#target4").remove() 



Use appendTo to Move Elements with jQuery

$("#target4").appendTo("#left-well")

div의  id가 left-well인 경우 target4를 해당 div로 옮길 수 있다. 



Clone an Element Using jQuery

.clone()을 통해 element복제가 가능하다.

 $("#target5").clone().appendTo("#left-well");











Target the Parent of an Element Using jQuery

모든 HTML의 element는 모두 parent를 가지고 있다. 그렇기 때문에 inherits properties를 가지고 있음.

<body>

    <div class="container">

$(.container).parent()는 body element를 나타낸다.



Target the Children of an Element Using jQuery

 .children()을 사용하면 해당 element의 children의 element를 가져올 수 있다.

 $("#right-well").children().css("color", "orange");



Target a Specific Child of an Element Using jQuery

그렇다면 많은 child element에서 특정 element를 가져오는 방법은 어떻게 될가

target:nth-child(n)를 통해 가져올 수 있다. 

$(".target:nth-child(2)").addClass("animated bounce");



Target Even Numbered Elements Using jQuery

$(".target:even").addClass("animated shake");

$(".target:odd").addClass("animated shake");



Use jQuery to Modify the Entire Page

$(body).addClass("animated')

$(body).addClass("hinge")

를 통해 전체 화면 수정이 가능하다. 

Use Responsive Design With Bootstrap Fluid Containers


popular Bootstrap responsive CSS framework


bootstrap은 스크린 사이즈에 따라 html element의 사이즈를 resizing해주는 responsive design이라고 불리운다. 

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

<div class=container-fluid>
<elements ...>
</div>



Make Image Mobile Responsive
<img class="img-responsive" src="https://bit.ly/fcc-running-cats">
img-responsive의 class를 갖고 있어야 한다. 폰 사이즈에 이미지를 조정하기 위해 사용한다.


Center text with Bootstrap
만약 h2 element의 텍스트를 text-center의 class를 사용한다면 가능하다. 


Create Bootstrap Button
기존 HTML에서 제공하는 이미지보다는 좀더 세련된 모양으로 제공한다.
<button class=btn>Like</button>

Create Block Element Bootstrap Button
<button class="btn btn-block">Submit</button> 을 사용하면 스크린 사이즈 전체 horizontal space의 width를 사용할 수 있다. (한줄 모두 사용)

색을 입히는 기본 값 들을 설정 (primary, info, danger)
Taste the Bootstrap Button Color Rainbow
btn-primary는 highlighting을 사용할때 유용하다.  사용자가 버튼위에 버튼을 올렸을때 색을 변경시켜주는 작업을 자동으로 해준다. 
<button class="btn btn-block btn-primary">Like</button>
   
Call out Optional Actions with Button Info
btn-info는 사용자가 정보를 
<button class="btn btn-block btn-info">Info</button>



Warn your Users of a Dangerous Action

btn-danger는 사용자에게 빨간색으로 표시함으로써 경고를 준다.

<button class="btn btn-block btn-danger">Delete</button>





Use the Bootstrap Grid to Put Elements Side By Side

Bootstrap에는 responsive grid system을 사용할 수 있다. 


col-md-* class를 사용하면 생성이 가능한데 여기서 md는 medium을 의미하고 *는 얼마나 많은 column을 만들것인가에 대한 정보이다. 

col-xs-*는 extra small을 말한다. 

   <div class="col-xs-4">

      <button class="btn btn-block btn-primary">Like</button>

    </div>

    <div class="col-xs-4">

      <button class="btn btn-block btn-info">Info</button>

    </div>

    <div class="col-xs-4">

      <button class="btn btn-block btn-danger">Delete</button>

    </div>

  </div>

  <p>Things 


Use Spans for Inline Elements

inline button element와 block-level button element와의 차이점


block은 스크린 사이즈의 최대 width를 차지한다. 

span element를 사용하면 여러개의 elements를 한줄에 함께 사용이 가능하다. 

<p>Top 3 things cats <span class = "text-danger">hate:</span></p> 



Create a Custom Heading

title과 image를 함께 넣으려면 어떻게 할까. div class를 사용해서 한줄에 넣을 수 있다.

 <div class="row">

    <div class="col-xs-8">

      <h2 class="text-primary text-center">CatPhotoApp</h2>

    </div>

    <div class="col-xs-4">

      <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat"></a>

    </div>

  </div>




Add Font Awesome Icons to our Buttons

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

i element는 italic 체로 글씨 스타일을 변경할때 사용한다. 하지만 지금은 icons를 위해 사용된다. 

<i class="fa fa-info-circle"></i>

<i class="fa fa-thumbs-up"></i>

<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i>Like</button>

 


Add Font Awesome Icons to all of our Buttons

<div class="row">

    <div class="col-xs-4">

      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>

    </div>

    <div class="col-xs-4">

      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>

    </div>

    <div class="col-xs-4">

      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i>Delete</button>

    </div>

</div>





Responsively Style Radio Buttons, Checkboxes

한줄에 여러개의 라디오 버튼, 체크박스를 생성하기 위해서는 div, row, col-xs-*를 사용하면 된다. 

<div class="row">

   <div class="col-xs-6">

        <label><input type="radio" name="indoor-outdoor"> Indoor</label>

      </div>

      <div class="col-xs-6">

        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>

      </div>

    </div>

    <div class="row">

      <div class="col-xs-4">

        <label><input type="checkbox" name="personality"> Loving</label>

      </div>

      <div class="col-xs-4">

        <label><input type="checkbox" name="personality"> Lazy</label>

      </div>

      <div class="col-xs-4">

        <label><input type="checkbox" name="personality"> Crazy</label>

      </div>

  </div>




Style Text Inputs as Form Controls

<form>

    <input type="text" class="form-control" placeholder="cat photo URL" required>

    <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>

</form>


Line up Form Elements Responsively with Bootstrap
그렇다면 이제 elements을 line up해주기 위해서는 다시한번 div, row, col-xs-*을 사용해서 구성해주면 된다. 








Create a Bootstrap Headline
well은 columns의 visual sense of depth 를 만들때 사용한다.
row만들고 --> column나누고 --> well 만들고 --> well 내부에 button을 생성하고 --> button에 btn btn-default 클래스 입히고 --> jQuery Selectors를 위해서 target을 주고 --> id attributes를 추가하고 --> text 추가하고 --> comments 하면 끝
jQuery Selectors를 사용하기 위해서create a class to target with jQuery Selectors

<!--Only change code above this line.-->
<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>






 

h1은 거의 제목을 사용할때 사용하고, h2같은 경우에는 부-제목을 쓸때 사용합니다. 

p는 paragraph의 약자로서 하나의 문단을 나타냅니다. 


<!-- --> 주석으로 사용합니다.


텍스트에 색 변경하기.

<h2 style="colorr:blue">Blue Color</h2>



이때 모든 텍스트에 색을 변경하기 위해서는 한줄 한줄 쓰기에는 많은 부담이 있습니다. 

그래서  등장한게 CSS입니다. CSS는 Cascading Style Sheets의 약자입니다. 


HTML코드에 스타일을 입히기 위해서는

<style>

</style>

 여기서 이제  h2요소에 대해서 CSS selector를 만들어야 합니다. 


<style>

    h2 {color:red;}

</style>


<h2>Blue Color</h2>



그렇다면 항상 사용하는 style을 CSS Class로 만들어서 Element에 Style을 적용하면 조금더 효율적일 것이다.

<style>

    ,blue-text {

        color: blue;

    }

</style>

blue-text의 CSS class를 생성했다.

<h2 class="blue-text">Banana</h2>를 하면 CSS class를 적용할 수 있다. 

위처럼 클래스를 사용하면 추후 변경해야 Banana의 텍스트의 스타일을 변경하기 위해 class명을 변경하면 쉽게 update가 가능하다.




CSS Class에 여러개의 Style Multiple Elements를 사용해보자.

<p class="blue-text">Banana Paragraph</p>를 하면 CSS class를 적용할 수 있다. 




자 그럼 이제 font-size를 변경해보자.

CSS property로 font-size를 사용할 수 있다.

h1 {

    font-size: 30px;

}



아래와 같이 해주면, p element의 font-size만 변경되는 것을 볼 수 있다.

<style>

  .red-text {

    color: red;

  }

  p {

    font-size: 16px;

  }

</style>


<h2 class="red-text">CatPhotoApp</h2>


<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>


<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>



Element의 font를 변경하고 싶으면 font-family의 property를 사용하면된다. (모든 브라우저에서 지원하는 default fonts :Serif, Sans-serif, Monospace)


p {

    font-size: 16px;

    font-family: Monospace;

  }




자 그렇다면 이제 Google Font를 Import해보자.

Lobster font를 가져오기 위해 HTML에 load하는 코드를 작성해야 합니다. 

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

이제는 Lobster를 font-fmaily로 가져올 수 있습니다. 




그렇다면 브라우저마다 지원하는 텍스트가 있을텐데, 만약 지원을 안하면 어떻게 해야하는가

그럴때 다른폰트로 degrade한다 라는 표현을 사용한다. 만약 Hevetica라는 폰트를 사용하려고 하는데, 지원하지 않는다? 그럴때는

p {

    font-family: Helvetica, Sans-Serif;

}

라고 입력해주면, Sans-Serif로 degrade를 해준다.




이미지를 Website에 넣어보자.

이미지를 웹사이트에 넣기 위해서는 img element를 사용하면된다. specific image의 URL을 가리키기 위해서는 src의 attribute를 사용하면 된다. 

<img src="https://www.your-image-source.com/your-image.jpg">


이미지를 넣었다면, 이제 사이즈를 조절할 줄 알아야겠지요.

CSS에서 with라는 property는 element의 넓이를 조절해주는 역할을 한다. 사이즈의 단위는 px(pixels)을 사용한다.

CSS style로 larger-image와 smaller-image를 만들어서 사용하면 통일된 이미지의 크기로 화면에 출력이 가능하다.

<style>

.larger-image {

    width: 500px;

  }

  .smaller-image {

    width: 100px;

  }

</style>

<img class=smaller-image src="https://bit.ly/fcc-relaxing-cat">





Element에 Border Around를 추가해보자. 

CSS boarder는 style, color 그리고 width라는 properties를 가지고 있다. 

만약 우리가 빨간색의 5pixel의 border을 만들고 싶다면

<style>

    .thin-red-border {

        border-color: red;

        border-width: 5px;

        border-style: solid;

    }

</style>

<img class="smaller-image thin-red-border" src="https://bit.ly/fcc-relaxing-cat">

여기서 만약에 multiple class를 지정해주기 위해서는 space를 seperate하면 된다.

<img class="class1 class2">





Border Round를 부드럽게 하기 Border Radius

CSS의 border-radius property를 사용해서 corners를 round out할 수 있다. 

.thick-green-border {

    border-color: green;

    border-width: 10px;

    border-style: solid;

    border-radius: 10px;

  }


여기서 pixel을 사용하지 않고 퍼센트(%)를 사용해서도 가능하다.





HTML의 a elements는 anchor elements 의 약자이다. 

현재 사이트에서 외부에 있는 content를 연결하는데 사용한다. 

<p><a href='http://freecatphotoapp.com'>cat photos</a></p>

내부에 있는 텍스트에 anchor element를 포함하기 위해서는 아래오 같이 작성

<p>click here for <a href="http://www.freecatphotoapp.com">cat photos</a></p>



Dead Links를 만들기 위해서는 # (Hash Symbol)을 사용하면 된다. 



이미지에 Link를 삽입하는 방법

<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat"></a>


alt attribute는 alt text라고 불리운다. 이미지로딩이 실패하면 화면에 뿌려주는 것을 말한다. 화면에 표시가 안되거나, 사용자가 그림을 이해하기 위해 중요한 역할을 한다. blind or visually impaired 사용자에게 도움을 준다. search engines에서도 alt attribute의 값을 보고 검색을 한다. 

모든 이미지가 alt attribut를 가져야만 한다. 




Bulleted Unordered List 만들기

HTML에는 unordered lists, bullet point-style lists를 만들기 위한 special element를 가지고 있다.

unordered lists는 <ul>의 element로 시작한다. ul element안에는 여러개의  li element가 포함되어 있다. 

예를들면

<ul>

    <li>banana</li>

    <li>apple</li>

</ul>



Ordered List 만들기

ordered lists, numbered-style lists를 만들기 위해서 <ol>과 <li> 를 사용한다. 

예를 들어

<ol>

    <li>banana</li>

    <li>apple</li>

    <li>melon</li>

<ol>







Text Field 만들기

사용자로 입력을 받을 수 있는 좋은 방법이 바로 Text Field를 사용하는 것이다. 

<input type="text"> input element는  self-closing 한다. 


TextField에 Placeholder Text추가하기. (hint text와 유사한)

사용자가 무언가를 입력하기 전에 input에 나타는 텍스트를 Placeholder text라고 한다.

<input type="text" placeholder="this is placeholder text"> placeholder는 attribute 






Form Element 만들기

데이터를 서버로 전송하기 위해서는 form element action을 사용하면 할 수 있다.

<form action="/url-where-you-want-to-submit-form-data"/</form>

<form action="/submit-cat-photo"><input type="text" placeholder="cat photo URL"></form>


form에 submit버튼을 추가해보자. 버튼을 눌렀을때 form에서 특정 URL로 데이터가 전송된다. form의 action attribute와 함께 

<button type="submit">this button submits the form</button>

<form action="/submit-cat-photo"> 

  <button type="submit">Submit</button>

  <input type="text" placeholder="cat photo URL">

</form> 




Use HTML5 to Require a Field

input element에서 required를 사용하면, 유저는 field가 완성되기 전에는 submit할 수 없다.

만약 그냥 submit을 누르게 되면 

<input type="text" placeholder="cat photo URL" required>

구글 크롬 기준



그럼 Radio Buttons을 만들어보자

Radio Button은 오직 한개의 정답을 요구할때 사용한다. (name은 같을 수 있다.)

<label><input type="radio" name="indoor-outdoor"> Indoor</label>

<label><input type="radio" name="indoor-outdoor"> Outdoor</label>


Set of Checkboxes 만들기

한개 이상의 정답을 요구할때 사용한다. (name은 같을 수 있다.)

<label><input type="checkbox" name="personality"> 1</label>

<label><input type="checkbox" name="personality"> 2</label>

<label><input type="checkbox" name="personality"> 3</label>


default값 설정하는 방법

h1은 거의 제목을 사용할때 사용하고, h2같은 경우에는 부-제목을 쓸때 사용합니다. 

p는 paragraph의 약자로서 하나의 문단을 나타냅니다. 


<!-- --> 주석으로 사용합니다.


텍스트에 색 변경하기.

<h2 style="colorr:blue">Blue Color</h2>



이때 모든 텍스트에 색을 변경하기 위해서는 한줄 한줄 쓰기에는 많은 부담이 있습니다. 

그래서  등장한게 CSS입니다. CSS는 Cascading Style Sheets의 약자입니다. 


HTML코드에 스타일을 입히기 위해서는

<style>

</style>

 여기서 이제  h2요소에 대해서 CSS selector를 만들어야 합니다. 


<style>

    h2 {color:red;}

</style>


<h2>Blue Color</h2>



그렇다면 항상 사용하는 style을 CSS Class로 만들어서 Element에 Style을 적용하면 조금더 효율적일 것이다.

<style>

    ,blue-text {

        color: blue;

    }

</style>

blue-text의 CSS class를 생성했다.

<h2 class="blue-text">Banana</h2>를 하면 CSS class를 적용할 수 있다. 

위처럼 클래스를 사용하면 추후 변경해야 Banana의 텍스트의 스타일을 변경하기 위해 class명을 변경하면 쉽게 update가 가능하다.




CSS Class에 여러개의 Style Multiple Elements를 사용해보자.

<p class="blue-text">Banana Paragraph</p>를 하면 CSS class를 적용할 수 있다. 




자 그럼 이제 font-size를 변경해보자.

CSS property로 font-size를 사용할 수 있다.

h1 {

    font-size: 30px;

}



아래와 같이 해주면, p element의 font-size만 변경되는 것을 볼 수 있다.

<style>

  .red-text {

    color: red;

  }

  p {

    font-size: 16px;

  }

</style>


<h2 class="red-text">CatPhotoApp</h2>


<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>


<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>



Element의 font를 변경하고 싶으면 font-family의 property를 사용하면된다. (모든 브라우저에서 지원하는 default fonts :Serif, Sans-serif, Monospace)


p {

    font-size: 16px;

    font-family: Monospace;

  }




자 그렇다면 이제 Google Font를 Import해보자.

Lobster font를 가져오기 위해 HTML에 load하는 코드를 작성해야 합니다. 

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

이제는 Lobster를 font-fmaily로 가져올 수 있습니다. 




그렇다면 브라우저마다 지원하는 텍스트가 있을텐데, 만약 지원을 안하면 어떻게 해야하는가

그럴때 다른폰트로 degrade한다 라는 표현을 사용한다. 만약 Hevetica라는 폰트를 사용하려고 하는데, 지원하지 않는다? 그럴때는

p {

    font-family: Helvetica, Sans-Serif;

}

라고 입력해주면, Sans-Serif로 degrade를 해준다.




이미지를 Website에 넣어보자.

이미지를 웹사이트에 넣기 위해서는 img element를 사용하면된다. specific image의 URL을 가리키기 위해서는 src의 attribute를 사용하면 된다. 

<img src="https://www.your-image-source.com/your-image.jpg">


이미지를 넣었다면, 이제 사이즈를 조절할 줄 알아야겠지요.

CSS에서 with라는 property는 element의 넓이를 조절해주는 역할을 한다. 사이즈의 단위는 px(pixels)을 사용한다.

CSS style로 larger-image와 smaller-image를 만들어서 사용하면 통일된 이미지의 크기로 화면에 출력이 가능하다.

<style>

.larger-image {

    width: 500px;

  }

  .smaller-image {

    width: 100px;

  }

</style>

<img class=smaller-image src="https://bit.ly/fcc-relaxing-cat">





Element에 Border Around를 추가해보자. 

CSS boarder는 style, color 그리고 width라는 properties를 가지고 있다. 

만약 우리가 빨간색의 5pixel의 border을 만들고 싶다면

<style>

    .thin-red-border {

        border-color: red;

        border-width: 5px;

        border-style: solid;

    }

</style>

<img class="smaller-image thin-red-border" src="https://bit.ly/fcc-relaxing-cat">

여기서 만약에 multiple class를 지정해주기 위해서는 space를 seperate하면 된다.

<img class="class1 class2">





Border Round를 부드럽게 하기 Border Radius

CSS의 border-radius property를 사용해서 corners를 round out할 수 있다. 

.thick-green-border {

    border-color: green;

    border-width: 10px;

    border-style: solid;

    border-radius: 10px;

  }


여기서 pixel을 사용하지 않고 퍼센트(%)를 사용해서도 가능하다.





HTML의 a elements는 anchor elements 의 약자이다. 

현재 사이트에서 외부에 있는 content를 연결하는데 사용한다. 

<p><a href='http://freecatphotoapp.com'>cat photos</a></p>

내부에 있는 텍스트에 anchor element를 포함하기 위해서는 아래오 같이 작성

<p>click here for <a href="http://www.freecatphotoapp.com">cat photos</a></p>



Dead Links를 만들기 위해서는 # (Hash Symbol)을 사용하면 된다. 



이미지에 Link를 삽입하는 방법

<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat"></a>


alt attribute는 alt text라고 불리운다. 이미지로딩이 실패하면 화면에 뿌려주는 것을 말한다. 화면에 표시가 안되거나, 사용자가 그림을 이해하기 위해 중요한 역할을 한다. blind or visually impaired 사용자에게 도움을 준다. search engines에서도 alt attribute의 값을 보고 검색을 한다. 

모든 이미지가 alt attribut를 가져야만 한다. 




Bulleted Unordered List 만들기

HTML에는 unordered lists, bullet point-style lists를 만들기 위한 special element를 가지고 있다.

unordered lists는 <ul>의 element로 시작한다. ul element안에는 여러개의  li element가 포함되어 있다. 

예를들면

<ul>

    <li>banana</li>

    <li>apple</li>

</ul>



Ordered List 만들기

ordered lists, numbered-style lists를 만들기 위해서 <ol>과 <li> 를 사용한다. 

예를 들어

<ol>

    <li>banana</li>

    <li>apple</li>

    <li>melon</li>

<ol>







Text Field 만들기

사용자로 입력을 받을 수 있는 좋은 방법이 바로 Text Field를 사용하는 것이다. 

<input type="text"> input element는  self-closing 한다. 


TextField에 Placeholder Text추가하기. (hint text와 유사한)

사용자가 무언가를 입력하기 전에 input에 나타는 텍스트를 Placeholder text라고 한다.

<input type="text" placeholder="this is placeholder text"> placeholder는 attribute 






Form Element 만들기

데이터를 서버로 전송하기 위해서는 form element action을 사용하면 할 수 있다.

<form action="/url-where-you-want-to-submit-form-data"/</form>

<form action="/submit-cat-photo"><input type="text" placeholder="cat photo URL"></form>


form에 submit버튼을 추가해보자. 버튼을 눌렀을때 form에서 특정 URL로 데이터가 전송된다. form의 action attribute와 함께 

<button type="submit">this button submits the form</button>

<form action="/submit-cat-photo"> 

  <button type="submit">Submit</button>

  <input type="text" placeholder="cat photo URL">

</form> 




Use HTML5 to Require a Field

input element에서 required를 사용하면, 유저는 field가 완성되기 전에는 submit할 수 없다.

만약 그냥 submit을 누르게 되면 

<input type="text" placeholder="cat photo URL" required>

구글 크롬 기준



그럼 Radio Buttons을 만들어보자

Radio Button은 오직 한개의 정답을 요구할때 사용한다. (name은 같을 수 있다.)

<label><input type="radio" name="indoor-outdoor"> Indoor</label>

<label><input type="radio" name="indoor-outdoor"> Outdoor</label>


Set of Checkboxes 만들기

한개 이상의 정답을 요구할때 사용한다. (name은 같을 수 있다.)

<label><input type="checkbox" name="personality" checked> 1</label> 










Single Div Element에 Nest Many Elements

div element는 division element로 다른 elements를 container역할을 하는데 사용한다.

CSS를 사용할때 div에 있는 모든 elements에 style이 적용이 가능하기 때문에 매우 유용하다.


그렇다면 여러개의 elements의 집합이 있는 div element의 색을 변경하기 위해서는 

CSS에서는 background-color의 property는 배경색을 변경할때 사용한다.

style {

    .green-background {

        background-color: green;

    }

}




Element에 ID를 set하기

HTML element는 class와 유사하게 id attribute를 가질 수 있다. JQuery를 배우면 id attributes의 여러가지 장점을 배울 수 있다. 

id attribute는 말 그대로 unique해야 한다. 하지만 Browser에서는 id를 unique를 강제로 하지 않는다. 

<form action="/submit-cat-photo" id="cat-photo-form">

  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>

  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>

  <label><input type="checkbox" name="personality" checked> Loving</label>

  <label><input type="checkbox" name="personality"> Lazy</label>

  <label><input type="checkbox" name="personality"> Energetic</label>

  <input type="text" placeholder="cat photo URL" required>

  <button type="submit">Submit</button>

</form>




ID attribute를 사용해서 Element에 style 적용하기

id attributes의 class들 처럼 사용이 가능한것 또한 장점이다.

#cat-photo-element {

    background-color: green;

}

id는 CSS에서 style에서 선언하기 위해서는 #을 사용한다.  반면 class는 .을 사용한다.








Element의 padding을 조정해보자.

각 HTML의 element를 둘러싸고 있는 공간을 컨트롤을 하기 위한 properties는 padding, margin 그리고 border이다.



<style>

  .injected-text {

    margin-bottom: -25px;

    text-align: center;

  }


  .box {

    border-style: solid;

    border-color: black;

    border-width: 5px;

    text-align: center;

  }


  .yellow-box {

    background-color: yellow;

    padding: 10px;

  }

  

  .red-box {

    background-color: red;

    padding: 20px;

  }


  .green-box {

    background-color: green;

    padding: 10px;

  }

</style>

<h5 class="injected-text">margin</h5>


<div class="box yellow-box">

  <h5 class="box red-box">padding</h5>

  <h5 class="box green-box">padding</h5>

</div>


padding은 element의 border와  element사이의 공간의 양을 조정할때 말을 한다. 녹색 박스와 빨간색 박스는 노란 박스안에 있는 것을 볼 수 있다. 빨간 박스는 초록색 박스보다 더 많은 padding을 갖고 있다. 만약 초록박스의 padding을 증가시키면 border와 텍스트 padding사이의 거리는 증한다. 



margin은 element의 border와 둘러싸고 있는 요소들의 거리를 조절할 때 사용한다. 

빨간박스는 초록색 박스보다  더 많은 margin을 갖고 있다.

만약 margin값이 negative 하면 element는 더 커질 것이다. 


Element의 각 side의 padding을 다루게 주기.

CSS padding을 조절하기 위한 properties는 padding-top, padding-right, padding-bottom, 그리고 padding-left가 있다. 

CSS margin을 조절하기 위한 properties는 margin-top, margin-right, margin-bottom, 그리고 margin-left가 있다.


위 처럼 매번 top, right, bottom, left를 쓰면 너무 번거롭다. 그렇기 때문에

Clockwise Notation을 사용하면 쉽게 할 수 있다. (시계 방향으로 작성하면 된다해서)

padding : 10px 20px 10px 20px

margin : 10px 20px 10px 20px











HTML Body Element Style 적용하기

CSS의 inheritance라는 것을 들어 보았는가?

모든 HTML page는 body를 갖고 있다. body 전체 스타일을 지정하기 위해서는

<style>

  body {

    background-color: black;

    font-family: Monospace;

    color: green;

  }

</style>

<h1>Hello World!</h1>


Prioritise 

종종 HTML element들은 multiple styles을 받아 다른 style과 충돌이 나는 경우가 있다.

해결하는 방법은 총 3가지다. 

1. CSS에서 style 선언 순서를 중요하게 (가장 최근에 선언된게 override)

2. id attribute를 사용해 class attribute를 override

3. in-line style을 적용해 모든 CSS를 override 

4. !important를 사용


<style>

  body {

    background-color: black;

    font-family: Monospace;

    color: green;

  }

 .pink-text {

    color: pink;

  }

  .blue-text {

    color: blue;

  }

</style>

<h1 class=pink-text>Hello World!</h1>

파란색글씨

<h1 class="pink-text blue-text">Hello World!</h1>

<h1 class="blue-text pink-text">Hello World!</h1>

class의 순서는 의미가 없다.

그 이유는 우선순위는 CSS의 선언 순서가 중요한것이다. 


즉, Browser에서는 CSS를 읽을때 top에서 bottom의 방향으로 읽는 다는 것을 증명할 수 있다. 

그 의미는 가장 마지막에 선언한 CSS를 사용한다 (충돌이 날때는)


그렇다면 override되는 CSS에서 id는 class와 다르게 항상 중요하게 여겨지기 때문에 순서가 의미가 없다. 

override를 무시하는 또 하나의 빵법은 in-line style을 사용하면 된다. (CSS에 선언된 모든 style element를 override 해버린다.)

<h1 style="color: red" class="brown-text blue-text">hi banana</h1>



우리는 많은 CSS libraries를 사용할 것이다. 그러면 나의 CSS가 override가 되는 경우가 있다. 이때는 !important를 사용하면 된다. 

예를 들어 color: red !important; 이렇게 사용하면 해당 클래스 또는 아이디의 style이 모든 style을 override한다.



hex code를 애용해 색 변경하기

CSS에서는 6 hexadecimal digits을 사용해 색을 나타낸다. #000000은 검정색을 나타낸다. 

background-color: #000000; 

background-color: rgb(0,0,0);

background-color: black;

#FF0000 #F00 같은 색으로 인식한다. (빨간색)





+ Recent posts