✅ 아래 내용들에 대해서 알아보자 - 가상 클래스 - 예제 코드 - 가상 요소 - 예제 코드 가상 클래스 pesudo class 네이버 카카오 구글 focus, before, after 이름 나이 보내기 nth-child, not 1content 2content 3content 4content 5content 가상 요소

✅ 아래 내용들에 대해서 알아보자 - position - 예제 코드 position 요소의 위치를 지정하는 데 사용되며, 요소를 문서 내에서 어떤 방식으로 배치할지 제어하는 속성이다. 종류 특징 static - 요소가 html 문서에서 일반적인 흐름에 따라 배치 된다. 위치지정 불가!! relative - static과 마찬가지로 문서의 일반적인 흐름에 배치된다. - top, right, bottom, left, z-index를 사용하여 상대적인 위치 지정 가능하다 absolute - 문서의 일반적인 흐름을 따르지 않는다 - 요소가 position:static 속성을 가지지 않는 부모의 기준으로 움직인다. - 만약 부모 요소 중 포지션이 relative, absolute, fixed인 태그가 없으면 가장..

✅ 아래 내용들에 대해서 알아보자 - display - 예제 코드 Float float 속성은 요소를 왼쪽이나 오른쪽으로 띄워서 다른 요소 주위로 배치하는데 사용되는 속성이다. float을 사용하면 html 요소는 흐름에서 벗어나 특정 위치에 배치될 수 있다. 종류 특징 none 요소를 띄우지 않고 기본 흐름대로 배치(기본값) left 요소를 왼쪽에 띄워서 주변 컨텐츠가 오른쪽으로 흐르게 한다. right 요소를 오른쪽에 띄워서 주변 컨텐츠가 왼쪽으로 흐르게 한다. inherit 부모 요소로부터 float 속성 값을 상속받는다. initial 기본값으로 설정 예제 코드 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙..

✅ 아래 내용들에 대해서 알아보자 - display - 예제 코드 display display 속성은 요소를 블록, 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정하는 속성이다.(참고) 종류 특징 none - 요소를 화면에 숨긴다(공간도 차지하지 않음) - visibility: hidden과 달리 레이아웃에 공간을 차지하지 않는다. block - 요소를 블록 레벨 요소로 지정 - width, height, margin, padding 속성 사용 가능 - 요소 추가 시 세로로 배치(줄 바꿈 됨)가 되어 최대 가로 너비를 차지한다. inline - 요소를 인라인 요소로 지정한다 - 요소 추가 시 가로로 배치(줄 바꿈 안됨)가 되어 가로..

✅ 아래 내용들에 대해서 알아보자 - css 폰트 - css 크기 - 예제 코드 css font css font 속성을 이용하여 폰트에 대해서 다양한 속성을 사용할 수 있다.(참고) css 크기 - rem : 최상위 요소의 크기의 n배 적용 - em : 상위 요소의 크기의 n배 적용 - vw: viewport width 사이즈 크기의 퍼센트만큼 너비 크기 - vh: viewport height 사이즈 크기의 퍼센트만큼 높이 크기 예제 코드 폰트 공부 font-size, font-family를 공부해봅시다 font-weight 공부해봅시다 font-weight를 공부해봅시다 웹폰트를 공부해봅시다 px px에 대해서 공부해봅시다 rem rem에 대해서 공부해봅시다 em em에 대해서 공부해봅시다 vw vh ..

✅ 아래 내용들에 대해서 알아보자 - css 선택자 - 예제 코드 css 선택자 css선택자는 특정 요소(element)를 선택하여 스타일을 적용할 수 있게 해 준다. css 선택자의 종류에는 여러 가지가 있다. 궁금하다면 mdn을 참고하자 참고로 id 선택자 사용 시 특정 id는 해당 html에서 하나만 적용이 가능하다. 반대로 class 선택자는 다중 사용이 가능하다. 예제 코드 예제 코드 하나씩 보면서 분석해 보면 쉽게 이해할 수 있을 것이다. 1. 자손, 자식 결합자 예시 자손 결합자 #1 자손 결합자 #2 자식 결합자 #1 자식 결합자 #2 애국가 1절 동해 물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화삼천리 화려 강산 대한 사람, 대한으로 길이 보전하세. 2절 남산 위에..