YTCW

10. CSS (Layout, display, float, clear) 본문

카테고리 없음

10. CSS (Layout, display, float, clear)

YTCW 2024. 8. 8. 14:03

1. display 속성

배치방법

- 가로와 세로 배치를 위해 주로 사용한다.

block 인라인 레벨 요소를 블록 레벨 요소로 전환
inline 블록 레벨 요소를 인라인 레벨 요소로 전환
inline-block 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지는 속성 / 마진과 패딩 지정 가능
none 해당 요소를 화면에 표시하지 않는 속성

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS display 속성</title>
  <style>
    * {
      box-sizing: border-box;
    }
    nav ul {
      list-style:none;      
    }
    nav ul li {
      display:inline-block; /* 인라인 레벨 요소와 블록 레벨 요소 모두 지정 */      
      padding:20px;
      margin:0 20px;
      border:1px solid #222;
    }
  </style>
</head>
<body>
   <nav>
     <ul>
      <li>menu 1</li>
      <li>menu 2</li>
      <li>menu 3</li>
      <li>menu 4</li>
     </ul>
   </nav>
</body>
</html>


2. float 속성

왼쪽 or 오른쪽으로 배치

p 태그처럼 문단의 왼쪽이나 오른쪽에 이미지를 나란히 표시해야할 경우 사용

근데 요즘은 거의 flex를 사용하는느낌

left 해당 요소를 문서의 왼쪽에 배치
right 해당 요소를 문서의 오른쪽에 배치
none 좌우 어느 쪽에도 배치하지 않는 속성 : 기본

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS float 속성</title>
  <style>
    body {
      width: 600px;
      height: 600px;
    }
    img {
      width: 300px;
      height: 300px;
      float:left;  /* 왼쪽에 떠 있게 */
      margin-right:40px;
    }
  </style>
</head>
<body>
  <img src="./lotte-white.jpg">
   <p>롯데 자이언츠(Lotte Giants)는 대한민국 부산광역시를 연고지로 하는 KBO 소속 프로 야구 팀이다. 사직야구장을 홈구장으로 사용하고 있으며, 울산문수야구장을 제2홈구장으로 사용하고 있다.</p>
   <p>1975년에 실업 야구단으로 창단되어 역대 KBO구단중 가장 오래된 구단이다. 1982년에 프로 야구단으로 전환했다. 1984년과 1992년 두 차례 한국시리즈 우승을 차지했고, 2008년부터 2012년까지 5년연속 포스트시즌 진출을 이루어냈다.</p>
   <p>롯데 자이언츠의 별명은 부산광역시의 상징 새가 갈매기이고, 구단의 대표적 응원가도 〈부산갈매기〉라서 “부산 갈매기"라고 부른다. 롯데 자이언츠의 2023시즌 우승을 응원합니다!</p>
</body>
</html>

 

3. clear 속성

float를 사용한뒤에 속성 해제를 시켜줘야한다.

더이상 유용하지 않다고 알려주는 속성

left float : left 해제
right float : right 해제
both float : left와 float : right 해제