⚠️ 문제스크롤을 내릴 때 헤더가 화면 위쪽에 나타나도록 css에 position: fixed; 속성을 주었는데 본문 컨텐츠가 헤더 밑으로 들어가서 잘리는 문제🧐 원인header가 position: fixed로 설정되어 있으면, section이 그 공간을 자동으로 인식하지 못하고 최상단에 붙어 있는 상태가 된다. 이 문제를 해결하려면, section.visual에 margin-top이 아닌 padding-top을 사용해야 한다.margin-top은 요소의 외부 마진을 설정하는 것이지만, padding-top은 요소 내에서 실제 콘텐츠의 위치를 조정하기 때문에, 고정된 header의 크기를 고려해서 요소를 자리에 배치한다. ⚡ 해결법header의 높이만큼 margin-top 속성 추가/* section...
1. 데이터 전송 규칙 3가지1-1. 어디로 (form 태그의 action 속성)- 데이터를 전송할 목적지(servlet)를 지정한다. - action 속성에 서블릿 URL 패턴을 작성한다.여기서 /MyServlet은 서블릿의 URL 매핑 값이다. 서블릿의 URL은 @WebServlet이나 web.xml에서 설정된다. web.xml 경로WebContent/WEB-INF/web.xml 또는 src/main/webapp/WEB-INF/web.xml (프로젝트 구조에 따라 다를 수 있음)1-2. 어떤 값을 (input 태그의 name)- input 태그에 name 속성을 추가하여 서버로 전송할 데이터를 지정한다. - 서버에서 해당 데이터를 읽어오기 위해 name 속성이 필요한 것. - Servlet 에서 값을..
음악이 재생중일때만 곡 정보(제목, 프로그레스바)가 표시되는 뮤직 플레이어 다크모드에서 이뻐보이도록 노을 색상으로 배경을 넣어 주었다.음악 바뀔 때마다 하늘 색깔이 바뀌게 설정해 보니 이쁘다! 빌딩이랑 달은 무료 svg 사이트에서 가져와서 넣어주었습니다. CSS 로 크기와 위치 조절해서 원하는 곳에 추가하면 된다. 참고로 블로그에서 구글 애드센스나 광고로 수익 창출하시는 분들은 배경음악은 자제해 주세요상업적 목적으로 브금 쓰시면 노노노 [html 코드] ..
꾸미기 라고 하기에는 소소하지만부트스트랩 속성 공부하는 시간 네비게이션바 아래 메인 영역에 부트스트랩으로 소개글 추가main영역이라고 해야 할지 content 영역이라고 해야 할지 1. 소개글 추가 `jumbotron`페이지 내에서 강조하는 히어로 섹션이고 큰 텍스트와 여백을 기본으로 포함함부트스트랩 5에서는 Jumbotron 클래스가 제거되었기 때문에 아래와 같은 클래스를 조합해서 비슷한 효과를 수동으로 내야 한다. `rounded`요소의 모서리를 둥글게 만듬 border-radius: 0.375rem (약 6px)여기서 rounded-circle, rounded-pill 쓰면 더 극단적으로(?) 둥근 스타일 가능`display-4`텍스트를 크게 표시하는 헤딩 스타일부트스트랩의 디스플레이 클래스인데 ..
CSS Diner는 CSS 선택자를 학습하고 연습할 수 있는 재미있는 웹 기반 게임이다.사용자가 HTML 코드에 적용할 올바른 CSS 선택자를 작성하면, 게임의 각 레벨을 클리어하며 점점 더 복잡한 선택자를 익힐 수 있다. 이 게임은 CSS를 배우거나 복습하고 싶은 초보자와 중급자를 위한 좋은 도구이고특히 선택자 공부를 하고 싶은 사람들께 추천한다.크롤링 연습하시는 분들께도 많은 도움이 될 것 같다. https://flukeout.github.io/ CSS DinerA fun game to help you learn and practice CSS selectors.flukeout.github.io 가장 쉬운 난이도인 1번부터 가장 어려운 32번까지 있다.ㅋㅋ 화면에서 고르라고 하는 물건을 고르는 CSS..
이번 포스팅 설명은 제가 작성했으나 이미지는 다른 곳에서 잘 그려진 것들을 가져왔습니다.이미지마다 출처 표기했습니다 :) 여기 가시면 flex 요소들을 직접 클릭해 보면서 화면 레이아웃을 확인해 볼 수 있어요. flex-shrink - CSS: Cascading Style Sheets | MDNThe flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, the flex items can shrink to fit according to their flex-shrink value. Each flex line's negati..
1. 게시판 메인 페이지 `bbs.jsp`만들기먼저 `main.jsp` 페이지에서 게시판 부분 href 속성에 "bbs.jsp" 를 연결해준다. `main.jsp` 페이지를 복사해서 webapp 에다 붙여넣기 하고 이름만 `bbs.jsp`로 바꾸자.여기서 코드에 손을 좀 볼 것이다. 만들었으면 `Home`에 있던 active 클래스를 `게시판`으로 옮겨 줘서 현재 선택한 페이지임을 가시적으로 보여 준다. 그 다음 네비게이션바 아래에 게시판 형식의 테이블을 삽입 해 준다.테이블을 만들기 전에 `` 태그로 container와 row 영역을 잡아 주고 테이블을 만들어주자. 번호 ..
1. form 태그encrype자주 사용되는 속성값 "name", "method", "actioin", "encrype" 파일이나 이미지 업로드가 있는 폼은 반드시 enctype="multipart/from-data" 이 타입으로 지정을 해야 파일 업로드(전송)이 된다. 그래야 서버에 파일을 저장해서 처리 할 수 있다. 보안때문에 자동완성이나 입력 값 체크를 하지 않도록 하려면 qutocomoplete="off" 폼 속성과 "novalidate" 속성 사용 + + 2. input 태그placeholder="텍스트"입력 필드에 예상되는 추천 값을 미리보기 하는 용도 태그 포커스 되면 사라짐 readonly읽기 전용. 입력필드가 사용자 입력 불가한 상태가 됨. ..
