1. 오늘의 한 줄 요약
- 어제 실습했던 로그인 웹 제작에 이어서, 카드형식의 상품형 웹 제작 실습등을 진행하였다.
2. 배운 내용
핵심 개념:
-
라이브러리 vs 프레임워크
라이브러리는 내가 필요할 때 불러다 쓰는 것, 프레임워크는 반대로 내 코드를 프레임워크가 불러다 쓰는 것이다. -
CSS의 사용 위치
- 인라인 스타일 시트: 태그 안에
style=""로 직접 쓰는 방식 - 내부 스타일 시트:
<style>태그로 문서 안에 작성하는 방식 - 외부 스타일 시트: 별도 .css 파일을
<link>로 연결하는 방식
- CSS의 구성
- 선택자(Selector): 스타일을 적용할 대상 (예:
.tour-prd) - 속성(Property): 어떤 걸 바꿀지 (예:
color,width) - 속성값(Value): 그 속성에 줄 구체적인 값 (예:
red,200px)
새롭게 알게 된 점:
==는 값만 비교하고 타입은 안 따지는데,===는 값이랑 타입까지 같아야 true라는 걸 알았다.
(10 == "10"은 true,10 === "10"은 false)- 인라인 스타일 > 내부 스타일시트 > 외부 스타일시트 > 브라우저 기본 스타일 순으로 적용되고,
!important로 강제로 우선순위를 올릴 수 있다.
헷갈렸던 점:
- padding이랑 margin이 둘 다 "여백"인데, 콘텐츠 안쪽 여백인지 바깥쪽 여백인지 아직도 살짝 헷갈린다.
padding은 콘텐츠와 테두리(border) 사이의 여백이고,
margin은 테두리 바깥, 다른 요소와의 여백이라고 이해했는데 실제로 몇번 더 봐야 익숙해질 것 같다.
3. 실습 / 적용
직접 해본 것:
- 카드형 상품 목록(card.html), 주문/배송 안내(order.html), 예약 폼(reservation.html) 페이지를
각각 css 파일이랑 연결해서 만들었다.
card.html - 카드형 상품 목록
order.html — 주문/배송 안내
reservation.html — 예약 폼
결과:
- 실습 진도까지는 모두 완벽하게 동작하는 것 같다.
4. 오늘의 회고
- 느낀 점: 어제 HTML,CSS,JS 실습 진도를 나갔을 때는 따라가기에 조금 벅찼다. 그래서, 어제 강의 후에 복습과, html 서적을 통해서 추가 학습을 하였고, 그 후에 오늘 수업을 들으니까 조금 더 잘 이해할 수 있었던 것 같다. 실습을 하다 보니까 느낀건데, 프런트에는 재밌는 부분이 많다는 것을 느꼈다. 아무래도, 코드 하나 바꿀때마다 실시간으로 바뀌는게 눈으로 보이니까 더 그런 것 같다.
- 다음에 할 것 : 오늘 실습했던 코드 복습과, 추가적으로 웹 사이트 바꿔보기
#LGCNS #LGCNS6기 #개발자 #LGCNSINSPIRECAMP
이것저것