다시 차근차근 웹디 공부
강의를 꾸역꾸역 따라가기 보다는 한 번 다시 훑어 보고 원리부터 꼼꼼히 알아보는 공부법을 시작하기로 했다
기본적인 html 태그 입력과 그 속에 있는 구성 코드들의 용도를 한번 볼 필요가 있다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>산업대학교</title>
<style>
</style>
</head>
<body>
<div id= "wrap">
<header id="header"></div>
<section id="banner"></section>
<section id="contents"></section>
<footer id="footer"></footer>
</div>
</body>
</html>
emmet 기능으로 느낌표 입력 후 탭키를 누르면 쉽게 작성가능 하지만 만약을 대비해 하드 코딩
직접 입력하는 습관을 길러 놔야한다 body사이에 있는 코드들은 기본적인 웹사이트의 골격을 담당하며
헤드 위에 부분을 style등 의 세부 정보들을 수출? 수입하는 역할을 한다고 보면된다
헤드 쪽은 머리를 담당해 외교를 바디 쪽은 건물의 구조물? 정도로 비유할 수 있으려나?
골격구조라 해서 바디쪽에 width 값과 height값 백그라운드 값을 주는 줄 알았지만 사실 스타일 사이에 있는
샾 이름 뒤에 가로를 써서 그안에 기입한다
<style>
#wrap {width: 1200px; height: 500px; background: #ccc;}
#banner {}
#contents {}
#footer {}
</style>
우연히 검색하다 매우 중요한 사실을 알게 됐다 타자를 칠 때 뒤의 글자가 지워지는 현상이 있다
중간에 빠진 글자를 삽입하거나 할 때 뒤의 문자가 삭제되서 뒷줄을 모두 컨트롤+x로 오려내고 붙이고를 했는데
insert키를 누르면 바로 해결이 된다
<link rel="stylesheet" herf="style.css">를 입력하고 스타일 사이에 있던 값들을
style.css로 복사해서 작업하는게 좋다
그리고 줄을 여러개 선택하고 탭키를 누르면 뒤로 가지만 앞으로 여러줄을 편하게 보내고 싶으면
줄선택후 shift + tap 키로 보낼 수 있다 방향키나 백스페이스 버튼이 아니다..
* {margin: 0; padding: 0;} 맨위에 이런식으로 써놓으면 그 아래 있는 코드들은 모두
적용된다는 뜻이다 *
헤더는 맨윗줄 섹션은 중간 그리고 푸터는 마지막 밑이다 기억해두자
그리고 각각의 줄들이 나눠지는 갯수에 따라 <div></div>의 갯수가 정해진다
신기하다 다시보니까 조금씩 이해가 가기 시작한다 :)
'디자인' 카테고리의 다른 글
| 웹 언어 HTML, CSS,java script 배워보자 (0) | 2020.11.29 |
|---|---|
| 홈페이지 만드는 방법 (0) | 2020.11.26 |
| 세로유형의 탭메뉴 디자인 (0) | 2020.11.24 |
| 웹메뉴탭 가로유형3 (0) | 2020.11.23 |
| 홈페이지 만들기 기초 4번째 시간 (0) | 2020.11.22 |