구름톤 ☁️ 자바스크립트,css 기초 개념정리

자바스크립트와 CSS 기초 개념 정리 💻

프론트엔드 개발을 시작하면서 꼭 알아야 할 자바스크립트와 CSS 레이아웃(Flex/Grid),

그리고 Float에 대한 기초 개념을 간단한 예시와 함께 정리해봤습니다. 

---

🧠 자바스크립트 기본 문법

 

document.getElementById('hello').innerHTML = '안녕';

✔️ 코드해석

• document : 문서 (웹 페이지 전체)
• getElementById : id로 HTML 요소를 가져오는 선택자
• innerHTML : 요소 내부의 내용 (텍스트나 HTML) 을 바꾼다
• = : 대입 연산자 (오른쪽 값을 왼쪽에 넣음)
• '안녕' : 문자열은 작은따옴표(') 또는 큰따옴표(")로 감싼다

🔍 영어 뜻만 잘 파악하면, 코드가 무슨 일을 하는지 쉽게 이해할 수 있어요!

🔧 innerHTML 외에도 바꿀 수 있는 속성 (style)

document.getElementById('hello').style.color = 'red';

이렇게 하면 텍스트 색상이 빨간색으로 바뀝니다!

그 외에도 아래와 같은 스타일 속성들을 조작할 수 있어요:

• style.fontSize = '20px'
• style.margin = '10px'
• style.padding = '5px'

---

🔹 함수(Function)와 파라미터(Parameter)

자바스크립트에서 함수를 사용하면 코드를 재사용하고 유연한 동작을 할 수 있어요.

함수 기본 예제

function plus(a) {
  console.log(2 + a);
}

plus(1); // 3
plus(2); // 4

파라미터가 여러 개일 경우

function plus1(a, b, c) {
  console.log(2 + a + b + c);
}

plus1(1, 2, 3); // 8

✅ ctrl + / 또는 ctrl + ?를 누르면 한 줄 주석 처리를 할 수 있어요!

---

🎨 CSS 레이아웃

🔸 Flexbox vs Grid

구분	Flexbox	Grid
배치방식	1차원 (가로 or 세로)	2차원 (가로 + 세로)
wrap 사용	wrap으로 2차원 느낌 가능	기본이 2차원
사용 예	아이템 정렬 중심	페이지 전체 구조

---

🔹 Grid 예시

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 200px 100px 100px;
}

설명

• grid-template-columns: 열(column)의 너비를 지정 (3개의 열이 각각 100px)
• grid-template-rows: 행(row)의 높이를 지정 (100px, 200px, 100px, 100px)
•  

예시

 

반복 문법

grid-template-columns: repeat(3, 100px);
grid-template-rows: 100px 200px repeat(2, 100px);

→ 반복 문법을 사용하면 더 간결하게 코드를 작성할 수 있다!

---

🔹 Flexbox 속성 정리

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

• flex-direction: 가로 or 세로 방향 설정
• flex-wrap: 줄바꿈 허용
• justify-content: 주축 정렬
• align-items: 교차축 정렬 (개별 항목)
• align-content: 교차축 정렬 (전체 줄)
• flex-basis: 아이템의 기본 크기

---

🌊 Float 개념 & 사용법

🔸 Float이란?

float는 이미지나 텍스트를 어떻게 배치할 건지 나타내는 용도였다.

img {
  float: left;
}

🔹 float의 문제점과 해결

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

또는 간단히 아래처럼 작성할 수 있어요:

.clear {
  clear: both;
}

---

🎨 색상 코드 추천 사이트

• Color Tool (Material Design)

---