CSS3 썸네일형 리스트형 [Bootstrap4] d-flex 속성 (with breakpoints) d-flex 와 d-inline-flex d-flex : 한 row를 block 형태로 차지한다. d-inline-flex : 말 그대로, block 이 아닌 inline 형태이다. d-lg-inline-flex breakpoints 가 lg 이상일 때만 inline 형태를 띈다. lg 미만으로 내려가면 inline이 아닌 d-flex 형태를 띈다. Window Size 가 LG 일때 (992px 이상, 1200px 미만) Window Size 가 MD 일때 (768px 이상, 992px 미만) d-lg-inline-flex 블록 부분이, 더이상 inline 형태가 아닌 d-flex 형태가 되어 아래로 내려감 더보기 [Bootstrap4 사용법] justify-content 속성 그림으로 보는게 가장 빠르니 아래 그림을 참조하자. 아무것도 지정해주지 않는다면 default 속성은 justify-content-start 이다. between과 around의 차이점 around는 자신의 블록 기준으로 왼쪽, 오른쪽의 공백크기가 같다. (그래서 맨처음과 맨 끝이 채워져 있지 않다. 공백이 들어가기 때문.) between은 맨처음과 맨끝에도 채워져 있다. 더보기 [Bootstrap4 사용법] display 사용하기 1. div 를 inline 처럼 사용하기 (d-inline 클래스) 2. div 를 inline-block 으로 사용하기 (d-inline-block 클래스) ※ inline 과 inline-block 과의 차이점 윈도우 사이즈를 최대화 했을 때 (1792x919) 윈도우 사이즈를 줄였을 때 (929x919) 일정 breakpoint 를 지나면 d-inline-block 이 적용된 div의 경우 아래 row로 분리됨 윈도우 사이즈를 더 줄이면? d-inline 은 마치 문단마냥 자연스럽게 아래로 이어지지만, d-inline-block 은 하나의 div끼리 딱딱 분리됨 더보기 [Bootstrap4 사용법] Grid 사용하기 1. 똑같은 너비의 컬럼들 만들기 (Equal-Width Columns) 부트스트랩에서는 row와 col을 이용해서 그리드를 만든다. 똑같은 너비의 Columns 를 만들어보자 다음과 같은 row와 col 조합은 반응형 웹에서 어떤 size에 있어도 모양을 유지한다. Bootstrap에서 mx-0 는 negative margin을 없애주는 클래스이다. (-15px, -15px -> 이런식으로 margin 들어가있는 경우를 없애줌)\ 2. 한쪽만 긴 컬럼 만들기 (One Wider Column) 3. margin, padding 전부 없애기 (No Gutters) * no-gutters 를 적용하지 않았을 때 위의 진회색 박스와 비교해보면, negative margin 과 약간의 padding이 들어가 있.. 더보기 [CSS] display 속성 display 속성을 알아보기 이전에, div 태그와 span 태그를 알아봅시다. div block 형식으로 공간을 분할합니다. span inline 형식으로 공간을 분할합니다. div 를 쓰는 경우 span을 쓰는 경우 display 속성은 태그가 화면에 보이는 방식을 지정하는 속성입니다. none 태그를 화면에서 보이지 않게 만듬 block (= flex) 태그를 block 형식으로 지정함 inline (= inline flex) 태그를 inline 형식으로 지정함 inline-block 태그를 inline-block 형식으로 지정함 div 태그에다가 block 형식을 지정 했을 때 div 태그에다가 inline 형식 혹은 inline-block 형식을 지정 했을 때 더보기 [CSS] position 속성 프로그램을 개발할 때는 요소의 위치를 2가지 방법으로 설정합니다. 절대적 위치 좌표 : 요소의 X,Y 좌표를 설정해 지정 상대적 위치 좌표 : 요소를 입력한 순서대로 상대적 위치 지정 HTML 페이지 같이 사용자가 다양한 화면 크기로 실행할 수 있을 때는, 상대적 위치 좌표를 사용합니다. 절대적 위치 좌표는 특정한 크기의 영역을 지정한 태그 내부에서만 사용합니다. position 속성 HTML 태그의 위치 설정 방법을 변경할 때는 position 속성 사용 static 태그가 위에서 아래 or 왼쪽에서 오른쪽 순서로 배치됨 relative static 키워드로 초기 위치가 지정된 상태에서 상하좌우로 위치를 이동 absolute 절대적 위치 좌표를 설정 fixed 화면을 기준으로 절대적 위치 좌표를 설정 .. 더보기 이전 1 다음
