Haruponea

width: 100%와 max-width: 100%의 차이점이 존재한다. 컨테이너의 크기보다 큰 요소에 사용할 경우 두 property 모두 컨테이너의 크기만큼 줄여준다. 하지만 컨테이너의 크기보다 작은 경우 width:100%는 컨테이너의 크기에 맞추어 늘려주고 max-width:100%는 원래 컨텐츠의 크기를 유지시킨다.

Flexbox는 열 또는 행으로 아이템을 배치할 수 있는 일차원 layout method입니다. 페이지의 contents 상자 안에 아이템을 배치하는데 사용합니다. flexbox를 사용하면 화면의 크기에 따라 공간을 적절히 분배해줘 편리하게 layout을 구성할 수 있습니다. 여기에서는 flexbox의 property를 정리하겠습니다.

1. display: flex
flexbox를 사용하기위해선 먼저 container가 되는 element에 display:flex를 추가해야합니다. 그 flexbox의 안에는 두개의 축이 있습니다.

main axis의 기본 방향은 왼쪽에서 오른쪽입니다. 아이템은 주축의 방향으로 배치됩니다. 아래 이미지들에서 아이템의 순서는 html문서 상 빨주노초파남보 순서로 컨테이너 안에 존재합니다.

2. flex-direction: row | row-reverse | column | column-reverse
컨테이너 안에서 main axis의 방향을 결정하는 property입니다.
row는 왼쪽에서 오른쪽, row-reverse는 오른쪽에서 왼쪽, column은 위에서 아래, column-reverse는 아래에서 위 방향입니다.

row	row-reverse	column	column-reverse

3. justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly 
main axis를 따라 어떻게 아이템을 배치할지 결정하는 property입니다.
flex-start, flex-end, center: main axis의 시작, 끝, 중간에 배치합니다.
space-between: 바깥 여백을 없애고 아이템 사이의 공백을 동일하게 해줍니다. 즉 아이템 사이에만 빈 곳이 생깁니다.
space-around: 아이템 주위에 똑같은 면적의 여백을 줍니다. 아이템 주위에 공백이 2만큼 생긴다고 하면 아이템 사이의 공백은 양쪽에서 2씩 총 4가 되지만, 양 끝은 한쪽의 공백만 있으므로 2가됩니다.
space-evenly: 양끝의 공백, 아이템 사이의 공백을 모두 동일하게 해줍니다.

flex-start	flex-end	center
space-between	space-around	space-evenly

4. flex-wrap: wrap | wrap-reverse | nowrap
main axis가 수평일 때 새로운 행을 만들어 요소를 정렬하거나, main axis가 수직일때는 새로운 열을 만들어 요소를 정렬하는 property입니다. 새로 만들어지는 행이나 열에서 item을 배치하는 방향은 main axis의 방향을 따라갑니다.
main axis가 세로라면 cross axis는 가로가 되고, main axis가 가로라면 cross axis는 세로가 됩니다. 
wrap: cross axis을 따라서 정렬합니다. 세로라면 위에서 아래방향, 가로라면 왼쪽에서 오른쪽입니다.
wrap-reverse: cross axis의 방향이 반대가 됩니다. 세로라면 아래에서 위 방향, 가로라면 오른쪽에서 왼쪽입니다.
nowrap(default): 새로운 열을 만들지 않고 크기를 조절합니다.

wrap	wrap-reverse	nowrap

justify-content: row일 때 상황입니다. main axis는 왼쪽에서 오른쪽입니다. wrap일때 cross axis는 위에서 아래방향이므로 밑으로 한 줄이 더 생겨 아이템을 정렬합니다. wrap-reverse는 아래에서 위 방향이므로 위쪽으로 한 줄이 더 생겨 아이템을 정렬합니다.

5. align-items: flex-start | flex-end | center | baseline
cross axis를 따라 아이템을 배치합니다.
flex-start, flex-end, center: cross axis의 시작점, 끝, 중간을 따라 배치합니다.
baseline: 텍스트의 아래를 일직선상에 오도록 정렬합니다.

flex-start	flex-end
center	baseline

 6. align-content: flex-start | flex-end | center | space-between | space-around | space-evenly 
행이나 열이 여러개일 때 cross axis를 따라 배치하는 방법을 정합니다. 즉, 행과 열 사이의 공백을 결정합니다. 여러 행, 열이 있을 때만 사용하는 정렬 방법입니다. 따라서 flex-wrap을 적용한 상태로 사용해야합니다.
flex-start, flex-end, center: cross axis의 시작, 끝, 중간에 배치합니다.
space-between: 바깥 여백을 없애고 행 또는 열 사이의 공백을 동일하게 해줍니다. 즉 행 또는 열 사이에만 빈 곳이 생깁니다.
space-around: 행 또는 열 주위에 똑같은 면적의 여백을 줍니다. 행 또는 열 주위에 공백이 2만큼 생긴다고 하면 행 또는 열의 공백은 양쪽에서 2씩 총 4가 되지만, 양 끝은 한쪽의 공백만 있으므로 2가됩니다.
space-evenly: 양끝의 공백, 행 또는 열 사이의 공백을 모두 동일하게 해줍니다.

