사이트를 마크업해보며 실수했던 것, 새로 알게된 것들을 정리해보았다.
웹접근성을 항상 염두해두고 작업할 것!! :)

📌 html

• 관리자페이지에서 이미지를 유동적으로 관리해야되는 것은 <img> 태그 사용하기
• 컨텐츠의 텍스트 부분은 각 요소마다 다른 태그를 사용하자. 모두 <p> 태그를 쓰게되면 클래스를 많이 넣게되어 복잡해질 수 있다.
• 기울임꼴로 폰트를 강조할 때 쓰이는 <em> 태그 안에 <img> 를 넣어 이미지를 가두는 역할로 쓸 수 있다.
• <em> 태그를 원하는 곳에 position: absolute; 로 띄워 선긋기 애니메이션을 구현할 수 있다.
• 어떤 영역을 블럭요소 <div> 로 감싸면 자동 줄내림이 된다.
• <input> 의 너비는 인라인 스타일로 넣어주는게 유지보수에 좋다. 한 행의 마지막 태그는 빈값으로 넣어 자동으로 100% 채워지게 해두자. (인라인 스타일은 우선순위가 1000점이 된다.)
• <select> 의 옵션 내용은 개발자가 넣기 때문에 비워둔다. 또한 채워넣는 텍스트의 길이에 따라 너비가 유동적으로 변하므로 너비를 따로 넣지 않도록 한다.
• <a> 태그의 설명은 title 속성에 넣어준다. (웹접근성)

버튼

• 버튼 a는 페이지 이동의 역할이며 input type=“button”은 기능의 역할을 한다.

footer

• <li> 를 쓰지 않고 내용을 작성할 때, 여백을 <span> 요소로 주면 불필요한 리스트를 만들지 않아도 된다. (필요시 사용할 것!)

submenu

• bread_crumbs(빵가루) : 현재 위치를 어떻게 왔는지 그 과정을 알려주는 영역

📌 CSS

• 탭이 불가능하게 하려면 tabindex=“-1”
• inline 요소는 사이에 빈공백이 생겨서 해당 요소의 부모에 font-size:0을 줘야한다.
• br은 문장에서만 넣어주는 것이 좋다. 줄내림을 디자인에 맞춰서 하다보면 나중에 수정할 때 확장성이 떨어지게 된다. 글씨는 부모의 크기에 따라 자동 줄내림이 되니 그걸 이용해보자.
• transform 을 이용한 이미지 확대, 축소는 scale 을 이용하자.
• 멀티백그라운드 사용 시 개발자 도구에서 완성된 위치를 먼저 잡아주면 좋다.
• 스프라이트 이미지를 넣을 때는 after/ before를 사용하자.
• position: absolute; 를 넣으면 자동으로 display: block 이 되기 때문에 따로 넣지 않아도 괜찮다.
• 컨텐츠가 유동적으로 바뀌는 부분은 nth 선택자를 사용하면 안된다!
• padding을 주고 width: 100% 를 주면 범위가 초과되기 때문에 box-sizing: border-box 를 넣어준다.
• z-index는 position 속성에서만 작동된다. z-index를 줄 때 absolute, fixed를 주면 ui가 일그러지기 때문에 relative로 넣어주도록 하자.
• option 은 배경색과 텍스트 색상만 스타일이 가능하다.
• 한줄 말줄임표 = overflow:hidden, text-overflow:ellipsis, white-space:nowrap;
• border 가 겹치는 경우 : margin-right: -1;
• ::before 가상요소 사용할 때 :를 한개만 쓰면 익스플로러 8 또는 9까지 호환됨
• img는 인라인 구조이기 때문에 폰트사이즈로 영역이 잡혀서 필요없는 여백이 생긴다. 그래서 img를 블럭요소로 바꾸거나 폰트사이즈를 0으로 해줘야 한다.
• 내부 요소를 앞으로 보이게 하기 위해서는 구조를 바꾸려 하지 말고 z-index를 사용해주자.!!! (z-index는 position:relative와 같이 쓰기)
• inline 요소는 padding이 먹히지 않는다.

정렬

• 가운데정렬 = inline, inline-block요소는 text-align으로, block요소는 margin:0 auto; 로
• letter-spacing 자간은 각각의 글자를 기준으로 우측으로 여백이 들어가 벌어지게 된다. 때문에 가운데 정렬을 하면 우측으로 공간이 조금 더 남게되니 왼쪽으로 여백을 적절히 넣어 정렬을 맞춰준다.

float

• float을 쓰면 그것을 감싸고 있는 상위 박스의 height 값이 0으로 설정되어 사라지게 된다. 이 문제를 해결하기 위해 height 값을 다시 인식할 수 있도록 해야하는데, clear:both; 또는 overflow:hidden; (2단메뉴 및 드롭다운에서는 사용불가)를 상위박스에 주기도 하고, .clearfix 클래스를 만들어 가상 영역을 만들어주기도 한다.

📌 Sub Page 구조

html

• 서브 공용 레이아웃 = header / bread_crumbs / footer 는 sub.html에 작성한다.
• 나머지 서브페이지는 위의 레이아웃을 그대로 복사한 뒤 안의 본문을 각각 작성한다.

css

• 메인페이지를 포함한 모든 페이지의 공용css는 style.css
• 메인페이지의 header / footer 영역 css는 공용 css로 빼준 뒤 삭제한다.
• bread_crumbs를 포함한 서브페이지의 모든 css는 sub.css

---

⭐️ 작업 팁!?

• 컬러는 포토샵 타입툴에서 직접 가져올 것
• 약관동의는 디자이너가 패턴만 그려주고 본문텍스트는 넣지 않는다.(텍스트파일로 따로옴)
• 약관동의 같이 컨텐츠의 길이가 긴 경우, 코드 에디터에 본문 복사붙여넣기 후 comman + f 로 반복되는 제목의 특정글자를 찾아 <h3> 등의 제목태그를 일괄적으로 넣어준다.
• id 는 개발에서 중요한 속성으로 쓰이기 때문에 퍼블에서는 최소화하는 것이 좋다. 아이디를 남발하면 개발에서 네이밍 부딪치는 문제가 생기게 된다.
• 사이트 제작 중간중간 html,css 유효성 검사하기, openWax웹접근성검사, explorer 호환성 검사

반응형

• 반응형을 먼저 고려해서 메인까지 작업해야 한다! (%사용하기)
• 아이폰 최신기종은 4px을 1px로 압축하는 기술을 사용한다. 예를들어 4배 확대된 해상도로 디자인하면 기기에서 4 * 4 = 16배로 확대된 화면이 나오게 된다. (4배 축소된 디자인으로 작업해야하나...?)
• 해상도는 Resolution이 아닌 Logical Resolution 으로 작업해야한다. 작은 사이즈로 작업해야 실제 보일때 확대되어 보이기 때문
• 레티나 = 이미지는 1:1로 디바이스에 맞춘 크기가 아닌, 더 큰 것을 사용해서 css로 줄여야 한다. 그래야 모바일에서 확대되어 보았을 때 깨지거나 흐릿해지지 않는다. (디자이너가 이것까지 생각해서 이미지를 주진 않기 때문에..!)