비트캠프 프론트엔드 및 벡엔드 개발자 Webapp css

webapp

 

css

html { 
  border-style: solid;
  border-color: blue;
  margin: 20px;
}

  body {
    border-style: double;
    border-color: red;
    margin: 10px;
  }
  
  div {
    border-style: dashed;
    border-width: 10px;
    border-color: red;
    padding: 10px;
    margin: 10px;
  }
  
  img, ul {
    border-style: dotted;
    /* margin: 0px; */
  }

test01_1.html -> CSS(Cascading Style Sheet)

          // 태그 이름으로 대상자 지정하기 // 태그명 {스타일명:값; 스타일명:값; ...}

          // CSS // HTML UI 컴포넌트(=태그)의 모양을 제어할 때 사용하는 기술

          // CSS 주석 // /* */ // 자바 주석과 같다. // 단, style 태그 안에서만 주효하다.

          // body 태그에서 사용하면 주석이 아니라, 정상적으로 출력된다. // style 태그 안에서만 쓰자

          // 실렉터(selector) // 스타일 적용할 대상자를 지정하는 문법 // 위에서는 body div img,ul를 말한다.

          // 태그 이름으로 대상자 지정하기 // 태그명 {스타일명:값; 스타일명:값; ...}

          // CSS는 HTML 위에 나타난다. // html 태그로 값을 줘보면 알 수 있다.

          // border-style // 테두리 // solid, double, dashed, dotted ...

          // border-width // 테두리의 두께 // px

          // border-color // 테두리의 색 // red, blue, green ...

          // margin // 해당 셀렉터의 바깥 기준으로 여백 // px

          // padding // 해당 셀렉터의 안쪽 기준으로 여백 // px

test01_2.html -> ID 값으로 대상자 지정하기 // #아이디 {스타일명:값; 스타일명:값; ...}

<div id="menu">
<img img="menu" src='http://bitcamp.co.kr/resources/images/logo/head_logo.gif'>

          // 위는 잘못 된 예이다. // 태그가 다르더라도, id의 이름은 달라야 한다. // id는 문서에서 유일해야한다.

  #content {
    background-color: gray;
    color: red;
  }
  
  #menu, #footer {
    background-color: yellow;
    color: blue;
  }

          // color // 폰트의 색 // red, blue, green ...

          // #id // id를 가진 특정 영역에만 CSS를 적용한다.

          // 단, 버튼 등은 별도로 CSS를 적용해야 한다. //

test01_3.html -> 분류명(class)으로 대상자 지정하기 // .분류명 {스타일명:값; 스타일명:값; ...}

  .member {
    display: none;
  }
 
  .c1 {
    color: red;
  }
  
  .c2 {
    font-weight: bold;
    text-decoration: underline;
  }
  
  .c1, .c2 {
    border-style: double;
  }

          // display: none; // 나타나지 않게 한다.

          // 위에서 // .member라는 클래스의 해당하는 애들은 안보이게 한다.

<ul>
  <li class="guest">교육안내</li>
  <li class="guest member">교육과정</li>
  <li class="member">수강신청</li>
  <li class="guest">온라인상담</li>
  <li class="member">커뮤니티</li>
</ul>

          // 위는 html 이다. // 교육과정, 수강신청, 커뮤니티는 display: none; 이다.

          // <li class="guest member student"> // 공백 한칸을 띄어서 여러개의 class를 지정할 수 있다.

          // 같은 레벨에서 // html에서 class 선언 순서는 중요하지 않다. // css에서의 선언된 순서가 중요하다.

          // css에서 먼저 선언된 태그가 적용되고, 나중에 선언된 태그가 덮어쓴다.

          // 즉 나중에 선언된 태그가 적용된다. 

          // 다른 레벨에서 // 태그 < 클래스 < #id // 태그가 먼저 적용되고, class가 덮어쓰고, #id가 덮어쓴다.

          // 더욱 구체적으로 어떤 영역을 지정하였기 때문이라고 생각하자.

          // font-weight // 폰트의 굵기를 말한다. // 100, 200, ... 900 까지 9단계가 있다. // 120 같은 숫자는 안된다.

          // 실무에서는 bold, bolder등 미리 사이즈가 정해져 있는 것을 사용한다. // 직접 숫자로 지정하지 않는다.

          // text-decoration // 밑줄을 말한다.

test01_4.html -> 의사 실렉터(pseudo selector) // 대상자:상태명 {스타일명:값; 스타일명:값; ...}

  li:hover {
    border: 1px solid red;
    background-color: black;
    color: white;
    margin: 3px;
  }

           // hover // 마우스 커서가 li 태그 위에 있는 상태에 적용되는 태그

           // border: 1px solid red; // border-style, width, color를 한 태그로 처리할 수 있다.

           // 값의 형식이 다르기 때문에 어떤 것을 지정했는지 알 수 있기 때문

test01_5.html -> 모든 태그를 대상자로 설정하기 // * {스타일명:값; 스타일명:값; ...}

  * {
    border: 1px dotted red;
    margin: 3px;
  }

test02_1.html -> 실렉터(selector) // 콤마(,) 사용 // 여러 개의 대상자를 지정할 때 콤마로 나열한다.

  .c1, p, img, #menu {
    border: 1px red dashed;
    margin: 10px;
  }

           // .c1, p, img, #menu // ,로 대상자를 여러개 지정할 수 있다.

