웹접근성을 고려한 HTML 구조 만들기

HTML

Web App 개발을 위한 HTML 구조 만드는 방법

  1. Web App을 <header>/<nav>/<main>/<footer> 4가지로 나눈다.
  2. 위 4가지 각 구간별로 하나씩 HTML 구조를 만들어 나간다.
  3. <main>의 경우, 각 가로별로 <div>로 나누고, 각 <div> 내에 각 영역을 <section>으로 나눠서 코드를 작성한다.
  4. 필요할 경우, <aside>와 <section> 내에 <article>을 사용한다.
  5. 시각장애인을 위한 웹접근성을 고려하여 코드를 작성한다.
  6. 위 4가지 구간 내에서 여러 요소들이 많이 속해 있는 것은 <div>로 묶는다.
  7. 링크가 필요한 경우, <a>를 사용한다.
  8. “|”, “<”, “>” 등의 경우, <i>로 아이콘을 사용하거나, <span>, <div> 등을 만들고, CSS로 해당 모양을 만든다.


시각장애인을 위한 웹접근성 관련 필수 코드

1. <nav>, <section> 등을 사용할 때마다, 해당 영역이 무엇을 뜻하는지 heading으로 전달해야한다.

[1] 화면에 글자를 보여줘야 할 때

1
2
3
4
<section id="main-login">
  <h3>로그인</h3> // 해당 section은 "로그인"에 관한 것
  <span>네이버를 더 안전하고 편리하게 이용하세요.</span>
</section>


[2] 화면에 글자를 숨겨야 할 때

1
2
3
4
5
<section id="main-login">
  // "blind" class로 css를 사용하여 해당 `<h3>`의 "로그인" 글자는 화면에 보이지 않지만, 해당 section은 "로그인"에 관한 것
  <h3 class="blind">로그인</h3>
  <span>네이버를 더 안전하고 편리하게 이용하세요.</span>
</section>


2. image를 사용할 때마다, 해당 이미지가 무엇을 뜻하는지 알려줘야 한다.

[1] <img /> 태그 사용시

각 이미지가 개별적으로 있어서 하나의 이미지씩 사용할 때, <img /> 태그를 사용하고, “alt”로 대체문자를 작성해야 한다.

1
<img src="images/web_standards.gif" alt="W3C 로고"> // 해당 이미지는 "W3C 로고"를 의미한다.


[2] Image Sprite 기법 사용시

서버로부터 개별적인 이미지를 하나씩 받아오면 성능에 문제가 있을 수 있기 때문에, 하나의 이미지를 한번에 받아와 그 이미지 내부에 있는 여러 이미지를 사용하는 기법을 Image Sprite 기법이라고 한다.

이럴 경우, “background-image” 등 CSS를 사용하여 이미지를 보여줘야 한다.

1
2
3
4
<button type="submit">
  <span class="blind">검색</span> // 해당(아래) 이미지가 "검색"을 의미한다.
  <span></span> // `<span>`을 작성하고, "background-image, "background-position" 등을 사용하여 이미지를 작업한다.
</button>


3. form 사용시, <legend>에서 해당 form이 무엇을 뜻하는지 알려줘야 한다.

1
2
3
4
5
6
7
8
9
10
11
12
<form>
  <fieldset>
    <legend class="blind">검색</legend> // 해당 form은 "검색"을 의미한다.
    <input />
    <span></span>
    <span></span>
    <button type="submit">
      <span class="blind">검색</span>
      <span></span>
    </button>
  </fieldset>
</form>

웹표준 & 웹접근성

HTML

웹표준

웹표준이란, W3C에서 정한 웹에 관련된 정해진 규칙을 말한다. 웹표준 스펙에 맞는 HTML, CSS 등으로 개발을 하여 웹을 개발해야 한다. 이런 표준을 정한 이유는 누구나 웹에 쉽게 접근하여 원하는 정보를 얻게 하기 위함이다. 이에 따라, 개발자는 웹접근성을 고려하여 모든사람(장애인을 포함한 일반인 모두)이 어떤 플랫폼(PC, 모바일, 태블릿)이든, 어떤 브라우저(Chrome, IE, Safari, FireFox, etc)든 쉽게 접근할 수 있게 웹을 개발해야 한다.

개발자는 HTML, CSS로 코딩을 한뒤, 웹표준에 맞는지 확인하기 위해서, 다음 2곳을 활용할 수 있다.

HTML 웹표준 검사: W3C Markup Validation
CSS 웹표준 검사: W3C CSS Validation


웹접근성

웹접근성이란, 모든사람(장애인을 포함한 일반인 모두)이 어떤 플랫폼(PC, 모바일, 태블릿)이든, 어떤 브라우저(Chrome, IE, Safari, FireFox, etc)든 쉽게 접근할 수 있게 고려한 웹이라고 할 수 있다.

웹표준을 따라 개발을 한다는 것은, 개발자가 코딩을 할 때, 다음의 3가지 웹접근성을 고려하여 개발을 해야한다는 뜻이다.

1. 장애인을 고려한 코드작성
2. 반응형을 고려한 코드작성
3. 크로스 브라우징을 고려한 코드작성


Semantic Web

Semantic Web이란, 의미론적인 웹을 말한다. 즉, HTML 작성시, 단순한 <div> 보다는 브라우저가 어떤 의미인지 파악할 수 있는 코드, 예를 들어 <header> 등으로 해당 태그가 어떤 의미인지를 전달하는 해야 검색엔진에도 좋고, 개발자끼리도 어떤 의미로 작성되었는지 쉽게 파악할 수 있어서 좋다.

대표적인 Semantic 태그

  • <header>
  • <footer>
  • <nav>
  • <main>
  • <section>
  • <article>
  • <aside>
  • <h1>


웹표준과 웹접근성으로 고려한 HTML 코딩 규칙

