웹디자인기능사 실기 공부 _ HTML 기본구문, 에밋기능 사용법, target속성값, float, overflow
HTML 이론, 실습
- 웹디자인 기능사 준비
: 바탕화면에 파일 만들기 (수험번호파일 - images, script, css , index.html)
: 수험번호 파일 안에 메인페이지인 index.html
: css 파일 안에 style.css
: script 파일 안에 script.js
: images 파일 안에 각종 이미지들
- Visual Studio Code (이하 VSCode) 에서 html 기본 구문 자동완성(에밋기능) 사용법
: ! + Enter 입력
- html 기본 구문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="urf-8">
<script src="javascript/jquery-1.12.3.js" type="text/javascript"></script>
<script src="javascript/script.js" defer="defer" type="text/javascript"></script>
<link rel="stylesheet" href="css/style.css" type="text/css">
<title>TITLE</title>
</head>
<body>
</body>
- jquery-1.12.3 은 웹디자인기능사 시험에서 기본 제공하는 파일
- defer="defer"
: html 파일을 모두 실행한 후 script 파일을 실행하게 하는 명령어
- <ARTICLE>, <ASIDE>는 기사나 광고가 들어가는 태그이기 때문에 제목태그인 <Hn>이 꼭 들어가야 오류가 나지 않고 실행된다.
- <A> 태그의 속성 target 값과 여는 창
_self : 현재의 문서가 있는 상태에서 같은 장소에 창을 열어줌
_parent : 브라우저에서 현재 문서의 부모(상위) 창을 열어줌
_blank : 새로운 tab을 열어줌 / 가장 많이 사용하고 블랭크 속성만 새창으로 뜸
_top: 현재 사이트의 최상위 레벨인 창을 링크함
- class는 여러개를 한 번에 가질 수 있고, id는 한 번에 한 개의 값만 가질 수 있음
웹디자인기능사 시험에서는 모다레이어 팝업을 열 때만 id를 사용하고 나머지는 class를 사용함.
- vscode에서 div#A + Enter 하면 <div id="A">로 자동완성 됨
- float : 박스를 어느쪽으로 띄워서 배치할 지 지정하는 속성
left : 박스를 왼쪽으로 띄워서 배치
right : 박스를 오른쪽으로 띄워서 배치
none : 기본값
ex) float:left;
- overflow:hidden
overflow 속성은 내부의 요소가 부모의 범위를 벗어날 대 지정하는 속성.(즉, 내가 지정한 박스에서 내용이 넘칠 때 사용)
overflow:hidden 으로 속성값을 지정하면 영역을 벗어나는 부분은 보이지 않음
overflow:hidden은 요소들이 플로트 되어 자리를 차지하고 있을 때 플로트 되지 않게 하려는 요소를 위해 적용
부모 요소에 overflow:hidden 속성 지정시 플로트 속성을 부여하지 않은 요소들은 다음 줄로 내려가서 나타남
HTML/CSS _ 구성요소, 기본구성
HTML 1. 구성요소 1-1. 요소 (Elements 엘리먼트) - HTML에서 시작태그와 종료태그로 이뤄진 모든 명령어를 의미한다. - HTML에서는 요소와 태그를 따로 나누지 않지만 CSS나 JAVA에서는 가장 중요한 용어이
wise-o.tistory.com