flex 관련 속성 정리 2

flex 관련 속성 정리 2

flex 관련 속성 정리 2 1. justify-content 속성 - 메인축 방향으로 아이템들을 정렬 ※ justify와 align - justify : 메인축(가로 방향)으로 정렬 - align : 수직축(세로 방향)으로 정렬 - flex-start (기본값) : 아이템들을 시작점으로 정렬 (flex-direction이 column일 경우, 위로 정렬) A B C .container { border: 1px solid black; width: 400px; height: 100px; display: flex; font-size: 2rem; font-weight: bold; justify-content: flex-start; } .container > div { width: 50px; height: 50..

  • format_list_bulleted Front-End Study/HTML+CSS
  • · 2022. 10. 30.
  • textsms
flex 관련 속성 정리 1

flex 관련 속성 정리 1

flex 관련 속성 정리 1 1. display: flex 속성 - 레이아웃을 배치하는데 사용 - 속성에 따라 각각의 아이템들이 어떠한 형태로 배치되는지 설정 - display: flex를 적용하면 블록 형태로 배치된 div가 가로 방향으로 배치 red blue green /* display: flex를 적용할 경우, 세로로 배치되었던 아이템들이 가로로 배치됨 */ .container {display: flex;} .box { width: 100px; margin: 10px; font-size: 2rem; font-weight: bold; } .red {background-color: red;} .blue {background-color: blue;} .green {background-color: gre..

  • format_list_bulleted Front-End Study/HTML+CSS
  • · 2022. 10. 27.
  • textsms
Console

Console

Console 1. console.clear( ); - 출력창을 초기화함 2. console.log( ); - ( )안에 들어가는 값을 출력함

  • format_list_bulleted Front-End Study/JavaScript
  • · 2022. 10. 25.
  • textsms
제어문 - 3. 반복문

제어문 - 3. 반복문

Ⅲ. 반복문 1. 반복문 - 자바스크립트에는 반복문이 존재 - for문, while문, do while문이 있음 2. for 문 - 범위의 횟수 동안 특정 문장을 여러 번 반복하여 실행하는 반복문 ※ 변수 선언 시, const를 쓰면 값 변경이 불가하여 에러 발생 console.clear(); // (시작; 조건; 증가) for (i = 0; i

  • format_list_bulleted Front-End Study/JavaScript
  • · 2022. 10. 25.
  • textsms
제어문 - 1. 조건문

제어문 - 1. 조건문

Ⅰ. 조건문 1. 조건문 - 자바스크립트의 제어문에는 if 조건문과 switch 조건문이 있음 2. if 문의 구조 - if 문의 조건식 결과가 True라면 명령문을 실행 - 조건식의 결과가 False라면 명령문을 건너 뜀 console.clear(); var a = 10; // a가 5보다 크므로 조건문이 True임 if (a > 5) { console.log('참'); // 참 } 3. if ~ else 문의 구조 - if 문의 조건식 결과가 True라면 명령문을 실행 - if 문의 조건식 결과가 False라면 if문 안에 명령문을 실행하지 않고 else문 안에 명령문을 실행 console.clear(); var a = 3; // a가 5보다 작으므로 조건문이 False임 if (a > 5) { co..

  • format_list_bulleted Front-End Study/JavaScript
  • · 2022. 10. 24.
  • textsms
연산자

연산자

연산자 1. 연산자 - 자바스크립트는 연산자를 활용할 수 있음 2. 연산자 종류 기호 설명 사 칙 연 산 + 더하기 - 빼기 * 곱하기 / 나누기 논 리 연 산 A == B A와 B가 같음 A != B A와 B가 다름 A > B A가 B보다 큼 (초과) A = B A가 B보다 크거나 같음 (이상) A

  • format_list_bulleted Front-End Study/JavaScript
  • · 2022. 10. 23.
  • textsms