240104 - css 학습, sencha container 파일 분리 실습

dodo1320·2024년 1월 8일
CSSSenchafrontend
0

프론트엔드(240102~)

목록 보기
3/26
post-thumbnail

CSS 강의 - 2

유튜브 강의

CSS 레이아웃 정리 display, position 완성 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

  • 웹사이트 - box를 원하는 위치에 원하는 사이즈로 배치하는 것이 중요
  • display, position에 대해 잘 이해해야 함

block vs inline

  • div - block 중 하나
    • 안에 내용 없어도 css 표시됨
    • 한 줄에 하나씩 나옴
  • span - inline 중 하나
    • 내용 없으면 css 표시 안 됨
    • 한 줄에 공간 있으면 한 줄로 나옴
  • css에서 기본값 변경 가능하다
  • inline : 내용(contents) 자체만 꾸며줌, width나 height를 설정해도 무시됨
    inline-block : 한 줄에 공간 있으면 여러 개 나오지만 설정한 width, height를 그대로 따름
    block: 한 줄 당 하나만 들어감, 설정한 width, height 그대로 따름

코드

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <!-- Block-level -->
  <div>1</div>
  <div>2</div>
  <div>3</div>
  
  <!-- Inline-level -->
  <span>1</span>
  <span>2</span>
  <span>3</span>
</body>
</html>
div, span {
  width: 80px;
  height: 80px;
  margin: 20px;
  background: pink;
}

div {
  background: red;
  display: inline;
}

span {
  background: blue;
  display: block;
}

결과

position

  • default : static
  • relative : 현재 위치 기준으로 위치 조정
  • absolute : 담겨있는 곳 기준으로 위치 조정
  • fixed : 전체 페이지 기준으로 위치 조정
  • sticky : 기존 위치에 있다가 스크롤하면 전체 페이지 기준 설정한 값에 고정됨
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <article class='container'>
    <div></div>
    <div class='box'>I'm box</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  <div>
</body>
</html>
div {
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
  background: red;
}

.container {
  background: yellow;
  left: 0px;
  top: 0px;
  position: relative;
}

.box {
  background: blue;
  left: 20px;
  top: 0px;
  position: sticky;
}

결과

호환성 확인하는 사이트

Can I use... Support tables for HTML5, CSS3, etc

CSS 강의 - 3

유튜브 강의

CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

Flexbox

  • box, item을 행, 열 자유자재로 배치할 수 있음
  • 화면 크기가 줄어들거나 늘어날 때의 배치 구성 가능

cf) float

  • 이미지, 텍스트를 어떻게 배치할 지 정의하기 위해 사용
  • 텍스트가 이미지를 감싸면서 배치될 수 있도록 할 수 있음

Container vs Item

container

  • attribute
    • display
    • flex-direction
    • flex-wrap
    • flex-flow
    • justify-content
    • align-items
    • align-content
    • …

Item

  • attribute
    • order
    • flex-grow
    • flex-shrink
    • flex
    • align-self
    • …

Main axis vs Cross axis

  • item이 정렬되는 방향 : main axis
  • main axis에 수직이 되는 축 : cross axis

cf) 100% vs 100vh

  • 100% : 부모 크기의 100%
  • 100vh(view height) : 보이는 view height의 100%

색상 사이트

Color - Style - Material Design

container에서 flex 사용하기

  • display : flex
  • flex-direction
    • row : 행방향 왼쪽부터
    • row-reverse : 행방향 오른쪽부터
    • column : 열방향 위부터
    • column-reverse : 열방향 아래부터
  • flex-wrap
    • default : nowrap
    • wrap : 창 크기에 따라 줄 나뉨
  • flex-flow
    • direction, wrap 한 번에 작성 가능
  • justify-content
    • 아이템을 어떻게 배치할지 결정
    • default : flex-start
    • flex-end : 축의 끝에 맞춤
      • 아이템 순서는 유지하되 start 반대편에 맞춤
    • center : 가운데 정렬
    • space-around : item 주변에 space 두름
    • space-evenly : item 주변에 똑같은 간격으로 space
    • space-between : 양 끝은 유지, 사이에만 space
  • align-items
    • cross axis 기준으로 배치 결정
    • center : cross axis 중간
    • baseline : text 높이 같도록
  • align-content
    • cross axis 기준으로 justify-content와 같음

코드

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
    <div class="item item10">10</div>
    
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
    <div class="item item10">10</div>
  </div>
</body>
</html>
.container {
  background: beige;
  height: 100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* flex-flow: column nowrap; */
  
  justify-content: space-between;
  align-items : baseline;
  align-content: space-between;
}

.item {
  width: 40px;
  height: 40px;
  border: 1px solid black;
}

.item1 {
 background: #ef9a9a; 
}

.item2 {
 background: #ef9abd; 
}

.item3 {
 background: #e49aef; 
}

.item4 {
 background: #b29aef; 
}

.item5 {
 background: #9ac2ef; 
}

.item6 {
 background: #9aefe5; 
}

.item7 {
 background: #9aefb2; 
}

.item8 {
 background: #ddef9a; 
}

.item9 {
 background: #efd09a; 
}

.item10 {
 background: #efa09a; 
}

참고사이트

CSS-Tricks

item에서 flex 사용하기

  • container에서 display: flex 설정되어있어야 함
  • flex-grow
    • 창이 커질 때 어떻게 늘어날지
  • flex-shrink
    • 창이 작아질 때 어떻게 줄어들지
  • flex-basis
    • 창에서 차지할 비율을 퍼센트로 표시
  • order
    • item의 순서를 개별적으로 바꿀 때
  • align-self
    • item별로 따로따로 정렬하고 싶을 때

코드

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
</body>
</html>
.container {
  padding-top: 100px;
  background: beige;
  height: 100vh;
  display: flex;
}

.item {
  width: 40px;
  height: 40px;
  border: 1px solid black;
}

.item1 {
  background: #ef9a9a;
/*   flex-grow: 2;
  flex-shrink: 2; */
  
  flex-basis: 60%;
}

.item2 {
  background: #ef9abd; 
/*   flex-grow: 1;
  flex-shrink: 1; */
  
  flex-basis: 30%;
}

.item3 {
  background: #e49aef; 
/*   flex-grow: 1;
  flex-shrink: 1; */
  
  flex-basis: 10%;
}

연습 사이트

Flexbox Froggy

Container, Controller 파일 분리하는 법

container 파일을 분리하여 작성 후 main에서는 그 파일을 불러옴

container마다 controller 파일도 작성

과제

main 파일에서 container, controller 분리

BottomContainer.js 코드

Ext.define('MyApp.view.main.containerBox.BottomContainer', {
    extend: 'Ext.Container',
    alias: 'widget.bottom-container',
		controller: {
				type: 'bottom-container-controller'
		},
		
		container 작성
});

BottomContainerController.js 코드

Ext.define('MyApp.view.main.containerBox.BottomContainerController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.bottom-container-controller',
		
		함수 작성
    
});

과제

카드 만들기 (CardComponent 파일 새로 만들어서)

결과

profile
dodo1320
beginner
이전 포스트

240103 - HTML, CSS 학습 후 sencha에 적용, 소스트리 학습

다음 포스트

240105 - viewmodel 생성, ui, scss include 학습

0개의 댓글