Lecture | 코코아톡 클론코딩 (updating)

SURI·2021년 8월 25일
clonecodinglecture
0

개발에 대한 A to Z 

목록 보기
4/10

🏃🏻‍♀️ 준비하기

1. 구글 크롬

확장 프로그램도 많고, 개발자 친화적인 웹 브라우저다.

1.1. 브레이브

구글 크롬이랑 같지만 광고를 차단한다. 방식도, 외양도, 확장프로그램도 똑같다. 구글 크롬 + Ad-Blocker이라고 생각하면 된다.

2. visual studio code

코드를 수정하기 위해 사용한다.

3. github desktop

👩‍🏫

1. 이론

1.1. 웹사이트

Netflix vs Youtube Music vs Korea Times 사용자와 상호작용하는 웹사이트부터 이미지-제목-본문으로만 이뤄진 단조로운 웹사이트까지 웹사이트는 그저 text 파일일 뿐이다. 페이지 소스 보기로 확인해보라!

개발자는 어떤 종류의 text를 써야 하는지, text를 어디에 두어야 하는지, 이 두 가지를 규칙을 따르고 브라우저에게 주면, 브라우저는 내가 쓴 코드를 이해하고 구현을 해준다.

1.2. HTML

웹사이트는 2가지 종류, 최대 3가지 종류의 언어로 이루어져 있다. (이제부터 text 대신에 langague라는 말을 쓰겠다.) 프로그래밍 언어는 아니다. 잉?

첫 번째 언어는 HTML이다. 다음 언어는 CSS다. 마지막 언어는 Javascript다. HTML을 배우는데는 30분도 걸리지 않는다. 두 번째 언어인 CSS는 이해하는데 30분 정도 걸린다. 그리고 남은 일은 오로지 연습 뿐이다. Javascript는 따로 공부해야 한다. 다행인 점은, 첫 번째와 두 번째가 아주 쉽다는 것이다.

HTML은 Markup(content) Langauge다. 컨셉은 아주 쉽다. HTML으로 브라우저에게 웹사이트의 content 구조가 어떤지(어떻게 구성되어 있는지) 설명할 때 사용한다. title이 무엇이고, link가 무엇이고, list가 무엇이고, sidebar는 무엇이고, header는 무엇이고 등등! 오직 HTML만이 할 수 있는 일이다. 왜냐하면 브라우저는 멍청하고, content를 이해하지 못한다.

1.3. CSS

CSS(Cascading Style Sheets)는 HTML(What is the content?)과 같이 써야 한다. 절대 따로 쓰지 않는다. 웹사이트가 어떻게 보여야 하는지(How the content look like?)에 대해 알려준다. HTML은 뼈대다. CSS가 근육이다. 끝!

"브라우져야 이건 이미지야." - HTML
"브라우져야 그 이미지는 가로 25px, 세로 100px이어야 해." - CSS

Inspector로 CSS를 지우고 HTML만 남아 있는 웹사이트 모습을 보여줬었다. 크기, 배열, 색깔 모든 게 다 사라지고 무너진 모습을 볼 수 있었다.

1.4. Javascript

Javascript는 커다란 주제이고 여기에서 다루진 않을거다. Javascript는 웹사이트의 뇌다. 어떤 웹사이트는 똑똑해야 한다. 동적 상호작용성(interactivity) - 뭔가 클릭하면 어떤 일이 생긴다. 하지만 모든 웹사이트가 뇌를 가질 필요는 없다.

정리하면, 웹사이트에는 최대 3가지의 언어가 필요하다. 콘텐트를 위한 HTML, 디자인과 스타일을 위한 CSS, 뇌(동적 상호작용성)를 위한 Javascript! 이번 강의에서는 뇌가 필요 없다. 연결은 하지 않을 거다.

이 3가지 언어중에서 프로그래밍 언어는 오직 Javascript 뿐이다.

2. HTML

2.1. My First HTML File

  1. 우리가 생성한 폴더 안에 파일을 만들어줘야 한다.
  2. 폴더명과 파일명은 소문자로 해야 한다.
  3. VSC에서 파일명 옆에 보이는 동그라미는 저장을 하지 않았다는 의미다. 저장하지 않으면 변경사항이 적용되지 않는다.

💡 우리가 만든 .html 파일은 어떻게 볼 수 있을까? 정답은 브라우저로 확인할 수 있다!

2.2. VSC

vsc는 단지 텍스트 편집기다. 웹사이트를 만들기 위해 꼭 vsc를 이용해야 하는 건 아니다. 메모장으로도 html 파일을 만들어 저장할 수 있다. vsc의 장점은 좋은 확장자 프로그램들을 갖고 있는 거다.

  • Material Icon Theme
  • Material Theme
  • WakaTime
  • etc.

HTML 코드를 넣지 않고 텍스트만 넣어도 브라우저는 그 텍스트를 화면에 보여줬다. 이건 장점이면서 단점이다. 규칙을 따르지 않더라도 브라우저는 나에게 작성된 내용을 보여주려고 할 것이다. 에러가 있다고 말해주지 않는다. 사용자에게 언제나 콘텐츠를 보여준다.

2.3. HTML Tag

tag는 여기서부터 여기까지, 이 두 개를 의미한다. 두 태그 사이에 넣는 내용이 그 무언가가 되는 거다. 모든 tag를 다 외울 필요는 없다. 그러기엔 너무 많다. 어떻게 동작하는지만 알면 된다. tag를 열고 text를 적고 tag를 닫는다! 

