Do it! HTML + CSS 웹 표준의 정석 - 겨울 방학 맞이 기초 언어 스터디(2)

#지난주에 이어서...

1주차에서 HTML 기본 구조를 훑어봤다면,
2주차는 ‘이제 진짜 웹페이지처럼 보이게 만드는 단계’였다.
이번 주차에서는 입력 요소(Form) 와 CSS 스타일링의 핵심 개념들을 집중적으로 다뤘다.

# 입력 양식 작성하기 (Form)

웹에서 빠질 수 없는 게 바로 입력 폼이다.
회원가입, 로그인, 검색창… 전부 여기서 시작하니까!

• <form> 태그의 역할과 기본 구조 이해

• <input> 태그의 다양한 타입들 (text, password, checkbox, radio 등)

• placeholder, value, name 같은 입력 요소 속성들

• 여러 입력 태그를 함께 사용하는 방법

*단순히 “입력창을 만든다”에서 끝나는 게 아니라
브라우저가 데이터를 어떻게 인식하는지까지 같이 보게 돼서 꽤 중요했다.

# CSS 기초 다지기

이번 주차의 핵심은 단연 CSS.

* CSS 기본 개념

• CSS를 왜 쓰는지

• HTML과 CSS의 역할 분리

• 스타일 적용 우선순위 개념

특히 같은 요소에 스타일을 여러 번 줬을 때 어떤 게 적용되는지
직접 실습으로 보니까 이해가 훨씬 빨랐다.

# CSS 속성으로 다양한 스타일 적용하기

색상, 글자 크기, 배경…
이제야 “웹페이지 꾸미기”가 시작된 느낌!

• color, background, font-size

• rgba 색상으로 투명도 조절

• 배경 이미지 적용 & 고정 배경

* 단순한 글자 하나도
CSS 하나 바꾸면 분위기가 완전 달라지는 게 재밌었다.

# text-shadow로 텍스트 효과 주기

이번 주차에서 제일 재미있었던 파트.

• text-shadow 기본 문법

• 그림자 위치, 흐림 정도, 색상 조합

• 여러 스타일을 적용한 텍스트 실습

텍스트 하나에 그림자만 줘도
확실히 기본이랑은 느낌이 다르다!

# 2주차를 마치며

• 입력 폼은 웹의 기본 인터페이스

• CSS는 단순 꾸미기가 아니라 구조적인 규칙

• 우선순위 개념은 앞으로 계속 중요하게 쓰일 것 같음

   

아직은 단순한 예제들이지만,
이제 “보이는 웹페이지”를 만들기 시작했다는 느낌이 들어서
확실히 1주차보다 재미있었다.