두잉애니띵

🎨 CSS(Cascading Style Sheets) ▶▶▶ sticky ✅ position: sticky ✅ fixed / sticky 차이 ✅ 주의사항 1. position: sticky 페이지가 스크롤 될 때 화면에 고정하는 요소 Edge 이상에서 사용가능 들어갈 글 들어갈 글 들어갈 글 .grey { background: lightgray; height: 2000px; margin-top: 500px; } .image { float: right; width: 400px; top: 100px; position: sticky; } .content { float: left; width: 400px; } 2. fixed / sticky 차이 position: fixed - 항상 화면에 고정 positio..

🎨 CSS(Cascading Style Sheets) ▶▶▶ display ✅ display ✅ visibility ✅ opacity 1. display 프로퍼티 : layout 정의할때 1.1 block ex) div, h1~h6, p, ol, ul, li, hr, table, form, ... 항상 새 줄에 시작 width: 100%(화면 크기만큼 가로폭이 꽉 참 width, height, margin, padding 속성 지정 가능 1.2 inline ex) span, a, strong, img, br, input, select, textarea, button, ... 문장 중간에 들어갈 수 있음 = 줄을 안 바꾸고 다른 요소와 같은 줄에 함께 위치 가능 content의 너비만큼 가로폭 차지 wid..

🎨 CSS(Cascading Style Sheets) ▶▶▶ Selector ✅ 너비width / 높이height ✅ margin /padding ✅ border Box Model 📚 CSS에서 element(태그)가 박스 형태를 가지는 것을 박스모델이라고 부른다. 박스모델에는 아래의 그림과 같이 4가지 속성을 가짐 content : 글이나 이미지 등의 실제 내용. 콘텐츠 padding : border 안쪽에 위치한 content의 내부 여백. 배경색이나 이미지는 패딩까지 적용 border : content와 padding을 감싸는 테두리, 테두리의 두께 margin : border 바깥에 위치하는 content의 외부 여백. 배경색 지정x 1. width / height 속성 content의 너비/ 높..

🎨 CSS(Cascading Style Sheets) ▶▶▶ property value units ✅ 크기 단위(px / % / em / rm) ✅ 색상 표현 단위 1. CSS의 크기 단위 1.1 px 픽셀(화소) 단위(1px = 화소 1개) 디바이스 해상도에 따라 상대적인 크기 1 p {font-size: 12px}; cs 1.2 % 퍼센트 요소에 지정된 사이즈의 상대적 사이즈 1 2 3 p {font-size: 12px}; div {font-size: 130%}; /* 12px * 1.3 = 15.6px*/ cs 1.3 em 배수 단위 요소에 지정된 사이즈의 상대적 사이즈 ex) 폰트 사이즈가 10px인 페이지 ➡ 1.3em = 13px 1 2 3 p {font-size: 10px}; div {fon..

🎨 CSS(Cascading Style Sheets) ▶▶▶ Selector ✅ 전체 셀렉터 ✅ 태그 셀렉터 ✅ ID 셀렉터 ✅ 클래스 셀렉터 ✅ 어트리뷰트 셀렉터 ✅ 복합 셀렉터 ✅ 가상 클래스 셀렉터 1. 전체 셀렉터 HTML 문서 내 모든 요소를 선택 전체 셀렉터 사용시 문서 내 모든 요소를 읽어야해서 페이지 로딩이 느려질 수 있음 * { color: red; } 2. 태그 셀렉터(Type Selector) 태그에 대한 스타일만 지정 태그는 개발자가 지정해주는 스타일이 적용x p { text-align: center; } 3. ID 셀렉터 id 속성 값은 중복될 수 없는 유일한 값 웹 문서 안에서 요소의 배치 방법을 지정할 때 자주 사용함 #id 4. 클래스 셀렉터 클래스 속성값은 중복 가능 클래스..