컴퓨터 공부하는 블로그 컴퓨터 공부하는 블로그

플렉스 아이템의 정렬 기준 플렉스 컨테이너 안의 각 아이템들은 어떠한 가상의 정렬 기준에 의해 정렬된다. 예를 들어 'display' 속성의 속성값으로 'flex'를 주면 수평축을 메인축으로 요소들이 정렬된다. 그리고 이러한 메인축은 'flex-direction' 속성으로 변경해줄 수 있다. 'flex-direction'의 속성값으로 줄 수 있는 값은 다음과 같다. flex-direction: 속성값; 속성값 설명 row 수평축을 메인축으로 설정. 왼쪽에서 오른쪽으로 아이템 나열. row-reverse 수평축을 메인축으로 설정. 오른쪽에서 왼쪽으로 아이템 나열. column 수직축을 메인축으로 설정. 위에서 아래로 아이템 나열. column-reverse 수직축을 메인축으로 설정. 아래에서 위로 아이템 ..

플렉스 박스란? 레이아웃 모델로서 서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재정렬되고 언제나 레이아웃을 똑같이 유지할 수 있게 만들어준다. 플렉스 박스의 구성 아이템 1 아이템 2 아이템 3 플렉스 박스는 플렉스 컨테이너와 플렉스 아이템으로 구성된다. 플렉스 박스는 플렉스 아이템들을 하나로 묶어주는 역할을 한다. 그리고 박스 안에서 아이템들이 어떻게 배치될지 설정을 해준다. 플렉스 박스 설정하기 아이템 1 아이템 2 아이템 3 아이템 4 아이템 5 HTML 상으로는 여러 아이템을 묶어줄 박스를 만들어주고 그 박스는 플렉스 컨테이너로 활용한다. 그리고 박스 안에 들어간 각 아이템들은 플렉스 아이템으로 이용해준다. 예시에선 우선 아이템으로 활용할 태그를 여러개 만들어줬다. 그후 태그를 ..

colspan과 rowspan 테이블을 이용하다보면 가끔 테이블 셀을 합칠 일이 생긴다. 그럴 때면 과 으로 나눠진다. 은 세로줄을 나타내고, 은 가로줄을 나타낸다. 하지만 span에서 은 가로 방향으로 셀을 합쳐주고 은 세로 방향으로 셀을 합친다. 과 모두 전체 테이블 칸수보다 더 많은 칸을 쓸 수 없다. 예를 들어 테이블 가로 세로 3칸짜리 테이블에서 과 에게는 3까지 줄 수 있다. 그 이상의 숫자는 주어져도 동작을 하지 않는다. 태그 - 가로방향 셀 병합 대형 마트 목록 이마트 롯데마트 홈플러스 대형마트 목록 이마트 롯데마트 홈플러스 태그를 쓰면 가로 방향으로 셀을 병합할 수 있다. 이때 의 최대 범위는 3이다. 태그 - 세로 방향 셀 병합 마트 목록 이마트 롯데마트 홈플러스 빅마트 이마트 트레이더..