[개념 스터디] 2주차 (FE)

Notice

Recent Posts

Recent Comments

Link

« 2025/09 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Tags more

Archives

Today

Total

관리 메뉴

작심 365

[개념 스터디] 2주차 (FE) 본문

Dev-immersion

[개념 스터디] 2주차 (FE)

eunKyung KIM 2021. 8. 14. 02:18

DOM

JavaScript 한테 HTML 파일이 넘어오면 이 HTML 파일을 JavaScript는 어떻게 해석할까?

우리야 HTML 파일을 보고 <body>, <p>, <div> 각각의 태그들이 하는 역할들을 알수 있지만

사실 JavaScript 에게 HTML 파일은 그냥 문자열일 뿐이다.

JavaScript 는 HTML, CSS를 control 하기위해 나온 언어이다.

따라서 그냥 문자열로만 인식한다면 HTML을 제대로 제어할 수가 없다.

그래서 이 HTML을 JavaScript가 제대로 이용할 수 있도록 어떤 형태로 바꿔줘야 했다.

그게 바로 DOM이다.

DOM은 Document Object Model의 약자로 해석하면 문서 객체 모델이다.

그러면 당연히 객체의 형태로 존재할 것이라는 것을 짐작할수 있다.

따라서 자바스크립트가 html 요소를 제어하는데 사용되는 모든 property, method, event 들은

객체(object)들로 구성된다.

CSS 레이아웃

CSS는 웹 페이지를 꾸며주는 역할을 한다. 때문에 HTML 못지않게 중요하고

자주 사용하는 기술들은 알고있으면 좋다.

여기서는 여러 기술들 중에서 Floats, Position, Display, Box Model, Grid, FlexBox

에 대해 설명을 해보도록 하겠다.

Box Model

Box Model은 HTML 요소들이 차지하는 공간을 정의한 모델이다.

각 HTML 요소들은 content, padding, border, margin 의 영역을 가질수 있다.

위 그림에서 가장 작은 파란색 박스가 content 영역이다. content 영역은 안에 content가

들어있으며 가로(width), 세로 (height) 값을 가질수 있다.

초록색 박스는 padding 영역이다. 안쪽 여백, 즉 content와 border 사이의 공간을 나타낸다.

padding을 감싸고 있는 노란색 박스가 border이고 테두리를 나타낸다.

가장 밖에서 감싸고 있는 빨간색 박스는 margin 영역으로 부모나 형제 요소들간의 간격을 조정할수 있다.

box model 사용 예시

Floats

float는 block 요소들을 가로배치 하기 위해서 쓰인다.

block 요소의 태그들은 기본적으로 가로속성이 최대한을 차지하도록 되어있어서

따로 가로의 크기를 정해주지 않는 이상 화면에 꽉차게 나온다.

즉 부모의 크기만큼 늘어나게된다.

*div 태그는 대표적인 block 요소 이다.

이렇게 div 태그에 가로, 세로 크기를 지정해서 옆에 공간이 남아도

그 다음 요소는 이전 요소 옆이 아닌 밑으로 내려간 것을 볼 수 있다.

왜냐하면, block 요소의 가로크기를 특정 값으로 지정해줬을때

나머지 공간은 margin으로 채워지기 때문이다.

width 크기를 따로 지정해주지 않으면 어떻게 될까?

위에서 말한것처럼 최대한 차지하기 때문에 화면에 꽉차게 나온다.

따라서 block 요소들을 가로 배치하기가 어렵다.

이때 우리는 float 속성을 사용할수 있다!

float 를 사전에 찾아보면...

어딘가에 떠다닌다는 느낌이다.

밑에 그림을 보면 세개의 block 요소인 상자 3개가 있다.

여기서 red한테 float 속성을 주면 어떻게될까?

위로 붕 뜨게되면서 red상자가 있던 자리에 yellow상자가 들어오면서 한칸씩 당겨진다.

즉 red상자의 자리는 사라진것이다

화면상에서는 yellow가 보이지 않는다. 왜냐면 red가 위에 올라와있기 때문이다. (아래 그림에서 확인)

