[LG CNS AM 6기] 2일차 TIL : HTML/CSS 레이아웃과 JavaScript 기초

윤현일·2026년 7월 29일
CSSJavaScriptK-DTLGCNSLGCNS6기LGCNS6기TILhtml내일배움카드

LGCNS

목록 보기
10/43

1. 오늘의 한 줄 요약

HTML 문서 구조와 CSS 선택자·레이아웃·반응형 스타일을 학습하고, JavaScript의 DOM, 비동기 처리, 객체와 템플릿 리터럴 개념을 정리했다.

2. 배운 내용

핵심 개념

라이브러리와 프레임워크

두 개념은 프로그램의 제어권이 어디에 있는지로 구분할 수 있다.

  • 라이브러리: 개발자가 필요한 기능을 직접 호출한다.
  • 프레임워크: 정해진 구조와 실행 흐름 안에 개발자가 코드를 작성한다.
  • React는 UI를 만들기 위한 라이브러리다.
  • Vue는 공식적으로 점진적 JavaScript 프레임워크를 표방한다.

CSS 선택자

CSS 선택자는 스타일을 적용할 HTML 요소를 지정한다.

/* 전체 선택자 */
* {
  box-sizing: border-box;
}

/* 태그 선택자 */
p {
  color: black;
}

/* 클래스 선택자 */
.card {
  padding: 16px;
}

/* 아이디 선택자 */
#login {
  width: 300px;
}

/* 속성 선택자 */
input[type="text"] {
  border: 1px solid gray;
}

조합 선택자를 이용하면 요소의 관계까지 표현할 수 있다.

/* 후손 */
main p {}

/* 자식 */
main > p {}

/* 바로 다음 형제 */
h2 + p {}

/* 뒤에 있는 모든 형제 */
h2 ~ p {}

/* 여러 선택자에 동일한 스타일 적용 */
h1,
h2 {}

CSS 우선순위

스타일 충돌 시 다음 요소들이 함께 고려된다.

  1. !important 여부
  2. 인라인 스타일
  3. 선택자의 구체성
  4. 코드가 작성된 순서

내부 CSS가 외부 CSS보다 항상 우선하는 것은 아니다. 선택자의 구체성이 같다면 나중에 선언된 스타일이 적용된다.

!important는 유지보수를 어렵게 만들 수 있으므로 꼭 필요한 상황에서만 사용해야 한다.

div와 span

<div>하나의 영역</div>
<span>문장 속 일부 영역</span>
  • div: 기본적으로 한 줄 전체를 차지하는 블록 요소다.
  • span: 콘텐츠 크기만큼 차지하는 인라인 요소다.

시맨틱 레이아웃

HTML5에서는 영역의 역할을 나타내는 시맨틱 태그를 사용할 수 있다.

<header>사이트 머리말</header>
<nav>메뉴</nav>

<main>
  <section>
    <article>독립적인 콘텐츠</article>
  </section>

  <aside>부가 콘텐츠</aside>
</main>

<footer>사이트 정보</footer>

시맨틱 태그를 사용하면 문서 구조를 쉽게 파악할 수 있고 접근성과 검색 엔진 최적화에도 도움이 된다.

a 태그와 경로

<a href="https://example.com">절대 경로</a>
<a href="./login.html">상대 경로</a>
<a href="#profile">현재 문서의 특정 위치</a>
  • 절대 경로: 전체 URL을 작성한다.
  • 상대 경로: 현재 파일 위치를 기준으로 작성한다.
  • #아이디: 현재 문서에서 해당 id를 가진 요소로 이동한다.

CSS 박스 모델과 margin

CSS 요소는 콘텐츠, 안쪽 여백, 테두리, 바깥 여백으로 구성된다.

content → padding → border → margin

margin 속성은 값의 개수에 따라 적용 방향이 달라진다.

/* 상하좌우 */
.box {
  margin: 10px;
}

/* 상하, 좌우 */
.box {
  margin: 10px 20px;
}

/* 상, 좌우, 하 */
.box {
  margin: 10px 20px 30px;
}

/* 상, 우, 하, 좌 */
.box {
  margin: 10px 20px 30px 40px;
}

네 방향을 작성할 때는 시계 방향으로 적용된다.

id와 name의 차이

<label for="productName">상품명</label>

<input
  id="productName"
  name="productName"
  type="text"
  placeholder="상품명을 입력하세요"
/>
  • id: 문서에서 특정 요소를 식별하며 고유해야 한다.
  • label의 for는 연결할 input의 id와 일치해야 한다.
  • name: form을 제출할 때 서버로 전달되는 데이터의 키가 된다.
  • 라디오 버튼을 하나의 그룹으로 묶을 때도 같은 name을 사용한다.
productName=노트북

name이 DTO의 변수명과 자동으로 연결되는지는 백엔드 프레임워크와 데이터 바인딩 방식에 따라 달라진다. 일반적으로 요청 필드 이름과 DTO 프로퍼티 이름이 같으면 매핑하기 쉽다.

Promise, fetch, axios

서버 통신은 결과가 즉시 도착하지 않기 때문에 비동기로 처리한다.

  • Promise: 미래에 완료될 작업의 성공 또는 실패를 표현한다.
  • fetch: 브라우저에서 제공하는 HTTP 요청 API다.
  • axios: HTTP 통신을 편리하게 처리하는 외부 라이브러리다.