flex-start	flex-end	center
space-between	space-around	space-evenly

7. align-self: flex-start | flex-end | center 
align-items와 비슷하지만 단일 요소에 사용합니다. flex container 자체에는 사용하지 않습니다. cross axis를 기준으로 배열 된 단일 요소의 위치를 바꿀 수 있습니다. 아래 표는 가운데 있는 요소만 align-self를 적용한 것입니다.

flex-start	flex-end	center

8. flex-basis
flex-basis는 요소가 flex container에 배치될 때 주축 방향의 initial size을 나타냅니다.

각 div의 width는 200px이지만 main axis를 따라 flex-basis의 영향을 받아서 300px가 되었습니다.

9. flex-grow

flex-grow는 빈 공간이 있을 때 요소가 그 공간을 얼마나 차지할지 정합니다. 단위가 없는 숫자를 value로 가집니다.

남는 공간을 div1, div2, div3가 1:2:3의 비율로 차지합니다. 잘 안보인다면 0.25배로 해보세요.

10. flex-shrink
container에 남는 공간이 없을 때 줄어드느 비율을 결정합니다.

div1, div2, div3의 줄어드는 비율이 1:2:3입니다.

11. flex short hand
flex- grow, flex-shrink, flex-basis의 순서로 shorthand를 사용할 수 있습니다.

/* flex-grow:1; flex-shrink:2; flex-basis:10% */
flex: 1 2 10%;

/* flex-grow:1; flex-shrink:2; */
flex: 1 2;

/* flex-grow:1; flex-basis:10%; */
flex: 1 10%;

transform을 통해 요소의 확대, 축소, 늘리기, 기울이기, 회전 등등 다양한 변형을 할 수 있습니다. 여기에서는 몇가지 transform을 정리해보겠습니다.

1. transform:rotate()

요소를 회전시킵니다. 단위로 rad, deg, turn 등등을 사용합니다.
transform-origin을 통해서 회전축을 바꿀 수 있습니다.

마우스를 올려보면 위에는 중심을 기준으로, 아래 div는 오른쪽 아래 꼭짓점을 기준으로 회전하는 것을 알 수 있습니다.

2. transform:scale()

요소의 크기를 조절합니다.

마우스를 올려보면 위쪽은 0.5배 크기가, 아래는 x축 방향으로 2배, y축 방향으로 1배가 되는것을 알 수 있습니다.

3. transform: translateX() transfrom:translateY()

x축, y축으로 이동시킵니다. 둘을 줄여서 transform:translate(x,y)로 사용할 수 있습니다.

단위에 -를 붙이면 반대 방향으로 움직입니다.

4. skew()

이차원 평면상에서 기울이는 기술입니다. deg, turn, rad 등을 사용할 수있습니다.
숫자를 하나만 쓰면 x축으로, 두 개를 쓰면 x, y축으로 기울입니다.

여러개를 한번에 사용하고 싶으면 아래처럼 공백으로 나누어줍니다.

transform: rotate(45deg) translate(20px, 30px) scale(2);

1. position: static

문서의 일반적 흐름을 따라 배치됩니다. top, right, bottom, left, z-index properties는 효과가 없습니다. default value가 static입니다.

2. position: relative

문서의 일반적 흐름을 따라 배치되지만, top, right, bottom, left로 현재 위치에서 offset을 줄 수 있습니다. page layout에서 요소에 주어진 공간은 static일때와 같습니다.

3. position: absolute

문서의 일반적 흐름에서 제거되고 page layout에서 요소를 위한 공간이 없어집니다. 가장 가까운 position이 static이 아닌 조상 요소를 기준으로 하거, 그렇지 않다면 initail containing block(body)를 기준으로 합니다.

4.position: fixed

역시 문서의 일반적 흐름에서 제거되고 page layout에서 공간을 할당받지 않습니다. 기준이 되는 것은 viewport 즉, 브라우저의 전체 화면이기 때문에 스크롤해도 화면에 고정되어있는 네비게이션바를 만들 때 사용합니다.

5. position: sticky

문서의 일반적인 흐름에 따라 배치되지만 스크롤 하기 전까지 relative처럼 행동합니다. 이후, 스크롤을 통해 맨 위에 붙으면 fixed처럼 화면에 고정되어 나타납니다.

출처: MDN

https://developer.mozilla.org/en-US/docs/Web/CSS/position

1. percentages

%는 항상 다른 값에 대한 상댓값입니다. 다른 값은 부모의 값이 될수도, 요소 자신의 값이 될 수 도 있습니다.
width: 50% -> 부모의 width의 50%
line-height 50% -> 자기 자신의 font-size의 50%

2. em

em도 relative unit입니다. font-size에 em을 사용할 때, 1em은 부모 요소와 같은 크기의 font-size, 2em은 부모 요소 font-size의 2배가 됩니다. 다른 property와 사용하면 1em은 요소 자체의 font-size와 같고 2em은 요소 자체의 font-size의 2배입니다.

