visual studio code html -> ! 누르고 Tab 누른 후 시작
html에서 <section>: 어떤 하나의 테마를 가진 여러개의 블록을 묶어준다고 생각하면 쉽다.
css reset: html에 기본적으로 있는스타일 초기화해주고 브라우저마다 통일시켜 줌
모든 콘텐츠를 감싼 <section id="main_contents></seciton>를 전체 화면으로 설정해 주기 위해 width와 height를 모두 100%로 지정합니다.
#main_contents{ width: 100%; height: 100%; }
플렉스 박스 : 수평방향으로 정렬할 수 있는 방법 제공
->요소 전체를 중앙 정렬할 때 사용
순서대로 felx 없음 / flex center로 줌 / text align만
line-height: 줄간격
<설문 페이지 만들기>
모든 설문문항이 한 페이지 내에 있고 각 설문문항이 한 페이지 전체를 차지하게끔 하고 스크롤바를 overflow:hidden 속성을 통해 없앤 후 js 이용해 버튼 누르면 스크롤바 내려가게끔 해서 버튼 누르면 다음 페이지로 넘어가는 것과 같은 효과 주기
section>div>form>div*4
css
.test {
max-width: 600px;
height: 100vh;
}-> 하나의 문항이 전체 화면을 잡아 먹을 수 있게끔 %가 아니라 vh를 사용한다.
%: 내 부모의 넓이의 %
vh / vw:전체 화면에서의 할당량
<버튼 꾸미기>
마우스 올라갔을 떄 효과 주고 싶으면
ex)button:hover { ~ } 작성
<스크롤바가 사라져서 더이상 페이지가 밑으로 내려가지 않기 하기 위해 주는 속성>
body{overflow:hidden}
js
js를 앞에 불러 올 수도, body직전인 뒤에 불러올 수도 있다
-> 전자 : js 코드 로드 후 html로드 됨 이에 따라 페이지가 늦게 로드 되는 것 처럼 보일 수 있다
따라서 주로 후자처럼 body 닫는 태그</body> 바로 앞에 배치한다
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javas" src="js/form.js"></script>제이쿼리는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리
:1000px(절대적인 값) 되는 지점으로 스크롤 내리게 된다.
:500px -> duration
:scrollTop -> 화면 상단에 있는 픽셀의 위치 반환
function scrollUp() {
const vheight = $('.test').height(); //화면 높이 값 반환
$('html, body').animate({
scrollTop: ((Math.floor($(window).scrollTop() / vheight) - 1) * vheight)
}, 500);
}
문항 답 체크를 해야 다음 버튼 누를 수 있도록 유효성 검사
$('.next_btn').click(function (e) { //next_btn눌렀을 때 문항이 선택되었는지 아닌지 찾음
let divs=$(this).parent().prev().children();
let inputs=divs.find('input:checked') // 이전 단계에서 선택된 체크박스 입력란을 찾는 것
if (inputs.length<1){
alert('문항이 선택되지않았습니다.')
return false;
}
e.preventDrfault(); //버튼 클릭시 발생할 수 있는 기본 동작을 중단
scrollDown();
});divs 배열에서 체크된 input 태그를 찾은 후 변수 inputs 에 저장
$('#form').submit(function (e) { //form 전체의 문항이 선택되었는지 아닌지 검색
let radios = $('input[type=radio]:checked'); //체크된 모든 input 태그를 radios 라는 변수에 저장하고 그 변수의 길이가 3보다 작을 경우 경고창을 띄우도록
if (radios.length < 3) {
alert("문항이 선택되지 않았습니다.");
return false;
}
return true;
});체크된 모든 input 태그를 radios 라는 변수에 저장하고 그 변수의 길이가 3보다 작을 경우 경고창을 띄우도록
<result페이지>
HTML
이 이미지로부터 리뉴얼 돼서 div 개수는 다르지만 큰 틀은 같음
이 이미지는 section>div*4
내가 만드려는 페이지는 section>div*6
css
하나의 큰 틀(section) 중앙 정렬하고 싶을 때
#main_contents {
display: flex;
justify-content: center;
width: 100%;
height: 100px;
margin-top: 100px;
}요소가 여러개있는데 중앙 정렬하고 싶을 때
.result{
display:flex;
flex-direction:column;
align-items:center;
}
이미지가 부모의 넓이 따라가도록 지정 -> 100%
이런식으로 테두리 그려주기 위해 border-top, border-bottom 속성 주기
JS
* html 요소를 js로 가져와서 사용할 때:document.getElement() / document.querySelector
* js에서 html 요소를 만들 때: document.createElement()
-> 이를 html에 적용시키려면 document.적용시킬위치(head, body 등).appendchild() 사용하면 됨
-> appenchild() 는 HTML의 적용시킬위치의 가장 뒤에 위치시키게 해줌
<"URL 복사하기" 버튼을 클릭하면 현재 url이 클립보드에 복사되는 기능>
1. url 이라는 변수를 생성하여 현재 url을 저장2. input태그 임의로 생성( let tmp = document.createElement('input');)
3.input 태그의 value에 url 삽입
4. input태그를 .select()로 선택 후 url이 들어 있는 value 값 복사
5. 복사되면 임시로 만든 tmp 제거
function copyUrl() {
let tmp = document.createElement('input')
let url = window.location.href;
document.body.appendChild(tmp);
tmp.value = url;
tmp.select();
document.execCommand("copy");
document.bodt.removeChild(tmp);
alert("URL이 복사 되었습니다");
}
* 오류해결 사례 : result.css에서 %,px 헷갈려서 잘못 써서 height:100%를 height:100px로 썼다가 두 개의 큰 div들끼리서로 영역이 겹치는 문제 발생했었음!