HTML, CSS, javascript (36) 썸네일형 리스트형 반응형 실습 - 웹사이트의 크기가 줄어들 때 (예를 들어 PC > 모바일 환경) 안에 배치 된 사진의 배치가 바뀌는 웹사이트를 만들었다. - 너비가 좁아질 때 사진도 줄어들게 하기 위해 inner 클래스의 너비를 max값으로 잡았다. - 너비가 900px 이하가 되면 왼쪽 하단에 배치되어 있던 사진의 position값을 초기화 하고 float 시켜 오른쪽으로 배치되게 하고 다른 사진은 left: auto를 주고 right:0을 주어 오른쪽에 배치되게 했다. - 너비가 700px 이하가 되면 남은 사진도 position을 초기화하고 위의 그림처럼 배치되게 했다. 반응형 웹페이지를 스크린 상에서 반응된 결과로 보여주기 위해서 사용하며, pc사이즈뿐만 아니라 모바일 사이즈에서도 기기의 해상도에 반응하게 처리하기 위한 선결 조건은 '뷰포트' 추가이다. 뷰포트추가 - 모바일 해상도에 맞게 HTML 문서를 조절해 주는 속성들 width=device-width : 문서 너비를 현재 기기의 너비에 맞춘다. initial-scale=1 : 문서를 불러와 화면에 표시할 때 기본 배율을 1로 지정한다. 기본 개념 나(요소의 너비) ÷ 부모(콘텐츠를 감싸는 요소의 너비) × 100 = 가변 값 * 디자인된 시안에서 지정한 고정 값을 가변 값으로 변환하기 * - 요소의 너비를 %로 지정할 때 소수점 이하 숫자가 많다면 소수점 이하 3~4자리까지 표시하는 것이 좋다. 예) 요소 | 고정 그리.. Tab Menu 실습 - 탭버튼 01은 체크된 상태로 시작하기 위해 첫번째 input에 checked를 표시했다. - checked된 것을 확인하기 위해 input[type="radio"]:checked와 연결된 label을 쉽게 찾기 위해 바로 뒤에 작성하고 css에서 + 동위선택자로 지정하고 색을 변경했다. - radio 타입은 안보이게 하고 글자를 누르면 선택이 되게 하려고 label의 for과 input의 id를 동일하게 했다. - input이 선택되면conbox가 보이고 안보이고를 설정하면 위의 그림처럼 된다. flex 관련 이론 (3) align-self - 각각의 flex 아이템들의 교차 축 정렬 방식을 제어할 때 사용한다. flex-grow - flex 아이템이 기본 크기보다 커지게 할 때 사용하며, 컨테이너 내부에서 할당 받는 공간을 상대적으로 정의할 수 있다. - 2번째와 4번째 flex 아이템의 크기가 다른 flex 아이템에 비해 커졌으며, 4번째 아이템이 첫번째 보다 2배 큰것을 볼 수 있다. - 컨테이너의 크기가 작아지게되면 작동하지 않는다. flex-shrink - flex-grow 속성과 반대로 작아지게 할 때 사용한다. - 컨테이너의 너비가 좁을때 작동하며, 넓어지게되면 작동하지 않는다. flex-basis - flex 아이템의 초기 크기를 결정한다. 단위가 있는 값을 넣어야 한다.( 예 : px, %) order -.. flex 관련 이론 (2) 메인 축 정렬 - 메인 축 정렬 속성은 justify-content로 할 수 있으며 기본 속성은 flex-start이다. - flex-start : 메인 축 시작점을 기준으로 정렬 flex-end : 메인 축 끝을 기준으로 정렬 center : 메인 축 중앙 정렬 space-between : 좌우는 축의 시작과 끝에 배치하고 나머지를 여백을 주며 정렬 space-around : 각 요소의 좌우에 같은 여백을 주며 정렬 space-evenly : 모든 요소에 같은 여백을 주며 정렬 교차 축 정렬 - 교차 축 정렬 속성은 align-items로 할 수 있으며 기본 속성은 flex-start이다. - flex-start : 교차 축 시작 점을 기준으로 정렬 flex-end : 교차 축 끝을 기준으로 정렬 ce.. flex 관련 이론 (1) Flexbox - 화면의 크기가 동적으로 변하더라도 요소를 효율적으로 배치하기 위해 사용한다. - 블록 요소를 사용했기 때문에 위와 같이 세로로 정렬이 되어있다. 이때, 부모요소에 display:flex 를 입력한다면 다음과 같이 정렬이 된다. - 자식요소들에 display:inline-block을 입력한것 처럼 정렬이 되어있다. 하지만 큰 차이점은 다음과 같다. - inline-block 속성을 줬을 경우에는 자식요소들이 부모요소보다 차지하는 크기가 더 커져 아래로 내려간 모습을 보이지만 flex 속성을 줬을 경우에는 부모요소의 크기에 맞춰서 자식요소들의 크기가 자동으로 줄어들며 정렬이 된다. 메인 축과 교차 축 - flexbox에는 메인 축과 교차 축이 있는데 기본적으로 메인 축은 row(가로)이며 .. 정렬 관련 복습 - 수직 또는 수평으로 정렬하고 싶을 경우에 대한 복습 - 블록요소와 인라인 요소일 때를 구분하여 정리했다. Modal 실습 - input 태그와 label 태그를 이용하면 간단하게 modal창을 만들 수 있다. - view를 누르면 창이 생성 되고, 화면 밖의 검정색 배경을 선택하거나, x버튼을 클릭하면 창이 닫히게 된다. 이전 1 2 3 4 5 다음
