HTML+CSS (30) 썸네일형 리스트형 Bootstrap 사용 방법 1. getbootstrap 사이트 접속 > all release 버전 클릭 2. 희망하는 버전 클릭 3. css 코드 복사 후 css 파일 link 위쪽에다가 붙여넣기 html/css #21-모달창 만들기, has() 모달 창이 덜컹거리지 않게 하는 방법 모달창 전체를 싸는 div를 하나 만들어서 100vw로 한다. 모달창은 전체 창 (배경 포함) 을 가져간다. 백그라운드를 가져감 head의 크기 조정(반응형) .modal-inside { margin: auto; width: 100%; max-width: 640px; box-shadow: 0 0 20px lime } head의 width는 100%로 주고, max를 통해 제어한다! ㄴ 반응형에 용이 모달의 내용이 늘어나는 경우 modal 전체 페이지에 overflow: auto 를 주어 컨텐츠가 늘어나면 스크롤이 생기도록 한다. 모달창은 재사용성을 고려한다. ... ㄴ modal modal-inside는 재사용성이 가능한 애들이므로, 다음 요소는 통으로 구분되어 가져.. html/css #22-table table의 기본 마크업 구조 ㄴ table > tr > td 연도 제목 감독 관객수 2015 어벤저스 조스 웨던 20명 caption으로 테이블에 제목 넣기 테이블 연대기 rowspan으로 table안의 상하 값이 겹칠 때 병합해준다. 연도 제목 감독 관객수 2015 어벤저스 조스 웨던 20명 2015 어벤저스 20명 colspan으로 table의 좌우 값이 겹칠 때 병합해준다. 총 관객 수 8명 th 태그로 제목행 나타내기 * 제목행에 해당되는 부분에는 태그를 사용한다. 연도 제목 감독 관객수 scope 속성 추가 : 웹 접근성 고려하기 스크린 리더기가 읽기 쉽도록 scope 속성을 추가해준다. 연도 제목 감독 관객수 colspan, rowspan을 사용해서 병합 테이블 만들기 1.. html/css #20-position sticky 속성, 회의실 대시보드 position: sticky ㄴ기본은 relative, 밑의 요소와 충돌하는 순간 fixed로 바뀐다. ㄴ해당 컨테이너가 끝날 때 까지 동작하고 사라진다! 드래그하면 해당 부모 요소의 끝 길이까지 남아있다가 함께 사라진다! 회의실 대시보드 코드 리뷰 wrapper에 padding 필요할 땐 box-sizing: border-box 값 주기 .wrapper { display: flex; height: 100vh; padding: 20px; box-sizing: border-box; border-radius: 28px; } ㄴ 전체 창 기준으로 패딩을 줄 때는 box-sizing: border-box; 를 해줘서 스크롤이 잡히지 않고 예쁘게 마무리 되도록 한다. position:sticky 적용한 head.. html/css #19-form form으로 데이터 보내기 action: 보낼 곳을 적는다. (ex. 이메일주소 비밀번호 로그인하기 form태그 세부 내용 채우기 legend는 form태그에 종속적인 제목 태그이다. label for 를 통해 각각의 용도를 설명해준다. button type은 submit *lable의 for과 input의 ip를 동일한 이름으로 잡아준다. 이메일로 로그인하기 이메일주소 비밀번호 로그인하기 all: unset ㄴ 윈도우에서 제공하는 쓸만한 속성들도 모두 unset 되므로 주의 ㄴ 대표적으로 display: block 요소들이 inline 으로 변한다. button 요소를 컨테이너 크기만큼 가득 채우기 (button / input) inline-size: 100%로 맞춰야함! display: block -.. html/css #18-plate 상하단 반응형 중앙정렬 (flex 정리) 1. 우선 flex를 통해 상하 중앙정렬 시켜주고 height: 600px max-height: 80vh; ㄴ 고정값 600px 값이 max-height를 통해 중앙정렬된다! 1. flex row로 작성 body { margin: unset; } .flex { box-shadow: inset 0 0 20px red; display: flex; height: 100vh; padding: 30px; /*창이 줄어들때 안정감 있게 줄어들기 위해서*/ box-sizing: border-box; } .box { box-shadow: inset 0 0 20px blue; max-width: 960px; max-height: 600px; height: 100%; flex-grow: 1; margin: auto; /*.. 코드리뷰에서 헷갈리는 것 정리! FLEXBOX 정리 min-width: 400px; flex-basis: 0 ㄴ> 이렇게 하면 이미지가 움직이지 않고 400 고정 width: 100px; flex-shrink: 0; ㄴ> 이렇게 해도 동일하게 움직이지 않고 고정된다! 다른 요소에 width값이 정해져있을 때!!! flex-basis:0; flex-grow:1; ㄴ> 이렇게 하면 여백 꽉차게 사용 html/css #16-grid display: grid 로 그리드를 선언할 수 있다. flex와 동일하게 Grid Items가 만들어진다. 부모관점에서 안보이는 가상의 틀이 있다. .grid { box-shadow: inset 0 0 20px red; display: grid; gap: 10px; height: 500px; /*500px 을 아이템들이 나눠갖는다.*/ grid-template-columns: 400px; } .card { box-shadow: inset 0 0 20px yellow; /* height: 500px; */ } grid-template-columns 주기! 입력한 만큼 열 추가 .grid { box-shadow: inset 0 0 20px red; display: grid; gap: 10px; height.. 이전 1 2 3 4 다음