<h1>Hello this is my website!</h1>
<h2>Hello this is my website!</h2>
<h3>Hello this is my website!</h3>
<h4>Hello this is my website!</h4> 
<h5>Hello this is my website!</h5>
<h6>Hello this is my website!</h6>
<h7>Hello this is my website!</h7>

h7은 존재하지 않는 HTML 코드고 따라서 웹브라우저에서는 이걸 이해하지 못한다. 그냥 평범한 텍스트로 보여주게 된다.

2.4. List Tag and Prettier

list 태그를 알아보자. 두 가지 종류가 있다. ordered list와 unordered list. ul은 unordered list다. ol은 ordered list이므로, 숫자로 보여준다. 

<ul>
    <li>beer</li>
    <li>김치</li>
    <li>meat</li>
    <li>milk</li>
</ul>

<ol>
    <li>beer</li>
    <li>김치</li>
    <li>meat</li>
    <li>milk</li>
</ol>

prettier라는 확장자 프로그램이 문법적인 오류를 수정해준다. 그리고 가독성이 떨어지는 코드를 예쁘게 정렬해준다.

설정 > editor 검색 > formator on save에 체크박스를 해주면 된다.

오류해결
F1 혹은 cmd+shift+p을 누르고 > Format Document with > Configure Default Formatter > Prettier

2.5. Tag Attributes

a태그는 anchor를 뜻한다. 다른 웹사이트로 이동하는 방법이다. title에는 부가적인 정보가 필요하지 않지만, link는 부가적인 정보가 필요하다. 어디로 이동해야 하나? tag에 추가하는 부가적인 정보를 attributes(속성)이라고 한다. 

<a href="http://google.com" target="_blank">Go to google.com</a>
<a href="httpL//google.com" target="_self">Go to google.com</a>
  • href는 HTTP reference 혹은 Hyperink reference라는 의미다.
  • target은 기본적으로 _self라는 값을 가지는데, 링크를 열 때 같은 탭 안에서 이동한다. _blank는 새로운 탭으로 열게 된다.
<img
  src="https://modo-phinf.pstatic.net/20190328_175/1553746633970RXbJW_JPEG/mosahJNEDk.jpeg?type=w1100"
/>

<img src="img/logo.jpg" />
  • img 태그는 self-closing tag다. 그리고 src라는 attribute를 가지고 있고, 이 안에 이미지가 가진 주소를 적어 넣는다.
  • 인터넷에 있는 이미지 뿐만 아니라, local에 있는 이미지도 올릴 수 있다. 이미지 이름과 확장자까지 동일하게 해야 한다. 이미지 파일은 같은 폴더 안에 위치 해야 한다. 다른 폴더에 있다면 그 표기를 해주어야 한다.

2.6. Head, Body tag

html 문서를 작성하려면 따라야하는 형태가 있다. 항상 <!DOCTYPE html>로 시작해야 한다. 그리고 웹사이트는 두 개의 파트로 되어 있다. head/body 파트다. head 파트에서는 웹사이트의 페이지에 대한 환경을 설정한다. 외부적으로 보이지 않는 설정이다. body 파트는 사용자가 볼 수 있는 콘텐츠를 보여준다. 

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World!!!</title>
    </head>
    <body>
        <h1>Hi, This is Suri!</h1>
        <a href="http://google.com" target="_blank"<h3>구글링 하자!</h3></a>
        <img src="img/cute.jpg" />

    </body>
</html>

  • head 태그에 있는 html 코드들은 보여지지 않는다. 브라우저 화면 상에 보여질 내용들은 전부 body 태그에 있어야 한다. 위의 코드 결과로 우리가 만든 page의 title이 생긴 걸 확인할 수 있었다.

  • html 문서의 커다란 구조를 더듬어 보자. 먼저 <!DOCTYPE html> <html> <head> <body>가 있다는 걸 알아두자!

2.7. Meta Tag

meta 태그는 부가적인 정보라는 뜻이다. 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <link
      rel="shortcut icon"
      sizes="16x16 32x32 64x64"
      href="https://nomadcoders.co/m.png"
    />
    <meta
      property="og:image"
      content="https://d1telmomo28umc.cloudfront.net/media/seo/home2.jpg"
    />
    <meta property="og:title" content="This is Suri" />
    <meta property="og:description" content="Nice to meet you!" />
    <title>Hello World!</title>
    <meta charset="utf-8" />
    <meta name="description" content="This is my website" />
  </head>
  • charset 메타 태그 : 글자가 사이트에서 깨져보일 수도 있으니, 꼭 넣어주자.
  • html lang : 검색 엔진에게 웹사이트가 사용하는 주된 언어가 무엇인지 알려줄 수 있다.
  • og:image/title/description : 카카오톡에서 웹사이트 링크를 전송할 때 보여지는 그림을 구성하는데 사용된다.
  • meta의 description : 구글에서 타이틀 아래 보여지는 설명글이었다.
  • shortcut icon : 탭에서 타이틀 옆에 들어가는 작은 로고를 설정해줄 때 쓴다.

2.7. More Tags

구글에 html, css, javascript 검색할 때 MDN이라는 키워드를 붙이는 것을 추천한다. firefox 브라우저 만드는 회사가 제공하는 web에 관한 정보를 정리한 문서다. W3Schools는 절대 사용하지 않기를 바란다. 수많은 html 태그를 모두 암기하지 말고 태그를 MDN 문서에서 검색하면 된다. attribute까지 모두 보여준다.

