-
CSS 기본문법 (2/3, 2/4)Web front/CSS 2022. 2. 5. 18:48
1/ CSS를 작성하고 링크로 연결하기
<link rel="stylesheet" type="text/css" href="./C03_Style.css">href는 작성한 CSS 파일명
2/ css 파일 import 하기
<style type="text/css"> @import url("./C04_Style1.css"); </style>3/ 우선 적용. 덮어씌여지지 않음 !important
.table-three tfoot tr { background-color: orange !important; color:white; }4/ box기준으로 width 정할 때.
box-sizing: border-box;content 기준일때
box-sizing: content-box;5/ float부터 해야함
6/ attributeSelecter
abbr[title] { text-decoration: underline;} input[type="text"] { border : 1px solid lightgray; padding: 5px; } input[name ^= "p"] { //p로 시작하는 border: 1px solid orange; padding: 5px; } span[data $= "y"] { color: olivedrab; } //y로 끝나는 span[data *= "a"] { color: green; } //a가 포함된 span[data |= "ko"] { color: lightcyan; }//ko, ko- 로 시작되는7/ media
반응형 웹. 핸드폰 기종이나 패드, 노트북 각 화면 사이즈에 맞게 크기 자동 조절
<style type="text/css"> body { background-color: lightgray; } @media screen and (min-width: 360px) and (max-width: 500px) { body { background-color: black; color: white;} } </style>8/ flex, grid
좋은 참고 사이트 :
https://studiomeal.com/archives/197
이번에야말로 CSS Flex를 익혀보자
이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누
studiomeal.com
https://studiomeal.com/archives/533
이번에야말로 CSS Grid를 익혀보자
이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “
studiomeal.com
9/ grid area로 구역 나누기
<style type="text/css"> #container { width: 80%; margin: 20px auto;} #wrapper { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); grid-template-areas: "box1 box1 box1" "box2 box3 box3" "box2 box4 box4" ; } .box { border: 1px solid orange; } .box1 { background-color: darksalmon; grid-area: box1; } .box2 { background-color: darkseagreen; grid-area: box2;} .box3 { background-color: deeppink; grid-area: box3;} .box4 { background-color: lightsalmon; grid-area: box4; } </style> </head> <body> <div id="container"> <div id="wrapper"> <div class="box box1">box 1</div> <div class="box box2">box 2</div> <div class="box box3">box 3</div> <div class="box box4">box 4</div> </div> </div> </body>