노마드코더 코코아톡 클론코딩 #6 수강일지

(개인확인용도/간단정리)

VSC 단축키

1. html 기본코드 생성 : html 파일에서 가장 처음에 !(느낌표)

2. 주석처리(한줄) : Ctrl + /

3. 한줄 코드 위아래 이동 : Alt + ↑↓

4. css link 코드 생성 : link:css

5. navigation 생성 시 

nav>ul>li*4>a

입력 하면 아래와 같이 생성 됨!

<nav>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </nav>

 

 

 

* 주석

HTML : <!-- 주석 -->

CSS : /* 주석 */

 

 

• BEM(Block Element Modifier) : 알아보기 쉽게 코드를 짜기위한 작성 규칙
  • block(재사용 가능한 기능적으로 독립적인 페이지 컴포넌트)  ex) .btn { } 
    elements(엘리먼트는 블럭을 구성하는 단위)  ex) .btn__price { } (btn 안에 price)
    modifiers(블럭이나 엘리먼트의 속성)  ex) .btn--big { } (btn을 big으로/속성,형태 변경시)

출처 : https://nykim.work/15

 

• Font awesome 아이콘 추가방법(body 맨 아래쪽 코드 추가 후 가져올 아이콘 코드 복사)

<i class="fas fa-battery-full"></i>
<!--body맨 아래쪽 script 추가-->
<script
      src="https://kit.fontawesome.com/6478f529f2.js"
      crossorigin="anonymous"
    ></script>

- 아이콘 크기 키우려면 아이콘 코드 뒤에 "fa-lg" 추가

<i class="fas fa-battery-full fa-lg"></i>

- 참고(사이즈 수정)

<i class="fa-solid fa-coffee fa-2xs"></i>
<i class="fa-solid fa-coffee fa-xs"></i> 
<i class="fa-solid fa-coffee fa-sm"></i> 
<i class="fa-solid fa-coffee"></i>
<i class="fa-solid fa-coffee fa-lg"></i> 
<i class="fa-solid fa-coffee fa-xl"></i> 
<i class="fa-solid fa-coffee fa-2xl"></i>

  <i class="fa-solid fa-camera fa-1x"></i>
  <i class="fa-solid fa-camera fa-2x"></i>
  <i class="fa-solid fa-camera fa-3x"></i>
  <i class="fa-solid fa-camera fa-4x"></i>
  <i class="fa-solid fa-camera fa-5x"></i>
  <i class="fa-solid fa-camera fa-6x"></i>
  <i class="fa-solid fa-camera fa-7x"></i>
  <i class="fa-solid fa-camera fa-8x"></i>
  <i class="fa-solid fa-camera fa-9x"></i>
  <i class="fa-solid fa-camera fa-10x"></i>

 

• form 태그에 button 추가하는 방법

<button>
<input type="submit">

 

• google font 추가방법

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");
body {
  font-family: "Open Sans", sans-serif;
}

 

• reset.css (기본적으로 브라우저에 설정되어있는 margin 값이나 기타 size값들을 reset 시켜주는 css)
  - 인터넷에서 reset.css 파일을 복사해서 따로 파일을 만든 후 적용할 css파일에 import

@import "reset.css";

 

• input 선택시 테두리 없애는 코드

input:focus {
  outline: none;
}

 

• 특정 코드 제외하고 적용하고 싶을 때(조건설정 - input 내 type이 submit이 아닌 경우에만)

#login-form input:not([type="submit"]) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  transition: border-color 0.3s ease-in-out;
}

 

• 커서 모양 바꾸기 (https://developer.mozilla.org/ko/docs/Web/CSS/cursor)

  cursor: pointer;

 

• Padding 줄 때 contents box size를 고정시키는 방법

box-sizing: border-box;

- 설명

1. width 200px(width 100%도 동일)의 contents box에 50px left padding을 주면

2. width 200px을 유지하면서 padding 50px을 추가해야하니까

연두색 contents박스를 50px만큼 늘리게 됨(box의 크기는 총 250px)

3. 내가 원한 contents box의 크기를 건드리지 않으면서 padding을 주고 싶을 때

box-sizing: border-box; 코드를 사용

 

• Form의 속성(attribute) / action, method
  • action : 어떤 페이지(파일)로 data를 보낼건지 지정할 수 있음
    - action속성 URL에 해당하는 파일이 반드시 존재해야한다.
  • method
    • POST방식 - 백엔드 서버에 정보를 전송하는 방식
    • GET 방식 - 보안에 취약함. username이랑 password를 GET 방식으로 보내선 안된다. (URL에 포함되어도 상관없는 정보들을 GET 방식으로 보냄)

 <form action="friends.html" method="get" id="login-form">
      <input name="username" type="text" placeholder="Email or phone number" />
      <input name="password" type="password" placeholder="Password" />

cf)
* id 속성 - 고유한 식별을 목적으로 하는 경우 사용

* name 속성 - form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성