코드로 확인하기
  	<p>Hellllo!!!!!!!</p>
    <pre>Helllllllo!!!!</pre>
    <p>My name is <abbr title="Lee Kyeong Mi">LKM</abbr></p>
    <cite>Hello!</cite>
    <code>Hello!</code>
    <p>I like to say<mark> Hello!!!</mark></p>
    <p>I like to say<strong> Hello!!!</strong></p>
    2<sup>5</sup>

<audio
      controls
      autoplay
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"
    ></audio>

    <dialog open>
      <p>여러분 안녕하세요!</p>
    </dialog>
  • chrome 새로운 버전에서는 autoplay를 허용하지 않아서 적용이 안 되었다.
  • 더 이상 사용하지 않는 한물간 태그들도 나와있었다.
  • 코드 변경시에 태그 두 개를 동시에 바꾸고 싶으면, Ctrl + D 👉VSC 단축키 TOP7

2.8. Form Tag

input은 다양한 유형을 가지고 있다. 그리고 유형마다 다른 속성을 가질 수 있다. 가령, 유형이 file인 경우에만 사용가능한 accept라는 속성이 있다. 

<form>
      <input type="color" />
      <input type="file" accept=".pdf, image/*" />
      <input required placeholder="Name" type="text" />
      <input required placeholder="Last name" disabled type="text" />
      <input required placeholder="Username" type="text" />
      <input required placeholder="Password" minlength="10" type="password" />
      <input type="submit" value="Create Account" />
</form>

<!--
<tagname attrname="attravalue">Whatever</tagname>
-->
  • value : submit 유형의 값을 Create Account를 바꾸어 보았다.
  • disabled : 버튼을 누르지 못하게 된다.
  • placeholder : 텍스트 박스에 적힌 텍스트를 쓸 때 사용한다.
  • minlength : 작성해야하는 글자의 최소길이를 지정할 수 있다.
  • input에는 그 외에도 url, email, range, date 등 다양한 유형이 있다.
  • 속성 값이 true/false면 값을 넣지 않고 속성만 넣어주면 된다. 가령, required나 disabled 같은 속성이 그런 케이스인 것 같다.

2.9. Label Tag and IDs

label은 input과 함께 해야 작동하고, for와 id의 값이 같아야 한다. 그러면 for와 같은 값은 가진 id를 들고 있는 input을 실행시켜 준다. 

<form>
	<label for="profile">Profile photo</label>
    <input id="profile" type="file" accept="image/*" />
    <label for="website">Website</label>
    <input id="website" required placeholder="Username" type="url" />
</form>
  • form에 question을 추가할 수 있다.
  • id는 고유 식별자다. 태그 하나당 하나의 id만 가질 수 있고 그 값은 고유해야 한다. css는 어떤걸 하나하나 가리키며 디자인하는데, 그건 id가 있기 때문에 가능한거다. body 안에 어떤 태그에든 넣을 수 있는 속성이다.
  • 속성 값에는 공백을 입력하면 안 된다. 그리고 항상 큰 따옴표를 사용한다.

2.10. Semantic HTML

문서를 보기만 해도 그 의미를 짐작할 수 있는 걸 semantic이라고 한다. 코드를 되도록이면 semantic으로 작성해주는 게 좋다. div나 span 같은 의미가 없는 container 사방에 있는 것보다 header, main, footer, aside 등 의미가 있는 box로 대체해서 사용하자. 의미가 있는 container라고 생각하면 된다.

<body>
  <header>
    <h1>The Suri Times</h1>
  </header>
  <main>
    <address>Gyeonggido Ilsan</address>
  </main>
  <footer>&copy; 2021 S.R</footer>
</body>
  • sidebar aside hgroup nav
  • &copy; 이 표기법 기억해둬야지

⚡ 제발 태그를 외우려고 하면서 시간을 바닥에 버리지말아라. 자주 사용하는 것만 외워라. 어렴풋이 무엇이 있는지 존재를 기억하고 있다가, 검색하면 된다.

3. CSS

3.1. CSS를 HTML에 추가하는 방법

2가지 방법이 있다. 첫 번째는, 같은 html 파일에 html코드와 css코드를 같이 두는 것이다. 두 번째는, 전문적이고 대부분의 사람들이 추천하는 방법으로 두 코드를 분리시키는 것이다. 

  <style>
   css 코드 작성   
  </style>
  • (반드시) head 태그 안에 style 태그를 만들어 준다.
<link href="style.css" rel="stylesheet" />
  • .css 파일을 따로 만들고 링크로 연결해준다.

3.2. CSS 코드 작성하기

  1. html 태그를 가리키는 일 (selector)
  2. 중괄호(curly bracket)에 묶어서
  3. 원하는 속성(property)에 값을 부여하는 일
 h1 {
      color: skyblue;
      text-decoration: overline;
      font-weight: 800;
      font-style: italic;
      font-size: 20px;
    }
    address {
      text-align: center;
      color: tomato;
    }
  • property에는 공백, 밑줄(_), 슬래쉬(/)도 안 된다. 하이픈(-)으로 채워준다.
  • :은 속성이름과 속성값을 분리해주고 속성은 ;으로 마무리해준다.

3.3. Cascading Style Sheets

CSS에서 첫글자 C는 Cascading이고 계단식이라는 뜻이다. 브라우저가 CSS코드를 읽을 때, 위에서부터 아래로 차례로 적용된다. 마지막에 있는 코드가 가장 마지막에 적용되고, 우리가 화면에서 보는 결과다.