따로 부모의 height값을 지정하지 않은 경우, 부모의 height값은 자식 요소들의 height 합이된다.

따라서 red상자가 float속성을 받고 위로 뜨게되면 부모는 더이상 red상자를

품지 않기때문에 height의 크기는 yellow+green 의 height값이 된다.

위 그림에서는 보이지 않지만 3개의 자식 요소를 감싸고 있는 부모 요소가 존재한다. 색상도 갈색으로 주었지만

저경우 width 값은 자식과 동일하게, height값은 따로 주지 않았기때문에 자식 요소의 height값의 합과

일치해서 보이지 않는것이다.

float 속성을 준 요소는 원래 속성이 inline이였든 inline block 이였든 block이였든

block 속성으로 변한다.

아래 그림을 보면 대표적인 inline속성인 span 태그 3개중 red 색상을 가진 요소에 float:left를 주고난후

그 요소의 display 값을 확인해보면 block으로 변해있는것을 볼수 있다.

block속성으로 변했기때문에 당연히 block 의 능력을 다 쓸수가 있다.

width, height, margin, border.. 다 사용할수가 있다.

그런데 여기서 중요한 사실은 100% 원래 block의 기능을 쓸수는 없다는 것이다.

block속성을 갖는 요소는 width 값을 따로 선언하지 않으면 자신의 부모 width 크기를 다 차지했다.

또 width값이 있다고 해도 남은 공간에 다른 요소들이 올수 없었다.

이 특징을 float를 사용해 block이 된 요소는 해당이안된다.

위에 그림에서도 red 색상 span에 float : left 값을 줘서 display 속성이 block이 됬지만 그 옆에

yellow, green이 오는걸 볼수 있다. 바로 이런 부분에서 차이점이 있다.

이제 어떻게 float를 사용해서 가로배치를 할수 있는지 보자.

위 그림과같이 코드와 결과가 있을때, red 에 float: left를 주면 red는 위로 떠서 자기가 갈수있는 영역의

최대한 왼쪽으로 붙을것이다. 그리고 yellow는 red 밑으로 들어가 가려지고 부모의 height 크기는

yellow + green 인 200px로 바뀔것이다.

여기서 한번더 yellow 에 float : left를 주면 yellow는 위로 떠서 자기가 갈수있는 영역중 가장 왼쪽으로

붙으려고 하는데 가장 왼쪽에는 이미 red가 존재하기 때문에 그 바로 옆으로 붙을것이다.

이때 yellow한테 float: right를 주면 yellow는 갈수있는 영역중 가장 오른쪽으로 붙으려고 하기때문에

이때 green이 정말 red 아래에 있는지 못믿겠다면 red의 투명도를 0으로 해보면

잘보인다.

마지막으로 세개다 float : left 속성을 적용하게되면 밑에 그림처럼 모두 가로배치가 된다.

그런데 이때 float 의 단점이 드러나는 문제점이 발생하는데 모든 요소가 위로 떠있기때문에

부모의 height 값은 0이 되고, 전체적인 페이지의 레이아웃이 망가진다.

따라서 요즘은 잘 쓰지않고 대신 flexbox를 사용한다.

Position

Position은 요소를 원하는 위치에 배치하기 위해 사용되는 속성이다.

position에는 총 5가지의 종류가 있다. -> static, relative, absolute, fixed, sticky

각각에 대해 간단히 알아보자.

position을 공부할때 기억해야 될 점은 내가 지금 어떤 종류의 position을 사용하는지 와

그 position을 무엇을 기준으로 하는지 이다.

*위치는 상대적인 것이므로 기준점이 중요

static

모든 요소들의 기본(default) 값으로 static을 가지고 있다. (body, html, p, div, h1, span, ...등등 모두)

실제로 예를 하나만 들어보면

h2 태그에 position 속성을 따로 부여하지 않았는데도 개발자 도구에서

기본 속성이 static으로 나오는 것을 확인할수 있었다.

relative

relative 같은 경우는 원래 자기가 있었던 자리를 기준으로 위, 아래, 오른쪽, 왼쪽

으로 움직인다.

이것도 마찬가지로 빨간 상자의 position 값을 relative로 주고 top,left 값을 각각

