[CSS] inline, block 등

*헷갈리는 부분을 다시 보충해서 정리하기로 했다

 

 

 

하이퍼링크 등 텍스트 꾸며진 상태에서 css 속성 넣을때

• 꼭 그 속성태그를 찝어서 css로 꾸며줘야함
• div로 전체적으로 묶어서 찝기보단 div input 이런식으로 해야함

 

text-decoration

• none : 밑줄 지우기 (하이퍼링크 등 꾸밈요소 지울때)
• underline : 글자 아래 밑줄
• line-through : 취소선

 

display

• none : 보이지않음(아예 없음. 영역도 차지하지 않음)
• block : 블록박스 (블록태그인 div,p,h,li 에 해당.)
  • 가로영역을 다 채움. width, height 속성을 지정할 수 있음
• inline : 인라인박스 (인라인태그이 span, b, i, a 에 해당.)
  • width, height 지정 불가능. 줄바꿈이 안됨.
• inline-block : block과 inline의 중간.
  • 줄바꿈이 되지 않지만 크기를 지정 가능.(width, height 등)
  • 동일 라인에 여러 태그를 쓸 때 사용

 

em 배수단위 (1.2em = 1.2배)

스타일을 지정한 요소의 크기에 곱한값

 

 

 text-align

• 인라인 요소만 가로정렬 
  • 만약 div 안의 텍스트를 이 기능을 사용한다면 div는 블록요소 그대로고,
  • 텍스트는 인라인 요소기 때문에 그 부분만 정렬이 됨.
• left / right / center
• justify : 양쪽정렬 (양쪽 끝에 첫과 시작을 맞추고 남은간격은 각자 동등하게 나눔)

 

flexbox

• 아이템을 갖고있는 부모요소에 display: flex; 해서 flexbox의 기준을 만들어줌
• flex-direction : 수평/수직 중 어느방향으로 이동할건지 기준잡기 (주축잡기) (기본이 수평)
  • row :수평정렬 (왼쪽에서 오른쪽으로)
  • column : 수직정렬 (위에서 아래로)

• justify-content : 주축을 기준으로 요소정렬 (flex-direction: row 면 수평기준으로 첫,중간,끝)
• align-items : 교차축을 기준으로 요소정렬 (flex-direction: row 면 수직중간으로 첫,중간,끝)

 

 

line-height : 줄높이를 정하는 속성 (숫자 입력)

 

 

블록요소
address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset

figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6,

header, hgroup, hr, noscript, ol, output, p, pre, section, table, ul, video


인라인요소
a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i,

img, input, kbd, label, map, object, q, samp, small,

script, select, span, strong, sub, sup, textarea, tt, var

 

 

 

참고: http://www.tcpschool.com/css/css3_expand_flexbox