외부 파일에서 불러오는 css를 external css라고 하고, style 태그에 넣어주는 걸 inline css라고 한다. 두 코드가 같은 태그를 가리키게 되면 어떻게 될까? Cascading의 원리를 적용하면 된다. 결론적으로, 코드의 순서가 결과에 영향을 미친다.

3.4. Block vs Inline

어떤 웹사이트든 모두 box들로 이루어져있다. 아주 중요하다.

재밌는 건, box들은 그 옆에 아무것도 오지 않는다. div, header, main, section, footer, article 등등 어떤 박스든 말이다. 반면, span은 옆에 다른 span이 올 수 있다. link도 마찬가지다. link와 span은 box가 아니다.

즉, 두 종류의 형태가 있다. 옆에 다른 요소가 못 오는 block과 하나의 요소 옆에 다른 요소가 올 수 있는 inline(could be in the same line)이다.

대부분의 box들은 block이다. block이 아닌 종류를 기억하는 게 훨씬 편하다. 예를 들면 span, a, image 등이다.

<style>
    div {
      height: 150px;
      width: 150px;
      background-color: tomato;
    }
    span {
      background-color: turquoise;
    }
  </style>

<div></div>
  <span>hello</span>
  <span>hello</span>
  <a href="#">link</a>
 	<p>
    가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카
  </p>
  <img src="som.jpg" />

3.5. box의 특징

block과 inline은 서로 서로 바꿀 수 있을까? 그렇다. 아무것도 적용하지 않아도 브라우저가 기본값으로 설정하는 block/inline 값이 있는데 css 속성으로 바꿔줄 수 있다. 그 외에도 브라우저가 기본적으로 설정하는 디폴트 값들이 있다. 가령, body의 margin 속성이라든지.

div {
      display: inline;
      height: 150px;
      width: 150px;
      background-color: whitesmoke;
    }

  • 어떤 요소가 inline이라면 높이와 너비를 가지지 못한다. inline으로 했더니 텍스트를 갖고 있지 않던 div 박스가 사라졌다.

  • block은 박스이고, inline은 박스가 아니다.

  • block만이 가지고 있는 특징이 뭐가 있을까? 높이와 너비를 가지고 있다는 것. 그리고 박스라는 점이다.

박스의 3요소
  • margin : box의 border(경계)로부터 바깥에 있는 공간이다. 값이 하나 일 때는, 4방향에 모두 적용이 되고, 2개 이면 위/아래와 왼쪽/오른쪽, 4개이면 시계방향 순서로 적용이 된다.

collapsing margin 현상

body {
      margin: 0;
      background-color: thistle;
    }
    div {
      margin: 80px 20px;
      height: 150px;
      width: 150px;
      background-color: whitesmoke;

div와 body의 margin 경계선이 들러붙어서 하나로 움직이고 있다. 위/아래의 경우에만 일어난다. div의 margin-top을 80px로 줬더니 body의 margin-top 값에 관계없이 화면에서 함께 밀려나는 걸 볼 수 있엇다. 그저 경계가 닿아서 margin이 같아 졌나 보구나, 생각하면 된다. 너무 깊게 파고들진 말아라.

  • padding : box의 border(경계)로부터 안쪽에 있는 공간이다. 
 <style>
    html {
      background-color: tomato;
    }
    body {
      margin: 20px;
      padding: 20px;
      background-color: thistle;
    }
    div {
      padding: 10px;
    }
    #first {
      background-color: whitesmoke;
      height: 150px;
      width: 150px;
    }
    #second {
      background-color: teal;
      height: 75px;
      width: 75px;
    }
    #third {
      background-color: wheat;
      height: 37.5px;
      width: 37.5px;
    }
    #fourth {
      background-color: violet;
      height: 18.725px;
      width: 18.725px;
    }
  </style>
</head>
<body>
  <div id="first">
    <div id="second">
      <div id="third">
        <div id="fourth"></div>
      </div>
    </div>
  </div>
</body>
  • border : inline과 box 에 모두 적용되는 걸 알 수 있었다. 수업에서 참고할 만한 팁으로 *{} 태그를 이용해서 모든 태그에 다 적용한 후에, span의 경우 점선만 바꾸고 싶다면 border-style : dotted만 변경해주면 되었다. 
 * {
      border: 2px solid black;
    }
[생략]
 span {
      border-style: dotted;
    }

3.6. Class

inline에는 width, height이 적용되지 않았다. margin과 padding은 적용이 될까? 적용이 된다. padding은 사방에, 하지만 margin은 좌/우에만 적용이 되었다. margin을 적용하고 싶다면 block으로 바꿔야한다. inline에는 제한되는 속성들이 있구나.

수많은 span 태그로 둘러쌓인 hello가 있다. 일부에만 다른 속성을 적용하고 싶은 상황이다. id를 사용하려니 한계점이 있다. 그 때 사용할 수 있는 도구가 class다. class는 여러 태그에 사용해서 속성을 복수로 적용할 수 있다. 또한, 태그는 여러 개의 class를 가지고 있을 수 있다. 

<style>
	.btn {
      border-radius: 10px;
      padding: 5px 10px;
    }

    .tomato {
      background-color: tomato;
      color: white;
    }

    .teal {
      background-color: teal;
    }
</style>
<body>
  <span class="btn teal">hello</span>
  <span class="btn tomato">hello</span>
  <span class="btn teal">hello</span>
  <span class="btn tomato hello nice">hello</span>
  <span class="btn teal">hello</span>
  <span class="btn tomato">hello</span>
