CSS

람뽀·2024년 3월 25일

OZ 코딩스쿨

목록 보기

3/11

2024.3.25

~ 2024.5.20

3.25 지난 금요일부터 CSS 공부를 시작했다. CSS공부는 확실히 디자인 영역이라서 이미지나 색깔, 크기 등을 조정하는게 재미있다. 그렇게 쉽게 생각했는데.. 챕터가 진행되면서 가상선택자, position, 여러 선택자와 의사클래스를 공부하기 시작하니까 역시 햇갈리고 내가 전에 대충 공부했구나 하는 반성을 좀 하게됐다.

또 오늘은 같은 스터디룸에 있는 분들과 이야기를 나누는 시간이 있었는데, 질문 하나에도 정성스럽게 대답을 해주고 또 질문자분도 열심히 듣는 모습이 조금..감동적이었다. 다들 본인이 열심히 하는만큼 다른 사람에게도 진심으로 대해 주는 것 같아서 별 대화를 많이 못 했는데도 뭔가 친근감이 생겼다!

CSS

HTML에 CSS를 적용하는 방식은 3가지가 있다. 인라인에 적용하기, <style>태그 사용하기, <link>태그로 문서간 연결하기.
만약에 세가지가 한번에 적용 됐으면, 최우선으로 표시되는 스타일은 인라인적용방식이다. 인라인이 없다면 나중에 적용된 스타일이 표기된다.

선택자

선택자 : HTML의 어떤 요소에 스타일을 적용할지 고르는 것이 선택자인데, 선택자는 동시에 여러개를 선택할 수 있다.
전체 선택자 / 태그 선택자 / 클래스 선택자 / 아이디 선택자 / 그룹 선택자가 있다.

전체선택자 : * (asterisk) 문서 내의 모든 요소를 선택함.
클래스선택자 : . 태그명+.하면 해당 태그 내의 클래스만 선택할 수도 있음.
그룹선택자 : 선택자, 선택자, 선택자, 선택자 쉼표로 나열.
선택자 간에는 쓰여진 순서와 관계없이 적용되는 우선 순위가 있다.
id선택자>클래스선택자>태그선택자 순서이다.
속성선택자 : 특정 '속성'을 명시하여 요소를 선택 할 수 있음. [alt]로 하면 alt속성이 있는 모든 태그를 선택함. 단 html에 명시되어있는 속성만 사용 가능하다. 예를들어 div의 기본속성은 display:block이지만, 명시되어 있지 않기 때문에 속성선택자의 값으로 사용할 수 없다.
속성 선택자는 기호와 함께 사용하면 더 편리하다. *(값의 포함 여부) / ^(값의 시작 여부) / $(값의 끝 여부) 아래는 width에 2가 들어간 모둔 속성의 border를 조절하라는 뜻이다.
하위요소선택자 : 자식요소를 공백을 한칸 두고 입력함. 바로 아래의 모든 하위요소선택. 하위의 어떤 요소든지 선택할 수 있음.
자식요소선택자 : > 를 이용해서 태그 바로 아래에 위치한 첫번째 태그를 선택함.
인접형제선택자 : + 형제 요소 중 바로 뒤의 첫번째 형제 요소만 선택.
일반형제 결합자 : ~ 서로 형제인 요소 중에서 앞 요소 뒤에 뒤 요소가 존재하는 경우 전부 선택하는 결합자 참고

주로 사용되는 단위는 px, %, em, rem.
- px은 고정값이지만 그 외에는 다 상대값이다.
- %는 말 그대로 내가 속한 영역에서 몇퍼센트를 차지하는가 하는것이다. 그런데 height는 적용이 되지 않는다. height의 경우 기본값이 화면의 크기로 지정되어있어 구체적인 값이 없기 때문에 퍼센트를 입력해도 적용되지 않는다.
  +) 블록요소에 width를 고정값으로 적용하면, 블록요소들은 원래 한칸을 다 차지해야하지만 못하는만큼 나머지 부분을 margin으로 늘리려는 성질이 있다. 이때 margin:auto를 지정하면 전체 너비에서 남는 여백을 동일하게 분배하라는 뜻
- rem은 루트요소(문서의 시작부분 = html)의 글자 크기를 배수(곱하기)로 계산해 적용.
- em은 부모 요소의 글자크기를 배수로 계산해 적용.

