공부하는 안씨의 기록

웹페이지를 아름답게 만드는 CSS(Cascading Style Sheets) CSS Beginner(3) 7. ~ 8. | 목차 1. CSS 적용 2. CSS 구성(구조, 선택자, 주석) 3. CSS 특성 4. BOX model 5. BOX sizing 6. CSS 단위 7. 이미지 다루기 8. Overflow 및 해결 9. 폰트 꾸미기 10. 테두리 꾸미기 11. 배경 이미지 설정 12. 요소 정렬하기 9. 폰트 꾸미기 Hello :) html { fonr-size: 10px; } p { color: #008000; font-size: 0.5rem; (10px의 0.5만큼-> 5px) font-style: italic; (기울어짐) font-weight: bold; (두껍게) text-decoratio..

웹페이지를 아름답게 만드는 CSS(Cascading Style Sheets) CSS Beginner(3) 7. ~ 8. | 목차 1. CSS 적용 2. CSS 구성(구조, 선택자, 주석) 3. CSS 특성 4. BOX model 5. BOX sizing 6. CSS 단위 7. 이미지 다루기 8. Overflow 및 해결 9. 폰트 꾸미기 10. 테두리 꾸미기 11. 배경 이미지 설정 12. 요소 정렬하기 7. 이미지 다루기 (1) img 이미지 태그 (2) 특정 블록 요소의 배경으로써 이미지를 세팅 (3) max-width: 100% 부모 영역에서 벗어나지 않도록 이미지의 상한선을 100%로 설정 (4) object-fit: cover; 이미지를 부모 요소의 영역의 크기 만큼 확대/축소하여 채움(부모 요..

웹페이지를 아름답게 만드는 CSS(Cascading Style Sheets) CSS Beginner(2) 4. ~ 6. | 목차 1. CSS 적용 2. CSS 구성(구조, 선택자, 주석) 3. CSS 특성 4. BOX model 5. BOX sizing 6. CSS 단위 7. 이미지 다루기 8. Overflow 9. 폰트 꾸미기 10. 테두리 꾸미기 11. 배경 이미지 설정 12. 요소 정렬하기 4. BOX model Inline Box 한 줄에 표시 , , 태그로 감싸진 내용 만큼만 영역을 차지 width와 height로 요소의 크기를 조절할 수 없음(레이아웃을 활용할 수 없음!) inline은 좌우 margin, padding만 적용 가능 상하(-다른 레이아웃)는 불가능) Block Box 개별 요소..

* 본 포스팅은 테킷 프론트엔드 온보딩트랙 강의(조경민 강사님)를 참고하였으며, 그 외의 자발적 학습 활동을 진행한 것을 토대로 작성되었습니다. | 목차 1. 강의 내용 학습 1.(1) HTML 1.(2) CSS 1.(3) JavaScript 2. 학습 후기 1. 강의 내용 학습 1.(1) HTML HTML(* .html)(HyperTect Markup Language) (구조, 내용) HyperText: 정적인 활동에서 벗어나 다른 페이지에 접속할 수 있는 ‘링크’ Markup: 텍스트의 구조 혹은 의미를 부여하는 것 의미 부여 방법: 어쩌고 저쩌고 1.(2) CSS CSS(Cascading Style Sheets) (* .css) (모양, 스타일) Cascading: ‘폭포처럼 떨어지는, 계단식의’ ..