</body>
  • 버튼모양, 색깔별 클래스를 나눠서 적용해주니, 중복되는 것이 없고 분명하다.
  • class는 정말 많이 사용되는구나. 넷플릭스 검사를 해 봤을 때도, 수많은 class를 볼 수 있었다.

3.7. inline-block

옆에 다른 요소가 올 수도 있고, 높이와 넓이도 가질 수 있다. 마진도 사방으로 가질 수 있다. 하지만 고루하고 많은 문제가 있다. 요소사이에 빈 공간이 있다. 내가 만들지도 않았는데도! 정해진 형식도 없다. 이건 responsive design을 지원하지 않는다. 창 크기가 달라지면, 화면이 달라진다. 그래서 inline-block은 잘 사용하지 않는다. 더 좋은 방법이 있다.

👩🏻 이전의 개발자들은 수치를 하나씩 올리고 내리면서 스크린에 맞추려고 했던 애로사항이 있었다. 정말? 지금의 개발자들은 정말 운이 좋다는.. margin-right : 10.015px 까지 맞췄다.

block > inline > inline-block을 하나씩 다 dispaly 해보았다. 그래서 더 좋은방법은?

3.8. flex box

이름 자체가 그렇듯 아주 유연하다. 2d 레이아웃에서 아주 잘 작동한다. 사용할 때 지켜야 할 규칙이 3개 있다.

  1. 자식 엘리먼트에게 말하지 않고, 부모 엘리먼트에만 명시해야 한다. 즉, 부모 앨리먼트를 flex container로 만들어야 한다. 3개의 div에게 flexbox를 적용해서 위치를 조정하고 싶다면 div에게 이야기하지 않고 body에게 말한다. 
body {
        height: 100vh;
        margin: 20px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        /* div height 고정 값을 풀고
        stretch 값을 넣어준 것도 재밌었다 */
      }
      div {
        background-color: teal;
        width: 80px;
        height: 80px;
      }

🔎 css flexbox main axis cross axis

  1. 기본적으로 주축은 수평이고 교차축은 수직이다.(주축이 수직으로 되게 바꿀 수도 있다.) justify-content는 주축에 적용된다. align-items는 교차축에 적용이 된다.

  2. body의 높이가 div 박스 크기와 별 차이가 없어서, 교차축 정렬을 해줬을 때 별 티가 나지 않았다. 따라서 body의 height : 100vh로 설정해줬다. vh는 viewport(screen) height이고 100vh는 화면 높이의 100%를 의미한다. 화면 크기에 따라 relatively하게 적용된다. 

div {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: teal;
        width: 80px;
        height: 80px;
      }

 <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </body>
  • div 태그 안에 숫자를 넣고 div 태그들을 flex container로 만들어주고 숫자들을 가운데 정렬해줄 수 있었다. body > div > 숫자, 이렇게 겹쳐서 만들어줄 수도 있구나.

👀 깔끔하게 모니터에 중앙정렬을 페이지에도 적용할 수 있어서 좋았다. 원래 이걸 계속 하고 싶었는데, 왜 찾지 못했을까?

주축과 교차축 방향 바꿔주기

flex-direction : column; : 기본값은 row인데 이렇게 해주면 주축이 수직이 되고 교차축이 수평이 된다.

flexbox의 다양한 속성들
flex-wrap: wrap;
        /*nowrap(default), wrap-reverse; */
flex-direction: column-reverse;
      }

3.9. Position : fixed

position은 레이아웃보다는 위치를 아주 약간 움직이고 싶을 때, 이용한다.

body의 height을 10000vh으로 줘서 아주 긴 페이지를 만들고 스크롤을 내려도 박스가 화면에 계속 보이는 걸 알 수 있었다. 

	top: 5px;
	left: 200px;
	position: fixed;
#green {
        background-color: teal;
        opacity: 0.2;
        position: fixed;
      }
      #different {
        background-color: wheat;
      }
    </style>
 </head>
 <body>
   <div id="green"></div>
   <div id="different"></div>
 </body>
</html>
#green {
        background-color: teal;
        opacity: 0.2;
        position: fixed;
      }
      #different {
        background-color: wheat;
      }
    </style>
 </head>
 <body>
   <div id="green"></div>
   <div id="different"></div>
 </body>
</html>

3.10. Position : more+

static : 레이아웃이 박스를 처음 위치하는 곳에 두는 것을 말한다.

relative : 조금씩 옮기고 싶을 때 사용한다. 앨리먼트의 첫 기준점에서 위/아래/옆으로 움직인다. 

position: relative;
        top: -10px;
        left: 10px;
      }

absolute : 사방을 사용할 수 있는데 좀 특이하다. relative한 부모를 순차적으로 찾아나선다. 직계 부모부터 시작해 position이 relative인 걸 찾지 못하면, 최후로 body를 기준으로 삼는다. 내가 원하는 좌표대로 움직일 수 있다. 

position: absolute;
        bottom :0px;
   
      }
  • relative한 부모와 absolute한 자식, 이 형식이 가장 많이 사용되는 것 같다.

3.11. psuedo selector

좀 더 세부적으로 엘리먼트를 선택하는 거다. 기존에 알던 3가지 방법에서 더 나아간다. 

 div:last-child {
        background-color: pink;
      }
div:first-child {
        background-color: yellow;
      }
  • 이게 id나 class를 사용하는 것보다 훨씬 더 좋은 방법이다. 
