민동댕의 정보허브

3. 장식 및 효과box-shadow: 박스 그림자box-shadow: 10px 10px 5px gray;text-shadow: 텍스트 그림자오프셋, 흐림 반경, 색상: text-shadow: 2px 2px 5px red;background-image: 배경 이미지URL: background-image: url('image.png');background-size: 배경 이미지 크기픽셀, 퍼센트, cover, contain: background-size: cover; background-position: 배경 이미지 위치background-position: center;, background-position: 10px 20px;background-repeat: 배경 이미지 반복repeat, no-repea..

2. 크기 및 레이아웃width: 너비height: 높이display: 디스플레이 방식 (inline, block, inline-block, flex, 등)inline요소가 인라인으로 배치요소의 너비와 높이를 지정할 수 없음요소는 컨텐츠의 크기에 맞춰지며, 다른 인라인 요소와 나란히 배치block요소가 블록 레벨로 배치요소는 항상 새로운 줄에서 시작요소의 너비와 높이를 지정너비는 기본적으로 부모 요소의 100%를 차지inline-block요소가 인라인으로 배치되지만, 블록처럼 너비와 높이를 지정가능다른 인라인 요소와 나란히 배치flex:요소가 플렉스 컨테이너가 되어, 자식 요소들이 플렉스 아이템으로 배치자식 요소들의 정렬, 크기 조절, 배치를 유연하게 조정가능grid요소가 그리드 컨테이너가 되어, 자식 ..

1. 기본스타일링_2border: 테두리 스타일두께, 스타일, 색상: border: 1px solid black;스타일 종류none테두리가 없음hiddennone과 유사하지만, 테이블 요소의 테두리를 숨길 때 사용dotted점선으로 된 테두리dashed대쉬(긴 점)로 된 테두리solid실선 테두리double두개의 실선으로 된 테두리groove테두리가 홈이 파진 것처럼 보임.테두리 색상은 음영 처리ridge테두리가 솟아오른 것처럼 보임groove와 반대로 테두리 색상은 양각 처리.inset테두리가 요소 안쪽으로 들어간 것처럼 보임입체적outset테두리가 요소 밖으로 돌출된 것처럼 보임입체적예시: border: 2px dashed red;border-radius: 테두리의 모서리 곡선 정도픽셀 단위: bor..

1. 기본 스타일링color: 텍스트 색상색상 이름: color: red;HEX 코드: color: #ff0000;16진수로 색상을 표현RGB: color: rgb(255, 0, 0);설명: 빨강(Red), 초록(Green), 파랑(Blue)의 세 가지 색상 값 형식: rgb(red, green, blue)범위: 각 값은 0에서 255 사이의 정수RGBA: color: rgba(255, 0, 0, 0.5);설명: RGB 값에 알파(Alpha) 값(투명도)을 추가하여 색상을 표현형식: rgba(red, green, blue, alpha)범위: 각 RGB 값은 0에서 255 사이의 정수, 알파 값은 0.0(완전히 투명)에서 1.0(완전히 불투명) 사이의 소수HSL: color: hsl(0, 100%, 50%..

1. 팝업뜨게 하는 법 : openpopup 바로가기  버튼이름  2. URL 뜨게하는 법: window.open 바로가기  버튼이름   전체 코드 예시 버튼이름 버튼이름

1.  파비콘 사이즈는 조절 불가(현재 알기론) 2.title = 웹 이름link = 외부 리소스를 현재 문서에 연결할 때 사용예를 들어, rel="stylesheet"는 링크된 파일이 CSS 스타일시트임을 나타냄다른 예로 rel="icon"은 이는 링크된 파일이 파비콘임을 나타냄href = 링크된 리소스의 URL(경로)을 지정type type 속성은 링크된 리소스의 MIME(Multipurpose Internet Mail Extensions) 유형을 지정예를 들어, CSS 파일의 경우 type="text/css"를 사용파비콘의 경우 type="image/png" 또는 type="image/x-icon"을 사용2. 코드 파트/* IntelliJ */민소 World/* STS */민소 World 전체 코드..