인턴하면서 CSS와 HTML 실수 한 것들

인턴하면서 웹페이지를 처음부터 끝까지 맨 땅에 헤딩하듯이 만들어본 것이 처음이어서 css를 아주 엉망으로 만들어놨다.
만들면서 실수한 CSS와 HTML을 다시 까먹지 않기 위해 기록한다 !!

HTML

• 레이아웃을 만들 때 큰 box는 <div> 나 <section>으로 만들어서 쌓아라
  - 그러면 box 하나하나 top이나 left를 따로 설정하지 않아도 box가 차곡차곡 쌓임!!

• id는 진짜 중요하게 쓸 때 빼고는 잘 안씀. (백엔드에서 정해주는 경우가 많음. class를 주로 사용. )

• checkbox의 바탕을 image로 바꿀 때에는 <input>의 id와 <label>의 for를 맞춰주어야 함.

✍ example

//html
 <input type="checkbox" id="ch" name="id_remember" value="checked">
 <label for="ch">아이디 기억</label>

/*css*/
input[type="checkbox"]{
   display: none;
}

input[type="checkbox"]+ label{
    width: 22px;
    height: 22px;
    font: normal normal normal 14px/18px Spoqa Han Sans Neo;
    cursor: pointer;
    padding-left: 22px;
    background-repeat: no-repeat;
    background-image: url('../img/checkbox_none.svg');
  
}

input[type="checkbox"]:checked + label{
    background-image: url('../img/checkbox.svg');
}

이때 checkbox가 아니라 radiobox로 만들고 싶다면 radiobox의 name을 같게 만들어주어야 함.

CSS

• 넓이를 설정할 때에는 vw를 활용하자
  - vw 사용하지 않고 px를 사용하면 웹페이지에 여백이 생길 수 있음.
  

• 텍스트가 아닌 경우 margin:0 auto;를 이용하여 가운데정렬. 여기서 0은 위 아래 margin을 의미 auto는 좌우 정렬을 의미.

• overflow-x:hidden;을 사용하면 웹의 가로로 여백이 생기는 것을 안보이게 막을 수 있음.

• vh를 100으로 설정해주면 이미지 크기가 실제 디스플레이 크기와 다르더라도 높이에 맞게 적용 가능.