아래 링크에서 웹표준과 웹접근성으로 고려한 HTML 코딩을 작성할 때, 참고해보면 좋을 것 같다.

구체적인 HTML 규칙: HTML 규칙
링크 모음: 웹표준 HTML 규칙관련 링크


웹표준과 웹접근성을 고려해서 개발하는 방법

1. Semantic 태그를 활용하여 전반적인 HTML 구조를 작성한다.
2. Screen Reader 등 장애인 등을 고려한 태그를 추가적으로 작성한다.
3. 데스크탑, 모바일, 태블릿에 맞게 반응형(Responsive) 코드를 작성한다.
4. 모든 브라우저를 고려한 CSS를 작성한다.(Cross Browsing)
5. 작성한 HTML, CSS가 웹표준에 맞는지 확인하고자 한다면, W3C Validation에서 해당 코드를 붙여넣기하여 확인하면 된다.


Simple Todo UI

Sass

Todo UI

Simple Todo UI


UI 개발순서

[1] UI 컴포넌트 구성하기
[2] JSX로 HTML 구조 만들기
[3] Sass로 style 꾸미기(Sass 중 Scss 문법 사용)


[1] UI 컴포넌트 구성하기

[1-1] Todo List 전체를 나타내는 TodoTemplate 컴포넌트(전체화면)

  • 화면을 가운데 정렬
  • 크게 앱의 타이틀(Todo List)과 콘텐츠(Insert와 TodoList)로 나눔

[1-2] 새로운 Todo를 입력하고 추가할 수 있는 TodoInsert 컴포넌트

[1-3] TodoList 컴포넌트와 TodoListItem 컴포넌트

  • Todo의 item들을 나열하는 TodoList 컴포넌트
  • 각 Todo에 대한 정보를 보여주는 TodoListItem 컴포넌트

[1-4] 각 Todo에 대한 정보를 보여주는 TodoListItem 컴포넌트


[1-1] TodoTemplate 컴포넌트

[1] JSX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// TodoTemplate.js

import React from 'react';
import './TodoTemplate.scss';

const TodoTemplate = ({ children }) => {
  return (
    <div className="TodoTemplate">
      <div className="app-title">Todo List</div>
      <div className="content">{children}</div>
    </div>
  );
};

export default TodoTemplate;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// App.js

import React from 'react';
import TodoTemplate from './components/TodoTemplate';
import TodoInsert from './components/TodoInsert';
import TodoList from './components/TodoList';

function App() {
  return (
    <TodoTemplate>
      <TodoInsert />
      <TodoList />
    </TodoTemplate>
  );
}

export default App;


[2] Scss

Styles

  • Todo 전체화면을 가운데 정렬
  • 앱 타이틀 글자를 가운데 정렬

[2-1] Todo 전체화면을 가운데 정렬

Todo 전체화면은 TodoTemplate 컴포넌트이고, 이는 “div” 형태이므로 블록요소이다. 블록요소를 가운데 정렬하기 위해서는 width를 설정하고, margin-left와 margin-right를 auto로 설정해야한다.

1
2
3
4
5
6
7
8
9
.TodoTemplate {
  background-color: orchid;
  width: 512px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6rem; // 기본 font-size 16px를 기준 -> 16px * 6
  border-radius: 4px;
  overflow: hidden;
}

[2-2] 앱 타이틀 글자를 가운데 정렬

글자를 가운데 정렬하기 위해 flex를 이용하여 상하/좌우 가운데 정렬한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.TodoTemplate {
  ...

  .app-title {
    background: #22b8cf;
    color: white;
    height: 4rem;
    font-size: 1.5rem;
    display: flex;
    align-items: center; // 상하 정렬
    justify-content: center; // 좌우 정렬
  }
  .content {
    background: white;
  }
}


[1-2] TodoInsert 컴포넌트

[1] JSX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// TodoInsert.js

import React from 'react';
import { MdAdd } from 'react-icons/md';
import './TodoInsert.scss';

const TodoInsert = () => {
  return (
    <form className="TodoInsert">
      <input placeholder="Enter Todo" />
      <button type="submit">
        <MdAdd />
      </button>
    </form>
  );
};

export default TodoInsert;


[2] Scss

Styles

  • 각 요소의 기본 스타일 초기화
  • input 태그의 placeholder 추가
  • button을 제외한 모든 영역을 input이 차지
  • button안의 ‘+’ 모양 수직정렬
  • button 마우스 hover 시 배경색상 변경
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
31
32
33
34
35
36
37
// TodoInsert.scss

.TodoInsert {
  display: flex;
  background: #495057;
  input {
    // 기본 스타일 초기화
    background: none;
    outline: none;
    border: none;
    padding: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.5;
    color: white;
    &::placeholder { // input 태그의 placeholder 추가
      color: #dee2e6;
    }
    flex: 1; // button을 제외한 모든 영역을 input이 차지
  }
  button {
    background: none;
    outline: none;
    border: none;
    background: #868e96;
    color: white;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.5rem;
    display: flex;
    align-items: center; // button안의 '+' 모양 수직정렬
    cursor: pointer;
    transition: 0.1s background ease-in;
    &:hover { // button 마우스 hover 시 배경색상 변경
      background: #adb5bd;
    }
  }
}


[1-3] TodoList & TodoListItem 컴포넌트

[1] JSX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// TodoList.js

import React from 'react';
import TodoListItem from './TodoListItem';
import './TodoList.scss';

const TodoList = () => {
  return (
    <div className="TodoList">
      <TodoListItem />
      <TodoListItem />
      <TodoListItem />
      <TodoListItem />
    </div>
  );
};

export default TodoList;
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
// TodoListItem.js

import React from 'react';
import {
  MdCheckBoxOutlineBlank,
  MdCheckBox,
  MdRemoveCircleOutline,
} from 'react-icons/md';
import './TodoListItem.scss';

