전체 글 (50) 썸네일형 리스트형 Javascript(1) - 자바스크립트/html에서 javascript 출력 방법/document.write()/element.innerHTML()/alert()/console.log()/confirm('메시지')/prompt('메시지') 자바스크립트를 쓰는 이유 : 웹문서를 좀더 동적으로 표현하기 위해서 그리고 웹브라우저에서 실행되니 서버의 과부하를 막을수 있다. 또 HTML 문서내에 포함돼 사용하기 편하고 배우기 쉽다. 속도가 빠르다는 장점이있다. 전체 코드 in-out.html 출력 방법 1. html 문서에 출력 - document.write() 출력 2. html 요소에 출력 - element.innerHTML() 출력 버튼 누르면 여기에 출력됨 3. 대화상자(경고창)에 출력 - alert() 출력 4. 개발자 도구의 콘솔에 출력 - console.log() 출력 입력 방법 1. 확인/취소 대화상자로 입력 - confirm('메시지') 입력 2. 입력(문자열) 대화상자로 입력 - prompt('메시지') 입력 입력이 여기에 출력됨.. HTML(13) - 변환효과/전환 속도 함수/줄간격/요소의 전환 효과/폰트/글꼴/그라디언트 효과/그라데이션 transform-2d.html 1번 박스 2번 박스 3번 박스 4번 박스 5번 박스 timing-function linear ease ease-in ease-out ease-in-out line-height.html 줄간격 조절 line-height : normal 기본 줄간격을 사용한 단락입니다. 대부분의 브라우저 간격은 글자 크기의 110%에서 120%정도 입니다. line-height : 1.6(권장 줄간격) 기본 줄간격을 사용한 단락입니다. 이 단락은 기본 줄간격에서 글자 크기의 160%로 지정. line-height : 80% 기본 줄간격을 사용한 단락입니다. 이 단락은 기본 줄간격에서 글자 크기의 80%로 지정. line-height : 200% 기본 줄간격을 사용한 단락입니다. 이 단락은 .. HTML(12) - 요소 배치/관계를 고려한 배치/float 제거/overflow 발생/넘치는 요소 다 출력/요소의 중첩 처리/표 너비 설정/표 테두리 처리/표 꾸미기/투명도 조절/가시성/보이는 형식의 변환/배경 이미.. position.html 정적 위치(static) 정적 위치 설정 적용1 정적 위치 설정 적용 2 상대 위치 설정 적용 절대 위치 설정 적용 고정 위치 설정 적용 float.html float 속성은 웹 문서의 레이아웃을 설계하는 과정에서 많이 사용하는 속성입니다 float 속성은 특정 요소를 떠 있게 해줍니다. 여기서 '떠 있다'라는 말의 의미는 특정 요소가 기본 레이아웃에서 벗어나 웹 문서의 왼쪽이나 오른쪽에 이동하는 것을 말합니다. float 속성은 복잡한 형태의 레이아웃을 구성하는 데 필요한 핵심 속성으로, 특정 요소가 주변 요소와 자연스럽게 어울리도록 해줍니다. 주의할 점은 float 속성을 사용할 때 요소의 위치가 고정되면 안 되기 때문에 position 속성의 absolute를 사용하면 안 .. HTML(11) - 문자 선택자/전후 문자 선택자/링크 선택자/박스 모델/내용 관련 속성/안쪽 여백/바깐여백과 테두리/그림자 효과 letter-selection01.html Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam gravida nunc lorem, sit amet finibus tortor viverra quis. Nunc lectus eros, scelerisque ut molestie nec, facilisis eget diam. Vestibulum eget diam porttitor, rhoncus nisi ac, condimentum enim. Cras aliquet ultricies volutpat. Nulla vitae tellus dui. Maecenas vel nibh sit amet neque luctus tincidun.. HTML(10) - CSS 기초/css 위치에 따른 스타일 적용/기본 선택자/속성 선택자/계층 관련 선택자/가상 선택자(반응 선택자) basic.html Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam gravida nunc lorem, sit amet finibus tortor viverra quis. Nunc lectus eros, scelerisque ut molestie nec, facilisis eget diam. Vestibulum eget diam porttitor, rhoncus nisi ac, condimentum enim. Cras aliquet ultricies volutpat. Nulla vitae tellus dui. Maecenas vel nibh sit amet neque luctus tincidunt. Vestibulum.. HTML(9) - 다양한 입력 양식/input 태그/non input 태그 1. Input 태그 input_tag.html 나도 버튼 로그인 영역 ID : PW : 체크박스와 라디오버튼 자전거가 있습니다 자동차가 있습니다 요트가 있습니다 남성 여성 학생 연구원 숨김 속성 보이는 정보 : 안보이는 정보 : 파일 입력 파일 선택 : 색상 선택 좋아하는 색상을 선택하세요 : 날짜관련 오늘 : 프로젝트 시작 : 년-달 단위로 입력 : 주단위로 입력 : 시간 관련 시간 : 생일(년도, 월, 일, 시간) 입력 : 기타 입력 숫자 입력 : 범위 설정 : 이메일 입력 : 홈페이지 : comp.jsp favcolor.jsp 2. Non Input 태그 글쓰기 선택 목록 관심 주제를 한 가지 선택하시오. HTML5 CSS3 Javascript jQuery 그룹 선택 항목 전공분야 선택 : Sof.. HTML(9) - 입력 양식/<form> 태그 회원가입 입력 양식 form을 입력 후 submit 하면 action에 연결된 jsp로 넘어가서 처리 진행 아이디 : 비밀번호 : jsp 에서는 java 형식의 코딩이 허용되기 때문에 자바 언어로 데이터 처리 후 html 언어에 맞게 출력문 작성한다. HTML(8) - 블록과 인라인/공간 분할 예 Lorem Ipsum 이전 1 2 3 4 5 ··· 7 다음
