always_here

지식을 공유하고 함께 성장하는 엔지니어 as_always 입니다

AS_ALWAYS
728x90

웹(Web) 11

display/position/background

margin은 border를 기준으로 바깥 여백이고, padding은 border를 기준으로 안쪽 여백을 의미한다. top, right, bottom, left 순으로 작성 태그는 display 속성의 block 값을 가지고 있다. display:block -> block은 무조건 한 줄을 차지한다. display:inline -> width/height 적용불가 -> margin/padding-top/bottom 적용 불가 -> line-height 원하는대로 적용 불가 display:inline-block -> inline의 단점 모두 커버 내가 정하거나 필요한 크기만큼 설정 -> 동일 라인에 여러 태그 붙일 때 사용 display:flex ->주어진 공간 안에서 크기와 위치를 자동으로 조정 inli..

웹(Web)/HTML+CSS 2021.03.16

6. 함수와 이벤트

함수를 사용하면 1. 유지보수가 쉬워진다 2. 코드의 길이가 짧아진다 3. 적절한 이름을 붙여주면 코드가 어떤 일을 하는지 한눈에 알 수 있다. 함수의 입력과 출력 입력 : 매개변수(Parameter) 인자(Argument) 출력 : 리턴(Return) 이벤트 웹 브라우저에서 일어나는 여러가지 사건 function showDetail() { // '상세 설명 보기'를 클릭했을 때 상세 설명을 보여주는 함수 document.querySelector('#desc').style.display = "block"; // 상세 설명 부분을 화면에 표시 document.querySelector('#open').style.display = "none"; // '상세 설명 보기' 단추를 화면에서 감춤 } function..

4. 세션 선택

4. 세션 선택 CSS :: as_always (tistory.com) 4. 세션 선택 CSS body { background-color:#0c3268; color:rgb(243, 243, 243); } p { margin-top:80px; font-size:2em; font-weight:700; text-align: center; tex.. always-here.tistory.com DOCTYPE html> 세션 선택 var session = prompt("관심 세션을 선택해 주세요. 1-마케팅, 2-개발, 3-디자인", "1"); switch(session){ case "1":document.write("마케팅 세션은 201호 에서 진행됩니다."); break; case "2":document.wri..

3. 3의배수 확인

DOCTYPE html> 3의 배수인지 확인 var userNumber = prompt("숫자를 입력하세요."); var displayArea = document.querySelector('#result'); if(userNumber != null) { // '취소' 버튼을 클릭하지 않았다면 if (userNumber % 3 === 0) { displayArea.innerHTML = userNumber + "은 3의 배수입니다."; } else { displayArea.innerHTML = userNumber + "은 3의 배수가 아닙니다."; } } else { // '취소' 버튼을 클릭했다면 alert("입력이 취소됐습니다."); }

2. 나이계산하기

2. 나이계산하기 CSS :: as_always (tistory.com) 2. 나이계산하기 CSS body { text-align:center; } .btn { margin-top:50px; font-weight: 400; .. always-here.tistory.com DOCTYPE html> 나이 계산하기 나이 계산하기 (결과 값 표시) function calc() { var currentYear = 2019; var birthYear = prompt("태어난 연도를 입력하세요.","YYYY");; var age; age = currentYear - birthYear + 1; document.querySelector("#result").innerHTML = "당신의 나이는 " + age + "세입니다..

728x90