const TodoListItem = () => {
  return (
    <div className="TodoListItem">
      <div className="checkbox">
        <MdCheckBoxOutlineBlank />
        <div className="text">Todo</div>
      </div>
      <div className="remove">
        <MdRemoveCircleOutline />
      </div>
    </div>
  );
};

export default TodoListItem;


[2] Scss

Styles

  • TodoListItem에 있는 모든 요소는 수직 정렬
  • 짝수/홀수 Todo들의 배경색 다름
  • checkbox가 체크되었을 때, svg(아이콘)와 text 색상 바뀜
  • remove 이미지 수직정렬 및 hover 시 색상 바뀜
  • 두 item 사이에 border 색상 진하게 추가
1
2
3
4
5
6
7
// TodoList.scss

.TodoList {
  min-height: 320px;
  max-height: 513px;
  overflow-y: auto;
}
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// TodoListItem.scss

.TodoListItem {
  padding: 1rem;
  display: flex;
  align-items: center; // TodoListItem에 있는 모든 요소는 수직 정렬
  &:nth-child(even) { // 짝수/홀수 Todo들의 배경색 다름
    background: #f8f9fa;
  }
  .checkbox {
    cursor: pointer;
    flex: 1;
    display: flex;
    align-items: center;
    svg {
      font-size: 1.5rem;
    }
    .text {
      margin-left: 1.5rem;
      flex: 1;
    }
    &.checked { // checkbox가 체크되었을 때, svg와 text 색상 바뀜
      svg {
        color: #22b8cf;
      }
      .text {
        color: #adb5bd;
        text-decoration: line-through;
      }
    }
  }
  .remove {
    display: flex;
    align-items: center; // 수직정렬
    font-size: 1.5rem;
    color: #ff6b6b;
    cursor: pointer;
    &:hover { // hover 시 색상바뀜
      color: #ff8787;
    }
  }
  & + & { // 두 item 사이에 border 색상 진하게 추가
    border-top: 1px solid #dee2e6;
  }
}

프로젝트 시작전 개발 작업환경 설정하기

React

<1> ESLint

ESLint는 문법 검사 도구이다. VS Code의 MarketPlace에서 설치가 가능하다. ESLint를 사용하면, 코드를 작성할 때 실수를 하면 에러 또는 경고메시지를 VS Code 에디터에서 바로 확인이 가능하다.


<2> Prettier

Prettier는 코드 스타일 자동 정리 도구이다. VS Code의 MarketPlace(Prettier-Code formatter)에서 설치가 가능하다.

[1] 현재 프로젝트의 루트 디렉터리(src, public 등의 디렉터리들이 위치한 곳)에서 .prettierrc 라는 파일을 생성한다.

[2] 들여쓰기, 따옴표, 세미콜론 등 원하는 스타일을 커스터마이징을 할 수 있다.

1
2
3
4
5
6
7
8
// .prettierrc

{
  "singleQuote": true, // 작은 따옴표 사용
  "semi": true, // 세미콜론은 언제나 사용
  "useTabs": false,
  "tabWidth": 2 // 들여쓰기 시 탭 대신 공백을 두칸 사용
}

[3] 저장할 때, 자동으로 코드 정리하기

코드 스타일을 정리하기 위해서는 F1을 누르고, Format이라고 입력후, Enter를 눌러야 한다. 이 대신에, 코드를 저장할 때 마다 자동으로 코드 스타일을 정리하는 방법이 있다.

[3-1] Vs Code의 메뉴 중에서, Code - 기본설정 - 설정 메뉴에 들어간다.
[3-2] “format on save”를 검색하여 체크박스에 체크한다.

위와 같이하면, 저장할 때마다 코드가 자동으로 정리가 된다.


<3> Reactjs Code Snippets

React 컴포넌트 및 라이프사이클 함수를 작성할 때, 단축 단어를 사용하여 간편하게 코드를 자동으로 생성해 낼 수 있는 코드 스니펫 모음이다. Reactjs Code Snippets는 VS Code의 MarketPlace에서 설치가 가능한데, 제작자가 charalampos karypidis인 것을 설치한다.

이를 사용하면, 단축키로 컴포넌트 코드를 간편하고 빠르게 생성할 수 있다.

[1] rsc -> Enter

함수형 컴포넌트를 생성한다.

[2] rcc -> Enter

class형 컴포넌트를 생성한다.


<4> 컴포넌트를 자동으로 불러오기(import)

[1] 루트 디렉터리에 jsconfig.json 파일을 생성한다.

[2] Ctrl + Space를 누르고 Enter를 누른다.

[3] 그러면, 다음과 같은 코드가 자동완성된다.

1
2
3
4
5
6
7
// jsconfig.json

{
  "compilerOptions": {
    "target": "es6"
  }
}

위와 같이 하게되면, 불러오고 싶은 컴포넌트의 파일이 열려 있지 않아도, 자동완성을 통해 컴포넌트를 불러와서 사용이 가능하다. 예를 들어, 부모 컴포넌트에서 어떤 A 컴포넌트의 이름을 작성하면, 따로 import A 이런식으로 작성하지 않아도 자동으로 작성이 된다.

Z-index 이해하기

CSS

z-index 개념

z-index란, 화면출력의 순서를 정할 때 사용되는 CSS의 프로퍼티이다. 먼저 나오는 태그를 더 위에 위치하고 싶다면, position과 z-index를 사용하면 된다.

화면출력의 순서는 다음과 같이 비교할 수 있다.

  • 먼저 나오는 태그보다 나중에 나오는 태그가 위에 위치한다.
  • position이 적용된 태그가 위에 위치한다.(static은 제외)
  • 부모요소끼리 z-index 값을 비교하여, 값이 큰 순서대로 위에 위치한다.
  • 동일 부모요소에 있는 자식요소끼리 z-index 값을 비교하여, 값이 큰 순서대로 위에 위치한다.
  • 자식 z-index 값이 아무리 커도 다른 부모요소 보다는 위에 위치할 수 없다. 즉, 자기 부모요소안에만 위치한다.


