나만의 작은 코딩

float float 은 해당 요소를 어떻게 정렬할지를 정의하는 css속성이다. float 속성은 묶음 태그(block element)만 적용할 수 있다. 묶음 태그: 등 float의 성격 - block의 성격을 무시한다. - 형제 구조로 이루어져있다. - 해당 요소들의 높이 값이 맞아야 미디어쿼리 적용시 제대로 동작한다. float의 속성 사용법 - none(기본값) : 정렬하지 않는다. - left : 왼쪽으로 정렬한다. - right : 오른쪽으로 정렬한다. 1 2 3 4 5 clear 속성: float 속성 해제하기 clear: both는 취소하다 라는 개념으로 float: left/right와 짝꿍 개념이다. float 속성을 적용하면 그 이후에 오는 다른 요소들까지 똑같은 속성이 전달되어 둘러..

todo list를 만들 때 처음 배웠던 underline이다. 메뉴를 누르면 그 메뉴로 밑줄이 이동하는 애니메이션 All Ongoing Done 기본 구조 다른 class나 id는 쓰지 않으니 보지 말고 중요한건 이다. 메뉴들이 있는 div에 underline을 나타내는 div를 하나 만들어준다. 이 메뉴들과 underline을 javascript로 데려와서 작업을 해야하니 데꼬오자. let underLine = document.getElementById("underbar"); let taskTabs = document.querySelectorAll(".tabs div"); 이제 메뉴들에게 클릭 이벤트를 주자. for(let i=1; i { underLine.style.width = e.target.o..

sidemenu 컴퓨터버전(큰화면): 메뉴들이 바로 눈에 보임, sidemenu버튼이 없음 모바일버전(작은화면): sidemenu에 메뉴들이 들어있음, sidemenu버튼이 있음 반응형 웹페이지를 만들기 위해서 컴퓨터버전(큰화면)일 때 nav에 있던 메뉴들을 모바일버전(작은화면)일땐 sidemenu에 넣었다. .sidemenu { height: 100%; width: 0; position: fixed; z-index: 1; top: 1; left: 0; overflow-x: hidden; padding-top: 60px; trasition: 0.5s; } width: 0 버튼을 누르기 전에는 sidemenu가 보이면 안되기 때문에 초기 설정값은 0이다. height: 100% sidemenu를 길게 화면..