test02_2.html -> 실렉터(selector) // 콤마(,) 사용 // hover에도 적용 가능.

  .c2, #footer, h1, p, li:hover {
    border-width: 1px;
    border-color: red;
    border-style: dashed;
    margin: 10px;
  }

test02_3.html -> 실렉터(selector) // 자손태그 지정 // 특정 대상자를 조상으로 갖는 태그를 지정하는 방법

           // 조상대상자 적용대상자 {...} // ,를 사용하면 여러 대상자를 적용하는 것이다. // 공백이라는거 유의하기

  #content li {
    border-width: 1px;
    border-color: red;
    border-style: dashed;
    margin: 10px;
  }

           // #content의 li 태그한테 적용한다는 이야기이다.

test02_4.html -> 실렉터(selector) // 자식태그 지정 // 특정 대상자를 부모로 갖는 태그를 지정하는 방법

           // 부모 > 적용대상자 {...} //

  ul > li  {
    border-width: 1px;
    border-color: red;
    border-style: dashed;
  }

<ul>
  <li class="c1">교육안내</li>
  <li class="c1">교육과정</li>
  <li class="c2">수강신청</li>
  <li class="c2">온라인상담</li>
  <li class="c2">커뮤니티
    <ol>
      <li>게시판</li>
      <li>QnA</li>
      <li>방명록</li>
      <li>FAQ</li>
    </ol>
  </li>
</ul>

           // > 적용 전 // 교육안내부터 커뮤니티까지 & 게시판부터 FAQ까지 적용된다. // ul 밑의 li 태그를 말하기 때문

           // > 적용 후 // 교육안내부터 커뮤니티까지만 적용된다. // ul 밑의 li 태그만 말하기 때문에 ol 밑 태그는 미적용

 

test02_5.html -> 실렉터(selector) // 특정 대상자 다음에 오는 태그를 지정하기

           // 형 + 다음동생대상자 {...} // 특정 대상자를 바로 위의 형으로 갖는 경우.

  img + ul {
    border-width: 1px;
    border-color: red;
    border-style: dashed;
  }

<div id="menu">
<img src='http://bitcamp.co.kr/resources/images/logo/head_logo.gif'>
<ul>
  <li class="c1">교육안내</li>
  <li class="c1">교육과정</li>
  <li class="c2">수강신청</li>
  <li class="c2">온라인상담</li>
  <li class="c2">커뮤니티
    <ol>
      <li>게시판</li>
      <li>QnA</li>
      <li>방명록</li>
      <li>FAQ</li>
    </ol>
  </li>
</ul>
<button>로그인</button>
<button>회원가입</button>
</div>

           // img + ul // img 다음에 오는 ul에 적용한다는 의미이다. // 

           // 교육안내부터 FAQ까지(ul 영역에 해당하는) 전체적인 테두리에 적용된다 // 

test03_1.html -> 실렉터(selector) // 특정 조건을 갖는 대상자를 지정하기

           // 대상자#아이디 {...} // 대상자.분류명 {...} // 대상자:상태명 {...} // 대상자[속성명] {...}

  div#content {
    border-width: 1px;
    border-color: red;
    border-style: dashed;
    margin: 10px;
  }
  ul.c1.c2 {
    background-color: yellow;
  }

  div#menu li.c2 {
    display: none;
  }

           // div#content // content라는 id(이름)를 가진 div에 적용한다.

           // div #content // div안에서 #content라는 id를 가진 태그에 적용한다.

           // ul.c1 // c1에 속해있는 ul을 찾는다.

           // ul .c1 // ul의 자손중에서 c1을 찾는다.

           // ul.c1.c2 // c1과 c2 모두에 속해있는 ul을 찾는다.

           // ul .c1 .c2 // ul의 자손중에서 c1을 찾고, 해당 c1의 자손중에서 c2를 찾는다.

           // div#menu li.c2 // menu라는 id를 가진 div에서 c2에 속해있는 li를 찾는다.

test03_2.html -> 실렉터(selector) // 특정 조건을 갖는 대상자를 지정하기

  input[type="text"] {
    background-color: yellow;
  }

  input[value][type='text'] { 
    border: 3px solid red;
  }

           // input[type="text"] // input에서 type이 text인 것에 적용

           // input[value] // input의 value가 지정되어 있는 것에 적용 // 버튼에도 적용된다.

           // input[value][type='text'] // input의 value가 지정되어있고, type이 text인 것에 적용

test03_3.html -> 실렉터(selector) // 특정 조건을 갖는 대상자를 지정하기

  input[name^="office"] {
    background-color: yellow;
  }

  input[name$="fax"] {
    color: red;
  }

           // input[name^="office"] // input name이 office로 시작하는 경우를 말한다. // ^=

           // input[name$="fax"] // input name이 fax로 끝나는 경우를 말한다. // $=

