CSS, 나에게 어려운 수평 수직 ..line-height / text -align / vertical-align / border-collapse

line-height

글자 중심선을 기준으로 한 top~bottom 까지의 전체 높이.

글자 중심선으로 부터 top이나 bottom 까지의 개별 높이가 아님에 주의

line-height 의 지정은 본인 요소가 아닌 부모 요소에 지정함으로써,

부모 요소 안에서의 자식 요소에 대한 요소의 높이가 결정됨의 주의

 

h2:nth-of-type(n+4)+p {
    width: 500px;
    height: 100px;
}

h2:nth-of-type(4):hover+p {
    text-align: center;
    line-height: 100px;
}

 

 

 

 

500 , 100 px

 

 

 

line-height 를 똑같은 높이 100px 을 주면서 , 수평 정렬

 

 

 

line-height 의 % 예외.

 

line-height 에 대한 % 적용은 상위 부모 요소에 적용된 누적 백분율이 아닌,

해당 요소의 font-size 크기에 대한 백분율이 적용됨에 주의.

따라서 아래의 line-height : 200% 는 기본 16px 이 가지는 line-height에 대한 200%가 된다.

div {
    text-align: center;
    line-height: 100px;
}

h2:nth-of-type(6)+div p {
    text-align: center;
    line-height: 200%;
}

    <h2>6. line-height - % 예외</h2>
    <div>
        <p>
            Lorem ipsum dolor sit amet consectetur.<br>
        </p>
    </div>

 

line-height : normal ;

 

line-height 또한 계층 내 상속이 이루어 지며 ,

normal 적용시 해당 요소가 가지는 font-size 크기에 적용되는 디폴트 line-height 값이 적용된다.

 

---

text-align

 

부모가 되는 블럭 요소나 테이블 요소에 정렬 속성을 지정함.

부모요소 내의 인라인 또는 인라인 블럭 요소들에 대한 수평 정렬 지정.

 

• text-align : left ;  좌측정렬
• text-align : right ;  우측정렬
• text-align : center ; 중앙정렬
• text-align : justify ; 음절에 맞춘 양쪽 정렬(아래에서 자세히 다루겠다.)

text - align : justify;

 

양쪽 정렬.

문장의 해당 영역의 너비를 넘어가 줄내림이 일어나는 경우 단어가 걸리면,

단어를 깨지 않고 경계에 걸리는 어절에 맞춰 줄내림이 일어난 후 , 

줄내림 마다 너비 만큼 단어간 공백이 자동으로 조절된다.

따라서 , 경계에 걸리는 음절이 긴 경우,  그 상단의 줄 위에서 , 단어간의 공백이 너무 커져 보기가 좋지 않게 된다.

 

 

word-break : break-all ;

justify 에서 단어를 깨지 않고 줄내림이 되어 발생 가능한 넓은 공백이 생기는 부분에 대해.

너비 영역 끝에서 단어를 깨면서 줄내림이 되어 , 자동 정렬로 인한 늘어진 공백이 발생하는 문제점을 해소한다.

 

 

 

---

vertical-align

 

인라인 요소인 텍스트를 기준으로 높이가 다른 인라인 또는 인라인 블럭 요소들의 수직 정렬을 지정.

대표적 텍스트 성격을 가지는 인라인 블럭 요소인 이미지의 경우 디폴트 설정을 유지하는 경우,

부모 요소 내에서 텍스트의 baseline 을 기준으로 이미지의 하단 부분부터 표시되는 특성으로 인해,

항상 부모요소 내에서 하단 부분의 간극이 발생되는 것을 확인 할 수 있다.

따라서 이미지를 부모요소내에 배치하는 경우 vertical-align 속성을 top , bottom , middle 로 지정함으로

하단 간극을 해결 할 수 있다.

 

• 높이가 결정된 부모 요소 내에서 이미지 수평 수직의 정렬

vertical-align : middle ; 지정

• 높이가 결정된 부모 요소 내에서 텍스트 수평 수직 정렬

font size , height , text-alingn:center , line-height 지정.

 

 

* 텍스트가 아닌 이미지같은 다른 인라인 블럭 요소의 수직 위치는

인라인 블럭 요소 자체의 vertical-align 위치가 아닌,

텍스트의 vertical-align 위치를 기준으로 한 상대적인 수직 위치가 결정됨의 주의

 

즉, vertical-align 의 기준은 무조건 텍스트를 기준으로 한다.

 

---

border-collapse : separate ; (디폴트값)

개별 셀들을 독립적으로 분리하여 셀들의 간격을 발생.

border-collapse : collapse ;

셀들의 간격을 없애서 경계를 통합시킴.

 

각 셀은 별도의 독립된 border-line 설정이 가능하며 , 각 셀의 경계는 일정한 간격이 존재한다.

별도의 지정하지 않는 상태로 border-line 을 지정하면 , 각 셀의 경계로 일정한 간격 발생을 볼 수 있다.

따라서 이러한 간격을 없애고 border-line 이 중첩되어 통합되도록 설정하려면 collapse 값을 지정한다.

단 , 이 때 부모요소가 되는 table 태그에 지정해야만 , 

부모 자신을 포함한 하위 태그들에 대한 속성 값이 적용됨에 주의.

 

*테이블은 블럭 요소임의 주의하자.

 

테이블 테두리 라인을 지정할 때 ,

table 자체에 border를 적용하면 외곽 테두리 라인만 적용되는데 반해,

td 나 th 태그에 보더라인을 적용하면 각 요소마다 테두리가 적용되어 전체적인 테두리 완성이 가능하다.

 

.ver-top {
    vertical-align: top;
}

.ver-middle {
    vertical-align: middle;
}

.ver-bottom {
    vertical-align: bottom;
}