30px, 40px로 주었을때, 원래의 위치에서 상대적으로 움직이는것을 볼수있다.

이때 다른 요소들 (노랑, 초록, 파랑) 에게 영향을 주지 않는다. (위 float의 경우는 다른 요소들에게 영향을 줬음)

absolute

absolute는 특이하게 자신이 기준으로 삼고싶은 기준을 정할수 있다.

float의 경우는 자신을 감싸는 부모한테 종속이 되지만, absolute의 경우는 반대이다.

absolute는 자신이 감싸고있는 여러 조상중 하나를 선택해서 기준점으로 삼을 수 있다.

position이 static이 아닌 요소만 기준으로 잡을수 있다.

즉, 기준으로 잡을 부모나 조상요소의 position 값이 relative, absolute, fixed, sticky 중

하나여야 한다.

보통은 기준점으로 잡을 요소의 position 값을 relative로 지정해준다.

relative는 주변 다른 요소들한테 영향을 주지 않기때문이다.

빨간색 div 요소에 position 값을 absolute로 지정하고

회색인 부모요소와 보라색인 조상요소를 만들고 조상요소에 position 값을 relative로 주었다.

부모요소의 position속성은 따로 지정을 안했기 때문에 기본값으로 static이 들어간다.

따라서 조상요소를 기준으로 위치를 이동할수 있다.

여기서는 빨간 child에 left :0 , bottom : 20px를 주었기 때문에 기준이 되는 보라색 요소의

왼쪽에서 0, 아래에서 20px 만큼의 간격만큼 띄어진 공간에 위치하게된다.

fixed

fixed는 기준점이 viewport이다.

viewport는 내가 현제 보고있는 브라우저 창의 크기를 말한다.

노란색 요소에 position : fixed를 주고 bottom: 0 을 주면

화면 크기를 어떻게 하든 화면의 가장 밑부분에 0만큼의 공간을 주고 위치한다.

sticky

sticky 속성은 top, bottom, left, right 중 하나를 필수적으로 설정해야한다.

sitcky 속성을 주게되면 그위치에 도달할때 까지는 static 속성처럼 행동하다가

설정된 위치에 도착하면 fixed처럼 행동한다.

단, sticky 속성을 갖는 요소의 부모 요소는 반드시 height가 설정되있어야 한다.

아래 예시는 초록 요소에 position: sticky 속성과 top:10px; 를 줬을때 결과이다.

창을 스크롤해서 밑으로 내려도 항상 위에서 10px 만큼 띄어지는것을 볼수 있다.

Display

display 속성은 요소를 어떻게 보여줄지를 결정한다.

display 속성에는 none , block, inline, inline-block 이있다.

none

display: none 값을 주면 요소의 box type이 none으로 변한다.

즉, 요소가 사라진다. 영역도 차지하지 않는다.

block

display : block 값을 주면 요소의 box type이 block으로 변한다.

기본이 block인 요소로는 div, p, h, li 태그 등이 있다.

block 요소는 width 와 height 속성을 지정할수 있고, margin, padding 도 다 가능하다.

box-model에서 말한 모든 영역을 사용할수 있다고 보면 된다.

기본적으로 한줄을 전부 차지하려는 속성이 있다.

inline

display : inline 태그의 경우 text를 표현하기때문에 그 흐름을 방해하는

width, height, margin-top, margin-bottom, padding-top, padding-bottom,

border-top, border-bottom 속성은 지정할수가 없다.

기본이 inline인 요소로는 span, b, i, a 태그 등이 있다.

inline-block

block 과 inline의 특징의 장점을 모두 가진 속성 값으로

inline 처럼 옆으로 흐르는 성질과 block 처럼 영역을 잡을수 있는 성질 모두 포함한다.

FlexBox

flexbox를 사용할때 생각할 것은

(1). 부모 요소에 flexbox 속성 주기 : display: flex

(2). 정렬 방향 정하기 : flex-direction

(3). 한줄에 다 넣을지 말지 : flex-wrap

(4). main axis 방향으로 배치하는법 : justify-content

(5). cross axis 방향으로 배치하는법: align-items

