[css] clearfix, 텍스트 위아래로 가운데 정렬, 가운데 정렬, 선 긋기

clearfix

사용하고자 하는 div 에다가 class="clearfix" 를 추가해주어야 한다.

<div id = "content" class="clearfix">

그리고나서 style 태그 안에서 clearfix 를 설정해주어야 한다.

.clearfix{

overflow: auto;

}

.clearfix::after{

clear: both;

display: block;

content: "";

}

설정을 해주고나서 우리는 네비게이션이

ex)

이름

나이

성별

로 출력하고 싶은게 아닌

ex)

이름 나이 성별

로 출력하고 싶기 때문에 해당 nav 에서 float을 추가해줘야 한다.

jcode/index.html 에서는 .navigation_list 로 되어 있기 때문에 추가를 하면

.navigation_list{

  float: left;

  width: 142px;

  line-height: 40px; /* 텍스트를 상하로 가운데 정렬하는 속성*/

  text-align: center; /* 가운데 정렬 */

}

와 같이 추가되는 것을 볼 수 있다.

텍스트 위아래로 가운데 정렬, 가운데 정렬

line-height: 40px; 텍스트를 상하로 가운데 정렬하는 속성

text-align: center; 텍스트 가운데 정렬

선 긋기

border-top: 1px solid #efefef;      //위에 선 긋기

border-bottom: 1px solid #efefef; //아래 선 긋기