1. 오늘의 한 줄 요약
HTML과 CSS는 전반적으로 이해했지만, CSS 자식 선택자의 방향과 JavaScript의
let,const, 비교 연산자에서 잘못 알고 있던 개념을 발견했다.
2. 배운 내용
★ 핵심 개념
오늘은 HTML의 입력 양식 요소와 CSS 선택자, JavaScript의 기본 문법을 실습했다.
HTML에서는 form, input, textarea, checkbox, radio, select 등 사용자의 입력을 받는 요소를 배웠다.
CSS에서는 전체 선택자, 타입 선택자, 클래스 선택자, 아이디 선택자, 속성 선택자와 함께 요소 간의 관계를 나타내는 선택자를 학습했다.
ul > li > label {
width: 100px;
color: yellowgreen;
float: left;
}>는 바로 아래에 있는 자식 요소를 선택하는 자식 선택자다.
<ul>
<li>
<label>상품명</label>
</li>
</ul>따라서 ul의 자식인 li, li의 자식인 label 순서로 작성해야 한다.
새롭게 알게 된 점
1. CSS 작성 방식의 차이
인라인 스타일과 내부 스타일이 헷갈렸는데, 오늘 다시 구분할 수 있게 되었다.
인라인 스타일은 HTML 태그 안에 직접 작성한다.
<p style="color: red;">빨간색 텍스트</p>내부 스타일은 <head> 안의 <style> 태그에 작성한다.
<head>
<style>
p {
color: red;
}
</style>
</head>외부 스타일은 별도의 CSS 파일을 HTML 문서에 연결하는 방식이다.
<link rel="stylesheet" href="style.css" />프론트엔드 개발을 하면서 CSS를 작성해도 예상과 다르게 적용되는 경우가 있었는데, 스타일의 출처뿐만 아니라 선택자 우선순위와 작성 순서도 최종 결과에 영향을 준다는 것을 알게 되었다.
같은 우선순위라면 나중에 작성한 스타일이 적용된다.
p {
color: blue;
}
p {
color: red;
}특정 스타일을 강제로 적용할 때는 !important를 사용할 수 있다.
p {
color: red !important;
}바이브 코딩 중 스타일이 적용되지 않는다고 하면 AI가 자주 !important를 추가했는데, 이제 그 코드가 스타일의 우선순위를 강제로 높이는 역할이라는 것을 알게 되었다.
2. let과 const
let은 같은 범위에서 같은 이름의 변수를 중복 선언하는 것을 방지한다.
let message = "hello";
// let message = "script";
// 같은 이름으로 중복 선언할 수 없음let으로 선언한 변수는 값을 다시 할당할 수 있다.
let message = "hello";
message = "script";const는 값을 다시 할당할 수 없는 변수를 선언할 때 사용한다.
const num = 10;
// num = 20;
// 값을 다시 할당할 수 없음3. ==와 ===
비교 연산자의 의미도 반대로 알고 있었다.
==: 타입을 변환한 후 값을 비교===: 값과 타입을 모두 비교
10 == "10"; // true
10 === "10"; // falseJavaScript에서는 equals가 아니라 ===를 사용해 값과 타입을 함께 비교한다.
4. 백틱 입력 방법
템플릿 리터럴을 작성할 때 사용하는 백틱의 입력 방법을 새롭게 알게 되었다.
Mac에서는 영문 입력 상태에서 키보드의 원화 기호가 표시된 키를 누르면 백틱을 입력할 수 있다.
const message = "script";
console.log(`message = ${message}`);${}로 문자열 안에 변수 값을 넣으려면 작은따옴표나 큰따옴표가 아닌 백틱을 사용해야 한다.
★ 헷갈렸던 점
가장 어려웠던 부분은 CSS 자식 선택자의 방향이었다.
처음에는 선택하려는 label부터 다음과 같이 반대로 작성했다.
label > li > ul {
color: yellowgreen;
}하지만 CSS 선택자는 HTML 구조에 맞춰 부모에서 자식 방향으로 작성해야 했다.
ul > li > label {
width: 100px;
color: yellowgreen;
float: left;
}코드에 별도의 오류가 표시되지 않아 스타일이 적용되지 않는 이유를 찾는 데 시간이 걸렸다.
앞으로는 CSS 선택자를 작성하기 전에 HTML의 부모·자식 구조부터 확인해야겠다.
3. 실습 / 적용
직접 해본 것
- CSS 자식 선택자로
label요소에 스타일 적용하기 - 인라인 스타일과 내부 스타일 작성하기
let과const로 변수 선언하기==와===의 실행 결과 비교하기- 백틱과
${}를 사용해 변수 출력하기 - 컨테이너 안의 아이템 중앙 정렬하기
결과
자식 선택자를 반대 방향으로 작성했을 때는 원하는 스타일이 적용되지 않았다.
HTML 구조를 확인한 뒤 부모에서 자식 방향으로 수정하자 정상적으로 적용되었다.
ul > li > label {
width: 100px;
color: yellowgreen;
float: left;
}4. 문제와 해결
막힌 부분
실습 중 컨테이너 안의 아이템을 중앙에 정렬하는 코드를 바로 떠올리지 못했다.
Flexbox를 사용해야 한다는 것은 알고 있었지만, justify-content와 align-items가 다시 헷갈렸다.
이 부분은 이전에도 반복해서 틀렸기 때문에 단순히 코드를 확인하는 것보다 다시 복습할 필요가 있다고 느꼈다.
★ 해결 방법
컨테이너에 display: flex를 적용하고 다음 속성을 사용한다.
.container {
display: flex;
justify-content: center;
align-items: center;
}justify-content: center: 주축을 기준으로 중앙 정렬align-items: center: 교차축을 기준으로 중앙 정렬
이전에 공부했던 Flexbox Froggy를 다시 진행하면서 Flexbox의 정렬 방식을 복습할 예정이다.
5. 다음에 할 일
- Flexbox Froggy로 중앙 정렬 속성 복습하기
- 복습한 내용을 실습 화면에 다시 적용하기
- 개선된 화면과 복습 내용을 다음 TIL에 추가하기
