• 일주일간의 나의 상태

  : 최종 프로젝트를 하면서 프론트를 맡아 디자인부분은 거의다 내가 손댄것같다. 자바스크립트 사용은 아직 미숙하여 모든 부분을 맡지 못하였지만,,,,,,

• 다음주 할일

  : 끝났다고 손 놓지말고 꾸준히 공부하기

• 일주일동안 인상깊었던 배움

  : 부모부분에 position:rerative;를, 자식부분에 position:absolute;를 주고 bottom이든 top이든 값을 설정하면, 부모를 기준으로 자식의 상태가 변한다!

• 나의 상태

  : 많은 오류들이 있었지만, 여러가지 정보를 찾아가며 CSS들의 오류를 수정하고있다.!!!

• The four Fs

  • FACTS(사실, 객관) : 저번주보다 확실히 css에 대한 개념이 생겼다.
  • FEELINGS(느낌, 주관) : 뿌듯하다!!!!!!
  • FINDINGS(배운 것) : 사람들마다 컴퓨터에서 같게 실행하려면 px이 아니라 적응형으로 만들어야한다. FUTURE(미래) : 공부 짱 열심히해서 짱짱 프론트엔더가 될것이다.

• To me

  운동은 무슨 건강한 돼지가 되자

• 예시

  <section id="main">
    <article>
      <!-- first blog post -->
    </article>
  
    <article>
      <!-- second blog post  -->
    </article>
  
    <article>
      <!-- third blog post -->
    </article>
  </section>

  <article>
  <section id="introduction">
  </section>
  
  <section id="content">
  </section>
  
  <section id="summary">
  </section>
  </article>

• 일주일간의 나의 상태

  : 자바스크립트는 아직 많이 부족하지만 하드 코딩으로 HTML과 CSS를 이용해서 메인 화면과, 커뮤니티, 고객센터를 구현하였고 거기에 들어가는 모달창도 만들었다! 문제는 백엔드와 프론트를 연결하는방법을 모르겠다,,,

• 다음주 할일

  : 백엔드와 프론트를 연결하는 방법 공부해보기

• 일주일동안 인상깊었던 배움

  : 프론트를 만지다보니, CSS쪽으로 꼬이는 문제들을 나한테 와서 물어보는 사람이 생겼다. 아직 상태를 보고 바로 말을 해줄수있는 실력이 아니라 많은 도움이 되어드리지 못하였지만, 다른사람들이 나한테 뭔가를 물어본다는게 너무 뿌듯했다.

• 나의 상태

  : 자바크립트를 잘 만지지못해 완벽한 프론트 개발자라고는 할수 없지만 CSS의 여러 기능들에 대해 공부하는 중이다

• The four Fs

  • FACTS(사실, 객관) : 낮잠자는 시간 없이 컴퓨터 잡고있으려고 노력하고있다.
  • FEELINGS(느낌, 주관) : 너무 졸리고, 밤에도 잘 안자는데 낮잠도 안자니까 몸이 망가진거같긴하다
  • FINDINGS(배운 것) : 내가 알고있는 CSS 지식만으로도 사람들에게 도움을 줄 수 있다는것 FUTURE(미래) : 프론트개발자중에서 조금씩의 차이를 비교해보며 나은 방향으로 개선하는 직업이 있다고 하였는데, 무슨 직업인지 까먹었지만 그거를 향해 나아가보고싶다, 일단 직업명부터 다시 알아오기,,,

• To me

  운동해라 죽기전에,,

• Cascading Style Sheets
  • 종속형 시트

SASS

• Syntactically Awesome Style Sheets
  • 문법적으로 어썸한 스타일시트
  • 아니 ㅋㅋㅋㅋㅋ 문법적으로 대박인 스타일 시트가 뭔데 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

SCSS

• Sassy CSS
  • 문법적으로 짱 멋진(Sassy) CSS
  • 작명 센스 무엇,,,

CSS 안쓰는 이유

• 프로젝트의 크기가 커지고 고도화 될수록 유지보수에 어려움이 생긴다.
• 기존의 css는 불필요한 선택자와, 연산기능 한계, 구문의 부재 등의 문제점이 있다.

SCSS 쓰는 이유?

1. 변수(Variable) 할당

/* CSS */
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

