CSS Layout 정리

Positioninig contexts

containing element of an absoultely positioned elements. This is much dependent on the position property of the ancestors of the positioned element.

The result of this is, the absolutely positioned elements will be contained in the initial containing block

Try adding the following to your CSS, to make the first paragraph absolutely positioned too: p:nth-of-type(1){ position : absolute; background : lime; top : 10px; right : 30px; }

.container { z:index :1; 

 

---

 

Multi-column Layout

 

<div> with class of container will become our multicol container. we switch on multicol by using one of two properties column-count or column-width. the column-count property will create as many columns as the value you give it, so if you add the following CSS to your stylesheet and reload the page, you will get three colum

---

Styling the columns

 

• Changing the size of the gap between columns using the column-gap
• Adding a rule between columns with column-rule

You can play around with different values -the property accepts any length unit. Now add a rule between the columns, with column-rule. In a similar way to the border  property that you encountered in previous lessons, column-rule is a shorthand for column-rule-color, column-rule-style, and column-rule-width, and accepts the same values as border

.container {
 column-count: 5;
 column-gap: 40px;
 column-rule: 4px dotted rgb(79, 185, 227);
}

h2 {
 column-span: all;
 background-color: rgb(79, 185, 227);
 color: white;
 padding: .5em;
}

---

Columns and fragmentation

 

The content of multi-column layout is fragmented. It essentially behaves the same way as content behaves in paged media -- such as when you print a webpage.

.container {
  column-width: 250px;
  column-gap: 20px;
}

.card {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  margin: 0 0 1em 0;
}

(after)

.container {
  column-width: 250px;
  column-gap: 20px;
}

.card {
  break-inside: avoid;
  page-break-inside: avoid;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  margin: 0 0 1em 0;
}

---

Hisoric website layouts

 

at one point in history you had two options when desining a website:

• you could create a liquid site, which would stretch to fill the browser window
• or a fixed width site, which would be a fixed size in pixels.

As the mobile web started to become a reality with the first feature phones, companies who wished to embrace mobile would genrally create a special mobile version of their site, with a diffrent URL. this meant that two separate versions of the site had to be developed and kept up-to-date.

---

Media Queries

 

Responsive design was only able to emerge due to the media query.

Media queries allow us to run a series of tests and apply css selectively to style the page appropriately for the user's needs.

 

the css for the .container selector will only be applied if these two things are true.

@media screen and (min-width: 800px) { 
  .container { 
    margin: 1em 2em; 
  } 
} 

 

 

---

Flexible grids

 

Responsive sites don't just change their layout between breakpoint, they are built on flexible grids.

a flexible grid menas that you don't need to target every possible device size that there is, and build a pixcel perfect layout for it.

 

target / context = result

---

Multicol

this indicates how many columns you want your content to be split into. the browser then works out the size of these, a size that will change according to the screen size.

 

.container { 
  column-count: 3; 
} 

 

if you instead specify a column-width, you are specifying a minimum width. the browser will create as many columns of that width as will comfortably fit into the container, then share out the remanining space between all the columns.

.container { 
  column-width: 10em; 
} 

---

Flexbox

In Flexbox, flex items will shrink and distribute space between the items according to the space in their container, as their initial behabior. By changing the values for flex-grow and flex-shrink you can indicate how you want the items to behae when they encounter more or less space around them.

 

.container { 
  display: flex; 
} 

.item { 
  flex: 1; 
}