【CSS】리스트의 스타일 변경과 위치 변경, 그리고 여백

list-style: none;

목록의 시작 부분을 지우기

예.html

    <ul>
      <li>←ここに黒い点が表示されている</li>
      <li>←ここに黒い点が表示されている</li>
      <li>←ここに黒い点が表示されている</li>
    </ul>

웹
↓


이 검은 점을 지우기 위해 ...

예.css

li {
  list-style: none;
}

이 CSS를 적용하면 ...



사라졌습니다!

float

지정된 요소를 수평 정렬
값을 left로 설정하면 왼쪽 정렬, 오른쪽으로 설정하면 오른쪽 정렬

예.html

    <ul>
      <li>りんご</li>
      <li>みかん</li>
      <li>メロン</li>
    </ul>

웹
↓


보통이라면 이렇게 세로로 늘어서 버립니다.
이것을 나란히하고 싶다! ... 때 float 속성을 사용하면 ...

예.css

li {
  float: left;
}

웹
↓


가로 줄 지어졌지만 검은 점이 방해 ...
아까의 list-style: none;

예.css

li {
  float: left;
  list-style: none;
}

웹
↓


사라졌습니다!
하지만 사과 귤 멜론은 문자가 굉장히 보이기 어렵습니다 ...
여백을 취하려면 어떻게 하면 좋을까.

여백(패딩과 마진)

padding은 블록 안에 여백을 가져옵니다.
margin은 블록 외부에 여백을 둡니다.

무슨 일이라면 ...



아직 아무것도 여백을 취하지 않았을 때는 이렇게 됩니다.
이 빨간색과 파란색 사이에 여백을 넣으려면 margin 속성을 사용합니다.

margin-bottom: 100px;

여백이 잡혔습니다!
그리고 padding은 어떻게 될까 하면 ...



이렇게 됩니다.
쓰는 방법이 여러 가지 있으므로 정리합니다.


쓰는 법
설명


margin-top: 10px;
블록에 외부 10px 여백

margin-bottom: 10px;
블록 아래에 외부 10px 여백

margin-left: 10px;
블록 왼쪽에 외부 10px 여백

margin-right: 10px;
블록 오른쪽에 외부 10px 여백



쓰는 법
설명


padding-top: 10px;
블록에 안쪽 10px 여백

padding-bottom: 10px;
블록 아래에 안쪽 10px 여백

padding-left: 10px;
블록 왼쪽에 안쪽 10px 여백

padding-right: 10px;
블록 오른쪽에 안쪽 10px 여백


그 밖에도 쓰는 방법이 있어, 복수의 여백을 취하고 싶을 때는 아래쪽이 편리합니다!


쓰는 법
설명


margin: 10px;
블록 외부, 상하 좌우에 10px의 여백을 취한다

margin: 10px 20px;
블록 외부, 상하 10px, 좌우 20px 여백

margin: 10px 20px 30px;
블록 외부, 위로 10px, 좌우로 20px, 아래로 30px의 여백을 취한다

margin: 10px 20px 30px 40px;
블록 외부, 위로 10px, 오른쪽으로 20px, 아래로 30px, 왼쪽으로 40px의 여백을 취한다



쓰는 법
설명


padding: 10px;
블록 안쪽, 상하 좌우에 10px의 여백을 취한다

padding: 10px 20px;
블록 안쪽, 상하에 10px, 좌우에 20px의 여백을 취한다

padding: 10px 20px 30px;
블록 안쪽, 위로 10px, 좌우로 20px, 아래로 30px의 여백을 취한다

padding: 10px 20px 30px 40px;
블록 안쪽, 위로 10px, 오른쪽으로 20px, 아래로 30px, 왼쪽으로 40px의 여백을 취한다


이것을 이용해 조금 보기 힘들었던 사과 귤 멜론을 변경해 보겠습니다.

예.css

li {
  float: left;
  list-style: none;
  margin-right: 20px;
}

네 번째 줄에 margin-right: 20px; 를 추가해 보았습니다.

웹
↓


사과 귤 멜론이 되어 보기 쉬워졌습니다