개발자를 꿈꾸며

7월 마지막 2주간 몸상태가 정말, 정말 좋지 않았다.

내내 누워만 있었음....

하필 강의 시작 주에 몸이 아팠고, 이렇게 아팠던 적도 처음이라 정신적으로도 정말 힘들었다.

들어야만 하는 강의도 누워서 간신히 듣고 뭘 할 수가 없었음....

해야 하는 과제들도 놓쳐서 이러다 심각한 만큼 우울해지는 건 아닌가 싶었는데,

다행히 8월에 들어서면서 몸을 회복중이다.

그동안 코딩 공부를 할 수가 없었는데 그 기간만큼을 메우기 위해서라도 파이팅해야지!

객체(object)와 속성(property)

▶객체(object)

· 객체는 중괄호({})를 통해 만들어짐

▶객체(object)의 속성(property)

· 객체 내부에 있는 값을 속성(property)이라고 한다.

· 구성

속성명(Property Name) + 속성값(Property Value)

아래 예시로 보자면 name: '홍길동' → 요런 것들이 속성(property)에 해당됨

· 객체 안의 속성(property)들은 쉼표(,)로 구분한다.

▶기본형 - 속성

{
  속성명: 속성값,
  속성명: 속성값,
  속성명: 속성값
}

▶예시

{
  name: '홍길동',
  bornYear: 1900,
  isVeryNice: true,
  worstCharacter: null
}

객체(object)의 속성(property)에 접근하기

2가지 방법으로 접근할 수 있다.

1. 점 표기법

2. 대괄호 표기법

1.점 표기법

▶기본형

(objectName.propertyName)
(객체명.앞의객체에속하는속성명)

점 표기법의 단점은

속성명(property name)이 문자열 형식('')인 경우, 해당 속성명을 표기할 수 없다.

▶예시1

//객체(Object)
let gilDong = {
  name: '홍길동',
  'born Year': 1900,
  isVeryNice: true,
  worstHabit: null,
  bestHabit: {
    habitName: '운동',
    habitLevel: '우수함'
  }
};

//점 표기법(objectName.propertyName)
console.log(gilDong.isVeryNice);
console.log(gilDong.bestHabit.habitName);

▶예시1 - 출력된 결과

true
운동

2. 대괄호 표기법

▶기본형

(objectName['propertyName'])
(객체명['앞의객체에속하는속성명'])

대괄호 표기법으로 작성시, 대괄호 내부는 문자열 형식('', 작은 따옴표)으로 나타내야 한다.

점 표기법과 달리

속성명(property name)이 문자열 형식('')이더라도, 해당 속성명을 표기할 수 있다.

단, 그렇다고 작은 따옴표를 연이어 붙이지는 않음. 

그냥 문자열 형식이 아닌 다른 property name들처럼 한 번만 작은 따옴표를 쓰면 된다.

▶예시1

//객체(Object)
let gilDong = {
  name: '홍길동',
  'born Year': 1900,
  isVeryNice: true,
  worstHabit: null,
  bestHabit: {
    habitName: '운동',
    habitLevel: '우수함'
  }
};

//대괄호 표기법(objectName['propertyName'])
console.log(gilDong['isVeryNice']);
console.log(gilDong.bestHabit['habitName']);

console.log(gilDong['born Year']);
console.log(gilDong['born' + ' Year']);

let propertyName = 'name';
console.log(gilDong[propertyName]);

▶예시1 - 출력된 결과

true
운동
1900
1900
홍길동

기존에 있는 속성(property)을 수정, 추가, 삭제하기

▶기존에 있는 속성(property)을 수정 

· 예시1

gilDong.name = '허균';

property를 할당시킬 때 작은 따옴표('')를 잊지 말 것

//객체(Object)
let gilDong = {
  name: '홍길동',
  'born Year': 1900,
  isVeryNice: true,
  worstHabit: null,
  bestHabit: {
    habitName: '운동',
    habitLevel: '우수함'
  }
};

//객체의 속성(property)을 수정
gilDong.name = '허균';
console.log(gilDong.name);

· 예시1 - 출력된 결과

홍길동
허균

▶기존에 없던 속성(property)을 새로 추가

· 예시1

gilDong.nationality = '대한민국';

property를 할당시킬 때 작은 따옴표('')를 잊지 말 것

//객체(Object)
let gilDong = {
  name: '홍길동',
  'born Year': 1900,
  isVeryNice: true,
  worstHabit: null,
  bestHabit: {
    habitName: '운동',
    habitLevel: '우수함'
  }
};

//기존에 없던 속성(property)을 추가
gilDong.nationality = '대한민국';
console.log(gilDong.nationality);

· 예시1 - 출력된 결과

대한민국

▶기존에 있는 속성(property)을 삭제

delete를 이용한다.

· 예시1

delete gilDong.name;
delete gilDong.worstHabit;

//객체(Object)
let gilDong = {
  name: '홍길동',
  'born Year': 1900,
  isVeryNice: true,
  worstHabit: null,
  bestHabit: {
    habitName: '운동',
    habitLevel: '우수함'
  }
};

//기존에 있는 속성(property)을 삭제
delete gilDong.name;
delete gilDong.worstHabit;
console.log(gilDong);

· 예시1 - 출력된 결과

{
  'born Year': 1900,
  isVeryNice: true,
  bestHabit: { habitName: '운동', habitLevel: '우수함' }
}

name속성과 worstHabit속성이 삭제되었다.

이 둘은 undefined처리 된 것임!(중요!!!)

(추후 추가 정리 예정)

2. 큰따옴표("") 사용 - 구글의 추측 검색 최소화하기

