반응형

ARM 크로스 컴파일 환경구축

1.arm-linux-gcc 파일 다운로드

$mkdir workspace
$cd workspace/ 
$wget ftp://ftp2.de.freebsd.org/pub/linux/handhelds/projects/toolchain/arm-linux-gcc-3.3.2.tar.bz2

-> 현재 있는 폴더로 다운로드 됨

 

2.압축해제

해당파일을 루트로 옮기고 압축품

$sudo cp ./arm-linux-gcc-3.3.2.tar.bz2/
$cd/
$sudo tar xvf arm-linux-gcc-3.3.2.tar.bz2/

 

3.압축해제 확인 및 유저프로파일 수정

압축 풀린 것 확인 -> 없으면 잘못된것

$ls /usr/local/arm/3.3.2
$cd ~

vi 명령어 사용해서 profile 파일을 고쳐주라는데 자꾸 에러나서 걍 gedit -> 이렇게 해도 상관읎다!

$gedit .profile

맨 하단에 PATH 설정 후 저장

PATH=/usr/local/arm/3.3.2/bin:/usr/local/arm/3.3.2/sbin:"${PATH}"  

 

4.변경사항 적용 및 확인

편집 완료되면 명령어로 변경된 사항을 적용시켜줌

$source ~/.profile

변경사항 잘 정용되었나 확인해보는 명령어

$echo $PATH

아까입력한 PATH 나오면 성공!

반응형
저작자표시 변경금지 (새창열림)

'Web > web dev' 카테고리의 다른 글

TCP / IP  (2) 2020.12.15
임베디드 OS 만들기 -2장 hello world 출력  (0) 2019.09.23
임베디드 OS 만들기 환경설정 - (4)U-BOOT 설치  (0) 2019.09.14
임베디드 OS 만들기 환경설정 - (3)qemu 설치  (0) 2019.09.13
임베디드 OS 만들기 환경설정 - (1)  (0) 2019.09.06
반응형

도전! 임베디드 OS만들기(부제 : 코딩하며 배우는 운영체제 원리)

저자 : 이만우 (숭실대 컴퓨터학부 졸업, SSM, 삼성전자 반도체 총괄중.)

 

이 책을 보고 따라하며 내용을 정리합니다

교수님 환경을 따라하고, 하다가 조금 더 나은 환경으로 구축하겠습니다

 

https://blog.naver.com/goodkus/220199301787

이 블로그를 참조하여 진행합니다. 문제가 된다면 삭제하겠습니다 ^0^

 

 

운영체제란?

 - 응용 프로그램과 하드웨어 사이에서 인터페이스 역할을 하며 시스템의 동작을 제어하는 시스템 소프트웨어. -> 시스템의 자원과 동작을 관리하는 소프트웨어.

 

운영체제의 역할

- 프로세스 관리

- 스레드, 프로세스

- 스케줄링

- 동기화

- IPC

- 저장장치 관리

- 메모리 관리

- 가상 메모리

- 파일 시스템

- 네트워킹

- TCP / IP

- 기타 여러 프로토콜

- 사용자 관리

- 계정 관리

- 접근권한 관리

- 디바이스 드라이버

- 순차접근 장치

- 임의접근 장치

- 네트워크 장치

 

프로세스 관리 

  운영체제에서 작동하는 응용 프로그램을 관리하는 기능. 현재 프로세서를 점유해야 할 프로세스를 결정하고, 프로세서(CPU)를 프로세스에 할당하며, 프로세스 간 공유 자원 접근과 통신 등을 관리.

 

저장장치 관리 

  시스템의 메인 메모리와 하드디스크등을 관리하는 기능.

 

네트워킹 

  네트워킹에 필요한 프로토콜 지원.

 

디바이스 드라이버

하드웨어를 추상화하여 관리해주는 기능.

 

 

 

임베디드 시스템(embedded system)

특정 기능을 수행하는 규모가 있는 전자적 시스템으로 구성되는 컴퓨터 시스템 이며, 실시간(real-time computing) 능력의 제한을 갖는다.

http://ko.wikipedia.org/wiki/%EC%9E%84%EB%B2%A0%EB%94%94%EB%93%9C_%EC%8B%9C%EC%8A%A4%ED%85%9C

 

 

 

책에서 나오는 나빌룩스란?

 책 저자의 닉네임을 붙여서 만든 임베디드 OS.

 

나빌룩스의 구성. 

- 메모리 관리자

- 메모리 정적 할당