Box model

border 단축속성 : width, style, color 순서로 기입.
그 외 여러개의 방향을 입력하는 단축속성의 경우 왼쪽or위를 기준으로 시계방향으로 입력.
box-sizing 속성
- content-box: 기본은 content-box로 사이즈를 지정하면 content의 크기를 결정하고, 여백이나 테두리가 추가되면 전체 요소가 그대로 같이 커진다.
- border-box는 전체 요소의 크기를 결정하고, 여백이나 테두리가 추가되면 컨텐츠의 크기가 줄어든다. 기본값은 컨텐츠박스이지만 실질적으로 기본값처럼 사용한다. 그래야 크기 조절이 쉽다.
background 하위속성
- clip : 요소 내 배경의 적용범위. (margin을 제외한 3개의 영역중 어느 부분에 배경을 적용할지 정함) border-box를 기본으로(border까지만 배경을 표시함) padding-box, content-box 3가지의 속성값이 있다.
- position : 이미지의 크기가 요소보다 작을 때의 위치를 정함. x, y두개의 값을 지정할 수 있다(top, bottom, left, right, center의 두개를 섞어 갈 수 있음)
- origin : 요소 내 배경의 시작위치를 정함. (border, content, padding 어디서 시작할지 입력)

색깔을 정하는 3가지 속성

rgb / rgba : red blue green 빛의 삼원색 + 투명도
hsl / hsla : hue saturation lightness 색조, 채도, 조도 + 투명도. 색조는 각도를 입력해 색상을 선택하고, 채도와 조도는 퍼센테이지로 입력.
16진수 : #(해시)기호로 시작하는 16진수값을 입력함. RRGGBBAA

display

블록과 인라인 요소의 태그 유형을 변경 시킬 수 있다.

inline / block
display : none : 요소를 화면에 표시하지 않음. 투명화 되었다는게 아니라 코드에만 존재하고 공간도 차지하는 없는 상태가 됨.
: inline-block : inline요소는 자신에게 필요한 만큼만 공간을 차지하기 때문에 size를 설정하지 못하는데, inline-block을 설정하면 블록레벨요소 취급을해서 size도 정할 수 있다.

float 속성

웹 요소들은 기본적으로 html문서 내에서 태그가 쓰여진 순서를 따르는데, 화면의 너비width에는 제한이 있음으로 다 차지하면 자연스럽게 다음줄로 넘어가게된다. CSS를 사용하면 흐름을 역행하여 위치를 재배치하는 작업을 할 수 있다.

float 속성은 요소를 부모요소 또는 루트요소를 기준으로 위치를 변경시킨다. 상위 요소의 왼쪽, 오른쪽면에 붙는 형태로 배치되도록 하는 특징을 가지고 있다.

float를 적용한 요소를 부동요소(떠다니는 요소)라고 부르는데, 이동하면서 다른 요소의 공간에 영향을 미침. CSS3가 업데이트 되면서 위치를 변경할 수 있는 속성이 많아져 요즘은 많이 사용하지 않는다. right / left / none

clear 속성 : 양쪽에 위치한 float의 위치를 무시할지 여부를 설정함.

position

: 태그의 위치를 바꾸지 않고 문서상에 요소를 배치하는 방밥을 정의함. 속성값을으로 top, bottom, right, left로 위치를 결정함.

static : 기본값. 요소를 일반적인 문서의 흐름에 맞게 배치함
relative : 문서의 흐름에 맞춰 배치된 자리를 기준으로 요소를 이동시킴
absolute : 문서의 흐름에서 제외되어 position이 지정된 상위요소를 기준으로 요소를 이동시킴. 만약에 상위에 position이 지정된 요소가 없으면 body를 기준으로 이동시키는데 body는 기본적으로 static이 적용되어 있음.
fiexd : 문서의 흐름에서 제외된 위치에서 고정됨.
이렇게 위치를 이동시켜서 겹치거나 넘쳐서 쌓이는 요소의 순서를 위치시키는 속성이 z-index. 포지션이 있을 때만 사용 할 수 있고, 상대적인 값이라서 꼭 1234의 순서가 아니라 그냥 낮은게 아래 높은게 위에 배치됨

의사클래스

