오늘도 열공하는 날... 쉽지 않지만 계속이어나가고 있다. 파이팅~~
그러면 또 배운 것을 복습해봐야지!
와이어프레임(Wireframe)
웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 합니다.
단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것입니다.
와이어프레임은 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도입니다.
목업(Mock-up)
대부분의 산업에서 목업은 실물 크기의 모형을 뜻합니다. 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성합니다.
HTML 구성하기
대부분의 경우 콘텐츠의 흐름은 좌에서 우, 위에서 아래로 흐릅니다.
CSS로 화면을 구분할 때는 수직 분할과 수평 분할을 차례대로 적용하여 콘텐츠의 흐름을 따라 작업을 진행합니다.
클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성 기법을 Atomic CSS 방법론이라고 합니다.
참고)
Atomic CSS 방법론에서는 작은 클래스 이름을 사용하여 스타일을 정의합니다. 예를 들어, text-center라는 클래스는 텍스트를 가운데 정렬하는 스타일을 정의합니다. 이 방법론에서는 각각의 클래스 이름이 하나의 스타일 속성에 대응됩니다. 이를 조합하여 더 복잡한 스타일을 만들 수 있습니다.
예를 들어, text-center와 font-bold라는 두 개의 클래스를 조합하면, 가운데 정렬된 굵은 글씨체를 사용하는 스타일을 만들 수 있습니다. 이러한 방식으로 스타일을 구성하면, 필요한 스타일 속성을 선택하여 조합하므로, 재사용성이 높아집니다.
Atomic CSS 방법론은 CSS 파일의 크기를 줄이고, 개발자의 생산성을 높이며, 유지 보수성을 높이는 장점이 있습니다. 하지만 스타일 속성이 분리되어 있기 때문에 클래스 이름만으로는 스타일을 이해하기 어렵습니다. 또한, 클래스 이름의 관리가 어려울 수 있습니다. 따라서, Atomic CSS 방법론을 사용할 때는 클래스 이름 규칙을 잘 정의하고, 문서화하여 관리해야 합니다.
HTML 문서는 기본적인 스타일을 가지고 있습니다.
때때로 HTML 문서가 갖는 기본 스타일이, 레이아웃을 잡는 데 방해가 되기도 합니다.
위에 언급한 문제를 해결할 몇 줄의 코드를 적용시키면,
기본 스타일링을 제거하여 디자인한 대로 레이아웃을 구현할 수 있습니다.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}다시 한번 짚고 넘어가는 셀렉터들!
A.className
You can combine the class selector with other selectors, like the type selector.
Only Child Pseudo-selector
Select an element that are the only element inside of another one.
:only-child
You can select any element that is the only element inside of another one.
@@@@@@@@@@@@@@@@@@@@@@@@@@@(내가 헷갈려하는것)
:only-of-type 선택자는 부모 요소 내에서 해당 요소와 같은 태그 이름을 가진 요소 중에서 유일하게 존재하는 요소를 선택합니다.
즉, 부모 요소 내에서 해당 요소와 같은 태그 이름을 가진 형제 요소들 중에서 유일하게 존재하는 요소를 선택하는 선택자입니다.
@@@@@@@@@@@@@@@@@@@@@@@@@@
Last of Type Selector
Select the last element of a specific type
:last-of-type
Selects each last element of that type within another element. Remember type refers the kind of tag, so p and span are different types.
Empty Selector
Select elements that don't have children
:empty
attribute 셀렉터
[attribute]: 속성 이름이 attribute인 HTML 요소를 선택합니다.
[attribute=value]: 속성 이름이 attribute이며 값이 value인 HTML 요소를 선택합니다.
[attribute^=value]: 속성 이름이 attribute이며 값이 value로 시작하는 HTML 요소를 선택합니다.
[attribute$=value]: 속성 이름이 attribute이며 값이 value로 끝나는 HTML 요소를 선택합니다.
[attribute*=value]: 속성 이름이 attribute이며 값이 value를 포함하는 HTML 요소를 선택합니다. (와일드카드)display: flex 는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법입니다.
이처럼 <div> 요소들은 별다른 설정을 해주지 않으면 위쪽에서부터 세로로 정렬되며,
가로로 넓게 공간을 차지하는 것을 확인할 수 있습니다.
이번에는 이 상태에서 부모 요소인 <main> 요소에 display: flex 속성을 적용해보겠습니다.
main {
**display: flex;**
border: 1px dotted red;
}
속성을 적용했더니 자식 요소인 <div> 요소들이 왼쪽부터 가로로 정렬된 것과
내용만큼의 공간을 차지하는 것을 확인할 수 있습니다.부모 요소에 적용해야하는 Flexbox 속성들
들어가기 전, Flexbox 속성을 사용할 때 유의해야할 점이 있습니다. 바로 속성을 지정해주는 위치입니다. Flexbox 속성 중에서는 부모 요소에 적용해야하는 속성들, 자식 요소에 적용해야하는 속성들이 있습니다. 적절한 위치에 속성을 지정해주지 않으면 요소들이 원하는대로 정렬되지 않습니다. 우선은 부모 요소에 적용해야하는 속성들부터 알아보도록 하겠습니다.
flex-direction 속성은 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정합니다. 아무 설정도 해주지 않으면 기본적으로 가로 정렬을 합니다.
flex-wrap : 줄 바꿈 설정하기
flex-wrap 속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정합니다. 설정해 주지 않으면 줄 바꿈을 하지 않습니다.
/ 부모 요소인 main에 작성하여 자식 요소인 div들의 줄 바꿈을 어떻게 할지 정합니다. /
justify-content : 축 수평 방향 정렬
justify-content 속성은 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정합니다. 요소들이 가로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지 정하는 속성입니다.
align-items : 축 수직 방향 정렬
align-items 속성은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정합니다. 요소들이 가로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지 정하는 속성입니다.
(내가 틀린 점)
flex-direction을 column으로 주고
flex-wrap을 wrap으로 해줬는데도 안 넘어가서 뭔가 했는데
container(부모)의 height을 지정해줬어야 하는거였다.
flex-start Items를 시작점(flex-start)으로 정렬 flex-start
flex-end Items를 끝점(flex-end)으로 정렬
center Items를 가운데 정렬
space-between 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고(시작과끝은 여백X) 나머지 Items는 사이에 고르게 정렬됨
space-around Items를 균등한 여백을 포함하여 정렬 (시작과 끝에도 여백이 있음)
align-items
교차 축(cross-axis)에서 Items의 정렬 방법을 설정합니다.
Items가 한 줄일 경우 많이 사용합니다.
이제는 자식요소에게 적용하는 속성들
~~~
grow(팽창 지수)는 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지, shrink(수축 지수)는 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지, basis(기본 크기)는 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지를 의미합니다. 각 값이 어떻게 작용하는지는 잠시 후 살펴보겠습니다.
자식 요소에 flex 속성을 따로 설정해주지 않으면 다음과 같은 기본값이 적용되며, 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치됩니다.
이 순서와 기본값은 반드시 기억해주세요. flex: grow shrink basis, flex: 0 1 auto @@@@@@@@@@@@@
flex-grow는 자식들 각각에게 적용하는 거더라 그러니까 무슨 말이냐하면,
<section>
<div></div>
<div></div>
<div></div>
</section>section을 flex 박스 준다고 할 때, 각 div에 대해서 flex-grow값을 지정해줘야해
section div:nth-child(1) 이런식으로 각각 하나씩 줘야한다고 오케이?
width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선됩니다.
콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않습니다.
(flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있습니다.
flex-basis
Item의 (공간 배분 전) 기본 너비를 설정합니다.
값이 auto일 경우 width, height 등의 속성으로 Item의 너비를 설정할 수 있습니다.
하지만 단위 값이 주어질 경우 설정할 수 없습니다.
order 속성은 flex item의 배치 순서를 제어하는 속성입니다. 기본값은 ‘ 0‘이며 flex-direction 속성의 방향값( row, row-reverse, column, column-reverse)을 기준으로 낮은 숫자를 먼저 배치하고 높은 숫자를 나중에 배치합니다.
align-self는 개별 요소에 적용할 수 있는 또 다른 속성입니다. 이 속성은 align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용됩니다.
flex-direction과 flex-wrap이 자주 같이 사용되기 때문에, flex-flow가 이를 대신할 수 있습니다. 이 속성은 공백문자를 이용하여 두 속성의 값들을 인자로 받습니다.