fetch("/api/products")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

메타데이터와 YAML

메타데이터는 데이터를 설명하는 데이터다.

title: HTML과 CSS
author: student
date: 2026-07-29

YAML은 Kubernetes, GitHub Actions 등 다양한 설정 파일에서 사용된다. Markdown 문서 상단의 Front Matter에도 YAML 형식으로 문서의 제목, 날짜, 태그 같은 메타데이터를 작성할 수 있다.

Virtual DOM과 컴포넌트

React에서는 화면을 컴포넌트 단위로 구성한다.

상태가 변경되면 React가 새로운 Virtual DOM을 만들고 이전 상태와 비교한다. 이후 실제로 변경이 필요한 부분을 실제 DOM에 반영한다.

상태 변경
    ↓
컴포넌트 다시 렌더링
    ↓
Virtual DOM 비교
    ↓
변경된 부분을 실제 DOM에 반영

반응형 웹과 단위

반응형 웹은 화면 크기에 따라 컴포넌트의 크기와 배치를 변경하는 방식이다.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}
  • px: 고정된 CSS 픽셀 단위
  • em: 현재 요소 또는 부모 요소의 글자 크기를 기준으로 하는 상대 단위
  • rem: 최상위 html 요소의 글자 크기를 기준으로 하는 상대 단위

브라우저의 기본 글자 크기가 16px이라면 1rem은 일반적으로 16px이지만, 설정에 따라 달라질 수 있다.

DOM과 JavaScript

DOM은 HTML 문서를 JavaScript에서 다룰 수 있도록 객체 구조로 표현한 것이다.

const title = document.querySelector("#title");
title.textContent = "변경된 제목";

JavaScript는 변수의 타입을 선언할 때 고정하지 않는 동적 타입 언어다.

let value = 10;
value = "문자열";

객체, 배열, 함수 등은 참조 타입으로 다뤄진다.

const user = {
  name: "홍길동",
  age: 20,
};

ES6부터는 백틱을 이용한 템플릿 리터럴을 사용할 수 있다.

console.log(`이름: ${user.name}, 나이: ${user.age}`);

새롭게 알게 된 점

  • 라이브러리와 프레임워크는 제어권의 위치를 기준으로 구분할 수 있다.
  • 내부 CSS와 외부 CSS의 종류만으로 우선순위가 결정되는 것은 아니다.
  • id는 요소 식별, name은 form 데이터의 키라는 차이가 있다.
  • 시맨틱 태그를 사용하면 문서의 영역과 역할을 명확하게 표현할 수 있다.
  • React는 Virtual DOM을 이용해 변경이 필요한 실제 DOM 영역을 갱신한다.
  • em은 항상 16px인 고정 단위가 아니라 글자 크기를 기준으로 계산되는 상대 단위다.

헷갈렸던 점

  • id와 name이 각각 어떤 상황에서 사용되는지 헷갈렸다.
  • CSS를 내부에 작성하면 외부 CSS보다 항상 우선한다고 생각했다.
  • em을 고정된 크기 단위로 생각했다.
  • 컴포넌트가 바뀌는 것과 HTML 페이지 전체가 바뀌는 것을 구분하기 어려웠다.

3. 실습 / 적용

직접 해본 것

  • 태그, 클래스, 아이디, 속성 선택자를 사용해 CSS를 적용했다.
  • div와 span으로 블록 영역과 인라인 영역을 구분했다.
  • 시맨틱 태그를 사용해 HTML 레이아웃을 구성했다.
  • margin 축약 속성으로 요소의 바깥 여백을 설정했다.
  • id와 name을 가진 input을 작성했다.
  • 미디어 쿼리를 사용해 화면 크기에 따른 배치를 작성했다.
  • JavaScript 객체와 템플릿 리터럴로 로그를 출력했다.

결과

HTML 요소의 역할에 맞는 태그를 선택하고 CSS 선택자로 스타일을 적용할 수 있었다. 또한 JavaScript에서 DOM 요소를 찾고 객체의 값을 화면이나 로그에 출력하는 기본 흐름을 이해했다.

4. 문제와 해결

막힌 부분

CSS 스타일이 충돌했을 때 어떤 규칙이 적용되는지 판단하기 어려웠고, form에서 id와 name이 각각 어떤 역할을 하는지 헷갈렸다.

해결 방법

CSS는 !important, 인라인 스타일, 선택자의 구체성, 선언 순서를 함께 확인해야 한다는 것을 정리했다. id는 DOM 요소 식별과 label 연결에 사용하고, name은 form을 제출할 때 서버로 전달되는 데이터의 키로 사용한다는 차이를 구분했다.

5. 다음에 할 일

  • Promise와 async/await를 이용해 API 요청 작성하기
  • 미디어 쿼리와 Bootstrap을 활용해 반응형 페이지 만들기
profile
윤현일
개발자
이전 포스트

[LG CNS AM 6기] 1일차 TIL : Full Browsing과 SPA, HTML 기본 구조와 이벤트

다음 포스트

[LG CNS AM 6기] 3일차 TIL : JavaScript DOM 조작과 이벤트 처리

0개의 댓글