My Tech Blog (CSS)

꾸미기 라고 하기에는 소소하지만부트스트랩 속성 공부하는 시간 네비게이션바 아래 메인 영역에 부트스트랩으로 소개글 추가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 영역을 잡아 주고 테이블을 만들어주자.  번호 ..

자바스크립트 이벤트 리스너 간단히 포스팅하려고 심플한 To Do List를 만들어 보았다!    1. 구글폰트, 스타일시트, 자바스크립트 연결- `style.css`와 `script.js` 연결- 구글 폰트 `Poppins`  사용하기 위해서 Embed Code를 2.  전체  적용될 css 설정 & container에 배경 추가⚡  폰트는 구글 폰트 `Poppins` 로 설정 ⚡ `box-sizing: border-box;`요소의 크기를 계산할 때 `패딩(padding)`과 `테두리(border)`까지 포함하도록 설정하는 속성. 기본적으로 CSS에서 box-sizing의 기본값은 `content-box`이다. `content-box`는 요소의 `width`와 `height`가 콘텐츠 영역..

블로그 꾸미기 하면서 간단한 뮤직 플레이어를 만들었다. 음악이 재생 중일 때만 현재 플레이중인 음악 정보를 표시하는 코드 어떻게 짰는지 간단히 올려 본다. 플레이 버튼을 누르기 전까지는 `Title` 과 `Progress Bar` 이 숨겨져 있다가 곡이 재생되면 제목과 프로그레스바가 플레이어 위로 부드럽게 나타나는 코드이다. ⚡ music-info 클래스 CSS 코드음악 재생 전(기본상태).music-body .music-container .music-info { opacity: 0; /* 투명도 100%로 화면에서숨겨짐 */ transform: translateY(100%); /* (수직 방향) 자기 자신 높이만큼 아래로 이동 */ transition: transform 0.3s ease-in..

1. form 태그encrype자주 사용되는 속성값 "name", "method", "actioin", "encrype" 파일이나 이미지 업로드가 있는 폼은 반드시 enctype="multipart/from-data" 이 타입으로 지정을 해야 파일 업로드(전송)이 된다. 그래야 서버에 파일을 저장해서 처리 할 수 있다.    보안때문에 자동완성이나 입력 값 체크를 하지 않도록 하려면 qutocomoplete="off" 폼 속성과 "novalidate" 속성 사용 + +  2. input 태그placeholder="텍스트"입력 필드에 예상되는 추천 값을 미리보기 하는 용도 태그 포커스 되면 사라짐 readonly읽기 전용. 입력필드가 사용자 입력 불가한 상태가 됨. ..

[HTML]div 6개 만들어주고 container로 감쌌다.    1    2    3    4    5    6    [CSS]html, bodyhtml,body {    margin: 0;    padding: 0;    box-sizing: border-box;    height: 100dvh;    width: 100%;} 페이지의 기본 여백, 패딩 제거, html과 body의 크기를 브라우저 창의 100% 너비와 100dvh 높이로 설정. box-sizing: border-box;으로 콘텐츠 크기와 패딩, 테두리를 합쳐서 계산  `box-sizing`의 속성은 요소의 크기를 계산하는 방법을 결정한다. `content-box` (기본값)는 width와 height가 요소의 콘텐츠 영역 크기만을 ..