8. Advanced CSS

#webdev #beginners #programming #fullstack

BootCamp by Dr.Angela

1. CSS Display

<span> ~ </span>
Display types: inline, block, inline-block(inline: same line, block: set width & height), none

2. CSS Float

3. How to Create Responsive Websites

<meta name="viewpoint"~!>
Media Queries : ex) @media (max-width: 600px){ / * CSS for screens below or equal to 600px wide */}
CSS Grid
- display: grid; (ex. grid-template-columns: 1fr 1fr; grid-template-rows: 100px 200px 200px; gap: 30px; grid-colum: span 2;)
CSS Flexbox : width not fixed(percentage)
- display: flex; (ex. flex: 1; flex: 2; flex: 0.5;)
External Frameworks (e.g: Bootstrap)
- Bootstrap: 12-column gird (ex. class = "col-6" : means 50%)

4. Media Queries

Max/Min width(break point) : @media (max_(or min)_-width: 600px) { h1 { font-size: 15px; } }
Combine
- @media (min-width: 600px) and (max-width: 900px) {}
- @media (max-width: 600px) and (min-width: 900px) {}
Device : Screen, Print(rarely used)
- @media screen_(or print)_(Orientation: landscape){}
- Mobile(319px - 480px), Ipads&Tablets(481px - 1200px), Laptops(1201px - 1600px), Desktop(1601px - )