(6). cross axis 방향으로 배치하는법: align-content

첫번째로, flexbox 효과를 적용하려면 그 효과를 적용하려는 요소들의 부모에 display 속성값을 flex로 주면된다.

두번째로, 가로, 세로 중 어느 방향으로 정렬을 할것인지를 정해줘야 한다.

방향을 설정하는 속성은 flex-direction 이고

가로방향으로 정렬을 원하면 flex-direction: row

세로방향으로 정렬을 원하면 flex-direction: colunm

이라고 설정하면 된다.

단, flex-direction 속성을 따로 주지 않으면 기본값인 row , 가로로 정렬이 된다.

index.html

<body>
    <div class="parent">
        <div class="child red">Child</div>
        <div class="child orange">Child</div>
        <div class="child yellow">Child</div>
        <div class="child green">Child</div>
        <div class="child blue">Child</div>
        <div class="child purple">Child</div>
    </div>
    
</body>

main.css

.parent{
    display: flex;
    flex-direction: row;
}

결과

*flex-direction 값을 column 으로 바꿨을때

.parent{
    display: flex;
    flex-direction: column;
}

그런데 사실 flex-direction에 올수있는 값은 row, column 말고도 row-reverse, colunm-reverse 까지 해서

총 4개다. reverse가 붙은 값은 정렬이 역순으로 된다고 보면 된다.

이건 축(axis) 을 생각해보면 되는데, flex 속성을 주게되면 배치되는 방향에 따라 main axis와 cross axis가 생긴다.

main axis -> 나열된 방향, cross axis -> main axis의 수직 방향이다.

row 의 경우 main axis는 왼쪽에서 오른쪽으로 흐르지만, row-reverse의 경우는 오른쪽에서 왼쪽으로 흐른다.

flex-direction: row

flex-direction: row-reverse

colunm의 경우는 main axis가 수직 방향으로 생기고 cross axis가 수평방향으로 생긴다.

그리고 마찬가지로 colunm은 main axis가 위에서 아래 방향, colunm-reverse는 main axis가 아래에서 위로 간다.

세번째로 flex-wrap 속성이 있다.

flex-wrap: nowrap을 주면 사이즈를 줄여서라도 한줄에 다 정렬을 시키고 (기본 속성)

flex-wrap: wrap 을 주면 한줄에 모두 정렬하기에 공간이 넉넉하지 않으면 다음줄로 넘어가서 정렬된다.

아래 그림을 보면 한번에 이해할수 있을것이다.

flex-wrap : nowrap

.parent{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* 기본 속성 */
}

flex-wrap : wrap

.parent{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
}

네번째로 justify-conent 속성은 main axis 방향으로 간단하게 다양하게 배치를 해줄 수 있다.

(float로는 정말 어려운 일을 flexbox는 쉽게 할수있는것이다.)

값의 종류는 flex-start, flex-end, center, space-between, space-around 가 있다.

justify-content : flex-start

시작점부터 정렬

justify-content : flex-end

끝부터 정렬

justify-conent : center

가운데 정렬

justify-conent : space-between

가장 첫 아이템은 시작점에, 가장 마지막 아이템은 끝점에 배치하고 나머지는 공백을 동일하게 정렬

justify-conent : space-around

모든 아이템의 오른쪽 왼쪽에 일정한 공백을 갖음.

justify-conent : space-evenly

시작과 끝에 공백이 있으며 모든 아이템 사이의 공백이 모두 동일함

다섯번째로 align-items 의 경우는 cross axis 방향으로 배치하는것을 말한다.

마찬가지로 flex-start, flex-end, center 가있고 space-around/between/evenly의 경우는 불가능 하다.

왜냐면 cross axis 방향으로는 아이템이 한개나 마찬가지이기 떄문에 아이템끼리 공간을 띄우는 속성 값을

줄수가 없다.

align-items : center

.parent{
    width: 600px;
    height: 600px;
    background-color: gray;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    align-items: center;
}

여섯번째로 align-content 속성이 있고 flex-wratp : nowrap 일때는 효과가 없다. (한줄 이상부터 )

align-content : flex-start