/* SCSS */
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

자주 사용하는 색이나 폰트 등을 변수로 지정하여 재사용할 수 있다.

2. 중첩(Nesting) 구문

/* CSS */
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

/* SCSS */
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

중첩기능을 통해 쉬운 구성과 높은 가독성을 가질 수 있다.

3. 모듈화(Modularity)

/* CSS */
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}

/* _base.scss */
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

/* styles.scss */
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

@use를 사용하여 파일을 분할하고 모듈화 할 수 있다.

4. 믹스인(Mixins)

/* CSS */
.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

/* SCSS */
@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

함수처럼 defalut parameter를 지정할 수 있고 parameter를 받아서 속성을 부여할 수 있다. (재사용성)

5. 확장&상속(Extend/Inheritance)

/* CSS */
/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

/* SCSS */
/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

/* This CSS won't print because %equal-heights is never extended. */
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

@extend 사용 시 css 속성 집합을 상속받을 수 있다.

6. 연산자(Operators)

/* CSS */
.container {
  display: flex;
}

article[role="main"] {
  width: 62.5%;
}

aside[role="complementary"] {
  width: 31.25%;
  margin-left: auto;
}

/* SCSS */
@use "sass:math";

.container {
  display: flex;
}

article[role="main"] {
  width: math.div(600px, 960px) * 100%;
}

aside[role="complementary"] {
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}

math.div(나누기) 외에도 sin, cos, tan, random, max, min 등등 여러 가지 수학적 기능을 사용할 수 있다

하이퍼링크로 지정된 텍스트를 클릭하면 특정한 웹사이트로 이동하게 되는 속성을 사용하고 링크로 연결시킬 수 있다.

<a> 태그

• 어떠한 문자가 링크에 Anchor(고정, 연결) 되어 있다는 의미

Href

  <a href="https://velog.io/@taeeuno_o">탱구의 벨로그</a>

• <a> 태그에 href 속성을 통해 링크를 페어링 시켜줄 수 있다.
• href라는 속성을 통해 링크를 넣어주게 되면 해당 텍스트가 링크로 전환되게 되는 방식

Target

• 새 탭으로 열게 해주고 싶을때 사용하는것

<a> 태그는 기본적으로 해당 탭에서 열리게 되어있다. 하지만, target을 blank로 지정해주게 된다면 새 탭에서 해당 링크가 열리게 되는 것을 확인할 수 있다.

태그는 target="_blank"라고 <a> 태그 안에 넣어주기만 하면 된다.

<a href="https://velog.io/@taeeuno_o" target="_blank">
    탱구 벨로그
</a>

Title

• 커서를 올려놓았을 때 대략적인 정보를 나타내게 해 줄 수 있다.

• 탱구의 벨로그로 이동

  <a href="https://velog.io/@taeeuno_o" title="탱구 벨로그">
    탱구의 벨로그로 이동
  </a>

• 일주일간의 나의 상태

  : 팀 프로젝트를 하면서 다른분들이 벡엔드 작업을 하시고, 내가 프론트 작업을 맡아 체계적으로 진행하기로 계획했다. 백엔드 공부하러와서 프론틑를 하는것은 아쉽지만 실력이 안되므로 지금 할수 있는 부분을 열심히 하려고 한다.

• 다음주 할일

  : 와이어 프레임대로 간단하게라도 프론트 작업 끝내서 벡엔드에 넘겨주기

• 일주일동안 인상깊었던 배움

  : html과 css는 코딩이 아니라고 할정도로 간단하다고는 하지만 막상 공부를 해보니 신기한것들이 많다.

• 나의 상태

  : 강의를 제대로 듣지 않아 아는것이 없음.

• The four Fs

  • FACTS(사실, 객관) : html 만지는게 너무 재밌다.
  • FEELINGS(느낌, 주관) : 코딩이라고 하기엔 조잡한 유치원생 그림그리는 수준이지만, 그래도 재밌다
  • FINDINGS(배운 것) : 하드코딩으로도 많은것을 구현할수있다. FUTURE(미래) : 하드코딩뿐만아니라 자바스크립트로 프론트와 백엔드 연결을 할수있도록 공부하기

• To me

  앉아만 있지말고 움직이면서 하기,, 건강 챙기기,,,

