HTML & CSS 의심 해소 및 면접 준비 세션 요약
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
HTML/CSS 초보자 및 중급 학습자
핵심 요약
- HTML 구조와 CSS 기초를 정리하며
flexbox,media queries등의 핵심 개념 강조 id와class의 차이,position: absolute의 사용 시 주의사항 등 면접 대비 질문 정리- 반응형 디자인 실무 적용을 위한
vw,vh,%단위 및media queries활용 법 설명
섹션별 세부 요약
1. HTML 구조 리뷰
와태그의 올바른 사용법- 의미 있는 태그(
,)의 중요성
2. CSS 기초 및 적용
- Inline, Internal, External CSS의 차이점
class (.),id (#),element selector선택자 사용법margin,border,padding,content의 박스 모델 구조
3. CSS 위치 지정
static,relative,absolute,fixed,sticky의 동작 방식position: absolute사용 시 부모 요소의 위치에 따른 영향
4. Flexbox 소개
display: flex로 아이템 정렬 방법justify-content,align-items,flex-direction속성 활용 예
5. 반응형 디자인
media queries를 통한 화면 크기별 스타일 적용%,em,rem,vh,vw유닛의 반응성 역할
6. 흔한 의심 사항
와의 사용 시기id와class의 유니크성 차이z-index의 스택 컨텍스트 이해
7. 면접 Q&A 실습
idvsclass:id는 유일,class는 재사용 가능- 박스 모델:
content,padding,border,margin구성 - 의미 있는 HTML 태그(
,)의 SEO 및 가독성 효용
결론
- 실제 페이스북 로그인 페이지 재현을 통해 학습한 HTML/CSS 개념을 적용해보기
flexbox및media queries로 반응형 UI 설계 실무 경험 쌓기- "Build. Break. Learn. Repeat."의 학습 철학을 바탕으로 지속적인 실습 추천