본문 바로가기
SeSAC

[새싹X코딩온] 풀스택 2주차 회고록 - 1 | CSS, javascript

by 리잼 2023. 7. 25.
반응형

CSS 복잡한 속성 - Display

  • inline
    1. 내용물 만큼 공간 할당
    2. width, height, padding, margin 사용 불가
    3. 줄바꿈 없이 옆에 바로 배치된다.
  • block
    1. div, p, ul, ol 태그와 같이 한 줄을 다 차지
    2. inline 요소와 달리 width, height, padding, margin 사용 가능

inline, block 차이

  • inline-block
    1. block과 inline 요소의 장점을 가짐
  • none
    1. 요소를 화면에 표시하지 않음
    2. 요소가 차지하는 공간도 사라진다.
    3. visibillity:hidden 라는 속성도 있지만 visibillity는 요소가 차지하는 공간이 남는다.
  • flex
    1. 부모 요소에 flex를 선언하면, 자식 요소들의 레이아웃을 변경시킴.
    2. flexbox 기본용어
      • 주축 (main axis) : 아이템 배치 방향의 축
      • 교차축(cross axis) : 주축의 수직 축
    3. flex-direction ( 중요 )
      •  row (default) : 수평 정렬 (좌 -> 우)
      •  row-reverse   : 수평 정렬 (우 -> 좌)
      •  column        : 수직 정렬 (위 -> 아래)
      •  column-reverse: 수직 정렬 (아래 -> 위)

CSS Flex 과제

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css_ex8.css">
  <title>CSS Flex</title>
</head>
<body>
  <header class="header1">
    <div>
      <div class="logo">LOGO</div>
    </div>
    <div class="items">
      <div class="items item1">MENU1</div>
      <div class="items item2">MENU2</div>
      <div class="items item3">MENU3</div>
    </div>
  </header>
  <hr>
  <header class="header2">
    <div class="items2">
      <div class="items2 item1" style="justify-content: flex-start;">MENU1</div>
      <div class="items2 item2">MENU2</div>
      <div class="items2 item3" style="justify-content: flex-end;">MENU3</div>
    </div>
  </header>
  <hr>
  <header class="header3">
    <div>
        <div>LOGO</div>
    </div>
    <div class="items3">
      <div class="items3 item1">MENU1</div>
      <div class="items3 item2">MENU2</div>
      <div class="items3 item3">MENU3</div>
    </div>
    <div>
      <div>LOGIN</div>
    </div>
  </header>
  <hr>
  <header class="header4">
    <div class="right">
      <div>LOGO</div>
      <div>MENU1</div>
      <div>MENU2</div>
      <div>MENU3</div>
    </div>
    <div class="left">
      <div>LOGIN</div>
      <div>SIGNUP</div>
    </div>
  </header>

</body>
</html>

 

header {
    background-color: #808080;
    height: 50px;
    margin-bottom: 20px;
    padding: 0 10px;
    
    font-weight: bold;
}

.header1 {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}

.items {
    width: 180px;
    display: flex;
    justify-content: flex-end;
}

.header2 {
    display: flex;
    align-items: center;
}