· 예시: 

Puppy Dog Sweaters

→ 배열 순서에 상관 없이 세 단어가 포함된 콘텐츠를 검색한다.

"Puppy Dog Sweaters"

→ 정확히 입력한 대로 해당 문구를 검색한다.

3. 하이픈(-) 사용 - 불필요한 키워드 제외시키기

· 예시:

mustang-car

→ 'mustang'의 검색 결과에 'car'가 포함된 결과들은 나타나지 않는다.

▶서체

font-family: '배달의민족 한나';

▶서체 상태(폰트 스타일)

font-weight: bold;

· normal, bold, italic 등 가능

▶폰트 색상

color:red;

· 딱히 앞에 font를 붙인다든가 하지는 않음

▶폰트 크기

font-size: 2em;

· em, px, % 등 가능

▶자간

letter-spacing: 2pt;

· 음수(-)도 적용 가능

· pt, px 등 가능

▶행간

line-height: 180%;

· pt, px, % 등 가능

▶단어간 간격

word-spacing: 2pt;

· pt, px 등 가능

▶생활코딩 WEB2 CSS - 10. 그리드 소개

매우우우우우 중요! 헷갈려서 정리할 겸 기록해 둠.

대체 화면 분할은 어떻게 하고, 선는 또 어떻게 넣는 건지 궁금했는데

css 역할이 이리 중할 줄이야....

일단 css가 활약할 수 있는 토대를 마련하려면

먼저 html에서 레이아웃을 나눠야 하는데, 이를 위해서는 각각의 영역 설정이 중요하다.

해서 영역을 설정하기 위한 <div>, <span>태그들과 

설정시킨 영역에 속성값을 부여시키기 위한 id, class 등의 속성의 역할이 크다.

그러니까 html에서 <div>, <span>태그를 통해 영역을 구분하고 → 이를 css에서 활용함!

html의 태그들이지만 css로 분류해 정리하는 이유는,

<div>, <span> 모두 자체만으로는 큰 영향력이 없고, css와 결합했을 때 존재 의의가 극대화되기 때문.

▶id, class속성 참조

<div>, <span>태그

▶영역 분할하기

html에서, 

전체적인 틀을 나누는데는 <div>태그를 이용하고,

텍스트의 일부만을 지정하는 등 부분을 선정해 꾸미고자 할 때는 <span>태그를 이용한다.

▶참고로

<div>, <span>태그 자체가 박스 영역을 얼마나 차지하는지 보여주자면...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Greed</title>

  <style>
    div {
      border:5px solid gray;
    }  
    span {
      border:5px solid red;
    }
  </style>

</head>
<body>

  <div>HONG</div> 
  <div>GILDONG</div>
  
  <span>HONG</span> 
  <span>GILDONG</span>

</body>
</html>

예시

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>그리드01</title>

  <Style>
    #grid1 {
      display: grid;
      grid-template-columns: 150px 1fr;
    }
    #grid1 #grid2 {
      padding-left: 35px;
    }
    body {
      margin:0;
    }
    a {
      color: black;
      text-decoration: none;
    }
    h1 {
      font-size: 100px;
      text-align: center;
      border-bottom: 5px solid  gray;
      margin:0;
      padding:20px;
    }
    #grid1 ol {
      border-right: 3px solid gray;
      width:100px;
      margin:0;
      padding:20px;
      padding-left: 40px;
    }  
  </Style>

</head>
<body>
  
  <h1><a href="index.html">WEB</a></h1>
 
  <div id="grid1">
    <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
    <div id="grid2">
      <h2>CSS</h2>
        <P>
          CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced. CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced.
        </P>
    </div>
   </div> 

</body>
</html>

여기서 포인트는

<div>로 분할시킨(묶은) 영역을 → id를 이용해 속성값을 부여시킴.

<div id="grid1"></div>
<div id="grid2"></div>

  <div id="grid1">
    <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
    <div id="grid2">
      <h2>CSS</h2>
        <P>
          CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced. CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced.
        </P>
    </div>
   </div>

이후, css(html의 <style>태그 내)에서 → id 속성값을 불러와 해당 영역을 꾸몄다.

    #grid1 {
      display: grid;
      grid-template-columns: 150px 1fr;
    }
    #grid1 #grid2 {
      padding-left: 35px;
    }
    #grid1 ol {
      border-right: 3px solid gray;
      width:100px;
      margin:0;
      padding:20px;
      padding-left: 40px;
    }

▶여기서,

    #grid1 {
      display: grid;
      grid-template-columns: 150px 1fr;
    }

150px 1fr;이 뭔고 하면...

fr은 화면비율을 의미함. 예를 들어,
150px 1fr → 150px와 나머지화면
1fr 1fr → 화면비율 1:1
2fr 1fr → 화면비율 2:1

▶요 부분의 경우,

    #grid1 #grid2 {
      padding-left: 35px;
    }

#grid1 #grid2의 경우,

(#grid1의 휘하에 있는) #grid2 ← 요걸 의미한다.

▶여기서의

    #grid1 ol {
      border-right: 3px solid gray;
      width:100px;
      margin:0;
      padding:20px;
      padding-left: 40px;
    }

#grid1 ol은,

(#grid1의 휘하에 있는) ol ← 요걸 의미함.

어디 밑에 있는 누구라고 명확하게 명시해 주는 편이 좋다.

만약 구분하지 않고 그냥 ol ← 요것만 적는다면, 

컴퓨터는 ol전체를 지정한 것으로 인식한다.

만약 코드가 길어질 경우 수정할 생각을 하면 끔찍함. 혼선을 피하기 위해 명확하게 구분 해두자.