미미 공부/취미방

3주차.Chapter 01 JavaScript 선행 학습 *** Javascript는 CSS/HTML처럼 눈에 보이는 것을 제어하는 게 아니고 눈에 보이지 않는 데이터를 제어하기 때문에 머릿속으로 데이터의 흐름과 코드의 논리를 이해해야 한다. *** 표기법 dash-case(kebab-case), snake_case, camelCase, ParcelCase dash-case(kebab-case)는, 단어 중간에 '-(대시)' 기호로 표기하는 법. 띄어쓰기를 '-'가 대신함. 케밥 꼬치에 꽂혀있는 것 같아 보여서 'kebab-case'라고도 부름. 예. the-quick-brown-fox-jumps-over-the-lazy-dog (한 단어) HTML, CSS에서 자주 사용 snake_case 단어 중간에..

2주차.Chapter 04 01 transition 요소에 마우스를 올리거나(:hover) 클릭할 때(:active), 요소의 형태/색상 등이 변경되게 할 수 있는데, 이렇게 전환되는걸 자연스럽게 만들어주는 속성이고 단축 속성이에요. transition-property(속성명), transition-duration(지속시간), transition-timing-function(타이밍함수), transition-delay(대기시간)라는 개별 속성을 갖고 있고, 다른 단축 속성들과 동일하게 따로 작성이 가능해요. 단축 속성을 작성할 때는, transition: 속성명 지속시간(필수) 타이밍함수 대기시간; 순으로 작성하면 되고 지속시간은 필수로 포함되어야 해요! transition-property 전환 효과를 ..

2주차.Chapter 03 01 position 자주 사용하고 유용하고 난발하면 문제가 되는 속성입니다! position에는 static, relative, absolute, fixed, sticky 속성이 있어요. 같이 사용하는 속성으로 top, bottom, left, right, z-index가 있습니다. 요소의 위치를 지정할 수 있는 속성인데, 알아두어야 할 게, 기준이 되는 요소가 있어야 되고, 그 기준 요소를 기준으로 해당 요소의 위치를 지정할 수 있어요! 기준이 되는 요소로 지정하기 위해서 position 속성을 줘야합니다. 각 속성에 대해 자세히 우선 알아보자면 static 기본값. 기준이 될 수 없음 relative 요소 자신이 기준 absolute position 값을 갖고있는 가장 가..

2주차.Chapter 02 01 overflow 요소의 내부 내용/후손요소들이 넘쳤을 때, 어떻게 보여지게 할지 제어 기본값 : visible( 넘친 내용을 그래도 보여줌 ) hidden : 넘친 내용을 자름 scroll : 스크롤이 생김 oveflow-x / overflow-y로 개별 속성 가능 02 display ***엄청 자주 사용*** 각 태그는 이미 정해진 display 특성이 있어요. 는 블록, 은 인라인, 는 인라인, 은 테이블 등등. 하지만 display 속성으로 바꾸는게 가능해요! 요소의 화면 출력 특성 block : 상자 요소 inline : 글자 요소 inline-block : 글자 + 상자 요소 flex : 플렉스 박스 (수직 혹은 수평 정렬 중 하나 선택) grid : 그리드 (행..

2주차.Chapter 01 또 외울거 많아요 외울 거 많아요...🤦‍♀️🤦‍♂️ CSS 속성 중에서 박스모델에 대해. 우선 기본적으로 모든 요소는 사각형이에요! 요소박스와 관련된 속성에 대한 내용입니다! 01 가로세로 너비 속성 설명 기본값 단위 width, height 요소의 가로/세로 너비 auto 브라우저가 너비를 계산 px, em, vw 등 max-width, max-height 요소의 최대 가로/세로 너비 none 최대 너비 제한 없음 min-width, min-height 요소의 최소 가로/세로 너비 0 02 단위 px 픽셀 % 상대적 백분율(부모를 기준으로) em 요소의 글꼴 크기 (글꼴 크기가 기준. 1em = 해당 요소의 글꼴 크기) 부모의 폰트가 20px이면, 해당 요소가 이를 상속받고..

1주차.Chapter 07 01 스타일 상속이란, 조상에 적용된 스타일을 후손들이 상속받는 걸 말해요. 아래 예시처럼, animal 클래스에 스타일을 줬는데, 그 자식들이 전부 바뀌었어요! 상속되는 스타일은 글자/문자 관련 속성들입니다. font-style font-weight font-size line-height font-family color text-align 등... 하. 지. 만 강제상속이라고, 상속되지 않는 스타일을 강제로 상속시키는 방법이 있어요. 그 속성 값은 바로 inherit! 아래 예시에서, height, background-color를 테스트해 보세요! .parent를 바꾸면 .child가 변경되는 걸 확인할 수 있어요! 02 선택자 우선순위 만약 같은 요소가 여러 번 선언된다면,..