: 가상클래스 라고도 불림. 선택자에 추가하는 키워도르 요소가 특정한 상태가 되었을 때에만 요소를 선택하겠다는 의미. 콜론 하나로 나타냄. hover / active(누른 그 순간) / focus(input에서 주로 사용) / disabled / nth-child() 등

의사요소 : 선택자에 추가하는 키워드로 이를 이용하면 선택한 요소의 특정부분에 스타일을 지정 할 수 있음. 콜론 두개로 나타냄. after / before / first-line / marker / placeholder 등.
- after와 before는 속성으로 content를 추가하면 컨텐츠를 추가하거나 스타일링을 할 수 있다.

transform 속성

: x, y축을 기준으로 CSS를 이용하여 요소의 크기나 위치를 변형시키는 방법.

translate(x,y) : 지정한 크기만큼 x, y축 방향으로 이동.
scale(x,y) : 지정한 크기만큼 x, y축으로 확대 및 축소.
skew(x,y) : 지정한 각도만큼 x, y축으로 비틀어 왜곡. 젖은 빨래를 비트는 것을 상상하면 비슷함. 결과를 예측하기 힘들기 때문에 자주 사용하지 X.
rotate(deg=각도) : 지정한 각도 만큼 회전.
transition : 요소에 지정된 스타일 속성을 완전히 다른 스타일 속성으로 변환시키고, 스타일이 적용 될 때 시간이나 변화속도 등을 추가로 지정하여 다양한 애니메이션 효과를 만듬. 단축속성이 가능
- -property : 변화 대상 속성 지정
- -duration : 변화가 실행된 시간 지정
- -delay : 변화 시작 전 지연 시간 지정
- -timing-function : 변화 실행 시 곡선 방식 지정 (ex. ease, linear, ease-in, ease-out)
```
.div:hover{
    width:300px;
    transition-property : width;
    transition-duration : 5s;
    transition-delay : 2s;
    transition-timing-function : ease;
    /*transition : width 2s -s linear*/
}
```
- div를 hover했을 때 div의 width를 아래 정보에 따라 변화시켜라 라는 뜻

애니메이션 효과

: 움직이지 않는 물체를 움직이는것처럼 보이게 만들기 위해 @keyframes모듈과 animition속성을 사용

        @keyframe 애니메이션_이름{
            form{width: 100px;}
            to{width: 200px;}
        }
        or
        @keyframe 애니메이션_이름{
            0%{width: 100px};
            33%{width: 133px};
            66%{width: 166px};
            100%{width: 200px};
        }

모듈을 별도로 작성하고 animatiom 속성으로 적용함.
animation : 단축속성, 하위 속성들과 함께 지정하여 실행시간, 방식 등을 추가로 정의
-name : 적용할 키프레임 이름 / -duration : 지속시간 / -delay : 지연시간 / -timing-function : 속도그래프 / direction : 동작 진행 방향 / -iteration-count : 반복 횟수 / -fill-mode : 전후 상태 설정 / -play-state : 애니메이션 적용 여부

상속

: 하위 요소가 상위 요소의 스타일 속성값을 물려 받는 것을 의미하고 주로 text와 관련된 사항은 상속되며, 박스모델과 관련된 것은 상속 되지 않는다. (절대적은 X) 속성을 이용하여 강제할 수 있으며 전역키워드이다.

inherit : 상속 / initial : 브라우저에 지정된 속성의 기본값 / unset : 상속되는 속성은 inherit, 안되는 속성은 initial로 지정

반응형 웹과 뷰포트

: 요즈음 웹을 만들면 모바일이나 태블릿에서 보여 질 수 있다는 것을 고려해야한다. 그래서 다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹문서나 이를 위해 사용하는 기법을 반응형 웹이라고 한다.