프로젝트에 들어가는 모달창에 내용 입력하는 칸이 필요한데 글자 입력 수를 제한하는걸 해보고싶었당 ㅎㅎㅎㅎㅎㅎ

• css

  .text_box {
  position:relative; 
  display:inline-block; 
  width:100%;
  }
  .text_box textarea {
  width:100%; 
  height:152px; 
  color:#666; 
  font-family:"ht_r"; 
  font-size:18px; 
  line-height:28px; 
  padding:20px; 
  border:1px solid #e4dcd3; 
  outline:0; 
  resize:none
  }
  .text_box .count {
  position:absolute; 
  right:20px; 
  bottom:20px; 
  color:#666; 
  font-family:"ht_r"; 
  font-size:15px;
  }

• html

  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <div class="text_box">
  <textarea></textarea>
  <div class="count"><span>0</span>/200</div>
  </div>

• javascript

  # 키보다가 눌릴때 { } 안의 함수 실행
  $('.text_box textarea').keyup(function(){
  
  # 함수    content는 이 함수 이다.
  var content = $(this).val();
  $('.text_box .count span').html(content.length);
  if (content.length > 200){
    alert("최대 200자까지 입력 가능합니다.");
    $(this).val(content.substring(0, 200));
    $('.text_box .count span').html(200);
  }
  });

자바스크립트 뜯어보기

keydown

• keyboard가 눌렀을때 실행됩니다.

• keyboard를 눌렀을때 실행되기 때문에 현재 input에 입력되어 있는 값을 가져올 수 없다.

• keydown은 키보드를 누르고 있으면 계속 함수가 실행됩니다.

keyup은 keyboard에서 손을 땠을때 실행됩니다.

• keyboard에서 손을 땠을때 실행되기 때문에 현재 input에 입력되어 있는 값을 가져올 수 있다.

• keyup은 키보드를 계속 누르고 있어도 함수는 실행되지 않습니다.

keypress

• keyboard가 눌렀을때 실행이 된다. 하지만 현재는 deprecated 된다.

• keypress 대신에 keydown, keyup을 상황에 맞게 사용하는것이 좋다.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div class="text_box">
<textarea></textarea>
<div class="count"><span>0</span>/200</div>
</div>

• javascript

  # 키보다가 눌릴때 { } 안의 함수 실행
  $('.text_box textarea').keyup(function(){
  
  # 함수   content는 이 함수 이다.
  var content = $(this).val();
  $('.text_box .count span').html(content.length);
  if (content.length > 200){
    alert("최대 200자까지 입력 가능합니다.");
    $(this).val(content.substring(0, 200));
    $('.text_box .count span').html(200);
  }
  });

JavaScript 뜯어보기

.val()

• 양식(form)의 값을 가져오거나 값을 설정하는 메소드

문법 1

.val()

선택한 양식의 값을 가져온다.

예를 들어

var jb = $( 'input#jbInput' ).val();

은 아이디가 jbInput input 요소의 값을 변수 joraeng에 저장한다.

문법 2

.val( value )

선택한 양식의 값을 설정한다. 예를 들어

$( 'input#jbInput' ).val( 'ABCDE' ); 는 아이디가 jbInput인 input 요소의 값을 ABCDE로 정한다.

예제 1

양식에 텍스트를 입력하고 버튼을 클릭하면, 입력한 값을 출력합니다.

<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>jQuery</title>
        <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
            $( document ).ready( function() {
                $( 'button#jbInputButton' ).click( function() {
                    var jb = $( 'input#jbInput' ).val();
                    alert( jb );
                } );
            } );
        </script>
    </head>
    <body>
        <p><input type="text" id="jbInput"> <button id="jbInputButton">Click</button></p>
    </body>
</html>

Click

예제 2

select 양식에서 값이 바뀌면, 그 값을 출력합니다.

<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>jQuery</title>
        <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
            $( document ).ready( function() {
                $( 'select#jbSelect' ).change( function() {
                    var jb = $( 'select#jbSelect' ).val();
                    alert( jb );
                } );
            } );
        </script>
    </head>
    <body>
        <select id="jbSelect">
            <option>One</option>
            <option>Two</option>
            <option>Three</option>
        </select>
    </body>
</html>

예제 3 버튼을 클릭하면 input의 값을 ABCDE로 설정합니다.