test03_4.html ->

  div:nth-child(2) {
    border: 1px dashed blue;
  }

  li:first-child { 
    background-color: gray;
  }

  li:hover { 
    text-decoration: underline;
  }

  a:visited {
    color: gray;
  }

  a:link {
    color: red;
  }

  a:active {
    background-color: yellow;
  }

  a:focus {
    border: 2px inset gray;
    font-size: 150%;
  }
  
  .b1:focus {
    background-color: blue;
    color: yellow;
  }

  input:focus { 
    background-color: green;
  }

  button:focus {
    background-color: red;
  }

           // div:nth-child(2) // div가 두번째로 등장할 때, // 두번째 div가 아니다. // 두번째 태그가 div일때 적용된다.

           // li:first-child // 자식들 중에서 첫째인 li //  어떤 태그든 안에서 첫째인 li가 다 적용된다.

           // li:hover // 마우스 커서가 올려져있는 li

           // a:visited // 방문한 적이 있는 링크 

           // a:link // 방문한 적이 없는 링크

           // a:active // 활성 상태인 경우 // 마우스를 누르고 있을 때라고 생각하면 편한다.

           // a:focus // 키보드를 입력받을 수 있는 상태 //

           // .b1:focus // .b1에 속해있는 태그가 키보드를 입력받을 수 있는 상태일 때

           // input:focus // input 태그가 키보드를 입력받을 수 있는 상태일 때

           // button:focus가 가장먼저 적용되고, 더 세부 태그인 .b1:focus가 적용된다. // 덮어쓴다.

test03_5.html ->

  h1:nth-child(2) { /* 첫 번째 대상을 지정한다 */
    background-color: gray;
  }
  h1:nth-child(10) {
    background-color: red;
  }
  h1:nth-child(2n) {
    border-left: 10px solid black;
  }

  h1:nth-child(2n + 1) {
    border-right: 10px solid yellow;
  }

           // h1:nth-child(2) // 두번째 태그가 h1일 때 적용된다. // 두번째가 다른 태그면 적용 안된다.

           // h1:nth-child(2n) // 2의 배수의 태그가 h1일 때 적용 // n은 1부터 시작 // 2부터 적용

           // h1:nth-child(2n + 1) // 2의 배수+1의 태그가 h1일 때 적용 // 3부터 적용

test04_1.html -> 스타일 상속 // 

           // 스타일 중에서 자손 태그로 값을 자동으로 상속하는 것이 있다. // ex) 폰트, 색상 등

           // 지정된 태그에 대해서만 스타일이 적용되는 것이 있다. // ex) 테두리, 패딩, 마진

  body {
    color: red;
  }
  #menu {
    border: 3px solid navy;
  }
  #menu ul {
    border: 3px solid navy;
  }

  #menu a {
    border: 3px solid navy;
  }

           // 그냥 이전에 다 배웠던거라 설명할 게 없다.

test04_2.html -> 스타일 적용 순서

           // specificity 값? //

           // 실렉터의 우선 순위를 지정하기 위해 부여된 값 // 

           // 한 태그에 같은 스타일이 중복 지정된 경우? // 

           // specificity 값을 계산하여 값이 높은 스타일이 적용된다. // 스타일을 선언한 순서 보다 계산 값이 우선한다.

           // * : 0 // 태그 : 1 // 클래스 : 10 // 아이디 : 100 // 인라인스타일 : 1000

/* = 0 */
  * { 
    border: 1px solid black;
    background-color: gray;
  }

/* = 1 */
  div { 
    width: 100px;
    height: 100px;
    margin: 10px;
  }


/* = 1 */
  div { 
    width: 200px; /* 같은 점수일 때 나중에 지정된 스타일이 기존 스타일을 덮어쓴다 */
    background-color: green;
  }

/* = 1 */
  div { 
    background-color: navy;
  }

/* = 10 */
  .c1 { 
    background-color: blue;
  }

/* = 100 */
  #d2, #d3 { 
    background-color: red;
  }


/* = 1 + 100 = 101 */
  div#d2 {  
    background-color: ivory;
  }

<div>d0</div>
<div class="c1">d1</div>
<div class="c1" id="d2" style="background-color: yellow;">d2</div>
<div class="c1" id="d3" >d3</div>

           // 위 d2에서 background-color 설정이 인라인스타일이다. // line 안에(in) style을 적용했다는 의미

           // 따라서 위에서 뭘 설정해도 저 d2의 배경색은 엘로우이다. // 1000점을 어떻게 이기나..

test04_3.html -> 스타일 적용 순서

           // specificity 값이 같을 때?

           // 나중에 선언된 스타일이 이전에 선언한 스타일을 덮어쓴다.

           // 같은 스타일을 덮어쓴다는 것이다. // 다른 스타일은 아니다.

           // CSS 작성 순서 // 

           // 우선 순위에 낮은 스타일부터 작성한다. // 아래로 내려 갈수록 우선 순위가 높은 스타일을 작성하라.

  div {
    border: 1px solid black;
    margin: 10px;
  }


  /* specificity = 100 + 1 + 100 = 201 */
  #d2 div#d3 {
    background-color: red;
    color: white;
  }

  /* specificity = 100 + 100 = 200 */
  #d1 #d3 {
    background-color: blue;
  }

test05_1.html -> 테두리 다루기

  #menu {
    border-style: solid;
    border-width: 4px;
    border-color: red;
  }
  
  #footer { /* border의 style, width, color를 한 번에 지정할 수 있다*/
    border: red solid 4px; /* 값을 지정하는 순서는 없다.*/
  }

  #content {
    border-top-width: 2px;
    border-top-style: dotted;
    border-top-color: blue;
    border-bottom: dashed 4px orange;
    border-left: solid 6px green;
    border-right: red dotted 40px;
  }

  p {
    border: 1px solid black;
  }

