초보개발자 개발일지

117일차(1)/CSS(16) : CSS3 Flex 활용(4) - css3 flexbox 지난 예제 복습 - 화면 폭이 줄어들면 배치 방식이 바뀌는 navbar 를 만들어보았다. - nav의 자식 요소로 ul, form이 있는데, 이 자식 요소들을 가로로 배치하느냐 세로로 배치하느냐의 문제일 뿐이다. - 가로 : flex-direction:row; - 세로 : flex-direction:column; - ul, form575픽셀까지는 column 으로 적용되었다가 그 이상이 되면 가로로 바뀐다. - 위에서는 row 정렬을 적용하고 아래에서는 세로로 정렬하겠다는 css요소를 넣어 충돌한다면? - 한 요소에 적용하는 css 두개가 존재한다면 나중에 정의한 것이 이긴다! - 아래에 있는 미디어 쿼리 조건을 충..

116일차(1)/CSS(15) : CSS3 Flex 활용(3) Step08_example_gallery.html Gallery 예제 - box-sizing: border-box; 로 CSS를 지정하면 예를 들어 어떤 컨텐츠가 있고 bordrer(빨간색), padding(초록색)이 있다고 할 때 - contents의 width, height에 padding과 border의 크기를 포함하겠다는 뜻이다! - 원래 width라고 하면 컨텐츠의 크기만 말하는데, box-sizing: border-box 는 padding, border 크기도 width에 포함시켜서 계산하는 것을 말한다. - margin: 0 auto; 는 가운데 정렬을 가능하게 하는 CSS - 100vh => 100% view height - 웹..

115일차(1)/CSS(14) : CSS3 Flex 활용(2) - Flex 활용방법 - 부모 요소에 flex를 적용하면 자식요소는 블록요소여도 인라인 요소처럼 한줄에 적용된다! - flex요소에 적용할 수 있는 각각의 속성들을 익혀서 사용하면 된다. - 메인 축을 따라 아이템 배치 - flex-direction : 메인 축의 방향을 정하는 것 (default는 row) - flex-wrap : 아이템들을 감싸서 한 묶음으로 둘 것인지 (default 값 nowrap, nowrap은 감싸지 않겠다는 뜻) - justify-content : 왼, 오, 가운데, 가운데에 여백 있게.. 등으로 정렬 가능 - space-evenly : 여분 공간을 똑같이 배치했다. Step08_FlexUtil.html flex ..

25일차(3)/CSS(5) : Bootstrap, Form, Grid, Flex Hello Bootstrap css 버튼1 버튼1 버튼1 버튼1 버튼1 버튼1 번호 이름 주소 1 바나나 서울 2 딸기 부산 Holy guacamole! You should check in on some of those fields below. collapse 사용해 보기 링크의 href 속성값을 이용 버튼의 data-bs-target 속성값을 이용 Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. Dropdown but..