728x90 반응형 CSS8 d-flex, flex-wrap 이해 flex-wrap: wrap 과 flex-grow: 1 을 이용하면 grid를 쓸 필요가 없다. (게다가 grid는 하위브라우저는 안먹혀서 잘 안써요~) 다음 예시코드로 이해해보자. 마지막 li만 한칸 아래로 만들기 1 2 3 4 5 6 2023. 12. 21. ※ 자식요소의 자식요소를 배치할 때 기준은?? .grandparent{ width: 400px; height: 400px; background-color: aqua; position: relative; left: 30%; } .parent{ width: 200px; height: 200px; background-color: orange; position: absolute; top: 200px; left: 100px; } .child{ width: 100px; height: 100px; background-color: royalblue; position: absolute; top: 100px; left: 100px; } absolute 자체가 위치상 부모요소를 기준으로 한다는 뜻이므로 parent와 child 모두에 absolute를 부여하면 된다. 2023. 9. 12. CH8. CSS속성 - 21. 전환 ~ 25. Overwatch 캐릭터 선택 예제 (2) 21. 전환 html css div { width: 100px; height: 100px; background-color: orange; transition: width .5s, background-color 2s; } div:active { width: 300px; background-color: royalblue; } (관련 사이트) https://easings.net/ https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function https://greensock.com/docs/v2/Easing transition: 1s .2s; 이면 지속시간 1초, 대기시간 0.2초 라는 뜻. 22. 변환 (1) 23. 변환 (2) 주의! perspective.. 2023. 6. 13. CH8. CSS 속성 - 15. 배치 (1) ~ 20. 플렉스(정렬) Items 15. 배치 (1) relative 는 거의 사용되지 않습니다. 그 이유는 원래 자기 위치가 붕 떠 보이게 되기 때문이죠. 16. 배치 (2) 다음구조 : 더 나중에 작성된 구조를 뜻함. html 1 2 3 css .container { width: 300px; background-color: royalblue; position: relative; } .container .item { width: 100px; height: 100px; border: 4px dashed red; background-color: orange; } .container .item:nth-child(1) { positon: relative; z-index: 1; } .container .item:nth-child(2) { pos.. 2023. 6. 13. [패스트캠퍼스] 프론트엔드 강의 4주차 - CH8. CSS속성 - 08. 크기 계산(box-sizing)~14. 배경 [내일배움카드], [국비지원교육] 08. 크기 계산(box-sizing) 기본값 : content-box 패딩과 보더로 달라진 박스사이즈를 맞추고 싶을때 사용 box-sizing으로 박스크기를 자동으로 맞춰준 모습 09. 넘침 제어(overflow) 10. 출력 특성(display) 인라인 요소인 span에 display: block;을 적용시켜서 넓이, 높이를 지정할 수 있게 바꿈. 11. 투명도 12. 글꼴 되도록 line-height는 배수로 입력하는 것이 좋다. 글꼴1, 글꼴2 여러개 중 우선순위를 정해서 브라우저가 글꼴을 출력해준다. 만약에 글꼴1이 적합하지 않으면 글꼴2가 채택된다. 글꼴2부터 아무것도 안된다면 글꼴계열에서 브라우저가 임의로 채택해서 출력해준다. 글꼴계열 종류 13. 문자 14.. 2023. 6. 13. CH8. CSS속성 - 04. 외부 여백(margin) ~ 07. 모서리 둥글게(border-radius) 04. 외부 여백(margin) 단축속성 : top, left 등 명시 안해도 순서에 따라서 인식한다. 아래 참고. 05. 내부 여백(padding) 06. 테두리 선(border)과 색상 표현 width, style, color 순으로 작성하는것이 국룰이다. border는 요소가 커지는 특징이 있다. 1px이렇게 작게 하는 경우가 많아서 인지를 많이 못할뿐이다. border 기본값 색상표현 07. 모서리 둥글게(border-radius) 2023. 6. 13. 이전 1 2 다음 728x90 반응형