test05_2.html -> 안쪽 여백 주기

  div {
    border: 2px solid gray;
  }

  #menu {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
  }

  #content {
    /* 순서 => 시계 침이 도는 방향(12, 3, 6, 9)*/
    padding: 10px 20px 30px 40px; 
  }

  #footer {
    /* 순서: (top/bottom) (left/right)*/
    padding: 10px 50px; 
  }

  body {
    border: 5px solid red;
    /* 모든 방향 */
    padding: 10px; 
  }

  h1, ul {
    border: 1px solid red;
    margin: 0px;
  }

test05_3.html -> 바깥쪽 여백 주기

           // 테두리 바깥쪽에 여백을 지정한다.

           // 좌,우 여백은 그대로 유지한다. 옆의 태그의 여백과 겹치지 않는다.

           // 위,아래 여백은 다른 태그의 여백과 겹쳐서 표현한다. // 여백이 큰 값으로 겹친다.

  body {
    border: 2px solid blue;
  }
  div {
    margin: 10px;
    border: 2px solid gray;
  }

  a {
    border: 1px solid red;
    margin: 10px;
  }

  #content {
    margin-top: 20px;
    border-width: 10px;
    border-style: dashed;
    border-color: navy;
    background-color: yellow;
  }

test05_4.html -> 태그 너비와 높이

           // content-box(기본) // width = 콘텐츠 너비 // height = 콘텐츠 높이

           // border-box //

           // width = 콘텐츠너비 + 좌,우 패딩너비 + 좌,우 테두리너비 + 좌,우 마진너비

           // height = 콘텐츠높이 + 좌,우 패딩높이 + 좌,우 테두리높이+ 좌,우 마진높이

  body {
    border: solid 1px black;
    padding: 20px;
  }
  div {
    border: 10px solid red;
    padding: 30px;
    padding-right: 80px;
    margin: 10px;
    background-color: blue;
    color: white;
    width: 200px;
    height: 100px;
  }
  
  #menu {
    padding-right: 10px;
  }
  
  #content {
    background-color: gray;
    /* border-box 라고 설정하면 width, height는 
       콘텐트 크기가 아니라 박스 크기가 된다. */
    box-sizing: border-box;
  }
  
  #footer {
    background-color: yellow;
    border-width: 1px;
    box-sizing: border-box;
  }

           // div에서 witdh height는 content-box를 이야기 하는것이다.

           // 전체 박스 사이즈를 바꾸고 싶다면 해당 box를 border-box라고 명시해줘야한다.

test06_1.html -> 폰트 다루기

           // font-family : 폰트 그룹 // 

           // sans-serif(고딕체), serif(명조체), monospace(고정너비), cursive(흘림체), fantasy

           // font : 폰트 그룹에 속해 있는 폰트 //

           // sans-serif => 맑은 고딕, 돋움체, 굴림체, Arial 등 // serif => 궁서체, 바탕체, Times 등

           // monospace => monaco, consolas, Currier New 등 // cursive => 나눔 손글씨, 필기체 등

  #menu {
    font-family: '맑은 고딕', 굴림체, 'Apple SD Gothic Neo', sans-serif;
  }

  #content {
    font-family: 바탕체, 궁서체, AppleMyungjo, serif;
  }

  #footer {
    font-family: consolas, monaco, sans-serif;
  }

           // 의미 //

           // 맑은 고딕 폰트를 사용하라. 없다면 다음 폰트 사용하라. //

           // 모두 없다면 웹브라우저에 설정된 sans-serif 기본 폰트를 사용하라.

           // 일반적으로 window, apple(mac), lenux 순으로 폰트를 지정한다.

           // 폰트 이름에 공백이 들어간다면, '을 사용해서 구분해야 한다. // 공백이 없으면 안적어도 된다.

test06_2.html -> 폰트 크기

           // font-size // 폰트의 높이를 이야기 한다. // 미리 정의된 값과 숫자로 지정할 수 있다.

           // 미리 정의된 값 //  xx-small, x-small, small, medium, large, x-large, xx-large

  #menu {
    font-family: '맑은 고딕', 굴림체, 'Apple SD Gothic Neo', sans-serif;
    font-size: 120%;
  }

  #content {
    font-family: 바탕체, 궁서체, AppleMyungjo, serif;
  }

  #footer {
    font-family: consolas, monaco, sans-serif;
    font-size: 0.8em;
  }

           // 실무에서는 유지보수를 쉽게 하기 위해 기본 폰트 크기에 대해 비율로 지정한다.

test06_3.html -> 폰트 크기

           // 폰트 크기를 특정 숫자로 고정을 시키면 유지보수할 때 폰트의 크기를 변경하기가 번거로워진다.

           // 모든 스타일을 다 변경해야 하기 때문이다.

           // 폰트는 자동으로 자식 태그에게 상속하는 스타일이기 때문에 body에서 font-family를 지정한다.

           // 그리고, body에 폰트 크기를 지정한 다음, 나머지 태그에 대해서는 상대 크기를 지정한다.

           // font-size 상대 크기를 지정하는 문법 //

           // 몇 배수인지 지정 => 2.4em // %로 지정 => 240%

test06_4.html -> 폰트 기타 속성

           // font-weight // 폰트의 두께 지정

           // font-style // 폰트의 모양 지정. 예) italic, normal, oblique

           // italic // 폰트 파일에 있는 이탤릭체를 사용한다.

// oblique // 해당 폰트에 italic체가 없다면, 임의적으로 기울임을 만든다. // oblique와 italic체와 별다른 차이가 없다.

