웹 (19) 썸네일형 리스트형 [HTML/CSS] 포트폴리오 페이지 - CSS: justify-content justify-content는 브라우저가 flex 컨테이너의 주축(가로축)과 그리드 컨테이너의 인라인 축(중심축)을 따라 콘텐츠 항목 및 주변 공간을 배분하는 방법을 정의하는 속성이다. 즉, flex 가로 정렬 사이의 간격을 배분할 수 있다. {display: flex}와 함께 사용시, 각 요소들 사이사이 간격을 균등하게 배분할 수 있다. 참고로, align-items는 세로축-교차축 기준 정렬이다. 따라서 flex-direction: column 또는 flex-direction: column-reverse일 때 세로 중간 맞춤 시 사용 출처: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content https://m.blog.naver.com/.. [HTML/CSS] 포트폴리오 페이지 - CSS Flex 출처: https://studiomeal.com/archives/197 Flex랑 Grid 설명은 1분 코딩 튜토리얼이면 될 거 같다. 이미지 자료랑 설명이 너무 훌륭하다. 내가 공부하면서 보기 위해 본문을 그냥 복붙해서 가져왔다. ▼▼▼▼▼▼▼▼▼▼▼ Flex 레이아웃을 만들기 위한 기본적인 HTML 구조는 다음과 같습니다. helloflex abc helloflex 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고,자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부릅니다. “컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것”이라고 생각하시면 됩니다. Flex의 속성들은, .. [HTML/CSS] 포트폴리오 페이지 - box-shadow, font-weight 포트폴리오 페이지 작업 중에 유용하게 사용한 CSS 속성 box-shadow 출처: https://aboooks.tistory.com/290 box-shadow: 박스 요소에 그림자를 넣는 속성 ☞ 문법 box-shadow: none | h-shadow v-shadow blur spread color | inset none 기본값. 그림자가 표시되지 않는다. h-shadow 필수 지정. 수평 그림자 위치. 양수 값을 지정하면 박스 오른쪽에 그림자가 드리워짐. 음수 값은 박스 왼쪽에 그림자 표시. v-shadow 필수 지정. 수직 그림자 위치. 양수 값은 박스 위쪽에 그림자, 음수 값은 박스 아래쪽에 그림자 blur 선택 지정. 그림자의 흐림 정도. 0으로 지정하면 그림자가 진하고, 숫자가 높아질수록 점점.. 이전 1 2 3 다음