span:nth-child(even),
span:nth-child(5),
span:nth-child(odd),
span:nth-child(2n),
span:nth-child(3n + 1) {
	background-color: yellow;
      }
 input:optional {
        color: hotpink;
      }
      input:required {
        background-color: indigo;
        border-color: lawngreen;
        color: white;
      }
  • nth-child를 활용하면 정말 다양하게 선택할 수 있다.
  • , 콤마를 활용해서 중복해서 선택할 수도 있다.
  • input에서 required 설정해준 태그를 선택할 수 있다.
  • 그 외에도, 정말 많은 psuedo selector가 있구나.

3.12. Combinators

p span : 부모를 쓰고 자식을 쓴다. p를 찾고 그 안에서 자식 span을 찾는다.

div p span : 이것도 똑같이 작동을 한다. 원하는 만큼 부모를 써도 된다.

div > span : 바로 밑에 직속 자식을 찾아서 작동한다. 직속 자식이라는게 바로 다음 뒷 순서에 온다는 뜻은 아니다. 앞에 형제들이 있을 수도 있으니까.

p + span : 바로 다음에 오는(바로 다음에 오지 않으면 적용이 안 된다) 형제 관계의 span을 찾는다. 바로 그 다음 것에만 적용이 되는 걸 알 수 있었다.

p ~ span : span이 p의 형제인데 바로 뒤에 오지 않을 때 사용할 수 있다. 형제 관계의 모든 span에 적용되는 걸 알 수 있었다. p + span을 보완해줄 수 있다.

3.13. Attribute selector

태그가 가지고 있는 attribute를 통해 어떤 것이든 선택할 수 있게 해준다.

input[type="password"]
input[placeholder="username"]
input[placeholder~="name"] : placeholder가 name을 포함한 것들
a[title]
a[href*="example"] : href 주소에 example을 포함하고 있는 a태그
a[href$=".org"] : href 주소가 .org로 끝나는 a태그(접미사)
a[attr^"value"] : attr 값이 value로 시작하는 거(접두사)

3.14. States

개발자 도구에서 확인할 수 있는 가장 중요한 Selector는 states다.

button: active : 마우스로 클릭할 때
button: hover : 마우스 커서가 대상 위에 있을 때
input : focus : active랑 비슷하다고 생각할 수 있는데 키보드로 선택되었을 때
a:visited : 해당 링크에 방문을 하면 적용이 되는 상태다. 링크에만 사용할 수 있다.
form: focus-within : 자식이 focused 상태가 되면 부모 엘리먼트에 적용이 된다.
form: hover input : form에 hover 상태일 때, input에 적용이 된다.
form:hover input:focused : 위의 것에서 더 나아가서 이렇게 하는 것도 가능하다.

부록

input :: placeholder : placeholder를 스타일링 해준다. 주의할 점은 콜론이 두 개라는 거다.

p :: selection : 글자를 마우스로 끌어서 선택했을 때, 블록을 스타일링 해준다.
p :: first-letter : 첫 글자만 스타일링해준다. first-line도 있었다.

3.15. Colors and Variables

컬러를 변수에 저장할 수 있다. css는 프로그래밍 언어는 아니지만 비슷하게 변수를 만들어 줄 수 있다. 이거 편리할 것 같다! 그리고 컬러만 저장할 수 있는 건 아니다. 

 //지정 방법
    :root {
        --main-color: #fcce00;
        --default-border: 1px solid var(--main-color);
      }
     
 // 사용방법   