align-content : center

align-content : flex-end

align-content : space-around

align-content : space-between

Grid

FlexBox 가 한방향 정렬 시스템이라면 , Grid는 두 방향(가로-세로) 정렬 시스템이라고 보면 된다.

FlexBox가 쉽게 구현이 가능해서 좋지만 좀더 복잡한 레이아웃을 만들려면 Grid를 사용하면 된다.

grid도 사용하기 위해서는 아이템들을 감싸는 부모에 display: grid 속성을 추가하면서 시작한다.

Grid Container 속성

display : 그리드 컨테이너 정의

grid-template-rows : 명시적 행의 크기 정의

grid-template-columns : 명시적 열의 크기 정의

Grid Item 속성

grid-row-start : 그리드 아이템의 행 시작 위치 지정

grid-row-end : 그리드 아이템의 행 끝 위치 지정

grid-row : grid-row-xxx 의 단축 속성

grid-colunm-start : 그리드 아이템의 열 시작 위치 지정

grid-colunm-end : 그리드 아이템 열 끝 위치 지정

grid-colunm : grid-colunm-xxx 의 단축 속성

grid-area : 영역 이름을 설정하거나, grid-row 와 grid-colunm 의 단축 속성

order : 아이템의 배치 순서를 지정

z-index : 아이템이 쌓이는 순서를 지정

Webpack / Babel

Webpack

웹팩이란 최신 front end 프레임워크에서 가장 많이 사용되고있는 모듈 번들러(module bundler)이다.

모듈 번들러는 web application을 구성하는 요소(HTML, CSS, Javascript 등)을 모두 각각의 모듈로 보고

이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다.

모듈 번들링 이란?

그림처럼 web application을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축을

해주는 동작을 말한다.

웹팩은 자바스크립트 뿐만 아니라 CSS, Image 등의 리소스의 의존성도 관리한다.

웹팩의 특징

1. 파일 단위의 자바스크립트 모듈들을 관리해준다.

2. 웹 개발을 할때 HTML,CSS,JS,Image 압축등을 자동으로 처리해준다.

3. 웹 애플리케이션의 로딩 속도가 빨라진다.

Babel

바벨은 쉽게말해 최신 자바스크립트 문법으로 개발을한후 실제로 배포를 할때 사용한다.

모든 사람들이 최신 자바스크립트를 인식하는 브라우저를 사용하지 않기때문에 서로 버전이 맞지 않으면

동작이 제대로 안되는경우가 많다. 바벨을 이런 호환성 문제를 해결해주기때문에 유용하다.

React / Vue / Angular

위 그림은 전 세계적으로 react, vue, angular의 사용량의 차이와 변화를 보여주고 있다.

아직까지는 react가 압도적인것을 알수있다.

그러면 react, vue, angular 의 차이에 대해 간단히 적어보겠다.

React

-페이스북에서 만들었다.

-엄밀히 말하면 프레임워크가 아닌 라이브러리이다.

-리액트는 UI 라이브러리이기 때문에 전역 상태관리, 라우팅, 빌드 시스템 등을 지원하지 않는다.

-웹 뿐만아니라 웹 개발도 가능하다. (React Native)

-관련 라이브러리가 많다.

-가장 인기있고 사용량이 많은만큼 커뮤니티도 방대하다. -> 즉 문제 해결 방법을 찾기 쉬움(ex. stackover flow)

-실무에서 사용할 확률이 높다.

Vue

-Javascript progressive 프레임워크이다.

-HTML, JS, CSS 코드영역을 분리해서 작성한다.

-가볍고 빠르다.

-가장 배우기가 쉽다

Angular

-구글에서 만들어진 오픈소스 JavaScript 프레임워크이다.

-TypeScript가 주력 언어라서 대규모 어플리케이션 개발에 적합하다.

'Dev-immersion' 카테고리의 다른 글

[개념 스터디] 4주차 (FE) (2)	2021.08.24
[개념 스터디] 3주차 (FE) (0)	2021.08.23
[개념스터디]3주차 (공통) (1)	2021.08.17
[개념 스터디] 2주차 (공통) (1)	2021.08.12