display: grid - column과 row를 설정할 수 있는 display 속성 - display: grid로 설정한 요소는 grid container가 된다. - display: grid로 설정한 요소는 grid container가 된다. grid-template-columns - 컬럼의 개수 및 너비를 지정 - fr을 통해 너비의 비율을 설정할 수 있다. grid-template-rows - 행의 개수 및 높이를 지정 column-gap - 각 컬럼 사이의 간격 설정 row-gap - 각 행 사이의 간격 설정 # display: grid column과 row를 설정할 수 있는 display 속성 display: grid로 설정한 요소는 grid containe..
Position property - 포지션이 설정되지 않은 요소들을 무시하면서 요소를 마음대로 배치할 수 있는 속성 - static : defalut, 포지션이 설정되지 않은 상태 - absolute : 부모 요소 내에서 절대적인 위치를 설정 (부모 요소도 포지션이 설정되어있어야 부모로 인식된다.) - relative : 해당 요소가 원래 있던 위치로부터 상대적인 위치를 설정 - fixed : 화면에 고정되는 위치를 설정 - sticky : 스크롤이 변하면서 고정될 위치를 설정 - 포지션을 설정하고 난 후 top/bottom, left/right로 위치를 설정할 수 있다. - 포지션이 설정된 요소들 끼리는 겹칠 수 있으므로 높낮이 개념이 존재한다. (어떤 요소가 더 위에 있어야 하는지는 z-index p..
display: flex - 내부 요소들의 크기를 자동으로 조절해주는 display 속성 - display: flex로 설정한 요소는 flex-container가 되고 해당 컨테이너 내부의 요소들은 flex-item이 된다. flex-direction : 이 컨테이너가 items를 나열하는 방향 결정 - row : 가로로 나열하기 (왼 -> 오) - row-reverse : 가로로 나열하기 (오 -> 왼) - column : 세로로 나열하기 (위 -> 아래) - column-reverse : 세로로 나열하기 (아래 -> 위) flex-direction: row-reverse; /* items의 방향을 결정 */ justify-content : flex-direction 방향의 정렬 설정 - flex-st..
Display property - 해당 요소가 어떻게 보여야 할지를 결정하는 속성 - 요소가 보이는 방식에는 기본적으로 block과 inline이 있다. display: block - 항상 한 줄을 모두 차지한다. - 기본 너비는 100%로 설정되어 있다. - 박스 취급 - padding과 margin을 통한 여백 설정이 가능하다. - ex - div, p, h, ul, li, ...등의 기본값 display: inline - 한 줄을 차지하지 않고 필요한만큼만 차지한다. - 글자들 사이에서 특정 부분을 선택할 때 주로 사용한다. - padding과 margin이 제대로 적용되지 않는다. - ex - span, a, b, i, mark, ...등의 기본값 display: inline-block - inl..
Float - 다른 내용(content)들이 해당 요소를 비켜가게 만든다. - float 설정한 요소는 둥둥 떠있는 요소로 바뀐다. - float 요소끼리는 한 줄을 가득 채우면 다음줄로 넘어가는 특성이 있다. - clear 속성을 사용해 원하는 쪽에 float 요소가 오지 않게 할 수 있다. - float 요소는 해당 요소를 포함한 요소의 크기 결정에 영향을 미치지 못한다. - float 설정된 요소가 바깥 요소를 넘치지 않게 하기 위해 float이 포함된 요소의 맨 마지막에 가짜 요소를 추가하고 clear를 통해 요소의 크기를 늘려주는 것이 좋다. float: left; # Float 다른 내용(content)들이 해당 요소를 비켜가게 만든다. float 설정한 요소..
Pseudo element - 해당 요소의 특정 부분을 선택하는 선택자 - 선택자 뒤에 ::을 붙여 원하는 부분만 선택할 수 있다. - ::first-letter - 첫 번째 글자 - ::first-line - 첫 번째 줄 - ::selection - 블록지정된 부분만 선택 - ::before - 해당 요소의 맨 앞부분을 선택 - ::after - 해당 요소의 맨 뒷부분을 선택 # Pseudo element 해당 요소의 특정 부분을 선택하는 선택자 선택자 뒤에 ::을 붙여 원하는 부분만 선택할 수 있다. ::first-letter - 첫 번째 글자 ::first-line - 첫 번째 줄 ::selection - 블록지정된 부분만 선택 ::before - 해당 요소의 맨 앞부분을 선택 ::after - 해..
Pseudo class - 선택자 뒤에 추가해 해당 요소의 특정 상황만을 선택하는 것 - 선택자 뒤에 :을 붙여 원하는 특정 상황만을 선택할 수 있다. 종류 - :first-child - 해당 요소가 첫 번째 자식인 상황에 적용할 스타일 - :first-of-type - ... - :hover - 마우스가 해당 요소 위에 올려져있는 상황 - :link - 해당 링크가 방문한 적 없는 링크인 상황 - :active - 해당 링크를 클릭하는 중인 상황 - :visited - 해당 링크에 방문한 적이 있는 상황 # Pseudo class 선택자 뒤에 추가해 해당 요소의 특정 상황만을 선택하는 것 선택자 뒤에 :을 붙여 원하는 특정 상황만을 선택할 수 있다. # 종류 :first-child - 해당 요소가 첫 ..
Icon CDN 1. Goolge Icon 2. Font-awesome - 아이콘은 실제로는 글꼴이기 때문에 글자색과 글자크기를 설정하여 색상과 크기를 설정할 수 있다. Google Icon search Font-awesome
