CSS33 20230721 CSS3 Flex flex요소를 사용 할 때 shirink, grow, baisis를 border의 width, style, color속성들을 일렬로 사용하듯이 일렬로 작성해 사용가능하다. glow, shrink, basis순으로 사용하는 것이며 예로 아래와 같다. flex: 0 1 auto 첫 번째는 glow 두 번째는 shrink 세 번째는 basis 순으로 사용하면 된다. 만약 flex: 1 100px 라고 사용 하면 glow, shrink를 1로 공통되게 사용 flex: 1 이라고 사용하면 glow 1로 사용한다는 뜻이다. 만약 가변길이의 input요소 3대 button 1의 비율을 갖는 flex를 갖고 싶다면 아래와 같이 작성하면된다. 위에 코드를 이용하면 아래와 같이 설정할 수 있다. main-nav의 자식요소.. 2023. 7. 21. 20230719 flex 블럭 요소를 가로로 배치하는 테스트에 관련한 수업이다. 블럭 요소를 가로로 배치하는 테스트 div1 div2 div3 div4 div5 위와 같은 코드로 div를 만들면 아래처럼 세로로 출력이된다. style을 추가해줘보겠다(잘 보이게하려고..) 블럭 요소를 가로로 배치하는 테스트 div1 div2 div3 div4 div5 원래 세로로 배치 되던 것이 flex를 사용하여 가로로 배치 되었다. 여기서 width를 제거하게 되면 자식요소들은 필요한 만큼만의 width를 자동으로 갖게 된다. flex-direction을 통해 오른쪽을 기준으로 배치시킬수도 있다. flex-direction의 column과 column-reverse를 사용하면 아래와 같다. flex-wrap의 특징은 아래와 같다. 정렬의 관한.. 2023. 7. 19. 20230707 CSS3 비쥬얼 스튜디오 코드에서 CSS3를 새롭게 배우는 날이다. css가 변경되는 중간 과정을 보여주고 싶을 때 transition을 사용하면 된다 transition 테스트 transition timing function 테스트 start 트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다. 위의 예제를 살펴보자. hover 상태가 변화할 때, div box의 margin값이 변화한다. Transform👉 Transform의 기능으로는 평행이동, 확대, 축소, 회전, 비틀기 등의 기능을 가지고 있다. 트랜스폼(Transform)은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀.. 2023. 7. 7. 이전 1 다음