.items2 {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.header3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.items3 {
    width: 200px;
    display: flex;
}

.header4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.right {
    display: flex;
}

.right div {
    margin-right: 10px;
}

.left {
    display: flex;
}

.left div {
    margin-left: 10px;
}

https://flexboxfroggy.com/#ko

 

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

javascript

// 변수 선언: 변수 정의
// 변수 할당: = 연산자를 이용해 값을 넣음 
// 초기화: 변수에 처음 할당하는 순간

// ### var
// - 선언 단계와 초기화 할당 단계가 동시에 진행이 되며, 초기화에는 undefined 값이 들어간다.
// - 중복 선언이 가능하며, 예기치 못한 값을 반환할 수 있음
// - 선언 이전에 참조하면 언제나 undefined를 반환한다.

// ### const
// - 재선언이 불가능하고, 재할당이 불가능하다.
// - 초반에 선언을 할 때 반드시 **초기화**를 동시에 진행해야 한다.

// ### let
// - let 키워드로는 변수 중복 선언이 불가능하지만, 재할당이 가능하다.

// 변수 선언 키워드 1. var
var a; // 변수 선언
console.log(a); // undefined: 값을 할당하지 않았음
a = 2; // 변수 할당
console.log(a); // 변수 값 출력 (2)
var a2 = 4; // 변수 선언 & 할당
console.log(a2);

// var 변수의 이상한점
// 변수를 선언하기전에 값을 할당
// -> 장점 같이 보일 수도 있으나, 유지보수할 때 최악
aa = 123;
console.log(aa);

// 변수 선언 키워드 2. let
let b; // 변수 선언
console.log(b); // undefined: 변수 선언만 하고 값을 할당하지 않았으므로 초기값(undefined) 출력
b = 7; // 변수 할당
console.log(b); // 변수 값 출력 (7)

let b2 = 77; // 변수 선언 & 할당
console.log(b2);
// let b2 = 78; // error: let 키워드 중복 선언 불가능
b2 = 78; // 변수 값 재할당
console.log(b2);

// 변수 선언 키워드 3. const
// -> 변수 선언과 할당이 동시에!!! (반드시)
// -> 변하지 않는 값을 변수에 저장할 때 사용 (상수)
// const c; // error: const 키워드는 선언과 할당 반드시 동시에!!
const c = 3;
console.log(c);
// c = 33; // error: const 변수는 재할당 불가능!


// 변수 이름 규칙 (=> 식별자 규칙)
// 식별자: 이름을 붙일 때 사용하는 단어 (변수명, 함수명, 클래스명, ....)
// - 키워드(예약어) 사용 불가능
//      - 키워드란? 특별한 역할을 이미 하고 있는 단어
//      - ex. let, var, const, void, return, for, while, class, if, else, ....
// - 숫자 시작 x
// - 특수문자: _, $ 만 허용
// - 공백 문자(space bar) x

// (관례) 식별자에 단어 두개 이상 작성하고 싶은경우?
// camelCase -> js 관례
// ex. redApple, isWater
// snake_case
// ex. red_apple, is_water

언어타입

  • 강한타입언어 ( C, C++, Java ... )
    • 타입검사를통과하지못한다면실행자체가안된다.
    • String, int, double 등 처럼 타입을 1종류로 명확히 지정
  • 약한타입언어 ( python, javascript )
    • 런타임에서 타입 오류를 만나더라도 실행을 막지 않는다.
    • 타입이 여러 종류인 값들이 상관없이 지정된다.

부트 캠프를 다시 듣게 된 이유중 하나는 백엔드도 백엔드지만

프론트는 등한시했기 때문에 아는게 별로 없었다. 그냥 Html 골격 구조 짜는정도만 아는 수준 ..

필요하면 긁어 오거나 때려 맞춰서 굴러가게 끔만 했으니까.

 

그래서 프론트 개념도 다시 다질겸 한건데 아니나 다를까 flex를 이해하기가 쉽지 않았던 부분이 있다.

강의 진도를 따라가느라 급하게 하려다보니 머리가 꼬인 것도 있고

강의 시간말고 집에와서 다시 차근차근 해보니 완벽하진 않지만 

 

flex 속성을 어떻게 사용하는지 알게 된듯 ..

사실상 flex-direction, align-items, justify-content 정도만 적절히 써주면 배치하는데 문제가 없었는데

이것저것 복잡하게 생각하니 잘 안됐던 것

 

안된다고 짜증내지말고 이유를 파악하고 천천히 해보는 습관을 들이도록 해야겠다.

반응형

'SeSAC' 카테고리의 다른 글

[새싹X코딩온] 풀스택 3주차 회고록 - 2 | jQuery  (0) 2023.08.03
[새싹X코딩온] 풀스택 3주차 회고록 - 1 | Bootstrap Grid System  (0) 2023.08.01
[새싹X코딩온] 풀스택 2주차 회고록 - 2 | javascript 과제  (0) 2023.07.30
[새싹X코딩온] 풀스택 1주차 회고록 - 2 | HTML , CSS  (0) 2023.07.22
[새싹X코딩온] 풀스택 1주차 회고록 - 1 | OT, Git  (0) 2023.07.18

관련글

티스토리툴바