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

🟰내장 객체 별 유효 볌위 ☀️pageContext 현재 JSP 페이지 내부에서 유효하다. ☀️Request 현재 요청 내에서 유효하다. forward를 하면 다음 페이지에서도 유효하다. ☀️Session 현재 사용자의 접속이 유지되는 동안 유효하다. ☀️Application 현재 서버가 종료되기 전까지 유효하다. 🟰객체의 함수 ☀️ 내장객체.setAttribute(String name, Obejct o ) 지정한 내장객체에 name과 o를 연결하여 저장한다. ☀️내장객체.getAttribute(String name) 지정한 name으로 객체 o를 반환받는다. ☀️내장객체.removeAttribute(String name) 지정한 name으로 저장된 객체를 제거한다. 예시 코드 ​ 위와 같은 내용이 이해..

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

GET,POST는 form 태그 안에서 입력하거나 선택한 정보(value)를 어떻게 전달하는가 정하는 방식입니다. GET과 POST방식의 차이를 특징을 살펴보고 사진과 함께 봐보시겠습니다. 🟰GET 📌서버에게서 데이터를 받아올때 어떤 데이터를 받아오고 싶은지 검색어, 글 번호 등 간단한 데이터를 전송할 수 있습니다. 📌데이터를 문자열 형태로 받습니다. 📌'?'라는 구분자와 함께 '파라미터이름=밸류값'의 형태로 받으며, 파라미터가 없으면 결과로 null이 반환됩니다. 📌파라미터를 쓰면 DB를 통해 가져올 수 있는 양이 확실히 줄어듭니다. 📌해당 파라미터를 사용하여 하나의 문서가 보다 많은 작업을 처리할 수 있기 떄문입니다. 📌파라미터를 사용하지 않으면 일일이 jsp문서를 만들어서 해당 DB를 각각 가져와야..

🟰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는 적절히 벌려줌) 📌가지런하고 보..

🔆border(테두리) 테두리에는 기본적으로 3가지 종류가 있다. 1. 바깥쪽 여백 - margin 해당 속성이 차지하고 있는 공간의 외부 테두리 2. 테두리 해당 속성의 외곽선 3. 테두리 안쪽 여백 - padding 해당 속성이 차지하고 있는 공간의 내부 테두리 🔆border의 속성 📌두께(width) 테두리의 두께로, 주로 px단위를 사용한다. 📌스타일(style) 테두리의 스타일로 실선,점선, 이중선 등 다양한 옵션이 존재한다. 📌색상(color) 테두리의 색상으로, 값은 color속성의 포맷을 사용한다. 📌방향(top bottom left right) border : 1px(모든 방향에 1px씩) border : 1px(상하) 1px(좌우) 각각 1px씩 적용 border : 1px(상) 1px..