text-align과 정렬
body tag의 style에 text-align: center;를 하면 대부분의 텍스트가 정렬이 잘 된다.(일단 수평정렬)
아래와 같은 이유들이다.
- text-align: center; 은 자식 요소들에 상속 된다.
- 상속? css의 property들은 기본적으로 상속되는지 아닌지 정해져있다고 한다. MDN의 Inheritance에 나와있는 문장이다.
Which properties are inherited by default and which aren't is largely down to common sense. If you want to be sure, however, you can consult the CSS Reference
원글 링크
- block 요소는 width: 100% 이고 text-align: center;가 상속됐다. block내에서 text가 가운데정렬되면 화면 가운데로 정렬되는 것처럼 보인다.
- inline 요소는 text처럼 취급되므로 중앙정렬된다.
하지만 block 요소의 width를 바꿔주면 block 요소는 text처럼 취급되지 않으므로 가운데 정렬이 풀린다. block 요소를 정렬하는 방법을 정리해야 한다.
css 잡다한 내용들 (study중 공부한 것들)
- display block 은 margin이 위아래 겹쳐지고, inline 요소들은 양옆만 margin이 있고 서로 겹치지 않는다.
- html내에서 띄어쓰기를 페이지에 반영하려면
,  ,  ,  를 사용하면 된다. - table을 이용해서 form을 작성해주면 정렬이 편하기 때문에 유용하다.
- br 태그보다 p 태그를 이용해서 줄바꿔주는 것을 권장한다고 한다.
- input tag를 사용할 때 form 태그로 감싸주는 것이 좋다고 한다.
태그별 기억할만한 요소들
- img tag
- alt
- input tag
- checked
- li tag
- list-sytle-type, list-style-image
- table tag
- thead, tbody, tfoot, th (th는 자동으로 bold체가 적용된다.)
- colspan, rowspan
- select, option tag
- pre tag
궁금증들
- 코드스테이츠 페어프로그래밍 문제, 다시 보니 문제가 잘 안풀렸음 (https://jsbin.com/sehacaxasu/edit?html,js,console)
- html내에 javascript스크립트 써주려면 script태그 내에 type="text/javascript" 써줘야 하는 이유는?
- meta, viewport tag 등의 쓰임새
- body 태그의 height는 컨텐츠를 감싸는 정도의 높이다. 그렇지만 막상 div가 body를 뚫고 나가기도 해서 좀 의문이다. body 태그의 기본 크기가 어떻게 정해지는건지 알 필요도 있을 것 같다. body의 background css는 또 화면 전체에 적용된다. (https://codepen.io/ktseo41/pen/NZWXBQ)
FE Developer @Medistream