float와 display:inline-block의 특징 이해하기

요소 사이에 여백이 있고 좌우로 배치되는 경우

  • 기업가 정신

    기업가는 문제 해결을 위해 노력하고 답을 찾아내는 사람입니다. 옐로모바일은 이러한 기업가 정신으로 새로운 문제에 도전하고 세상을 개선해 나갈 것입니다.

  • 협업

    전통 산업 시대 1+1은 2였지만, 모바일 시대 1+1은 11 이상의 가치를 만들어 냅니다. 옐로모바일은 젊고 강한 기업들의 협업을 통해 새로운 시너지와 도약을 일궈 내겠습니다.

  • 성장 발전

    옐로모바일은 기업과 그 생태계, 사회 모두 지속적으로 성장하고 발전해야 한다고 믿습니다. 그 구성원 개개인 역시 조직과 함께 더 크게 자라날 수 있도록 최선의 노력을 다할 것입니다.

  • 변화 창출

    하나의 파도는 하나에 그치지 않고 수백 수천의 파도로 이어집니다. 옐로모바일도 끊임없이 주변에 영향을 미치며 새로운 변화를 이끌어 나가겠습니다.

html은 <ul> <li> <h3>기업가 정신</h3> <p>기업가는 문제 해결을 위해 노력하고 답을 찾아내는 사람입니다. 옐로모바일은 이러한 기업가 정신으로 새로운 문제에 도전하고 세상을 개선해 나갈 것입니다.</p> </li> <li> <h3>협업</h3> <p>전통 산업 시대 1+1은 2였지만, 모바일 시대 1+1은 11 이상의 가치를 만들어 냅니다. 옐로모바일은 젊고 강한 기업들의 협업을 통해 새로운 시너지와 도약을 일궈 내겠습니다.</p> </li> </ul> css는
ul li{
    display: inline-block;
    width: 300px;
    vertical-align: top;
}
- 넓이를 제한하고 display:inline-block;을 주면 li요소들이 좌우로 배치됨. 단, li에 여백을 주지 않아도 li사이에 빈칸하나의 여백이 발생한다. (여백을 주고자 할때는 그 여백을 감안하고 줘야함) - li 안의 콘텐츠의 높이가 다르다면 li들이 bottom을 기준으로 정렬한다. 상단을 기준으로 정렬하게 하려면 vertical-align:top;을 줘야함.

문제점

요소 사이에 여백이 없고 좌우로 배치되는 경우

html은 <ul> <li> <a>학사일정</a> </li> <li> <a>입학정보</a> </li> </ul> css는
ul li{
    float: left;
    width: 250px;
}
- li에 넓이를 제한하고 float:left;을 주면 여백없이 li요소들이 좌우로 배치됨.

문제점