<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>jQuery</title>
        <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
            $( document ).ready( function() {
                $( 'button#jbInputButton' ).click( function() {
                    $( 'input#jbInput' ).val( 'ABCDE' );
                } );
            } );
        </script>
    </head>
    <body>
        <p><input type="text" id="jbInput"> <button id="jbInputButton">Click</button></p>
    </body>
</html>

Click

해결 방법은 아래와 같다

1. env.env가 managemant와 같은 선상에 없어서 발생한 문제
   1. venv 코드가 프로젝트 파일 안에 있는지 확인해보기
   2. venv/Scripts/activate 안의 VIRTUAL_ENV 경로가 맞게 설정 되었는지 확인해야함

# unset irrelevant variables
deactivate nondestructive

VIRTUAL_ENV="C:\Users\gfhjk\Study\Coding\Sparta\project\A7-TC2-TeamCode200\MCLR\venv"
export VIRTUAL_ENV

_OLD_VIRTUAL_PATH="$PATH"
PATH="$VIRTUAL_ENV/Scripts:$PATH"
export PATH

• 일주일간의 나의 상태

  : 새로운 팀을 만나 다시 인사하고, 다음 프로젝트를 준비하는 회의를 하였다.

• 다음주 할일

  : 프로젝트 열심히 참여하기

• 일주일동안 인상깊었던 배움

  : 와이어프레임과 API등 다음 프로젝트를 위한 계획을 미리 세우면 프로젝트를 진행하는데 여유가 많이 생긴다.

• 나의 상태

  : 아는것이 많이 없긴 하지만 알도록 노력 하는중

• The four Fs

  • FACTS(사실, 객관) : 프로젝트가 끝나고 그것에 대한 정리를 하지 않았다,,,,
  • FEELINGS(느낌, 주관) : 어떻게 정리해야할지 하나도 모르겠다.
  • FINDINGS(배운 것) : 와이어프레임을 자세히 짜 놓아야 프로젝트 진행하는데 차질이 없다.
  • FUTURE(미래) : 늘어지지말고 열심히 하기

• To me

  다른사람보다 많이 쳐졌지만 포기하지말고 끝까지 물고 늘어지기!! 화이ㅌㅣㅇ!!!!

프로젝트에 jQuery를 사용하려는데 처음에 다

<scripts>
$(document).ready(function(){
};
</scripts>

로 시작 하였다. 그래서 이것이 무엇인지 궁금해져 찾아 보았다.

찾아보니 $(document).ready()는 문서가 준비되면 매개변수로 넣은 콜백 함수를 실행하라는 의미라고 하며, 이는 jQuery 이벤트 메서드 중 하나이며, 이 메서드는 비슷한 기능을 수행한단다.

jQuery는 하나의 메서드에 여러가지 함수를 연결할수있다.

보통 사용하는 코드는 아래와 같다.

<script>
window.onload = function(){

};
</script>

이렇게 작성한다면 하나의 모델에 하나의 이벤트만 연결할수 있지만, jQurey를 사용한다면 이벤트 메서드는 이벤트로 여러개의 함수를 연결 할 수 있다.

ex) 아래의 예제는 실행하게되면 문서가 준비되는 순간 경고창 세개가 연달아 표시된다.

<script>
$(document).ready(function(){
    alert("First READY");
});

$(document).ready(function(){
    alert("Second READY");
});

$(document).ready(function(){
    alert("Third READY");
});
</script>

위 메서드는 많이 사용되어 jQuery에서 간단하게 사용할수있는 형태를 제공한다고함!!

<script>
$(function(){

});
</script>

jQuery를 사용하려면 일단 HTML과 jQuery를 연결하는 코드를 써야한다. HTML 문서와 연결 하는법은 CDN을 이용하거나, 다운받아 연결하는법이 있다.

1. CDN 이용하기

• CDN이란?

  • 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크
  • CDN은 클라이언트와 웹 사이트 서버 간에 중간 서버를 두어 효율성을 높인다. 이러한 CDN 서버는 클라이언트-서버 통신의 일부를 관리한다.

  <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

2. 다운로드 받아 연결하기

• jQuery 다운로드는 여기에서 한다.

  <script src="path/jquery-3.3.1.min.js"></script>