- 홈페이지의 정보와 성격인 독타입(Doctype)과 메타태그(Meta tag)를 시작한 후 (html 게시글1번 참고)
- 다양한 기능들을 활용할 수 있는 필수소스인 script와 css를 플러그인화 시키는 타입으로 연결 함으로서 최종적으로 홈페이지의 제작 준비가 끝났음을 선언할 수 있습니다.
우주에서 우주선 또는 인공위성들이 결합하는 것을 도킹이라고 부르는데, 광할한 웹에서 홈페이지 제작을 위해 명령어를 담은 페이지들이 마치 결합하는듯 장착되어 홈페이지를 제작하게 되는 모습을 띄는바 html docking이라 블로그에선 새롭게 명명합니다.
연결은
<head>
..
..
</head>사이에 입력하는 것으로 시작되며, 각종 "홈페이지를 사용할 수 있는 명령어를 담은 장치들이 머리에 장착된다"고 이해하면 간단하고 쉽습니다.
그 중 그 언어는 두가지 타입으로 분류되는데 ,
하나는 홈페이지를 이쁘고 가독성 좋게 만들어주는 인테리어 타입의 CSS
두번째는 홈페이지의 동작과 기능을 구성하여 정지된 홈페이지를 움직여주는 기능 타입의 SCRIPT 두 가지로 나뉩니다.
물론 프론트 웹 퍼블리싱 기준입니다.
SCRIPT
스크립트를 삽입하는것은 두가지 방법으로 나뉠 수 있습니다.
<head>
<script src="jquery-3.3.1.min.js"></script>
</head>▲이와 같이 script src로 해당경로를 입력해주거나
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>▲또는 인터넷서버상에 저장되어 있는 CDN(컨텐츠 전송 네트워크)을 통해 입력이 가능합니다.
※스크립트는 사이의 맨 끝자락에 위치시키는걸 추천드립니다. 이와 같은 이유는 따로 코멘트 정리하겠습니다. 하지만 사이에 입력해도 무난하게 적용됩니다.
CSS
CSS를 적용하는 방법은 총3가지로 나뉘어 있습니다.
- 외부스타일시트로 외부에서 에 삽입한다.
- 내부스타일시트로 직접 에 작성한다.
- 인라인방식으로 코드내에 삽입한다.
이와같은 3가지 방식으로 이루어져있으며, 이번 포스팅은 head섹션 꾸미기에 초점이 맞추어져 있어, 3번 인라인방식은 html 마크업시간에 따로 설명 드리도록 하겠습니다.
1. 외부 스타일 시트
.css 확장자명을 가진 파일로 html과 같이 이루어져 있는것이 특징입니다.
html이 기초 시공 및 공사라면 css는 인테리어 부분을 담당합니다.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>▲위와 같은 형태로 입력을 하여 외부 스타일시트를 불러옵니다. 순서는 바뀌어도 상관이없어 보기편하게 작업할때 href부분과 rel부분을 바꾸어 표기하는편 입니다.
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}▲ mystyle.css 이런식으로 외부시트에 css를 작성해서 연결을 합니다.
2. 내부 스타일 시트
직접 사이에 코드를 입력하는 방식으로 지정한 페이지에 독특한 css처리를 하기위해 사용하는 방식입니다만, 코드가 많이 지저분해지고 페이지가 많아질 수록 관리하기가 힘들기 때문에, 외부스타일시트의 아이디와 클래스할당으로 처리를 하는편이 좋습니다.
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>▲ 이와같이 head사이에 style을 넣어 적용하는 법입니다.
그럼 여기서 궁금한 점이 있습니다.
html 상에서 h1이라는 제목 태그를 기준으로 css가 외부,내부,인라인 할것없이 동일요소가 많이 지정되었다면, 어느것을 먼저 보여주게 될까요??
w3c는 이와같은 정의를 내립니다.
- 인라인 태그의 스타일을 먼저 보여줍니다.
- 부분의 외부,내부스타일 요소
- 브라우저의 기본속성이와같은 점에서 찾아볼 수 있는것은 직접적인 코드수정을 최우선으로 적용시킨다는 점 입니다.
본문 출처: https://www.w3schools.com
'Design > 퍼블리싱 지식창고' 카테고리의 다른 글
| 홈페이지 이미지 요소와 속성 (0) | 2022.12.13 |
|---|---|
| 홈페이지 엘리먼트 요소들 (Element) (0) | 2022.12.13 |
| 홈페이지 독타입과 메타태그선언 (DOCTYPE,METATAG) (0) | 2022.12.13 |
| 반응형 홈페이지 미디어 쿼리 기본 설명 (@media) (0) | 2022.12.09 |
| 홈페이지 레이아웃 제어와 영역 분배하기 (column) (0) | 2022.12.09 |