다음의 코드로 이해하면 좋을 것 같다.

출처: z-index

Position을 활용한 CSS 레이아웃

CSS

Position 개념

position이란, 요소의 위치를 정의하는 CSS의 프로퍼티로써, top, bottom, left, right와 함께 요소의 위치를 지정할 때 사용된다.

static

[1] 특징

  • position의 default 값으로써, position을 지정하지 않은 것과 동일하게 작동한다.
  • 요소를 배치하는 기본적인 순서에 따라 위 -> 아래, 왼쪽 -> 오른쪽 순서에 따라 배치가 된다.
  • position의 적용된 요소의 부모요소가 존재한다면, 해당 요소는 부모요소의 기준으로 위치가 배치된다.
  • 부모요소에서의 width의 100%를 갖고, height는 auto가 적용된다.(line-height로 부모요소와 동일한 height를 가질수 있다.)
  • top, bottom, left, right를 같이 사용할 수가 없고, 사용을 해도 무시된다.
  • 기본적으로 position:static;을 사용하는 일은 거의 없다.

[2] 사용방법


relative

[1] 특징

  • 기본 위치(static으로 지정되었을 때의 위치)를 기준으로 top, bottom, left, right를 사용하여 위치를 이동시킨다.(static과 동일)
  • 즉, static과 같이 부모요소가 있을 경우, 부모요소의 위치를 기준으로 위치가 배치된다.(부모요소의 width의 100%, height는 auto)
  • 이때, top, bottom, left, right를 사용하여 부모요소로부터 상/하/좌/우 방향으로 위치가 이동된다.
  • static과의 유일한 차이점은 top, bottom, left, right를 사용하여 위치를 이동시킬 수 있다는 점이다.

[2] 사용방법


absolute

[1] 특징

  • position에서 relative, absolute, fixed 중 1개가 적용되어 있는 부모요소 또는 그 상위요소를 기준으로 top, bottom, left, right를 사용하여 위치를 이동시킨다.
  • 이때, 부모 또는 그 상위 요소가 static인 경우, document body를 기준으로 top, bottom, left, right를 사용하여 위치하게 된다.
  • 부모 요소를 배치의 기준으로 하기 위해서는 부모 요소에 position:relative;를 적용해야한다.
  • 또한, 다른 요소가 먼저 위치를 점유하고 있어도 position:relative;를 적용한 요소는 뒤로 밀리지 않고 다른 요소를 덮어쓴다.
  • absolute 선언 시, block 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야 한다.

[2] 사용방법


relative v. absolute

[1] relative와 absolute의 차이점

  • position: relative; -> 기본위치(부모요소가 있을 경우, 부모요소)를 기준으로 위치한다.
  • position: absolute;
    • 부모요소에 relative, absolute, fixed 중 1개가 적용되어 있는 경우 -> 부모를 기준으로 위치한다.
    • 부모요소나 그 상위요소에 static 또는 아무것도 적용된 것이 없는 경우 -> document body를 기준으로 위치한다.(부모 요소의 영역을 벗어나 자유롭게 어디든지 위치할 수 있다.)

[2] 사용방법


fixed

[1] 특징

  • 부모 요소와 관계없이 브라우저의 viewport를 기준으로 top, bottom, left, right를 사용하여 위치를 이동시킨다.(특정 위치에 고정시킬 때 사용)
  • 스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.
  • fixed를 적용한 block 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야 한다.

[2] 사용방법


position 사용 예시

[1] position: absolute;

footer를 다른 요소 위에 올려놓고 싶을 경우

이때, block 요소의 width를 적절히 지정해야한다.

1
2
3
4
5
6
7
8
9
10
11
// HTML
<footer>© Copyright</footer>

// CSS
footer {
  position: absolute; // 다른 요소(aside 등) 위에 올릴 수 있다.
  height: 60px;
  width: 100%;
  padding: 0 25px;
  line-height: 60px;
}


[2] position: fixed;

header를 최상단에 고정시키고 싶을 경우

이때, 부모요소 신경 안쓰고, viewport 기준으로 배치가 가능하고, block 요소의 width를 적절히 지정해야한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// HTML
<header>
  <nav>
    <ul class="nav-items">
      <li><a href="#home">Home</a></li>
      <li><a href="#projects">Projects</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </nav>
</header>

// CSS
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  z-index: 2000;
}

Float를 활용한 CSS 레이아웃

CSS

Float 개념

Float란, CSS에서 레이아웃을 하기 위한 하나의 기술로써, 주로 block 요소를 가로 정렬하기 위해 사용되는 레이아웃 방법이다.

  • float: none; -> 요소를 떠 있게 하지 않음(default)
  • float: right; -> 요소를 오른쪽으로 이동시키고, 오른쪽부터 가로로 정렬됨
  • float: left; -> 요소를 왼쪽으로 이동시키고, 왼쪽부터 가로로 정렬됨

float 프로퍼티를 사용하면, 해당 요소를 다음 요소 위에 떠 있게(부유하게) 하는데, 이는 해당 요소가 기본적인 레이아웃에서 벗어나 요소의 모서리가 왼쪽이나 오른쪽으로 이동하는 것을 말한다.(참고로, float를 사용한다면, 요소의 위치를 고정시키는 position의 absolute는 사용하면 안된다.)


Float 기본 사용법

왼쪽 또는 오른쪽부터 가로 정렬을 하고 싶은 요소들에 float를 적용하면 된다.

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
31
32
33
34
import React from "react";