/*html
<article>
	<p></p>
</article>
*/

article{
	font-size:20px;
}

p{
	font-size:2em;
        margin-left:1em;
}

위 예시에서 p의 font-size는 부모 font-size의 2배이므로 40px, margin-left는 자신의 font-size와 같으므로 40px입니다.

3. rem

em을 중첩해서 사용하면 문제가 생깁니다.

/* html
<article>
        <ul>
            <li>
                Pasta
                <ul>
                    <li>
                        Ravioli
                        <ul>
                            <li>Spinach Ricotta</li>
                        </ul>
                    </li>
                    <li>Penne</li>
                </ul>
            </li>
            <li>Salad</li>
            <li>Gelato</li>
        </ul>
    </article>
*/

article {
    font-size: 20;
}
ul {
    font-size: 1.5em;
}

위 이미지처럼 중첩해서 커지는 문제가 발생할 수 있습니다. 이 문제를 해결할 수 있는 방법이 rem입니다.
rem은 root em의 줄임말로 root html element의 font-size을 기준으로 합니다. 만약 html의 font-size가 10px이라면 1rem은 항상 10px, 2rem은 항상 20px입니다.

1. universal selector

문서의 전체의 요소를 선택합니다.

* {
	property: value;
}

2. element selector

해당되는 요소를 모두 선택합니다. 태그의 이름을 그대로 사용합니다.

element_name {
	property: value;
}

3. ID selector

해당되는 ID를 가진 요소를 선택합니다.

#ID{
	property: value;
}

4. class selector

해당되는 class를 가진 요소를 선택합니다. 특정 selector 중 특정 class를 가지고 있는 요소를 선택할때에는 selector.class로 사용합니다.

/* class에 해당하는 모든 요소를 선택합니다. */
.class{
	property: value;
}

/* selector 중 해당되는 class를 가진 요소들을 선택합니다. */
selector.class{
	property: value;
}

5. descendant selector

selector1 selector2의 형태로 selector1의 안에 nest되어있는 모든 selector2 를 선택합니다. 즉, 자손을 선택합니다. 자손에는 자식, 손자, 그 아래의 후손을 모두 포함합니다.

selector1 selector2 {
	property: value;
}

6. adjacent selector

selector1 + selector2 의 형태로 selector1 바로 다음에 오는 selector2를 선택합니다. selector1 다음에 오면서 형제 관계에 있는 selector2를 선택합니다.

selector1 + selector2 {
	property: value;
}

7. direct child selector

selector1 > selector2의 형태로 selector1의 자식인 selector2들을 선택합니다.

selector1 > selector2 {
	property: value;
}

8. attribute selector

selector[attribute ="value"]의 형태로 해당 attribute가 value인 selector를 모두 선택합니다. =뿐만 아니라 *=, $=처럼 다양한 활용 방법이 있습니. MDN참조

selector[attribute="value"] {
	property: value;
}

PSEUDO CLASSES

pseudo class는 selector에 추가되는 keyword로서 선택된 element(s)의 상태를 특정하는 keyword이다. 체크된 체크박스나 커서를 올려둔 요소, 각각의 버튼 등등을 선택할 수 있습니다. 키워드는 :로 시작하여 selector뒤에 붙습니다.

1. :hover

요소 위에 커서가 올라가있는 상태를 선택합니다.

selector:hover{
	property: value;
}

2. :active

요소가 active된 상태를 선택합니다. 마우스를 이용한다면 마우스 좌클릭을 유지한 상태입니다.

selector:active{
	property: value;
}

3. :checked

라디오 버튼이나 체크 박스의 체크된 상태를 선택합니다.

input[type="radio"]:checked{
	property: value;
}

input[type="checkbox"]:checked{
	property: value;
}

4. :nth-of-type()

형제그룹 내 몇번 째 마다 선택할 수 있습니다.

/* 4번째마다 선택 */
selector:nth-of-type(4n){
	property: value;
}

/* 4번째만 선택 */
selector:nth-of-type(4){
	property: value;
}

PSEUDO ELEMENTS

pseudo elements는 selector뒤에 붙는 keyword로서 선택된 elements의 특정 부분을 style할 수 있도록 해줍니다. keyword로 after, before, first-letter, first-line 등등이 있습니다. ::을 selector뒤에 붙여 사용합니다.

1. ::first-letter

selector의 첫번째 글자만 선택합니다.

selector::first-letter {
      property:value;
}

2. ::first-line

selector의 첫번째 줄을 선택합니다.

selector::first-line {
	property:value;
}

3. ::selection

selector의 highlighted된 요소를 선택합니다. (드래그된 요소)

selector::selection {
	property:value;
}

4. ::before, ::after

선택된 요소 앞, 뒤에 content를 넣어줍니다. 하지만, content는 DOM에 포함되지 않아 accessible tree에 포함되지 않으며 특정 보조 기술, 브라우저 조합에서는 표시되지 않습니다. 따라서 사용을 지양하는 것이 좋습니다.

selector::before {
	content:value;
  	property:value;
}

selector::after {
	content:value;
  	property:value;
}