해당 게시물을 이용한 2차 창작은 댓글 부탁드립니다. 🟰파일을 분리하였을 때 장점 ☀️코드의 구분이 쉬워진다. ☀️각 파일의 목적이 확실해진다. 매우 간단해서 예시사진만 첨부하겠습니다. css는 link태그로 javascript는 body안에서 script태그로 사용하시면 됩니다.

codePen의 화면이 너무 작다면 아래의 코드를 복사해서 Visual Studio에서 확인해보자. 아래의 코드중 드랍다운에서 가장 중요한 코드는 position이다. 🟰HTML로 만드는 드랍메뉴의 조건(자바스크립트를 쓰지 않고 만들기) ☀️ 숨길 메뉴의 상위 요소에 position : relative를 걸어 기준점을 만들어준다. ☀️숨길 메뉴의 요소에 position : absolute를 걸어 기준점에 대한 절대 위치를 지정해준다. ☀️ top, left, right, bottom을 통해 위치를 조정해준다. ☀️width, font-size등을 통해 세부 위치를 조정해준다. ☀️세부위치를 모두 조정했다면 숨길 요소에 display:none, visibility : hidden , opacity : 0등..

HTML 삽입 미리보기할 수 없는 소스 위의 codePen을 통해서 각 스타일에 대한 특징을 알아보고 내용을 읽어보세요. 0.5배로 보면 조금 더 편하실겁니다! 🟰Position 스타일 ☀️static 요소의 기본 값이다. ☀️relative 다른 요소의 위치 기준이 될 수 있다. 기준이 되는 요소에 relative를 걸고 하위요소에 absolute를 걸면 기준점이 relative를 걸어준 요소가 된다. ☀️absolute 기준(relative)을 중심으로 자신만의 위치를 가진다. 스크롤의 영향을 받는다. 드랍메뉴를 만들때 쓰인다. ☀️fixed 기준을 중심으로 자신만의 위치를 가진다. 스크롤의 영향을 받지 않는다. 다른 페이지의 우측에 스크롤을 내려도 항상 고정되는 메뉴바와 같은 것들 ☀️sticky ..

🟰hover(마우스가 해당 요소 위를 지나갈때) ☀️hover효과를 통해 마우스가 해당 요소를 지나갈 때 강조 효과를 줄 수 있다. ☀️background-color, color-font, visibility 등 다양한 요소를 활용하여 강조효과를 줄 수 있다. ☀️transition-duration으로 해당 효과가 보여지는 시간을 지정할 수 있다. 다양한 효과를 주석과 함께 적어놨으니 직접 보면서 알아보자! HTML 삽입 미리보기할 수 없는 소스 hover를 통해 드랍메뉴 또한 구현할 수 있다. 드랍메뉴는 다음 강의에 올리도록 하겠다!

🟰display : flex( 가로로 정렬하기) ☀️내부 요소를 세로로 정렬이 아닌 가로로 정렬한다. code pen을 통해 상세한 요소들을 소개하겠습니다. 0.25배로 축소해서 보시면 감사하겠습니다. HTML 삽입 미리보기할 수 없는 소스 1. div로 틀을 만들고 그안에 내용을 flex를 통해 가로로 정렬해준다. 2. flex-flow라는 속성을 통해 div로 만든 넓이를 초과할 경우 다음 줄로 넘어가게 해준다. 3. justify-content 라는 스타일 속성을 통해 자동으로 넓이 조정이 가능하다. 4. justify-content에는 space-between(간격을 최대한 벌림) / space- around / space-evenly (around와 evenly는 적절히 벌려줌) 📌가지런하고 보..