are the main mechanism that we can use to make a responsive website to restyle things or remove things, show and hide, change their sizes, go from a row to a column.
Whatever the style changes are based upon an attribute of the browser, whether it's the width of the viewport or the height or the orientation of your screen, there are different features, different parameters.
So all media queries begin with this at media.(@media)
@media의 property들은 brace pharenthsis(중괄호)를 쓰기보단 그냥 pharenthsis(소괄호)를 쓴다
width property는 min-width와 max-width를 쓴다.
그냥 width를 쓰면 딱 그 value에 맞출경우에만 속해진 value들의 propertye들이 적용된다.
order matter에 영향을 받는다.
500px까지 red고 1000px까지 orange인데 이 코드 나열이라면 그냥 500px이하에도 orange가 적용된다.
제대로 적용하려면 내림차순으로 적용시켜야 한다.
그러니까 위에 부분에 max-width를 1000px로 정해야한다.
portraitThe viewport is in a portrait orientation, i.e., the height is greater than or equal to the width.
landscapeThe viewport is in a landscape orientation, i.e., the width is greater than the height.
body {
display: flex;
}
div {
background: yellow;
}
@media (orientation: landscape) {
body {
flex-direction: row;
}
}
@media (orientation: portrait) {
body {
flex-direction: column;
}
}
Theflex-basisCSSproperty sets the initial main size of a flex item
flex basis is just the initial size that an element should be added into our box as and it might be with it might be a height depending on the main axis direction.
The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
Formally, thedisplayproperty sets an element's inner and outerdisplay types. The outer type sets an element's participation inflow layout; the inner type sets the layout of children. Some values ofdisplayare fully defined in their own individual specifications; for example the detail of what happens whendisplay: flexis declared is defined in the CSS Flexible Box Model specification. Seethe table at the end of this documentfor all of the individual specifications.
display property에는 inside type과 outside type이 있는데
outside type은 예전에 배웠던 inline과 block이 있고
inside type은 지금 배우는 inside가 있다.
inside type은 안에 내용물에 대한 형식을 정의한다.
-> 왜 해당요소에 직접 flex value를 넣으면 flex가 제대로 작동이 안되는지 궁금해서 mdn을 찾아봄..
그러니까 flexing하는 범위자체가 부모한테 있으니까 해당 요소에 직접 flex 값을 집어넣으면 적용이 안되는건가?
어쨋든 정의 자체가 하위요소에 대한 레이아웃을 다루는것이다보니 그 요소에 flex를 넣는게 아니라
flex하고 싶은 요소의 상위요소에 flex 값을 넣는것 이라고 생각하면 되는것 같다.
한 요소에 flex-box를 지정하면 그 박스에는 두개의 축이 생기게 된다.
main-axis, cross-axis
main-aixs(주축)은 기본적으로 왼쪽에서 오른쪽으로 간다.
flex-direction just determines how the content flows in this container.
flex-direction은 row가 default value다.
flex-direction은 이 main aixs의 방향(contents의 흐름)을 어떻게 할지를 정하는 property이다. 가로로 둘지(row) 세로로 둘지(column)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opacity & Alpha</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<section>
<div id="rgba">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat pariatur dolor doloribus excepturi magni
qui, temporibus numquam aliquam exercitationem magnam et harum aut nihil nisi eius? Accusamus officiis iste
dolores.
</div>
</section>
<section>
<div id="opacity">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat pariatur dolor doloribus excepturi magni
qui, temporibus numquam aliquam exercitationem magnam et harum aut nihil nisi eius? Accusamus officiis iste
dolores.
<button>alksjdlaksjd</button>
</div>
</section>
</body>
</html>
그래서 역으로 h1의 css의 display property vlaue를 inline으로 바꾸면 inline element로 바뀐다.
span도 block으로 바꾸면 block level의 element가 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Property</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div></div>
<div></div>
<div></div>
<h1>I am H1</h1>
<h1>I am also H1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam ipsum blanditiis veritatis distinctio. Nisi
saepe consequuntur eius facilis rem magnam a vel impedit maxime quidem error alias, sed mollitia earum?
Corrupti vero quae rem debitis aut quas eaque possimus, repellat consequuntur non cumque ipsum nemo odit,
blanditiis est ducimus nam! Pariatur cupiditate enim fuga nobis reiciendis perspiciatis velit culpa nemo?
Ipsam veritatis, magni maxime molestiae praesentium quos totam! Corrupti ullam dolores odio autem voluptas unde
dicta voluptatibus alias, asperiores magnam nemo quae maiores et distinctio error ex, non iusto deserunt!
Sunt vero labore nostrum ad ab, quas fugit facilis voluptatum sed dicta, perspiciatis incidunt sit iusto
molestiae nulla reiciendis quos doloremque? Possimus accusamus animi cumque fugit modi explicabo nihil sint.
Explicabo enim perspiciatis dolorum id debitis dicta tempore totam cumque pariatur saepe, ab alias quas, hic
fugiat porro! Libero molestiae est non voluptates quaerat velit delectus at fuga laboriosam a?
Vero, eaque quod nihil voluptatibus quasi veniam rerum neque cum eveniet magni minima totam, nulla temporibus
quaerat sequi architecto nisi? Harum alias aperiam rerum itaque voluptas temporibus veniam reiciendis
laudantium!
<span>I AM SPAN!!!</span>
Voluptatum quam cumque laudantium. Ab at voluptatem hic ipsum in. Ex unde accusantium quis tempore nihil odit
in! Voluptatum, vel libero accusamus eligendi amet aliquam? Aperiam repellat facere pariatur tempora?
Error, alias, ex dolores adipisci aperiam aliquam dolor obcaecati voluptatibus cumque iste eveniet perspiciatis
iusto harum nulla a in mollitia architecto nesciunt? Aut, ipsa. Provident animi voluptate deleniti tempore
maxime.
Quam aperiam necessitatibus corporis, asperiores repudiandae sint molestiae odio commodi aliquam consectetur
inventore porro voluptatum architecto vel enim quia dignissimos repellendus earum blanditiis dolore, obcaecati
officia temporibus maiores? Recusandae, quos!
Voluptatibus odio magni reprehenderit! Ea tenetur eveniet animi quo autem odio sint corporis laboriosam, iusto
laborum exercitationem molestias. Maiores, numquam optio impedit deserunt rem autem sit quisquam a fugiat
eligendi.</p>
</body>
</html>
pseudo class는 앞에 colon 하나만 붙지만 pseudo elements는 앞에 colon이 두개 붙음 물론 브라우저는 이걸 신경쓰지 않는다. 그냥 pseudo elements를 쓸때 colon 하나만 써도 pseudo element selector로 인식한다.
::first-letter와 ::first-line은 그냥 명칭만 봐도 사용법이 보인다
::selection은 드래그된 element(content)에 스타일을 적용하는 selector
다른 셀렉터가 충돌이 일어날경우 어떻게 될까? -> 이경우엔 specificity(구체성)을 따른다.
specificity의 규칙에 따르면 id>class>element로 셀렉터의 구체성이 다르다.
좀더 구체적일수록 구체적인 부분에 스타일이 적용이 된다.
스코어로 예시를 들자면 id는 100 , class는 10 , element는 1로 브라우저가 계산해서 스타일을 적용한다.
물론 브라우저가 셀렉터의 우선순위적용을 스코어에 비유해서 말하는것이지 element가 100개가 와도 class 하나를 못이긴다.
※구체성이 비등하다면 순서에 따라 적용된다.
TIP: Chrome Dev Tools & CSS
chrome dev tool을 통해서 하나의 요소에 어떤 스타일이 적용되고 specificity가 어떻게 되는지 알 수 있다.
일회성으로 코드를 작성해서 어떻게 적용되나도 바로바로 볼 수 있고
필터를 통해서 특정한 selector를 search 해볼수도 있다.
되게 유용하다..
Inline Styles & Important
inline styles element와 important property는 잘 사용하지 않고 사용하기 적합하지 않지만 알아두어야 할 요소.
inline styles은 html element에 직접 스타일을 적용하는 것이다.
<div style="color:blue; border: 1px dashed currentcolor;">
The color of this text is blue.
<div style="background:currentcolor; height:9px;"></div>
This block is surrounded by a blue border.
</div>
하지만 html에 스타일을 적을경우 confuse가 오게 되고 문서가 지저분해지게 되므로 잘 쓰지 않는다.
important rule도 모든 specificity를 무시하고 우선적으로 적용되기 때문에 원래 작성된 style들을 다 뭉개버려서 잘 쓰이지는 않지만 그래도 알아둘 필요가 있는 rule이다.
컨텐츠의 상위 element의 style이 있다면 그 style을 inheritance받아서 그 style을 적용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inheritance Demo</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>The Header</h1>
<section>
<h2>The Subheader</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, quisquam quas placeat quam suscipit dicta
inventore odio vero quasi perferendis. Aliquid ducimus nostrum impedit nam, illo praesentium hic deserunt
ullam.Consequuntur esse eveniet error sequi labore facere eos, quaerat voluptate tenetur rem placeat quidem
a aperiam voluptas optio voluptatem quos suscipit. Voluptas minima vel in deleniti provident alias libero
enim.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, quisquam quas placeat quam suscipit dicta
inventore odio vero quasi perferendis. Aliquid ducimus nostrum impedit nam, illo praesentium hic deserunt
ullam.Consequuntur esse eveniet error sequi labore facere eos, quaerat voluptate tenetur rem placeat quidem
a aperiam voluptas optio voluptatem quos suscipit. Voluptas minima vel in deleniti provident alias libero
enim.</p>
</section>
<section>
<h2>Another Subheader</h2>
<form action="blah">
<label for="username">Username:</label>
<input type="text" placeholder="username" id="username">
<button>Do Something</button>
</form>
</section>
</body>
</html>