뷰포트viewport : 현재 화면에 보여지고 있는 영역을 의미한다. 기기별로 뷰포트가 다르기 때문에 같은 웹페이지라도 기기에 따른 배율조정을 발생시켜 화면의 크기가 다르게 보이게 한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0" : 기기에 따라서 배율을 스스로 조정한다는 메타태그로 content에 너비를 기기의 너비에 맞추고, 그 배율을 1로 정한다는 사항을 기입한다
vh(뷰포트 너비의 100분의1) / vw(뷰포트 너비의 100분의1) / vmin(뷰포트 너비와 높이 중 작은 쪽의 100분의 1) / vmax(뷰포트 너비와 높이 중 큰 쪽의 100분의 1) : 이러한 상대적 단위의 사용은 작업을 까다롭게 할 위험이 있음으로 적절히 사용하는게 좋다.
개발자도구에는 특정 기기를 선택해서 볼 수 있는 토글 디바이스 툴바가 있다.
미디어쿼리 : 미디어 타입을 인식하고 컨텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지하는 css모듈(기능)이다.
```
    @media 미디어_타입 and (조건에_대한_물음){
        /*미디어 타입과 조건을 모두 만족할 때 덮어씌울 스타일 선언문*/
    }
```
- 우리가 사용하는 미디어타입은 screen이고, 조건에대한물음=query는 여러종류가 있다
  - min-width / max-width / min-height / max-height / orientation / color / color-index / aspect-ratio
  - 길이에 관한 쿼리는 주로 그 한계치를 보다 적어지거나 커졌을 때 아래 스타일을 실행하라 라는 것이다.
  - max-width는 주로 웹에서 모바일로 진행 되는 등. 큰페이지를 만들어두고 작은페이지로 변경될 때 사용한다. 반대로 min-width는 모바일과 같은 작은 페이지가 먼저 만들어지고 나서 웹으로 페이지가 확장될 때 주로 사용한다.
모듈화 디자인 : 반응형 웹 개발의 대세는 페이지 만들기에서 컴포넌트 만들기로 이동하고 있다. 컴포넌트란 독립적이고 재사용이 가능한 모듈을 뜻하는데, 컴포넌트를 기반으로 웹을 제작하면 블록을 조립하듯 각각의 컴포넌트 간의 조합을 이용해 화면을 구상할 수 있다.

만들어둔 블록으로 배치를 변경시켜 여러 모습을 구현 할 수 있다.
반응형 컴포넌트를 만들어서 페이지를 만들면 자연스럽게 반응형 웹 페이지가 되고, 스타일 재사용에 용이하며 페이지의 일관성을 유지하기 좋다.

flexbox

: 행 또는 열을 주축으로 설정하여 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식. flex container, flex item의 상호작용을 통해 결정

display:flex, disflex:inline-flex(inline처럼 본인의 컨텐츠 크기만 차지)
컨테이너 속성
- flex-direction : 축의 방향. row / column / row-reverse / column-reverse
- flex-wrap : flexbox는 1차원이라고 설명을 했는데, 이것이 정확히 무슨뜻이냐하면 보통 블록레벨요소들은 공간이 줄어들면 요소를 아래로 움직이지만 flexbox는 그러지않고 item을 찌그러뜨려서 어떻게든 한 줄을 유지하고자함. 1차원에서 한 방향으로만 움직이는 기본 성질이 있기 때문인데, 이것을 수정하는 속성임. flex-wrap : wrap으로 설정하면 화면에서 item의 자리가 좁아지면 다음 줄로 이동함.
  +) 위 둘을 합쳐 flex-flow : dir wrap으로 쓸 수 있지만 개별적으로 쓰는 경우가 더 많음.
- justify-content : 축에서 item의 정렬. flex-start / flex-end / center / space-between(양 끝을 컨텐츠 끝에 붙이고 중간에 여백을 동일하게 제공) / space-around(item의 양쪽에 margin을 동일하게 줌) / space-evenly(item 사이에 모두 동일한 여백을 줌)
- row-reverse와 flex-end의 차이점 : 둘 다 끝에서 시작하지만 전자는 축의 방향을 정 반대로 뒤집어서 12345의 item이 54321로 배치되고 후자는 12345 순서는 지키되 끝쪽에서 시작함.
- align-items : 교차축에서의 item의 정렬. start / end / center / stretch(기본값) / base-line(text의 line에 맞춤). 1차원 설명에서 말한것 처럼 기본적으로 1차원만 있다는 것을 염두하기 때문에 justify-contents처럼 여러 item의 간격등을 배치하는 속성은 없음.
아이템 속성
- align-self : align-items와 같은 속성값을 쓰지만, item에 직접 기입하여 교차축에서 어디에 배치될지 결정함
- flex-grow : 여백을 나눠 가지는 비율. 여백이 있을 때 그 공간을 차지해서 성장할 수 있는지 결정함. 기본값은 0
- flex-shrink : 넘칠 때 줄어드는 비율. 반대로 찌그러들 수 있는지 결정함. 기본값은 1.
- flex-basis : 기본적으로 차지할 크기. 절대적은 X. 줄어들면 작아진다.
  +) 만약에 좁은공간에서 basis와 glow가 겹치면 어떻게 될까? grow에 입력된 값이 좀 더 공간을 차지하려는 경향이 있음. 둘 다 입력된 item이 있으면 그 item이 제일 우선적으로 공간을 차지함. 또 단축속성으로 flex : grow shrink basis를 한번에 적용 할 수 있지만 따로 쓰는 경우가 더 많음.