test06_5.html -> 텍스트 꾸미기

           // text-decoration //  none, underline(밑줄), through(중간줄)

           // text-align // center, end, start, left, right 등등

           // 미리 정의된 상수 값: aqua, black, white, gray 등 // wikipedia의 web color 참고

       // rgb(%, %, %): rgb(100%, 0%, 0%), rgb(0%, 0%, 100%) // rgb(0~255,0~255,0~255): rgb(255,0,0), rgb(0,0,255)

           // #RRGGBB : #FF0000(=#ff0000), #0000FF(=#0000ff) // #F56 : #FF5566의 단축 표현법

test07_2.html -> 배경 그림 지정하기(background-image)

           // url('이미지파일의 URL')

  #menu {
    background-image: url('img02.png');
    float: left;
  }
  #content {
    background-image: url('img02.png');
    float: left;
  }

test07_3.html -> 배경 그림 채우는 방법(background-repeat)

           // repeat(기본 방식으로 X,Y 축 모두 채운다), repeat-x(X 축으로만 채운다),

           // repeat-y(Y 축으로만 채운다), no-repeat(반복하지 않는다)

  #menu {
    background-image: url('img02.png');
    background-repeat: repeat-x;
    float: left;
  }
  #content {
    background-image: url('img02.png');
    background-repeat: repeat-y;
    float: left;
  }

test07_4.html -> 배경 위치 조정(background-position) // left/right top/bottom

           // left top을 기준으로 위치 이동 // -50px(왼쪽으로 50px 이동) 100px(아래로 100px 이동)

  #d1 {
    background-position: left top; /* 기본이 left top이다.*/
  }

  #d2 {
    background-position: top right;
  }

  #d3 {
    background-position: left bottom;
  }

  #d4 {
    background-position: right bottom;
  }

  #d5 {
    background-position: center top;
  }

  #d6 {
    background-position: right center;
  }

  #d7 {
    background-position: center center;
  }

  #d8 {
    background-position: -40px 50px;
  }

test07_5.html -> 배경 크기 조정(background-size)

  #d1 {
    background-size: 50% 200%;
  }

  #d2 {
    background-size: 50%;
  }

  #d3 {
    background-size: 50px 100px;
  }

  #d4 {
    background-size: 50px;
  }

  #d5 {
    background-size: 50% 100px;
  }

           // 50%(너비) 200%(높이) : 현재 태그의 너비나 높이에서 해당 비율을 점유하기

           // 50%(너비) : 너비를 기준으로 그림의 원래 비율에 맞춰 높이를 자동 계산하기

           // 원래 그림의 비율을 유지하기 때문에 그림이 찌그러지지 않는다.

           // 50px(너비) 100px(높이) : 직접 수치를 지정할 수 있다.

           // 50px(너비) : 높이는 그림 비율에 따라 자동 계산된다.

           // 50%(너비) 100px(높이) : %와 px을 섞을 수 있다.

test07_6.html -> 한 번에 배경을 설정하기(background)

           // div를 통해 한번에 배경을 설정해서 모든 div가 모든 배경을 가지게 만들 수 있다.

test07_7.html -> 배경 그림을 여러 개 설정하기(background)

 body {
    height: 300px;
    border: 2px solid red;
    background: url('img01.jpeg') no-repeat left top,
                url('img02.png') no-repeat left 80px top 50px;
    background-size: 100px, 50px;
  }

           // 먼저 나온게 위로가고 나중에 나온게 배경으로 깔린다.

test07_8.html -> 배경응용

  #email {
    width: 100px;
    background: no-repeat top right; 
    background-size: 16px;
    padding-right: 20px;
  }

<script>
var email = document.getElementById('email');
var btn = document.getElementById('signupBtn');

btn.addEventListener('click', function() {
  if (email.value == "hong@test.com") { 
    email.style["background-image"] = "url('no.jpeg')";
  } else {
    email.style["background-image"] = "url('ok.jpeg')";
  }

});

           // 자바스크립트 사용 //

           // DOM API를 이용하여 이메일 입력 상자를 알아낸다.

           // 사용자가 버튼을 클릭하는 사건(event)이 발생했을 때

           // 호출될 함수(event listener = event handler = callback)를 등록한다.

           // 입력 상자에 들어있는 값을 검사하여 이메일 중복 여부에 따라 아이콘을 출력한다.

           // 이 방식의 문제점 //

           // 각각의 이미지가 별도의 파일로 되어 있어, 파일을 받을 때 네트워크 오버헤드(overhead)가 커진다.

           // 즉 파일을 받기 위해 연결하고 연결을 끊는데 시간을 많이 소모한다.

           // 해결책 // 

           // 작은 이미지(bullet) 여러 개를 한 파일에 넣는다.

           // 출력할 때는 이 파일에 있는 그림의 위치를 조정해서 출력한다.

test07_9.html -> 배경응용

  #email {
  }
  #state {
    display: inline-block;
    height: 16px; 
    width: 16px; 
    background: url('img03.jpg') no-repeat 20px -1px; 
    background-size: 220px;
    box-sizing: border-box;
    position: relative;
    top: 5px;
    margin: 0 0 0 3px;
  }

<div id="d1">이메일: <input id="email" type="text"><div id="state"></div>abc</div>
<div>암호: <input id="pwd" type="password"></div>
<div><button id="signupBtn" type="button">회원가입</button></div>
</form>