const styleFirst = {
  float: "right", // float 적용
  backgroundColor: "orange",
  color: "white",
  width: "100px",
  height: "100px",
  margin: "30px"
};
const styleSecond = {
  float: "left", // float 적용
  backgroundColor: "green",
  color: "white",
  width: "100px",
  height: "100px",
  margin: "30px"
};


const Side = () => {
  return (
    <div className="parent">
      <div className="childFirst" style={styleFirst}>
        first
      </div>
      <div className="childSecond" style={styleSecond}>
        second
      </div>
    </div>
  );
};

export default Side;

다음과 같이 나온다.

float 적용

float를 사용하면 위와 같이, 오른쪽/왼쪽에서 가로 정렬만 가능하다. 만약, 중앙에서 가로 정렬을 하고 싶다면, “margin”을 적용해야 한다.

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
31
32
33
import React from "react";

const styleFirst = {
  // float: "right",
  backgroundColor: "orange",
  color: "white",
  width: "100px", //
  height: "100px",
  margin: "30px auto" // 가로정렬을 위해 auto 적용
};
const styleSecond = {
  // float: "left",
  backgroundColor: "green",
  color: "white",
  width: "100px", //
  height: "100px",
  margin: "30px auto" // 가로정렬을 위해 auto 적용
};

const Side = () => {
  return (
    <div className="parent">
      <div className="childFirst" style={styleFirst}>
        first
      </div>
      <div className="childSecond" style={styleSecond}>
        second
      </div>
    </div>
  );
};

export default Side;

중앙 가로 정렬


Float 사용시 문제와 해결방법

[1] float를 적용한 요소와 적용하지 않은 요소간 margin이 사라지는 문제

다음의 코드를 작성해보자.

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
import React from "react";

const styleFirst = {
  backgroundColor: "blue",
  height: "50px",
  margin: "0 10px",
  padding: "10px"
};
const styleSecond = {
  backgroundColor: "green",
  height: "50px",
  margin: "0 10px",
  padding: "10px"
};

const Side = () => {
  return (
    <div className="parent">
      <div className="childFirst" style={styleFirst}>
        first
      </div>
      <div className="childSecond" style={styleSecond}>
        second
      </div>
    </div>
  );
};

export default Side;

그러면, 다음과 같이 두개의 div가 나온다.

2개의 div

여기서 첫번째 div에만 float를 적용하면 어떻게 될까?

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
import React from "react";

const styleFirst = {
  float: "left", // float 적용
  backgroundColor: "blue",
  height: "50px",
  margin: "0 10px",
  padding: "10px"
};
const styleSecond = {
  backgroundColor: "green",
  height: "50px",
  margin: "0 10px",
  padding: "10px"
};

const Side = () => {
  return (
    <div className="parent">
      <div className="childFirst" style={styleFirst}>
        first
      </div>
      <div className="childSecond" style={styleSecond}>
        second
      </div>
    </div>
  );
};

export default Side;

1개의 div에 float 적용

이렇게 되면, float가 적용된 첫번째 div는 width가 inline 요소와 같이 content에 맞게 최소화가 되고, 다음 요소(두번째 div) 위에 부유하게 된다.(떠있게 된다.) 그러나, 두번째 div 요소의 width는 100%를 그대로 유지한다.

즉, 두 요소간의 margin은 제대로 표현되지 않는다.

이 문제를 해결하기 위한 방법은 float를 적용하지 않은 두번째 div에 “overflow:hidden;”을 적용하는 것이다. “overflow: hidden;”은 자식 요소가 부모 요소의 영역보다 클 경우 넘치는 부분을 안보이게 해주는 역할을 하는데, 여기서는 float 프로퍼티가 없어서 제대로 표현되지 못하는 요소를 제대로 출력해준다.

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
31
import React from "react";

const styleFirst = {
  float: "left",
  backgroundColor: "blue",
  height: "50px",
  margin: "0 10px",
  padding: "10px"
};
const styleSecond = {
  overflow: "hidden", // 적용
  backgroundColor: "green",
  height: "50px",
  margin: "0 10px",
  padding: "10px"
};

const Side = () => {
  return (
    <div className="parent">
      <div className="childFirst" style={styleFirst}>
        first
      </div>
      <div className="childSecond" style={styleSecond}>
        second
      </div>
    </div>
  );
};

export default Side;

overflow:hidden 적용


[2] float가 적용된 자식요소를 포함하는 부모요소의 높이가 정상적으로 반영되지 않는 문제

다음의 코드를 작성해보자.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import React from "react";

const parentStyle = {
  color: "white",
  textAlign: "center",
  padding: "10px",
  backgroundColor: "gray"
};

const styleFirst = {
  float: "left",
  backgroundColor: "blue",
  width: "50%",
  padding: "20px 0"
};
const styleSecond = {
  float: "left",
  backgroundColor: "green",
  width: "50%",
  padding: "20px 0"
};
const styleLast = {
  backgroundColor: "red",
  padding: "10px",
  color: "white"
};
const Side = () => {
  return (
    <div>
      <div className="parent" style={parentStyle}>
        <div className="childFirst" style={styleFirst}>
          first
        </div>
        <div className="childSecond" style={styleSecond}>
          second
        </div>
      </div>
      <div className="last" style={styleLast}>
        last
      </div>
    </div>
  );
};

export default Side;

부모요소 높이 문제

위와 같이, 부모요소의 높이가 정상적이지 못하다. 이를 해결하는 방법은 대표적으로 2가지가 있다.

[2-1] float가 적용된 요소의 부모요소에 “overflow:hidden”을 적용

1
2
3
4
5
6
7
const parentStyle = {
  color: "white",
  textAlign: "center",
  padding: "10px",
  backgroundColor: "gray",
  overflow: "hidden" // 적용
};


[2-2] float가 적용된 요소의 부모요소에 clearfix 클래스를 추가하고, :after 가상 요소 선택자를 적용하여 css를 추가

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
31
32
33
34
35
36
37
38
39
40
41
// Side.js