gridbox

display:grid
grid-template-rows / grid-template-columns
- nfr / repeat(n) / minmax(min, max) / auto-fill / auto-fit
grid-column / grid-row / grid-template-areas / grid-area / justify-items / align-itmes / jutify-content / align-content
BEM : Block, Element, Modifier의 약자로 CSS에서 각 요소의 역할과 명확한 네이밍 규칙을 제시하여 코드의 가독성을 높이고 유지 보수를 용이하게 한다.
HTML, CSS에서 class명을 지을 때 쓰이는 규칙 중의 하나. 위 이미지를 예로 들면, 가장 밖을 감싼 초록색 박스가 Block, 그 안의 파란색 박스들이 Element이다. modifier는 선택적으로 사용되는데 요소의 변형상태를 나타낸다.
box__element--modifier 의 형태로 작성한다.
(chat-form처럼 가운데 바 하나가 있는 것은 띄어쓰기를 표현)

추가로 수업 진행하다가 사용된 CSS

calc
```
padding: 0 calc(3.5vw + 5px);
```
길이를 입력해야 할 때 위 예제와 같이 calc를 사용하면 특정 길이만큼 계산해서 값을 줄 수 있음. 주의할점은 + 양쪽에 띄어쓰기를 안해주면 인식못함 ^^.. 이거 몰라서 한참 걸렸음.
background 속성
```
  backgroundPosition: 'top center',
  backgroundSize: 'cover',
```
position은 말 그대로 이미지를 어디에 위치 시킬것인지를 결정함. 위 코드에서는 수평으로는 위쪽에, 수직으로는 중앙에 배치한다는 뜻.
backgroundSize도 말그대로 배경 이미지의 크기. cover는 지정한 요소를 다 덮도록 배경이미지를 확대/축소한다는 의미.
overfit
```
.banner {
  color: white;
  object-fit: contain;
  height: 448px;
}
```
overfit은 이미지의 비율을 결정하는 속성임. contain은 이미지의 비율이 중요하기 때문에, 화면에 빈 부분을 주더라도 비율을 유지하도록 함.출처 : 여기

전역 색상 지정

:root {
  --primaryColor: #bca88e;
  --secondColor: #9da993;
  --mainWhite: #fff;
  --mainBlack: #222;
  --mainRed: #c45141;
  --mainGreen: #4caf50;
}

리액트에서 처음 봤는데, root = html태그를 선택해서 저렇게 -- 를 이용해서 색상을 지정해주면,

body {
  background-color: var(--secondColor);
}

하부요소에서 이렇게 해당 색상을 불러와서 사용 할 수 있음.

scrollLeft

<span
  className="arrow"
  onClick={() => {
    document.getElementById(id).scrollLeft -= window.innerWidth - 80;
  }}
>

scrollLeft는 말 그대로 왼쪽 가장자리로부터 스크롤을 몇 px만큼 이동시킬지를 정할 수 있다.

