TIL 16 :: css할 때 고려해야할 것

CSS 설계 기법

HTML은 최대한 단순한 구조를 짜는게 좋듯이 CSS도 코드의 중복이 없도록 모듈화를 시키는것이 유용하다. 그래서 같은 button들이라면 .btn .btn1 이렇게 만들어 .btn에는 공통적인 속성을 주고 .btn1에는 각 버튼별 속성을 추가해주는식으로 한다. 

 

OOCSS (Object Oriented CSS)가 앞서 설명한 방식으로 레고처럼 버튼, 글자, 내용 부분들을 모듈화 해놓고 조합하는 방법론이다.

 

모듈화의 장점은 홈페이지를 제작할 때 공통속성을 한번의 작업만 하면 된다는 것이다. 굳이 각각 작업해서 맞추는게 아니라 같은걸 사용한다면 수정이나 시간절약에 좋을것이다. 

 

그리고 css에서 동일한 이름을 정하기도 하는데 이건 회사마다 다르다고한다. 아래 사진은 참고용으로 좋다.  

 

Code Convention

프로젝트할 때 정말 많이 중요하다! 코드를 작성한 사람은 쉽게 파악할 수 있겠지만 처음 보는 사람들에게는 시간이 오래걸릴 수 밖에 없다. 그러니 처음봐도 쉽게 이해할 수 있게 코드 작성하는법에 대한 규칙을 정리해두는 것이다. 

 

깃헙에 코드를 올렸다면 README.md에 HTML, CSS 등 프로젝트 가이트에 대해 써두면 좋다. 

 

---

실습 - Login & SNSLogin

---

위의 두 모달창을 만들어오는 과제로 JS는 선택이었다.

 

내 결과물

https://github.com/joodb/input_snsLogin

GitHub - joodb/input_snsLogin: login modal+ JS

 

 

주의 or 수정 필요

문구

로그인 또는 회원가입이라고하면 소셜로그인까지 알려주기위해

회원가입, 로그인 또는 소셜서비스로 로그인이라고 별도의h2를 만들어준다.

 

X버튼

• alt에 close보다 모달창 닫기같이 자세하게 써두면 좋다.
• 웹표준과 위에서부터 아래로 내려가는 DOM 읽기 방식을 고려해야한다.
  • HTML구조에서 '로그인 또는 회원가입' 바로 뒤에 있는것이 아니라 그 영역 바깥에 따로 배치해주어야한다. 

 

Input 

• input + input 같이 combinator 선택자로 하단 문구의 css를 동일하게 적용할 수 있다.
• input쓸때 label 쓰고 hidden을 시킨다. 

 

Checkbox

• html은 간결할수록 좋기 때문에 이렇게 한 줄로 된 부분은 굳이 묶어줄 필요없다.  만약 아래 사진 처럼 p태그로 묶고 <p>에 hover를 준다면 오히려 공백에도 효과가 적용되기 때문에 따로 묶지 않아도 된다.

 

• label에 가상요소 써서 체크 이미지도 가능하다

 

<a href> 반환값 

a에 값을 넘기지 않을 때 href에 "#none"을 넣었었는데 정확하게 반환값이 없다는걸 보여주기 위해서는 href="javascript:void(0)"으로 작성하면 된다. 

 

 

이렇게 요소들을 하나씩 모듈화로 만들어놓는 연습이 중요하다. 

 

+ HTML 특수문자 리스트

회원가입 | 아이디/비밀번호찾기 

여기서 | 를 가상요소로 표현하는 방법이 여러가지 있다. content에 "|"로 텍스트로 직접 적거나 content는 비워두고 width, height를 줄 수 있다. 그런데 이번에 새롭게 알게 된 방법은 특수문자를 넣는것이다.

 

해당 사이트에서 특수문자들 종류를 확인할 수 있다. 

 

특수문자를 쓰면 뭐가 다를까? 

- 문자로 넣으면 가상요소로 넣는다해도 스크린리더가 읽게되는데 특수기호로 넣으면 읽지 않는다

 

http://kor.pe.kr/util/4/charmap2.htm

HTML 특수문자 리스트