<script>
var email = document.getElementById('email');
var state = document.getElementById('state');
var btn = document.getElementById('signupBtn');

btn.addEventListener('click', function() {
  if (email.value == "hong@test.com") {
    state.style.backgroundPosition = "-204px -1px";
  } else {
    state.style.backgroundPosition = "-167px -1px";
  }
});

</script>

           // 두 아이콘을 하나의 사진에 두고, 출력될 위치만 조정하게 한다. // 이미지 하나로 사용한다.

test07_10.html -> 배경응용

           // bullet 아이콘 폰트 파일을 이용하여 아이콘 출력하기

           // 장점 // 폰트이기 때문에 출력 속도가 빠르다.

           //단점 // 폰트이기 때문에 단색만 가능하다.

  @font-face {
    font-family: "myfont";
    src: url('icons.woff') format('woff');
  }

           // 폰트 그룹명을 설정한다. // url에 font가 들어있는 파일을 지정한다.

           // icons.woff는 폰트형식으로 아이콘이 저장되어있는 파일이다.

  #state {
    font-family: myfont;
    position: relative;
    top: 3px;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 2px;
    font-size: 20px;
  }

           // 미리 저장해둔 font를 불러온다.

<script>
var email = document.getElementById('email');
var state = document.getElementById('state');
var btn = document.getElementById('signupBtn');

btn.addEventListener('click', function() {
  if (email.value == "hong@test.com") {
    state.innerHTML = "&#61453;"; // 
    state.style["color"] = "#ff0000";
  } else {
    state.innerHTML = "\uf099"; //"&#61452;";
    state.style.color = "#00ffff";
  }
});

</script>

           // state.innerHTML = "가"; // 

           // state.innerHTML = "\uac01"; // 이스케이프(escape) 문자를 사용하여 지정하기

           // state.innerHTML = "&#xac02;"; // HTML에 미리 정의된 상수 값(html character entity)

           // state.innerHTML = "&#44036;"; // 10진수 html character entity 값

           // state.innerHTML = "&#61453;"; // 문자코드 표

           // state.innerHTML = "\uf099"; // "&#61452;"; // 문자코드표 유니코드

test07_11.html -> 배경응용

           // 제목 대신에 그림을 출력할 때 배경으로 처리한다.

           // 텍스트를 이용하여 제목 출력하면 화면이 단조롭다. // 단점

           // 검색 엔진에서 이 페이지의 주제가 뭔지 알아내기 쉽다. // 장점

  #logo {
    background-image: url('http://www.bitcamp.co.kr/images/logo.png');
    background-repeat: no-repeat;
    padding-top: 70px;
    height: 0px;  
    overflow: hidden;
  }

<h1><img src="http://www.bitcamp.co.kr/images/logo.png"></h1>

           // image 태그를 이용하여 제목 대신 그림을 출력한다.

           // 그림을 출력하면 화면은 이쁘다. // 장점

           // 검색엔진에서 페이지의 주제를 알아내기 어렵다. // 단점

<h1 id="logo">비트캠프</h1>

           // 검색 엔진이 이해할 수 있도록 콘텐츠를 작성한다. // 화면은 CSS의 배경으로 처리한다. // 해결

test08_1.html -> 테두리 다루기(border)

           // border-style // 테두리 모양 // solid, dashed, dotted 등

           // border-width // 테두리 두께 // thin, thick, 5px 등

           // border-color // 테두리 색상 // gray, rgb(100%, 0%, 0%), rgb(255, 0, 0), #ff0000

  #d1 { border-style: inset; }
  #d2 { border-style: outset; }
  #d3 { border-style: groove; }
  #d4 { border-style: ridge; }
  #d5 { border-style: solid; }
  #d6 { border-style: dashed; }
  #d7 { border-style: dotted; }
  #d8 { border-style: double; }

           // float // 가로로 공간이 되면 가로로 나오고, 안되면 다음 줄에 나오게 하는 것 // 자동정렬

           // inset // 들어간 것처럼 3D 효과주기

           // outset // 나온 것 처럼 3D 효과주기

           // groove // 테두리가 나왔다 들어간 것처럼 만들기

           // ridge // 테두리가 들어갔다 나온 것처럼 만들기

           // soild // 그냥 선

           // dashed // 띄엄띄엄 선

           // dotted // 동글동글 점선

           // double // 테두리가 두 줄

test08_2.html -> 테두리 다루기(border)

  #d1 {
    border-top-color: red;
    border-right-color: green;
    border-bottom-color: blue;
    border-left-color: yellow;
  }

  #d2 {
    border-color: red green blue yellow; /* 시계 방향 */
  }

  #d3 {
    border-color: red blue; /* 위/아래 왼쪽/오른쪽 */
  }

  #d4 {
    border-color: red; /* 모든 테두리 */
  }

test08_3.html -> 테두리와 여백

           // width와 height는 기본으로 콘텐츠의 너비, 높이를 가리킨다.

  #d1 {
    /* 기본이 콘텐츠의 너비, 높이 이다.*/
  }

  #d2 {
    /* width, height의 값이 콘텐츠의 너비, 높이로 설정한다. */
    box-sizing: content-box;
  }

  #d3 {
    /* width, height의 값이 태그의 너비, 높이로 설정한다. */
    box-sizing: border-box; /* = 내용물 너비/높이 + padding 너비/높이 + 테두리 너비/높이 */
  }

