예전에 공책에 필기해놨던 것들이 굴러다녀서 복습 차원에서 정리하고자 한다...!
* <인라인 요소> 에는 span, a, br, vidio, audio, before, after, label 등이 있다.
기본 너비 값은 컨텐츠의 너비 값과 같으며,
한 줄에 여러 개가 배치 될 수 있다.
크기값을 가질 수 없으며,
상하마진은 가질 수 없다(좌 우 마진은 가질 수 있음)
수평중앙정렬시 부모요소에 text-align: center; 를 준다.
- 또한, 가상클래스 before, after는 인라인 요소이다.
그렇기 때문에 크기값을 주기 위해서는 블록 요소나 인라인-블록 요소로의 변경이 필요하다.
- 어떤 요소든지 position: absolute 속성을 가지면
블록 요소는 인라인 블록 요소로 바뀔 수 있다.
= position: absolute; 속성이 있으면 크기값을 줄 수 있게 된다.
* <블록 요소> 에는 div, header, nav, footer, section, p등이 있다.
기본 너비 값은 100%이며,
한 줄에 하나씩만 배치된다.
너비값, 높이값을 가질 수 있고
상하 좌우 마진을 가질 수 있다.
수평중앙정렬시 자신에게 margin: auto; 를 준다.
* <인라인 블록 요소>에는 img, input태그들, button, fontawesome 등이 있다.
기본 너비 값은 인라인 요소와 동일하게, 컨텐츠의 너비 값과 동일하고
인라인과 동일하게 한 줄에 여러 개 배치가 가능하다.
블록과 동일하게 크기 값을 가질 수 있다.
블록과 동일하게 상하좌우 마진을 가질 수 있다.
수평중앙정렬시 부모요소에 text-align: center; 를 주면 된다.
다만 기본 마진값이 있어서, 정렬이 잘 안 되면 fz: 0;을 해줘야 한다.
* 엘리먼트 보이기/감추기
- opacity: 0;
화면상 안 보이지만 공간의 크기는 유지하고, 실제로 존재한다.
디자인툴의 opacity와 동일하다고 생각하면 편하다.
- visibility: hidden;
화면상 안 보이지만 공간의 크기는 유지하고, 실제로 존재하지 않는다.
- display: none;
화면상 안 보이고, 공간의 크기가 없고, 실제로 존재하지도 않는다.
예전에도 나는 열심히 하긴 했었구나 싶다.
지금 회사에 갑자기 취업하느라 멈췄던게 아쉽다.
혼자서 하니까 이것부터 해야되나 저것부터 해야되나~ 어디부터 어디까지 필요한가,
내가 뭘 모르는지에 대한 가이드라인이 없어서 우왕좌왕 중이다. ㅠㅠ