개념 정리

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에 포함되어도 상관이없는 정보들만 사용

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

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

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Front-end 기초 정리

개념 정리

ID의 값은 고유해야한다.

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

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

form

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

개념 정리

ID의 값은 고유해야한다.

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

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

form

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

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역