test08_4.html -> 테두리와 여백

           // padding: 테두리 안쪽 여백 // margin: 테두리 바깥쪽 여백

  #d1 {
    padding-top: 40px;
    padding-right: 30px;
    padding-bottom: 20px;
    padding-left: 10px;
  }

  #d2 {
    padding: 40px 30px 20px 10px; /* 시계침 도는 방향: 12 -> 3 -> 6 -> 9 */
  }

  #d3 {
    padding: 40px 10px;
  }

  #d4 {
    padding: 10px;
  }

test08_5.html -> 테두리와 여백

  #d1 {
    padding-top: 40px;
    padding-right: 30px;
    padding-bottom: 20px;
    padding-left: 10px;

    margin-top: 10px;
    margin-right: 40px;
    margin-bottom: 30px;
    margin-left: 40px;
  }

  #d2 {
    padding: 40px 30px 20px 10px; /* 시계침 도는 방향: 12 -> 3 -> 6 -> 9 */
    margin: 10px 40px 30px 40px; /* 시계침 도는 방향 */
  }

  #d3 {
    padding: 40px 10px; /* (위/아래) (좌/우)*/
    margin: 10px 40px; /* (위/아래) (좌/우)*/
  }

  #d4 {
    padding: 10px;
    margin: 10px;
  }

test09_1.html -> display 속성 : block, inline, inline-block

           // block // 

           // 한 줄을 모두 점유한다. // 자신의 너비와 높이를 가질 수 있다.

           // ex) h1 ~ h6, div, p, address, ul, ol 등

           // inline //

           // 한 줄 속에 포함되어 다른 태그와 그 줄을 함께 공유한다. // 자신의 너비와 높이를 가질 수 없다.

           // 콘텐츠의 크기에 따라 너비와 높이가 결정된다. // ex) a, i, b, strong, span 등

           // inline-block //

           // inline 처럼 한 줄을 다른 태그와 공유한다. // block 처럼 자신의 너비와 높이를 가질 수 있다.

           // clear // 

           // 이 태그의 내용을 가리는 것이 있다면, 그 아래로 위치하도록 이동 시킨다.

           // float // 

           // 해당 div를 공중부양 시켜, 다른 div가 같은 줄에 들어올 수 있게 한다. // 사이드바, 사진첩 등 많이 사용한다.

test09_2.html -> display: none, visibility: hidden

           // display: none //

           // 출력 대상에서 제외시킨다. // 태그가 차지했던 영역은 사라진다.

           // visibility: hidden //

           // 출력 대상에 존재하지만, 화면에 보이지 않게 한다. // 태그가 차지했던 영역은 그대로 둔다.

test10_1.html -> 위치 조정 

           // 기본 // 

           // 특별하게 위치를 조정하지 않으면, 좌에서 우로 위에서 아래로 출력한다.

           // 웹브라우저의 경계에 도달하면, 자동으로 줄을 바꿔 출력한다. // 태그는 선언된 순서로 출력한다.

test10_2.html -> 위치 조정 

           // float //

           // 태그가 출력되는 현재 위치에서 공중부양시킨다.

           // 다음 태그가 현재 태그의 자리를 차지할 것이다. // left 또는 right 정렬만 가능하다.

           // float일 때 유의할 점

           // width와 height를 지정하지 않으면, inline 처럼 콘텐츠의 크기에 따라 너비, 높이가 결정된다.

           // margin이 서로 겹치지 않고 그대로 유지한다. // 일반적인 경우 위,아래 margin은 서로 겹쳐 표현한다.

           // div 기본 특성 //

           // 한 줄을 차지하며, 높이를 지정하지 않으면 해당 컨텐츠의 높이에 맞춰진다. //

           // 기본 div를 float 한다면, 다음 div와 margin 겹쳐지지 않는 것을 조심해야 한다. //

           // 또한, float하면, 좌측에 붙히거나 우측에 붙히는 것만 가능하다.

           // 가운데에서 움직이게 하거나, 위 아래로 움직일 수 없다.

test10_3.html -> 위치 조정 

           // float의 특징을 살려서 위치 조정하기 // width와 height를 지정한다.

           // 위,아래,좌,우 margin을 이용하여 위치를 어느정도 조정할 수 있다.

           // 즉, margin으로 float된 div의 위치를 조정할 수 있다. 

           // margin을 -값을 줘서 위로 올리거나 왼쪽으로 땡길 수도 있다 // 

test10_4.html -> 위치 조정 

           // 모든 div를 float하여, 사진첩, 상품정보 등 처럼 응용 사용이 가능하다. // 반응형 웹

test10_5.html -> 위치 조정 

           // position: absolute //

           // 가장 가까운 조상 중에 absolute나 relative, fixed 타입 조상이 있으면,

           // 그 조상을 기준으로 자신의 위치를 조정한다. // 테두리 안쪽을 기준으로 위치를 계산한다.

           // 만약 조상 중에 absolute나 relative가 없다면, 문서 가장자리를 기준으로 자신의 위치를 조정한다.

           // absolute 태그는 width, height를 지정하지 않으면 콘텐츠의 크기에 맞춘다.

           // 기준이 되는 태그가 움직이면 자신도 같이 움직인다.