import React from "react";
import "../clearfix.css"; // clearfix.css 적용

const styleFirst = {
  float: "left",
  backgroundColor: "blue",
  width: "50%",
  padding: "20px 0"
};
const styleSecond = {
  float: "left",
  backgroundColor: "green",
  width: "50%",
  padding: "20px 0"
};
const styleLast = {
  backgroundColor: "red",
  padding: "10px",
  color: "white"
};
const Side = () => {
  return (
    <div>
      <div className="parent clearfix"> // clearfix 클래스 추가
        <div className="childFirst" style={styleFirst}>
          first
        </div>
        <div className="childSecond" style={styleSecond}>
          second
        </div>
      </div>
      <div className="last" style={styleLast}>
        last
      </div>
    </div>
  );
};

export default Side;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// clearfix.css

.parent {
  background-color: blue;
  color: white;
  text-align: center;
  padding: 10px;
  background-color: gray;
}
.parent:after {
  content: "";
  display: block;
  clear: both;
}

위와 같이 코드를 작성하면, 다음과 같이 나온다.

clearfix 적용


Float 예시

화면 왼쪽과 오른쪽에 “aside”와 “section” 태그를 보여주려고 한다. 이때, float를 사용해서 코드를 다음과 같이 작성하면 된다. 즉, 화면에 보여주려는 요소들에 float를 적용하고, 해당 요소의 부모요소에 clearfix를 적용하는 방식으로 코드를 작성한다.

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
31
32
33
34
35
36
// Float.js

import React from "react";
import "../clearfix.css";

const Float = () => {
  return (
    <div id="parent">
      <aside>
        <h1>Aside</h1>
        <ul>
          <li>
            <a href="#" class="active">
              Economy
            </a>
          </li>
          <li>
            <a href="#">Math</a>
          </li>
        </ul>
      </aside>
      <section>
        <article id="economy">
          <h1>Economy</h1>
          <p>...</p>
        </article>
        <article id="math">
          <h1>Math</h1>
          <p>...</p>
        </article>
      </section>
    </div>
  );
};

export default Float;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// clearfix.css

#parent:after {
  content: "";
  display: block;
  clear: both;
}
aside {
  float: left;
  width: 30%;
}
section {
  float: right;
  width: 70%;
}

HTML 요소를 수평/수직 방향으로 정렬하는 방법

CSS

수평 정렬: 수평으로 정렬하고 싶은 대상 요소의 부모요소에서 설정

HTML 요소들을 수평방향으로 정렬하는 방법에 대해 알아보자.

[1] inline/inline-block 요소

수평으로 정렬하고 싶은 요소의 부모요소에 “text-align”을 사용한다.

예를 들어, Navigation의 각 요소(a 태그)들을 수평으로 정렬시키기 위해서는 a 태그의 부모요소인 nav 태그에 “text-align:center;”를 적용해야한다.


[2] block 요소

수평으로 정렬하고 싶은 요소가 block 요소일 경우, 정렬대상 요소에 width를 설정하고, margin-left와 margin-right를 auto로 설정한다.

예를 들면, 다음과 같다.


그런데, 만약 block 요소가 여러개일 경우, 정렬대상 block 요소를 inline-block으로 변경하고, 정렬대상 block 요소의 부모요소에 “text-align:center;”를 적용해야한다.

만약, 정렬대상 block 요소에 width를 지정하지 않으면, 콘텐츠에 width가 맞추어 width가 결정되므로 명시적으로 width를 지정해야한다.


[3] FlexBox를 이용한 수평정렬

정렬대상 요소의 부모요소에 다음과 같이 flex를 적용하면 정렬대상 요소가 수평으로 정렬된다.


수직 정렬

HTML 요소들을 수직방향으로 정렬하는 방법에 대해 알아보자.

[1] inline/inline-block 요소

[1-1] single line

정렬대상 요소의 부모 요소에 padding-top과 padding-bottom 값을 동일하게 적용한다.

만약, padding을 사용할 수 없다면, 정렬대상 요소에 height와 line-height 값을 동일하게 적용한다.

1
2
3
4
5
6
7
8
.main a {
  background: black;
  height: 100px; //
  line-height: 100px; //
  color: white;
  padding: 40px 30px;
  text-decoration: none;
}


[1-2] Multiple line

수직정렬을 할 line이 여러개일 경우, vertical-align을 사용하는 방법도 가능한데, table 속성을 사용해야한다.

수직정렬 대상요소의 부모요소에 table을 사용하고, 수직정렬 대상요소에 table-cell과 vertical-align을 사용한다.

1
2
3
4
5
6
7
8
.parent {
  display: table;
  height: 100px;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

예를 들면, 다음과 같다.

또는, padding-top과 padding-bottom 값을 동일하게 적용하는 방법도 가능하다.


[1-3] FlexBox

수직정렬 대상요소의 부모요소에 다음과 같이 flex를 적용하면 된다.

1
2
3
4
5
6
.parent {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}


[2] block 요소

[2-1] 해당 요소의 높이가 고정되어 있는 경우(ex) height: 100px;)

부모 요소를 기준으로 절대 위치를 지정한다.

1
2
3
4
5
6
7
8
9
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; // 요소의 높이(100px)의 반 만큼 위로 이동
}

예를 들면, 다음과 같다.


[2-2] 해당 요소의 높이가 고정되어 있지 않는 경우

부모 요소를 기준으로 절대 위치를 지정한다.

1
2
3
4
5
6
7
8
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); // 요소의 높이의 반(50%) 만큼 위로 이동
}

예를 들면, 다음과 같다.


[2-3] FlexBox 사용

부모 요소에 Flexbox를 지정한다.

1
2
3
4
5
.parent {
  display: flex;
  flex-direction: column; // 위에서 아래로 수직 배치
  justify-content: center; // 중앙정렬
}

