728x90 Frontend/CSS17 17. table, flex 1. tabledisplay 속성 값을 table, table-row 등을 사용해서, 마치 태그를 사용하는 것과 비슷하게 HTML 태그를 작성할 수 있다.table : 태그처럼 사용table-header-group: 태그처럼 사용table-row-group: 태그처럼 사용table-footer-group: 태그처럼 사용table-row: 태그처럼 사용table-cell: , 태그처럼 사용- 활용 코드 A B C A1 B1 C1 A2 B2 .. 2024. 7. 6. 16. 미디어 쿼리 미디어 쿼리 (media query)는 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법이다.즉, 접속하는 기기의 화면 크기에 따라 레이아웃이 달라지도록 설정하는 것이다. 미디어 쿼리 구문only: 전체 쿼리가 일치할 경우에만 스타일 적용and: 조건을 어려 개 연결해서 추가not: not 다음에 지정하는 미디어 유형을 제외하고 적용 ex) not tv : tv를 제외한 미디어들에 적용, (쉼표) : 조건들 중 하나라도 참이면 적용//기본형 @media [only | not] 미디어 유형 [and 조건] * [and 조건]//예시@media screen and (min-width: 768px) and (max-width: 1432px) {...} 미디어 유형all : 모든 미디어 .. 2024. 7. 6. 15. Overflow visiblehiddenscrollauto visible기본값특정 요소가 박스를 넘어가도 그대로 보여준다.- 활용 코드 이화여자대학교 컴퓨터공학과 22학번 김예린입니다. 현재 프론트엔드 공부 중입니다. html, css 공부하면 그 이후에 javascript 공부도 하고 react 공부도 하고 할게 산더미다. hidden부모 요소의 범위를 넘는 자식 요소의 부분은 숨긴다.- 활용 코드 이화여자대학교 컴퓨터공학과 22학번 김예린입니다. 현재 프론트엔드 공부 중입니다. html, css 공부하면 그 이후에 javascript 공부도 하고 react 공부도 하고 할게 산더미다. scroll자식 요소의 범위가 더 크더라도, 스크롤바를 생성해서 볼 수 있도록 한다.- 활용 코드 이화여자대학교 컴퓨터공학.. 2024. 7. 6. 14. 가상 클래스 동작 가상 클래스:link : 아직 방문하지 않은 링크에 스타일 적용:visited : 방문한 링크에 스타일 적용. 기본값이 보라색:hover : 사용자가 마우스 커서를 요소 위에 올렸을 때 스타일 적용:active : 사용자가 마우스로 요소를 클릭했을 때 스타일 적용:focus : 요소에 초점이 맞춰졌을 때 스타일 적용- 활용 코드 /* a 태그에 마우스가 올라올 때 */ a:hover { color: white; background-color: blue; } /* 방문한 적이 없는 링크 */ a:link { color: blue; } /* 방문한 적이 있는 링크 */ a:visited { .. 2024. 7. 6. 이전 1 2 3 4 5 다음 728x90