innerWidthinnerWidth는 브라우저 내부의 너비를 말한다.
즉, 위에서 scroll에서 사용 된 코드는 가져온 dom요소를 innerWidth에서 80을 뺀만큼 현재 스크롤위치에서 빼는거니까 왼쪽으로 이동한다.
반대로 오른쪽으로 이동시키고싶으면 + 하면 된다.
::-webkit-scrollbar
- 출처: https://inpa.tistory.com/entry/CSS-🌟-스크롤-바Scrollbar-꾸미기-속성-총정리#webkit_스크롤바_속성_정리
```
  .row__posters {
    display: flex;
    overflow-y: hidden;
    overflow-x: scroll;
    padding: 20px 0 20px 20px;
    scroll-behavior: smooth;
  }

  .row__posters::-webkit-scrollbar {
    display: none;
  }
```
- scrollbar도 디자인이 가능하다. 다만, 브라우저 내부 인터페이스이기 때문에 제한이 있고, 어떤 브라우저인가에 따라서도 양식이 나뉜다.
  chrome, edge, opera, sapari, ios -> webkit / IE / 파이어폭스
  
  ::-webkit-scrollbar : 스크롤바 전체
  ::-webkit-scrollbar-thumb : 드래그 가능한 스크롤 핸들 막대
  ::-webkit-scrollbar-track : 스크롤바 트랙 (스크롤이 움직이는 영역 / 스크롤 진행률 표시줄)
  ::-webkit-scrollbar-button : 스크롤바의 방향 버튼 (= 위/아래 표시 화살표)
  ::-webkit-scrollbar-track-piece : 스크롤 진행률 표시줄에서 스크롤 핸들 막대 부분을 제외한 남은 빈 공간
  ::-webkit-scrollbar-corner : 수평/수직 스크롤 막대가 만나는 스크롤 막대의 하단 모서리
  ::-webkit-resizer : 요소의 하단 모서리에 나타나는 크기 조정 핸들
- 위 코드는 scroll 기능은 주고싶지만 화면에 나타내고 싶지는 않았다. 이때 overflow-x : hidden으로 해버리면 스크롤도 안보이고 기능도 사라지지만, webkit기능을 이용해서 display : none하면 기능은 존재하지만 화면상에 스크롤은 보이지 않게 된다.
modal 생성요소를 클릭했을 때 화면 가장 앞으로 튀어나와있는것과 같은 느낌을 주는 모달은 position과 z-index, 그리고 background-color에서 배경색의 투명도를 조절해서 만든다. 깃헙주소 화면상의 위치를 고정하고 뒷 배경을 흐리게만들고 다른요소보다 튀어나오게 만듬으로서 modal효과를 만든것이다.
!important : https://www.codingfactory.net/10372, CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용된다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙인다. https://codingeverybody.kr/css-important-%EC%84%A0%EC%96%B8/ 설명이 애매한것같아서 추가로 살펴봤다. 모듈을 사용했는데 디자인이 이미 적용되어있거나, 누군가 이미 적용해놓은 css를 무시하고 현재 만드는 css속성을 최우선으로 삼고싶을 때 코드의 흐름을 무시하고 현재 속성을 최우선하여 적용하는 것이다.
overflow x, y
https://cloudless.blog/post/overflow-x-auto overflow-y-visible
overflow x를 visible로하고 y를 hidden으로 하려했는데 둘 다 hidden이 되더라. 이 두 속성은 동시에 적용 할 수 없다.
Bootstrap CSS Framework
https://getbootstrap.kr/
리액트 프로젝트 중 css 적용방식으로 bootstrap을 사용했다.
npm i bootstrap@5.3.3 으로 설치 후 사용하면 된다.전역에서 사용하기 위해서 main.jsx에 import했다.
사용방법은 이런식이다. className으로 위와 같이 사용하면 bootstrap css에 등록된 스타일링이 적용된다.위 코드에서 사용된 mt는 margin-top / row는 grid속성으로 해당 div가 행이 된다. / col역시 grid 속성으로 열이된다. / col-숫자 이렇게 입력되어있으면 숫자에는 1~12가 들어갈 수 있고 전체 12중에서 지정된 숫자만큼의 가로폭을 차지하게된다. / 위 예제에서는 숫자는 없고 sm만 있음으로 속성들이 같은 비율을 차지하고 sm은 small을 뜻한다. small은 스마트폰과 같은 크기를 말하며 해당 크기보다 클 때만 뒤에 적힌 숫자만큼의 공간을 차지하고 더 적어지면 그냥 요소를 세로로 배치시킨다.
아무튼 이 프레임워크를 사용하면 반응형웹이 적용이 된다 ㅇㅅㅇ.. 매우 편리해보인다.

row : 가로, row가 여러개가되면 아래로 늘어남.
column : 세로, column이 늘어나면 옆으로 늘어남.