display를 활용한 CSS 레이아웃

CSS

display 프로퍼티

display 프로퍼티는 HTML 요소들을 레이아웃 하는데 자주 사용된다.

  • display: block; –> block 특성을 가지는 요소로 지정
  • display: inline; –> inline 특성을 가지는 요소로 지정
  • display: inline-block; –> inline-block 특성을 가지는 요소로 지정
  • display: none; –> 요소를 화면에 표시하지 않음(공간도 제거)

각 HTML 요소들은 block 또는 inline의 특성을 가지고 있다.


요소의 종류

block 요소

[1] block 요소 특징

  • 새로운 라인에서 시작
  • width, height, margin, padding 프로퍼티 지정이 가능
  • block 요소내에 inline 레벨 요소를 포함 가능
  • 화면 크기 전체의 가로폭을 차지(width: 100%)

[2] block 요소 종류

  • div
  • ul
  • li
  • p
  • h1~h6
  • table
  • form
  • hr
  • ol


inline 요소

[1] inline 요소 특징

  • 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치
  • width, height, margin, padding 프로퍼티 지정이 ‘불’가능
  • inline 요소내에 block 레벨 요소를 포함 ‘불’가능(inline 요소는 일반적으로 block 요소내에 포함되어 사용)
  • content의 너비만큼 가로폭을 차지
  • 상, 하 여백은 line-height로 지정
  • inline 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 space(4px)가 자동 지정

[2] inline 요소 종류

  • span
  • a
  • img
  • strong
  • br
  • input
  • select
  • button
  • textarea


inline-block 요소

[1] inline-block 요소 특징(block과 inline 요소의 특징을 모두 갖음)

  • inline 요소와 같이 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치시킬 수 있음
  • block 요소와 같이 width, height, margin, padding 프로퍼티 지정이 가능
  • content의 너비만큼 가로폭을 차지
  • 상, 하 여백을 margin과 line-height 두가지 프로퍼티 모두를 통해 제어 가능
  • inline-block 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 space(4px)가 자동 지정


display v. visibility

visibility 프로퍼티는 요소를 보이게/안보이게 할 것인지를 정의한다. 즉, 요소의 렌더링 여부를 결정한다.

  • display: visible; –> 해당 요소를 보이게 함 (default)
  • display: hidden; –> 해당 요소를 보이지 않게 함
  • display: collapse; –> table 요소에 사용하며 행이나 열을 보이지 않게 함
  • display: none; –> table 요소의 row나 column을 보이지 않게 함.(IE, 파이어폭스에서만 동작하며 크롬에서는 hidden과 동일하게 동작)

display:none; 과 visibility:hidden 의 차이

  • display: none;은 해당 요소의 공간까지 사라진다.
  • visibility: hidden;은 해당 요소의 공간은 사라지지 않고 남아있게 된다.


display 활용 방법

로고와 navigation을 포함한 Header를 다음과 같이 만들어보자.(React)

최종 Header


현재상태는 다음과 같다.

현재 Header

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// css
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  z-index: 2000;
  background-color: #fff;
}

// Header component

import React from "react";
import Logo from "../images/logo.png";

const Header = () => {
  return (
    <div id="wrap">
      <header>
        <a className="logo" href="#home">
          <img src={Logo} height="36px" alt="my" />
        </a>
        <nav>
          <ul className="nav-items">
            <li>
              <a href="#home">Home</a>
            </li>
            <li>
              <a href="#projects">Projects</a>
            </li>
            <li>
              <a href="#contact">Contact</a>
            </li>
            <li>
              <a href="#about">About</a>
            </li>
          </ul>
        </nav>
      </header>
    </div>
  );
};

export default Header;


[1] Navagation을 우측 상단으로 정렬한다.

1
2
3
nav {
  float: right;
}

현재 Header


[2] logo 이미지를 수직으로 중앙 정렬을 한다.

  • logo 이미지를 포함하는 “a” 태그의 height를 img 태그(logo 이미지)와 동일한 height인 36px로 지정한다.
  • header의 height인 60px과 맞추기 위해, 상/하 여백으로 맞추는데, margin을 사용한다.
  • 이때, a 태그는 inline 요소이기 때문에, margin을 적용하기 위해서는 “display: inline-block;”을 설정해야 한다.
1
2
3
4
5
.logo {
  display: inline-block;
  height: 36px;
  margin: 12px 0 12px 25px;
}

현재 Header


[3] Navigation의 각 요소들을 수평정렬한다.

  • 각 Navigation의 요소들은 “li”로 block 요소이기 때문에, “display:inline-block;”로 설정해야한다.
1
2
3
.nav-items > li {
  display: inline-block;
}

현재 Header


[4] 각 Navigation 요소들을 Header와 맞추기 위해 수직으로 중앙 정렬한다.

  • 각 Navigation의 텍스트의 높이를 Header의 height 동일하게 하기 위해 “line-height: 60px;”를 설정한다.
1
2
3
4
5
.nav-items > li > a {
  line-height: 60px;
  padding: 0 30px;
  color: rgba(0, 0, 0, 0.4);
}

현재 Header


[5] 각 Navigation의 텍스트에 Mouse를 갖다대면 색상이 변하게 한다.

  • 가상 셀렉터인 “:hover”를 이용한다.
1
2
3
.nav-items > li > a:hover {
  color: rgba(0, 0, 0, 1.5);
}

현재 Header

CSS Box Model

CSS

Box Model 개념

모든 HTML 요소는 Box 형태의 영역(사각형)을 가지고 있다.

Box는 Content, Padding, Border, Margin으로 구성되어있다.

CSS Box Model


box-sizing 프로퍼티

