CSS 썸네일형 리스트형 버티컬 얼라인 vertical align 버티컬 얼라인 한 줄 안에서 세로 정렬이 된다. 그러므로 부모의 line-height를 부모의 height와 동일하게 맞춰주게 되면 자식이 세로 정렬된다. 1234567891011 Colored by Color Scriptercs 1234567891011121314.wrapper{ background-color:mediumspringgreen; width:500px; height:400px; margin:0 auto; line-height:400px;}.box{ display:inline-block; width:200px; height:100px; background-color:green; vertical-align:middle;}Colored by Color Scriptercs vertical-alig.. 마진 병합 margin collapsing margin:20px; padding:20px이다. section #1 아래의 margin과 section #2 위의 margin을 합하면 40px인데 20px만 적용되었다. 이게 마진 병합이다. 마진 병합 현상의 조건인접해있는 block 요소끼리 일어남상하단에만 일어남의도된 동작이다 때에 따라 마진 병합이 문제가 되는 경우가 있다. 부모 div 안에 자식 div 2개를 넣었는데 위와 아래가 마진 병합 현상이 일어나 붙는 경우다. 이 경우 parent와 child 사이에 뭔가가 있으면 마진 병합 현상이 발생하지 않는다. parent의 padding을 1로 주면 이 현상이 사라진다.혹은 border를 1px solid transparent로 주면 된다.단점은 공간을 차지하고 있기 때문에 디자인할 때 의도대.. 라인 하이트 line-height 텍스트를 컨트롤하는 속성line-height:30px을 하면 줄 높이가 30px으로 변경된다. 하지만 글자 크기를 변경할 시에 글자 크기가 line-height 값보다 크다면 좁은 공간에 큰 글자가 들어가있어서 이상해보인다.그렇기 때문에 line-height:1.5 이런 식으로 작성해야 한다. 만약 부모의 line-height가 1.5em인 경우 font-size의 1.5배라는 의미인데 이렇게 단위가 명시되어 있으면 자식들의 글자 크기가 부모의 글자 크기와 다른 경우 글자가 이상해진다.예를 들어 부모의 font-size가 40px이고 line-height가 1.5em이면 자식들의 line-height는 60px가 된다. 여기서 자식의 글자 크기가 40px가 아닌 line-height보다 더 크다면 글자가.. display strong은 inline 속성을 갖고 있다. strong의 width, height는 변경되지 않는다. 텍스트 기반이라 너비 개념이 없다.padding 속성을 주면 좌,우는 적용되지만 상,하는 실제 줄간격이 변경되지 않고 배경색을 적용한 경우에만 두께가 달라진다.strong의 display 속성을 block으로 바꾸기 위해선 display:block;표시하고 싶지 않다면 display:none; 이미지는 inline 속성을 갖고 있지만 너비와 높이 지정이 가능하다. 그래서 inline-block 속성을 갖고 있다고 해야한다. 1234567strong.bold{ background-color:blue; display:inline-block; padding:10px; width:100px; height:1.. 가운데 정렬, negative margin index.html1234567891011121314 centering airplane Airplane in the sky Colored by Color Scriptercs style.css123456789101112131415161718192021222324252627282930313233343536body{ background-color:skyblue}.box{ background-color:white; width:60%; margin:100px auto; text-align:center;/*상속되는 요소이므로 .box의 자식들이 가운데 정렬됨*/ border-radius:20px; border-right:5px solid #aaa; border-bottom:5px solid #bbc;}.box h1.. 이전 1 2 3 4 5 다음
