▶ 해당 이미지처럼 브라우저 내 정중앙에 요소를 위치하고 싶은 경우 ▶ 특정 영역(div 영역) 안에서 가운데 정렬도 가능 CSS position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); HTML+CSS +) 특정 영역 안에서의 가운데 정렬 .container { position: absolute; width: 300px; height: 300px; background-color: black; } .box1 { position: absolute; width: 30%; height: 30%; background-color: skyblue; top: 50%; left: 50%; transform: translate(-50%, -50..

Position 1. static - position의 기본값, position값이 설정되어있지 않으면 자연스럽게 static으로 설정된다. - 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓여간다. - static이면, left와 top값 설정되어도도 위치가 변하지 않는다. .box1{ width: 100px; height: 100px; background-color: yellow; } .box2{ width: 100px; height: 100px; background-color:pink; } 2. relative - static으로 설정된 요소를 기준점으로 잡는다. (만약 static 요소가 없으면 브라우저 왼쪽 상단을 기준으로 잡는다.) - left : 50px, top: 70px로 설정 시 stati..

▼코드 사과 딸기 script 부분 코드해석 1. $('#button').click(function --) : button이란 id값을 가진 버튼이 클릭 될 경우 괄호 안에 있는 함수를 실행 2. $('input:radio[name="fruit"]:checked').val() : input의 타입을 radio로 가지고 있는 것 중에서 fruit라는 name의 value값을 불러옴 이때 name값이 문자열이 아닌 변수인 경우 $(`input:radio[name=${변수명}]:checked`).val()로 쓰면 된다. 3. console.log(values) :변수 values를 console창에 출력 ▼결과