3.25 애매하게 알거나 새롭게 알게된것들만 적었는데도 이렇게 많다;;!@ 심지어 flex와 grid는 아직 공부하지도 못했는데 걱정이다.
3.26 오늘 공부하고 코드 따라입력하다 알게된 사실인데 의외로 css를 적용할때 스페이스바나 기호를 정확하게 써야한다. 이것에 대한 내용은 ~~미니트러블슈팅 포스트를 하나 만들어서 기록해야겠다 (5회차 css 참조)~~ 그리고 이렇게 포스트에 주절주절 쓰는게 의미가 있나 처음에는 생각이 들었는데, 하루에 뭘 공부했는지 자세히 쓰지 않아도 한번 리마인드 하는게 충분히 효과가 있는 것 같다. 그리고 앞으로 포스트에 밑줄로 그은것은 따로 공부하면서 정리하여 포스팅 할 필요가 있는것들로 밑줄 뒤에 날짜가 없으면 아직 정리하지 않은 사항으로 판단하기로 했다.
3.27 오늘은 이때까지 배운 CSS를 베이스로 당근마켓을 클론코딩 하는 시간을 가졌다. 이전에 선택과제들을 하면서도 생각했던건데, 처음 어떤 웹사이트를 만들어야겠다 라고 결심했을 때 가장 어려운것은 구조를 짜는것이다. CSS를 공부하기 시작한 초반에 어떤 과제(https://github.com/KingBoRam/Oz_study/blob/master/optionalTask/%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85%ED%8F%BC%EA%BE%B8%EB%AF%B8%EA%B8%B0/%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85%ED%8F%BC%EA%BE%B8%EB%AF%B8%EA%B8%B0.css / ~~엉망진창으로 만든 코드!@ 꼭 다시 정리해볼것~~)에서 div지옥에 빠졌다. 구조를 제대로 처음부터 배치하지 않았더니 CSS도 원하는대로 적용되지 않고 나도 대체 어디를 작업하고 있는지 엄청나게 햇갈렸다. 사이트를 만들기로 결심하면 우선 구조를 철저하게 파악하고 왜 그렇게 구조를 구성했는지에 대해 스스로 이해할 필요가 있다.
그리고 선택과제들을 더 열심히 할 필요가 있다. 조교님께서는 사이드 프로젝트는 시간이 날 때 하면 좋다는 식으로 말씀하셨지만, 선택과제를 하다보면 내가 그냥 보고 지나간 것들을 사실은 이해하지 못했구나 하는것과 역시 직접 스스로 사용해봐야 정확하게 알게 된다는 점을 느끼게 된다. 또 오늘 당근마켓 클론코딩을 하면서는..와 이거 내가 혼자서 했으면 절대 못했겠구나 하는것이다. 클론코딩에 대한 부정적인 의견도 많이봤지만, 나처럼 초보자가 처음에 내가 아는 지식을 사용 해볼 기회로는 훌륭한 공부 방식인 것 같다.
오늘 만든 깜찍한..당근마켓 클론코딩..ㅋㅎ;
개발공부를 할 때 마다 느끼는거지만 개발자는 창의성과 상상력이 참 많이 필요한 것 같다. 내가 원하는 블록을 어떻게 어디에 어떤방식으로 배치할지 딱히 정해진게 없다. 오늘 작성한 방법이 아니었어도 시간이 엄청나게 주어진다면 일단 눈에 보인느것은 비슷하게 만들 수 있었을 것이다. 그런데 그렇게 만들어서는 반응형 웹으로 적용하지도 못했을 것이고 컴포넌트 형으로 적용하지도 못해서 재활용성도 많이 떨어졌을 것이다. 앞으로 많은 복습이 필요하다고 느낀다.
4.9 한동안 js만 열라게 했더니 오늘 받은 스스로 html, css, js(힌트제공)을 작성하여 회원가입 폼을 만들라는 과제를 받았을 때 html뿐만 아니라 css도 애를 먹었다.. 미디어 쿼리는 고사하고 높이는 왜 내맘대로 적용이 안되는지?! 이런 과정들이 재밌으면서도 할때마다 열받는다. 아마 아직 내가 선수조건이라던가 적용법을 잘 몰라서겠지. ~~그래서 나를 소개하는 홈페이지같은것을 하나 만들어서 html, css, js 등 배우는것을 적용하는 공부를 해봐야겠다고 결심했다.~~
5.16 마지막으로 css페이지를 수정한게 한달보다 더 전이라니.. 배움에는 끝이없다. 학습을 진행할수록 처음보는 css가 추가되었고 그중에서 그냥 봐서는 의미를 알 수 없는 것들을 추가하기로 했다. 여긴 나의 백과사전이다~