FE/CSS(3)
-
[CSS] margin과 padding
css에서 간격을 조절하는 것 중에 "margin"인자와 "padding"인자가 있습니다. "padding"은 태그 안의 요소의 간격을 지정하는 것이라면, "margin"은 태그들 끼리의 간격을 지정하는 것입니다.
2024.01.27 -
[CSS] css의 flex 정렬
html의 태그를 이용하여 정렬을 할 때, 기본적인 방향은 가로 방향입니다. 하지만, css의 옵션으로 "flex"를 주게되면, 정렬 방향이 세로 방향으로 바뀌게 됩니다. "flex-direction" 인자를 통해서 원래 방향인 세로 방향으로 정렬되도록 변경할 수도 있습니다. 한편, css에서 "justify-content"라는 인자와 "align-items"인자가 있는데, "justify-content"라는 인자는 주축(flex)에 대해 어떻게 정렬할 지 선택하는 인자이고, "align-items"는 주축이 아닌 축에 대해 어떻게 정렬할 지 선택하는 인자입니다. 위의 글을 정리한 그림과 코드는 아래와 같습니다. 1 2 3 text text text
2024.01.27 -
[CSS] css의 선택자
html에서 tag를 사용할 때, css의 선택자로 id, class를 사용할 수 있습니다. id 선택자를 사용하는 경우, css에서 "#"으로 접근할 수 있고, class 선택자를 사용하는 경우, css에서 "."으로 접근할 수 있습니다. class, id 선택자를 이용하는 예시 코드는 아래와 같습니다. 로그인 페이지 ID: PW: 로그인 하기
2024.01.27