background-color: var(--main-color);
border: var(--default-border);
css에서 알아야 할 컬러 시스템
  1. 16진수 컬러(e.g. #FCCE00)
  2. RGB(e.g. rgb(252, 206, 0))
  3. RGBA(e.g. rbga(252, 206, 0, 0.5)) a는 0부터 1까지의 범위를 가질 수 있다. 투명도를 말한다.

👀 chrome의 color picker 익스텐션 좋은 것 같다.

4. ADVANCED CSS

자바스크립트의 프로그래밍을 빌리지 않고도 심화된 CSS 기능이다.

4.1. Transition

어떤 상태에서 다른 상태로의 변화를 애니메이션으로 만드는 방법이다. 

a {
        color: wheat;
        background-color: green;
        text-decoration: none;
        padding: 3px;
        border-radius: 5px;
        font-size: 40px;
        transition: all 3s ease;
        /*transition: all 3s cubic-bezier(0.6, 0.04, 0.98, 0.335);*/
        /*transition : color 1s ease, border-radius 5s ease;
        */
      }
      a:hover {
        color: green;
        background-color: wheat;
        border-radius: 20px;
      }
    </style>
  </head>
  <body>
    <a href="#">SURI</a>
  </body>
  • state에 따라 변경되는 property를 갖고 있을 때, 사용된다. 변화되는 과정을 애니메이션처럼 보여주게 한다. 순식간에 일어나는 변화는 아름답지 않을 수 있으므로!
  • transition은 element 태그 안에 적어야 한다. state가 적힌 태그에 넣으면 state가 끝나는 순간엔 적용이 되지 않고 빠르게 돌아가기 때문이다.
  • state에 사용된 property만 조작할 수 있다. 혹은 all이라는 걸 사용할 수도 있다.
  • ease 애니메이션 효과를 어떻게 줄지 나타내주는 속성이다. linear, ease-in-out 등 다양한 디폴트 값이 있고, cubic-bezier를 조작할 수도 있다.

4.2. Transformation

다른 요소의 박스를 변형시키지 않고 원하는 요소를 이동시킬 수 있다. transformation은 box의 차원이 아니라 픽셀의 다른 차원에서 일어나는 일이기 때문이다. transition과 결합하면 더 효과적이다. 

img {
        border: 2px solid black;
        border-radius: 50%; // 원이 된다.
        transition: transform 3s ease;
      }
      img:hover {
        transform: scale(0.5) rotateX(90deg);
      }
  • 기타 다른 속성 테스트 : rotateY(85deg), rotateZ(10deg), scale(2,2), translateX(-60px), matrix(1, 2, 3, 4, 5, 6);
  • 여러 개의 속성이 동시에 일어날 수도 있다.

🔎 transform mdn

이미 만들어진 transform을 복사해서 그냥 사용할 수 있다.

4.3. Animation

특정 state 상태일 때 작동되는 것이 아니라, 계속 재생되는 상태의 변화를 만들어내고 싶을 때 사용한다.

규칙

@keyframes superCoolCoinFlip {
        from {
          transform: rotateX(0);
        }
        to {
          transform: rotateX(360deg) translateX(100px);
        }
      }
      img {
        border: 2px solid black;
        border-radius: 50%;
        animation: superCoolCoinFlip 5s ease infinite;
      }
  • @keyframes + 이름 + from/to
  • animation :
  • infinite를 적용해줄 수도 있다.

애니메이션이 끝나고 본래대로 돌아올 때, 확 바뀌는 걸 자연스럽게 하고자 3번의 스텝으로 나뉘어서 코드를 짠다. 

@keyframes superCoolCoinFlip {
        0% {
          transform: rotateX(0);
        }
        50% {
          transform: rotateX(360deg) translateX(200px);
        }
        100%{
          transform: rotateX(0);
        }
      }
  • 단계에서 transform만 넣을 수 있는 건 아니다. opacity도 조절할 수 있고, border-color를 바꿔볼 수도 있게 다양하게 변주할 수 있다.

🔎 css animations

이미 만들어진 keyframes를 코드복사해서 활용해볼 수 있었다.

4.4. Media Queries

responsive design 반응형 디자인을 만들 수 있다. css만으로 사용자가 보는 스크린을 감지할 수 있다. 휴대폰, 아주 큰 화면, landscape/portrait 등등.


      @media screen and (max-width: 1200px) and (min-width: 600px) {
        div {
          background-color: lawngreen;
        }
      }

      @media screen and (orientation: landscape) {
        span {
          display: none;
        }
      }
  • orientation : landscape/portrait 휴대폰 뿐만 아니라, 데스크탑 스크린에도 적용이 되는 게 아쉽다. 어떻게 보정할 수 있을까?
  • min-device-width/max-device-width는 오직 휴대폰에만 적용이 된다. 데스크탑 브라우저는 이해할 수 없을 거다.
  • 레티인지 디스플레이인지도 구분한다? (무슨 의미인지)
@media print{
body{
background-color:tomato;
}
  • 프린트를 할 때 디자인을 바꿀 수도 있다, 가령 잉크를 절약하기 위해 네비게이션 바를 없애줄 수도 있다.

5. GIT/GITHUB

5.1. What is Git/Github?

코드가 아주 긴 파일을 관리해야 하는 상황이다. 파일의 히스토리를 알고 있어야 한다. git은 파일을 추적하면서 변경내역을 확인할 수 있게 해준다. git이 version control system이라면, github에는 변경내역을 업로드한다. 파일의 변경내역과 파일들을 올려주는 공간이라고 생각하면 된다.

git 시스템은 파일을 binary format(e.g.01010101)으로 인식하기 때문에, 다른 파일 형식에도 사용할 수 있다.

5.2. Repositories (저장소)

코드가 살고 있는 곳이라고 생각하면 된다. 코드의 변경내역과 그 히스토리를 갖고 있는 폴더다. 공개/비공개를 설정할 수 있다.

commit : 이 파일의 버전을 저장하고 싶다는 시점을 뜻한다. 설명글도 적을 수 있다. commit을 눌러 확인해보니 어떤 변경사항이 있었는지 왼쪽/오른쪽으로 나눠서 비교해준다.

이렇게, github를 탐색하면서 git(파일을 주시하면서 관리해주는 도구)의 변경내역을 확인할 수 있다. 변경내역이 중요한 이유는 우리가 실수를 하면 다시 그 시점의 버전으로 돌아갈 수 있기 때문에 중요하다.

repository 만드는 방법
  • 컴퓨터에 폴더를 만들고 업로드 시켜주기
  • github 내에 respoisory 만들어주기

두 번째 방법을 추천하고, 두 번째 방법으로 진행해본다.

  1. 저장소 이름은 공백없이 소문자로 만들어줘야한다.
  2. Initialize - 체크박스 안 해줬다. 나머지도 만지지 않았다.
  3. 아직 이 저장소가 내 컴퓨터에 있는 건 아니다. (아마 위에 체크박스를 설정해주지 않아서 그런 것 같다.)
  4. 깃허브 데스크탑을 설치하고 실행한다. 깃허브 계정으로 로그인하고 관리자 권한을 준다.
  5. clone a repository 해서 우리가 만든 저장소를 가져온다. local path도 지정해준다.
  6. 텅텅 빈 폴더가 바탕화면(local path)에 생긴 걸 확인할 수 있다. 하지만 깃허브에 있는 저장소와 연결되어 있는 상태다.

5.3. First Commit

  1. vsc에서 kokoa clone 2021 폴더를 연다. 반드시 위에서 만든 폴더와 같아야 git에 연동이 될 거다.
  2. 우선 README.md 파일을 만든다. 확장자가 markdown이어야 한다. 모든 git repository가 가져야 하는 파일이다.
  3. 파일을 만들고 저장하면, github desktop에서 확인할 수 있고 1 Changed file이라고 된 걸 볼 수 있다.
  4. commit의 타이틀을 꼭 적어서(설명글은 안 써도 되지만 타이틀은 꼭 필요하다.) commit to master를 누른다.
  5. publish branch를 누른다. branch는 나중에 다룰 것이다.
  6. github 사이트에서 확인해볼 수 있다.

5.4. 수정하기

  1. vsc에서 수정을 해주고 파일을 저장한다.
  2. github desktop에 들어가서 commit title을 확인해주고 commit to master를 한다. 이제 내 컴퓨터에서 git이 README.md 파일이 업데이트 된 것을 안다. 하지만 아직 github는 모르는 상태다.
  3. push를 눌러서 변경을 github에게도 알린다.
  4. github 사이트에 들어가보니 2개의 commit이 있다는 걸 확인할 수 있고, 변경내역도 확인했다.

👀 github desktop은 github를 사용하는 초보자에게 아주 좋은 도구라고 했다. 나는 VSC에서 바로 처리하고 있었는데, github desktop을 한 번 이용해볼까?

.gitignore

업로드 하고 싶지 않은 파일을 기억하는 파일이다.

  1. VSC에서 .gitignore 라는 파일을 만든다.
  2. 파일 안에 깃에 커밋하고 싶지 않은 파일 이름을 적는다.
  • .DSStore (파일이름
  • /screenshots (폴더이름)

6. Clone Coding

1. page 2

대부분의 웹 서버가 디폴트로 index.html을 찾아보도록 설정되어 있다?

html 작성을 위한 단축키 사용

  • ! 키보드로 치고 엔터를 누르면 자동으로 도큐먼트가 생성된다.
    기억이 아닌 이해다. 세부적인 모든 것을 암기하지 않으면 불안하면 힘들 것 같다. 어차피 불가능하다.

  • 마우스로 드래그해서 편리하게 split right 적용하기

BEM Block Element Modifier

많은 사람들이 사용하는 규칙인데, 좀 더 쉽게 읽히는 css를 위함이다. 

.btn{}
.btn__price
.btn--orange
.btn--big

모든 것들이 클래스를 가져야 한다. id가 하나를 특정할 때 사용되지만, 어떤 부분에 id를 사용했는지 class를 사용했는지 헷갈릴 수 있다. 그래서 모든 부분에 클래스를 사용하자고 결정한 것이다.

어떤 클래스가 어떤 책임을 가지는지, 어떤 관계를 가지는지 쉽게 알 수 있다.

이 규칙을 따르는 것을 추천한다.

BEM을 쓰는게 나은지 id와 클래스를 섞어 쓰는게 나은지 해보고 스스로 판단해봐라.

직접 아이콘을 구하는 방법
직접 이미지를 만들고 추출하거나 svg 파일을 이용할 수 있다.
픽셀이 없는 이미지 파일형식 수학으로만 구성된 형식이다. 좌표로 되어 있어서 원하는만큼 늘릴수 있다.

heroicons(free)
font awesome

  • script 코드는 body코드를 닫기 전에 마지막에 사용해준다.

form은 앞으로 최대 1번만 더 사용할 것 같으므로 id로 처리해준다.

link:css 자동완성 ! 때와 비슷

apple-system
font-family 사용

google fonts
link하거나 import 할 수 있고, style을 가져와서 customize할 수도 있다.

css-hack 으로 센터에 위치하게 하기 이상하긴 하지만 잘 작동한다.

reset css 파일 이용하기. 웹 브라우저가 자동으로 만든 설정들을 없애고 새로 시작할 수 있도록

css파일을 추가하기 위해서 기존에 style.css에 import해서 가져왔다. html에 link를 너무 많이 추가하는 것은 좋지 않다.

css 코드 다른 파일로 양분하고 import로 합치기

page ruler redux 크롬 extensiopn

css property not

선택자로 id를 사용하는 것과 class를 사용한 것 비교하기

form 메소드에 두 가지 방식이 있다.

  • post 서버로 데이터를 전송하는 것
  • get 보안상 아이디나 패스워드를 쓰면 안 되지만 query string을 조작하는 것 같다.

vsc에서 지루한 html 작성을 자동으로 해주는 단축키
nav ul li a

tab

🧬 클론코딩 공부 주의점

👉 클론 코딩에 실패하는 이유

  1. 강의를 들으면서 강사의 코드를 따라치기만 했다.
  2. 강의를 한 번만 듣고, 결과물 코드를 다시는 보지 않았다.
  3. 몰라도 질문하지 않았다.
  4. 배운 내용을 문서화하지 않았다.
  5. 결과물이 강사의 결과물과 똑같다.

👉 활용법

  1. Github에 올린다.
  2. 생각하며 코딩한다. 질문이 생기면 구글링을 해보고 그래도 답이 나오지 않으면 질문하자.
  3. 강의를 한 번 더 듣는다.
  4. 강의 내용을 문서화한다.
  5. 강의를 보지 않고 처음부터 결과물을 만들어본다.
  6. 나만의 색을 입힌다.
  7. 사이드 프로젝트를 진행 한다.

📑 참고자료

profile
SURI
Every step to become a better version of me 🚶‍♂️ 블로그 이사중
이전 포스트

Git | 가장 쉬운 Git 강좌(updating)

다음 포스트

VSC | 단축키 정리

0개의 댓글