test10_6.html -> 위치 조정 

           // float 대신 absolute를 사용하여 동일한 화면을 출력할 수 있다.

           // absolute는 float와 다르게, margin을 설정하여 내용을 가린것을 수작업으로 빼내줘야 한다.

           // 또한, clear 기능을 사용할 수 없다.  

           // 따라서 clear처럼 사용하기 위해, 최소 크기를 설정해주어야 한다. // footer가 다른 div에 덮히지 않게

           // min-height를 사용하여야 한다. // height는 아무 내용이 없어도 높이가 고정되기 때문이다.

test10_7.html -> 위치 조정 

           // position: fixed //

           // 웹브라우저의 클라이언트 영역을 기준으로 위치를 지정한다.

           // 클라이언트 영역 //

           // 웹브라우저의 툴바 아래에 위치한 내용이 출력되는 화면이다.

           // 내용을 위,아래로 스크롤하더라도 fixed 타입의 태그를 움직이지 않는다.

           // 화면 스크롤과 상관없이 웹브라우저의 특정 영역에 내용을 띄우고 싶을 때 사용한다.

           // 쉽게 생각하면 신문사 광고 같은 거라고 생각하면 된다. 

<script>
var btn = document.getElementById("closeBtn");
btn.addEventListener('click', function() {
  var adDiv = document.getElementById("ad");
  adDiv.style.display = "none";
});
</script>

           // 자바 스크립트를 사용하여, X버튼을 누르면 사라지게 만든다. //

test10_8.html -> 위치 조정 

           // position: relative //

           // absolute나 fixed와 달리 공중부양시키지 않는다.

           // 현재 자리를 유지한 상태에서 상,하,좌,우로 위치를 조정하고 싶을 때 사용한다.

           // absolute 타입의 자식 태그의 기준으로 만들고 싶을 때 부모 태그를 relative로 지정한다.

test10_9.html -> 위치 조정 

           // 본문을 화면에서 가운데 정렬시키기 // margin을 이용하여 가운데 정렬시킬 수 있다.

  #main {
    position: relative;
    border: 3px solid green;
    width: 720px;
    margin: 0px auto;
  }

           // 위 아래 margin을 0px로, 좌우 margin을 auto로 두어 가운데 정렬하게 한다.

test10_10.html -> 위치 조정 

           // display: inline-block을 이용해서 원래 div는 한 줄씩 공간을 차지하는데, 겹치게 사용할 수 있다.

test11_1.html -> css, js 파일 분리

<head>
  <meta charset="UTF-8">
  <title>HTML</title>
  <link rel="stylesheet" type="text/css" href="test11_1.css">
</head>

           // css는 head 태그 안에 해당 css 파일을 link 태그로 연결한다.

<script src="test11_1.js"></script>

           // js는 src 소스로 body 중간에 삽입한다.

test11_2.html -> css bootstrap 적용

           // 외부 CSS 라이브러리(bootstrap) 도입 // http://www.getbootstrap.com

           // CDN(Content Delivery Network) vs local

           // CDN 방식 //

           // HTML에서 다른 서버에 있는 CSS, JavaScript 등의 파일을 사용하는 방식.

           // 여러 사이트에서 공통으로 사용하는 코드를 한 서버에서 서비스 하는 방식

           // 웹브라우저의 캐시(cache) 기능을 응용한 것이다.

           // 캐시(cache) // 

           // 특정 사이트에서 파일(HTML, CSS, JavaScript, Image 파일 등)을 다운로드 받으면

           // 웹브라우저는 자신이 관리하는 별도의 폴더에 보관해 둔다.

           // 같은 파일을 사용할 때 마다 다시 서버에서 다운로드 받지 않고

           // 기존에 보관된 파일을 사용하기 때문에 네트워크 오버헤드도 줄이고, 속도도 빨라진다.

           // 장점 // 

           // 사이트가 바뀌더라도 공통으로 사용하는 파일은 캐시에 보관되어 있기 때문에

           // 다시 다운로드 하지 않아서 속도가 빠르다.

           // 단점 //

           // 캐시되지 않은 상태에서 그 파일이 존재하는 서버가 꺼져있다면, 실행할 수 없는 문제가 있다.

           // 보안을 중요시하는 사이트(정부, 은행 등)에서는 웹페이지와 관련된 코드를 외부에 둘 수 없다.

           // 이유 // 외부에서 해킹코드를 삽입할 수 있기 때문이다.

           // 이런 경우 무조건 해당 서버에 다운로드 받은 후 실행하도록 한다.

           // local 방식 //

           // HTML에서 사용할 CSS, JavaScript 등의 파일을 HTML이 있는 서버에 두는 방식.

           // 장점 //

           // CDN과 달리 HTML이 참조하는 모든 파일이 같은 서버에 있기 때문에

           // 다른 서버에서 사고가 발생하더라도 영향을 받지 않는다.

           // 단점 //

           // 여러 사이트에서 같은 CSS, JavaScript 파일을 사용하더라도 각 사이트마다 매번 다운로드 받아야 한다.

           // 사용자 입장에서 같은 파일을 매번 받아야 해서 네트워크 오버헤드가 발생하고, 속도가 느릴 수 있다.

<head>
  <meta charset="UTF-8">
  <title>HTML</title>
  <link rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="sweetalert.css">
  <link rel="stylesheet" type="text/css" href="test11_1.css">
</head>

           // 외부에서 제공하는 파일을 먼저 로딩한다.

           // 그래야 이 HTML을 제어하기 위해 추가한 코드가 외부 파일에 의해 덮어지는 현상을 막을 수 있다.