- 메모리 동적 할당

- 태스크 관리자

- 태스크 생성

- 태스크 간 전환(컨텍스트 스위칭)

- 스케줄러

- 메시지 관리자

- 태스크 간 통신

- 상호배제(뮤텍스)

- 세마포어

- 디바이스 드라이버 관리자

- 순차접근 장치 

- 커널 서비스

- OS timer

- 시스템 콜

- IRQ 핸들러

 

 

 

환경 구축하기

  원래 임베디드 장비는 PC에 비해서 성능이 떨어진다. 그래서 PC에서 컴파일하고 빌드하여 나온 이미지를 장비로 옮기는 것이 효율적인데, 그것에 대한 환경을 구축해야한다. 이런 환경을 구축하는 것을 ‘목표 플랫폼에 맞추어 크로스 컴파일 환경을 구축’한다라는 용어로 책에 소개되어 있다. 조금 더 정리하자면 컴파일하고 빌드한 이미지가 목표한 플랫폼에서 실행되도록 환경을 구축한다는 것이다.

 

책 저자가 사용한 플랫폼.

ARM 아키텍쳐. 가장 많이 사용함.
http://ko.wikipedia.org/wiki/ARM_%EC%95%84%ED%82%A4%ED%85%8D%EC%B2%98

 

MCU(Micro Controller Unit) :

CPU기능은 물론이고 일정한 용량의 메모리, 입출력 제어 인터페이스, 주변장치 컨트롤러 회로까지 칩 하나에 내장한 반도체.

 

책 저자의 개발환경

1. arm-linux v3.3.2, 이지보드 사용
2. linux, arm-linux v3.3.2, qemu v0.9.1(gcc-3.x), gumstix_uboot 사용. 

 

  1번의 경우 돈이 충분하다면 이지보드를 구입하여 하면 된다. (약 10만원정도로 알고 있다.) 

 

  2번의 경우 qemu의 버전이 옛날 버전이라 gcc를 3.x버전으로 다운그레이드 해야한다.(2014-12 기준으로 ubuntu에는 3.x 패키지를 지원안함.) 번거로운 작업이 된다. 환경구축하다가 빡쳐 죽을뻔했다.

 

 

나의 개발환경

1. ubunt, arm-linux v3.3.2, qemu 최신판, ezboot 사용.
  이렇게 사용 할 것이다. 책에는 qemu 0.9.1버전을 사용하려면 gcc를 다운그레이드 해야하지만 나는 gcc 4.x버전으로 qemu 최신버전을 돌릴 것이다. 

반응형
저작자표시 변경금지 (새창열림)

'Web > web dev' 카테고리의 다른 글

TCP / IP  (2) 2020.12.15
임베디드 OS 만들기 -2장 hello world 출력  (0) 2019.09.23
임베디드 OS 만들기 환경설정 - (4)U-BOOT 설치  (0) 2019.09.14
임베디드 OS 만들기 환경설정 - (3)qemu 설치  (0) 2019.09.13
임베디드 OS 만들기 환경설정 - (2)ARM 크로스 컴파일 구축  (0) 2019.09.13
반응형

1. 부트스트랩이란?

-> 오픈소스 html, css, javascript 프레임 워크 /프론트 엔드 프레임 워크(이미 만들어진)


<html>

1
2
3
4
5
6
7
8
9
10
11
12
<head>
<-- 가져왔던 css 앞에 붙임>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<-- 끝부분에 붙여줌 -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
 
cs


-> 이 방법 말고도 많은 방법들이 있다. 


-> component에서 내가 쓰고 싶은 요소 가져와서 <body>태그에 넣으면 만들어 줌.


-> bootstrapk.com (한국어 버전으로 해석해 놓음)


2. 기본 구성원(컨테이너(container) / 행(row) / 열(column) )


-기본 규칙 : 행(<div class="row">)은 꼭 컨테이너(<div class="container")>안에 넣어주기

열(<div class="col">)은 꼭 행(<div class="row")>안에 넣어줌 / 오직 열만 행의 직속 자식이 될 수 있음

콘텐츠(우리가 그리드에 넣고 싶은 내용) 은 꼭 열(<div class="col">)안에 넣어줌


-기본 사용법 : 부트스트랩 그리드에는 한 줄에 기본적으로 12칸의 열(column)이 있다고 생각/

 한 줄을 정확히 3등분 하고 싶으면 4칸을 차지하는 열 3개를 사용 => <div class="col-4">


