개념 정리

ID의 값은 고유해야한다.

<label for="name">NAME</label>
<input id="name" placeholder="Name" type="text" />

html 내부에서는 따로 오류를 잡아주지 않기때문에 코드를 짤때 신경을 많이 써야하고,

id값은 고유해야한다.

이해하게 쉽게 코드를 구성해라. semantic

<!DOCTYPE html>
<html>
  <head>
    <title>HELLO</title>
  </head>
  <body>
    <div id="header"></div>
    <div id="main"></div>
    <div id="footer"></div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>HELLO</title>
  </head>
  <body>
    <header></header>
    <main></main>
    <footer></footer>
  </body>
</html>

위와 아래에 코드는 똑같이 작동한다.

위에 코드와 아래코드를 비교해서 봤었을때 아래에 코드가 휠씬 직관적이고 이해하기가 쉽다.

쉽게 이해할 수 있도록 직관적이고 보기쉽게 짜는것이 우선.

class 이름을 정할경우 이름을 길게하는게 좋다.

BEM CSS : id는 거의 사용하지않고 class만 사용하여 이름으로 알 수 있도록 표기하는 방식

[CSS 방법론] BEM 방식

오늘은 CSS 방법론을 다뤄보겠습니다 ;-) 말이 거창하긴 한데 쉽게 풀어쓰면 'CSS 클래스네임을 어떻게 지으면 좋을지' 고민해보는 거죠. 방법론에는 여러 가지가 있는데, 최근 BEM을 실무에 도입하

nykim.work

너무 쉽게 작성을 해두면 중복이 되는 경우가 생길 수 있으니
길게 작성하는 편이 좋다.

class 명내에 부모의 값도 적어주는 편이 좋다.

<div id="status-bar">
    <div class="status-bar__column">
    <span>4:20</span>
  </div>
</div>

form

post로 보내는 것이 맞지만 백엔드가 있어야지만 사용할 수 있는 정보

get은 url에 포함되어도 상관이없는 정보들만 사용

같은 코드가 반복될 경우 변수로 만드는것이 좋다.

같은 코드를 여려번 사용하지않도록