CSS에는 box-sizing라는 프로퍼티가 있고, 키워드로는 content-box와 border-box가 있다. 기본값(default)은 content-box로 되어있는데, 이는 width, height 프로퍼티 값이 content 영역을 의미한다.

만약, border-box를 사용하면 width, height 프로퍼티 값은 content + padding + border의 총합 영역을 의미한다.

[1] 두개의 div 박스를 만들어보자.

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
import React from "react";
import "./App.css";


const simpleStyle = {
  width: "500px",
  margin: "20px auto",
  border: "solid red 2px"
};
const fancyStyle = {
  width: "500px",
  margin: "20px auto",
  border: "solid blue 2px"
};

function App() {
  return (
    <div>
      <div className="simple" style={simpleStyle}>
        simple
      </div>
      <div className="fancy" style={fancyStyle}>
        fancy
      </div>
    </div>
  );
}

export default App;

그러면, 두 div의 박스는 다음과 같다.

두개의 div


[2] padding을 추가해보자.

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
import React from "react";
import "./App.css";


const simpleStyle = {
  width: "500px",
  margin: "20px auto",
  border: "solid red 2px"
};
const fancyStyle = {
  width: "500px",
  margin: "20px auto",
  border: "solid blue 2px",
  padding: "50px" // padding 추가
};

function App() {
  return (
    <div>
      <div className="simple" style={simpleStyle}>
        simple
      </div>
      <div className="fancy" style={fancyStyle}>
        fancy
      </div>
    </div>
  );
}

export default App;

그러면, 두 div의 박스는 다음과 같다.

box-sizing: content-box

이렇게 되는 이유가, default로 box-sizing이 content-box이기 때문에, width의 기준은 content 영역이다. 즉, box 구성의 다른부분, 예를 들어 padding이 추가되면 박스의 전체적인 모양은 늘어난다.

이를 방지하기 위해서는 box-sizing의 값을 border-box로 지정해야 한다.

[3] box-sizing의 값을 border-box로 지정

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
31
import React from "react";
import "./App.css";


const simpleStyle = {
  width: "500px",
  margin: "20px auto",
  border: "solid red 2px"
};
const fancyStyle = {
  boxSizing: "border-box", // border-box 지정
  width: "500px",
  margin: "20px auto",
  border: "solid blue 2px",
  padding: "50px"
};

function App() {
  return (
    <div>
      <div className="simple" style={simpleStyle}>
        simple
      </div>
      <div className="fancy" style={fancyStyle}>
        fancy
      </div>
    </div>
  );
}

export default App;

그러면, 두 div의 박스는 다음과 같다.

box-sizing: border-box


전역에서 border-box 적용

border-box는 자주 사용되기 때문에, 전역에서 지정해줘도 된다. 또한, border-box는 상속이 안되기 때문에, 아래와 같이 *를 이용해서 적용한다.

1
2
3
4
5
6
7
8
9
10
11
12
// index.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; // 전역에서 지정
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #58666e;
  background-color: #f0f3f4;
}


width와 height 사용할 시 유의사항

[1] width와 height를 지정한 콘텐츠 영역과 실제 콘텐츠 영역이 차이가 날 때

width와 height로 지정한 콘텐츠 영역보다 실제 콘텐츠가 더 크게 되면, 지정한 콘텐츠 영역을 실제 콘텐츠가 넘어가게 된다.

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
import React from "react";
import "./App.css";


const divStyle = {
  width: "100px",
  height: "100px",
  backgroundColor: "orange",
  border: "5px solid blue",
};

function App() {
  return (
    <div style={divStyle}>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </div>
  );
}

export default App;

그러면, 지정한 콘텐츠 영역과 실제 콘텐츠는 다음과 같다.

지정한 콘텐츠 영역과 실제 콘텐츠 영역

넘어간 콘텐츠를 숨기려면, overflow: hidden을 추가하면 된다.

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
import React from "react";
import "./App.css";


const divStyle = {
  width: "100px",
  height: "100px",
  backgroundColor: "orange",
  border: "5px solid blue",
  overflow: "hidden" // 추가
};

function App() {
  return (
    <div style={divStyle}>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </div>
  );
}

export default App;

그러면, 다음과 같이 실제 콘텐츠 영역을 숨길 수 있다.

overflow: hidden 적용 후


[2] width와 height의 초기값

width와 height의 값을 따로 지정하지 않으면, 초기값은 auto로 설정되어, 브라우저가 상황에 따른 width와 height의 값을 계산한다. 요소(element)가 block 요소라면, width는 부모요소의 100%가 되고, height는 콘텐츠의 높이로 계산되어 지정된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from "react";
import "./App.css";


const divStyle = {
  backgroundColor: "orange",
  border: "5px solid blue",
};

function App() {
  return (
    <div style={divStyle}>
      hello
    </div>
  );
}

export default App;

그러면, 다음과 같이 해당 요소의 width는 부모요소인 body의 100%이고, height는 콘텐츠의 높이다.

width와 height의 초기값


[3] 해당 요소의 width가 브라우저의 width 보다 커서 스크롤바가 생기는 경우

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
import React from "react";
import "./App.css";


const divStyle = {
  border: "5px solid red",
  width: "600px",
  margin: "0 auto"
};

function App() {
  return (
    <div style={divStyle}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </div>
  );
}

export default App;

그러면, 다음과 같이 브라우저 width가 해당요소의 width 보다 작을 경우, 화면 아래 가로 스크롤바가 생긴다.

해당 요소의 width가 브라우저의 width 보다 클 경우


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
import React from "react";
import "./App.css";


const divStyle = {
  border: "5px solid red",
  maxWidth: "600px", // max-width 적용(inline style 경우, max-width -> maxWidth 적용)
  margin: "0 auto"
};

function App() {
  return (
    <div style={divStyle}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </div>
  );
}

export default App;

그러면, 다음과 같이 가로 스크롤바가 생기지 않는다.

max-width 적용 후