ex) 다양한 방식으로 12칸 나눔

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
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
 
<body>
  <div class="container">
    <div class="row">
      <!-- 정확히 3등분 -->
      <div class="col-4 first">first</div>
      <div class="col-4 second">second</div>
      <div class="col-4 third">third</div>
    </div>
 
    <div class="row">
      <!-- 정확히 2등분 -->
      <div class="col-6 first">first</div>
      <div class="col-6 second">second</div>
    </div>
 
    <div class="row">
      <!-- 1대 5 비율 -->
      <div class="col-2 first">first</div>
      <div class="col-10 second">second</div>
    </div>
 
    <div class="row">
      <!-- 1대 2대 1 비율 -->
      <div class="col-3 first">first</div>
      <div class="col-6 second">second</div>
      <div class="col-3 third">third</div>
    </div>
  </div>
</body>
cs


<결과>

=> 12칸을 넘어가면 새로운 줄로 넘어감

=> 왜 하필 12?

: 12는 상당히 많은 숫자들(1, 2, 3, 4, 6, 12)로 나누어지기 때문에 굉장히 유연


-중첩(nesting) : 열을 또 여러 열로 나누는 것

=> <div class="col-6"> 안에 <div class="row">을 써야함

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
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
 
<body>
  <div class="container">
    <div class="row">
      <div class="col-6">
        <div class="row"> <!-- 중첩을 위한 새로운 행 -->
          <div class="col-3 first">1</div>
          <div class="col-3 second">2</div>
          <div class="col-3 third">3</div>
          <div class="col-3 fourth">4</div>
        </div>
      </div>
 
      <div class="col-6">
        <div class="row"> <!-- 중첩을 위한 새로운 행 -->
          <div class="col-3 first">5</div>
          <div class="col-3 second">6</div>
          <div class="col-3 third">7</div>
          <div class="col-3 fourth">8</div>
        </div>
      </div>
    </div>
  </div>
</body>
 
cs


<결과>


3. 그리드 시스템 => 반응현 웹 디자인 할 때 빛을 발함


- 정해둔 구간

  1. Extra Small (< 576px): 모바일
  2. Small (≥ 576px): 모바일
  3. Medium (≥ 768px): 타블릿
  4. Large (≥ 992px): 데스크탑
  5. Extra Large (≥ 1200px): 와이드 데스크탑


-컨테이너(container)

<div class="container"> : 구간별로 그리드에 고정된 width를 설정

=> 고정된 가로값 설정해주고 싶다면 사용


<container 클래스 사용시 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
.container {
  width: 100%; /* extra small */
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
/* small */
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
/* medium */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
/* large */
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
/* extra large */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
cs

<div class-"container-fluid"> ; 그리드는 항상 width: 100%

1
2
3
4
5
6
7
.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
cs


-열(column) : 반응형 구간별(12칸) 열을 차지하는 칸의 개수도 다르게 할 수 있다


=ex) 구간별로 모두 설정되어 있는 경우 

1
<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
cs

        1. Extra Small (< 576px): 12칸을 모두 차지
        2. Small (≥ 576px): 6칸 차지
        3. Medium (≥ 768px): 4칸 차지
        4. Large (≥ 992px): 3칸 차지
        5. Extra Large (≥ 1200px): 2칸 차지



=ex2) 특정 구간만 설정( 그 구간부터 새로운 설정이 있는 상위 구간까지는 같은 칸 수를 차지)

1
<div class="col-12 col-lg-3">
cs

        1. Extra Small (< 576px): 12칸을 모두 차지
        2. Small (≥ 576px): 12칸을 모두 차지
        3. Medium (≥ 768px): 12칸을 모두 차지
        4. Large (≥ 992px): 3칸 차지
        5. Extra Large (≥ 1200px): 3칸 차지


=ex3)

1
<div class="col-6">
cs

        1. Extra Small (< 576px): 6칸 차지
        2. Small (≥ 576px): 6칸 차지
        3. Medium (≥ 768px): 6칸 차지
        4. Large (≥ 992px): 6칸 차지
        5. Extra Large (≥ 1200px): 6칸 차지


반응형
저작자표시 변경금지 (새창열림)

'Web > HTML & CSS' 카테고리의 다른 글

11. 반응형 웹  (0) 2019.03.23
10. list  (0) 2019.03.23
9. float  (0) 2019.03.21
8. Positioning  (0) 2019.03.21
7. display  (0) 2019.03.19
반응형

1. 반응형 웹이란?

-> 브라우저의 사이즈에 따라 레이아웃이 바뀌는 웹 / 따로 모바일, 타블릿 버전 만들 필요가 없음


2. 반응형 웹 만드는 법 

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
h1{
    font-size: 24px;
}
p{
    font-size: 16px;
}
@media (min-width: 768px){ //최소 너비 768이 넘어가면 폰트크기가 커지게 된다.
    h1{
        font-size: 36px;
    }
    p{
        font-size: 24px;
    }
@media(min-width: 992px;){
    h1{
        font-size: 48px;
    }
    
    p{
        font-size: 32px;
    }
cs


반응형
저작자표시 변경금지 (새창열림)

'Web > HTML & CSS' 카테고리의 다른 글

12. 부트스트랩  (0) 2019.03.23
10. list  (0) 2019.03.23
9. float  (0) 2019.03.21
8. Positioning  (0) 2019.03.21
7. display  (0) 2019.03.19
반응형

1. list 종류

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
<ol type="a(소문자),A(대문자),i(로마 소문자),I(로마 대문자),1(숫자=default)">
    <li></li>
    <li></li>
</ol>
 
<ul>
    <li></li>
    <li></li>
</ul>
</body>
 
 
//ol: ordered list
//li: list
//ul: unordered list
 cs

 

2. list 스타일링

//li 태그 검사 -> display : list-item인 걸 확인해 볼 수 있음 ->block으로 바꿀 시 없앨 수 있음

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
ul{
    padding left: 0;
    width: 200px;
    
}
li{
    list-style-type: square; //square모양
     list-sytle: none;
    margin-bottom: 10px;
    background-color: #77abff;
    color: white;
    padding: 10px 20px;
}
    
 cs

 

<결과>

반응형
저작자표시 변경금지 (새창열림)

'Web > HTML & CSS' 카테고리의 다른 글

12. 부트스트랩  (0) 2019.03.23
11. 반응형 웹  (0) 2019.03.23
9. float  (0) 2019.03.21
8. Positioning  (0) 2019.03.21
7. display  (0) 2019.03.19
반응형

1. float

<기본 float 설정 X>



<blue -> float  :right; 설정>


##float 로 오른쪽으로 옮겨지고 밑에 3차원적으로 남아있던 자리에 div class로 채워짐


<multiple floats>

- blue:left/ yellow: right


-blue.yellow : left;(blue먼저 left-> yellow 왼쪽 움직이다가 blue에 막혀서 옆으로 붙어짐)



2. clear ( 방향 설정 시 , 그 방향에 아무것도 없게 만들어줌)

1
2
3
.col{
    clear: left;
}
cs


<그리드 border 넣기 위해>


반응형
저작자표시 변경금지 (새창열림)

'Web > HTML & CSS' 카테고리의 다른 글

11. 반응형 웹  (0) 2019.03.23
10. list  (0) 2019.03.23
8. Positioning  (0) 2019.03.21
7. display  (0) 2019.03.19
6. CSS 활용  (0) 2019.03.12
반응형



## 모든 요소들의 기본 position :  static(원래 있어야 할 곳에 배치한다)


1. Relative position

-> 기존 static 위치 기준으로 top/right/bottom/left 방향으로 주어진 픽셀만큼 이동

-> z-index : 태그들이 겹칠 때 누가 더 위로 올라가는지 결정하는 속성 / 기본값 0


2. absolute position

-> 가장 가까운 포지셔닝이 된 조상 요소 기준

-> 부모 포지션이 relative, absolute, fixed 태그가 없었다면, 가장 위의 태그(body)가 기준


3. fixed position

-> 브라우저 윈도우가 기준 / 항상 특정 위치에 고정되어 있음


반응형
저작자표시 변경금지 (새창열림)

'Web > HTML & CSS' 카테고리의 다른 글

10. list  (0) 2019.03.23
9. float  (0) 2019.03.21
7. display  (0) 2019.03.19
6. CSS 활용  (0) 2019.03.12
5. BOX Model -(2)  (0) 2019.03.12
반응형

### 모든 요소는 딱 한 개의 display 값을 갖고 있다!

 

1. display 종류 

 

- inline display : 다른 요소들과 같은 줄에 머무르려고 하는 성향, 필요한 만큼의 가로 길이만 차지하는 성향

=> 기본 display : inline ==> <span> / <a> / <b> / <i> / <img> / <button>

 

-block display : 다른 요소들과 독단적인 줄에 가려고 하는 성향, 최대한 많은 가로 길이를 차지하는 성향

=> 기본 display : block ==> <div> / <h1> ~ <h6> /  <p> / <nav> /  <ul>  / <li> 

 

 

- display  바꾸기 (css 에서 바꿀 수 있음)

=> inline -> block

 

1
2
3
4
i {
  display: block; /* <i> 태그를 block으로 바꾸기 */
  background-color: green;
}
 cs

 

 

=> block -> inline

 

1
2
3
4
5
6
7
8
9
10
11
12
div {
  display: inline; /* <div> 태그를 inline으로 바꾸기 */
}
 
.div1 {
  background-color: green;
}
 
.div2 {
  background-color: blue;
}
 
 cs

 

 

2. inline-block 

 

## block 요소에는 가로 , 세로 길이 직접 설정가능하지만 / inline 요소는 자동으로 설정 

 

- inline요소처럼 다른 요소와 같은 줄에 머물며 block 요소처럼 가로, 세로 길이도 설정해주고 싶다면? 

=> inline-block 사용

1
2
3
4
5
6
7
i {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: green;
}
 
 cs

 

3. <img> 태그의 비밀

1
<div class="container">아이스크림<img src="images/ice_cream.png" height="100">먹고싶다!</div>
 cs

 

## 사실 , <img>태그는 대체요소(replaced element)라고 함

    -> 가로, 세로를 정할 수 있는 특별한 inline

-> 텍스트처럼 다룰 수 있음 (vertical-align)

-> 상위 class 또한 text-align으로 사용 가능 

 

##다시 한번 이미지를 가운데 정렬하는 방법/부모에게 text-align을 줘도 가운데 정렬 가능하지만 조금 부적합함

1
2
3
4
5
img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
 cs

 

4. 다양한 링크 

    

<html>

1
2
3
4
5
<a class="google-link" href="https://google.com" target="_blank">
<img src="images/google.png" width="200">
<h1>구글</h1>
<p>이걸 누르면 구글로 갑니다!</p>
</a>
 cs

<css>
1
2
3
4
5
.google-link{
    display:block;
    color: black;
    text-decoration:none;
}
 cs

 

5. Baseline

## text : 바로 밑이 baseline

## img : 사진 바로 밑이 baseline

 

6. vertical-align 

 

-base line : vertical-align의 조건들을 충족시키면서, 줄의 높이를 최소화시키는 곳에 위치

 

7. 세로 가운데 정렬 꿀팁

 

<가로 가운데 정렬>

- inline & inline-block 요소 : 부모 태그에 text-align:center;

1
2
3
4
.container {
  text-align: center;
  background-color: lime;
}
 cs

 

-block 요소 : margin-left: auto; , margin-right: auto;

1
2
3
4
5
6
7
.block-element {
  width: 100px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  background-color: lime;
}
 cs

 

<세로 가운데 정렬>

#vertical-align 속성은 인라인, 인라인 블록에서만 적용 

-가짜 요소 더하기(세로 길이 100%인 요소 생성 -> 그 요소에 vertical-align: middle; -> 띄어쓰기 공간만큼 마이너스여백 주기)

<html>

1
2
3
4
5
6
7
8
<div class="container">
  <div class="helper"></div>
  <div class="info">
    <h1>Hello!</h1>
    <p>My name is young.</p>
  </div>
</div>
 
 cs

<css>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.container {
  width: 300px;
  height: 400px;
  background-color: gray;
  text-align: center;
}
 
.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
 
.info {
  background-color: lime;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
 
  /* 이 경우 띄어쓰기는 5px 정도였습니다! */
  margin-left: -5px;
}
 cs

 

-line-height으로 해결(info를 인라인 블록으로 설정 -> 부모에 line height -> info에 line-height: normal;(자식들에게 상속되기에)

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container {
  width: 300px;
  height: 400px;
  background-color: gray;
  text-align: center;
  line-height: 400px;
}
 
.info {
  background-color: lime;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}
 
 cs

 

반응형
저작자표시 변경금지 (새창열림)

'Web > HTML & CSS' 카테고리의 다른 글

9. float  (0) 2019.03.21
8. Positioning  (0) 2019.03.21
6. CSS 활용  (0) 2019.03.12
5. BOX Model -(2)  (0) 2019.03.12
5. BOX Model -(1)  (0) 2019.03.03

+ Recent posts

티스토리툴바