▶ 제작에 필요한 웹 기술 정리
웹 페이지를 만드는 데에 있어 제작 순서도 중요하지만 본인이 원하는 것을 보여주기 위해서는 필요한 웹 기술 있어야 한다고 생각합니다. 따라서 저는 몇 가지 홈페이지 제작에 필요한 웹 기술에 대하 간략히 정리를 하고자 합니다.
◈ 제작에 필요한 웹 기술 바로 알기
1. MediaQuery를 이용한 제작기술
MediaQuery란 화면해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3 속성을 말합니다.
예) 가로너비가 320px이상 ~ 768이하
@media screen and (min-width:320px) and (max-width:768px;) {
//실행문
}
2. Viewport 바로 알기
Viewport는 미디어쿼리랑 연결되어 같이 사용하는 것으로 모바일 기기에서 웹 화면 출력 시 해당 모바일 기기의 물리적 화면 폭을 웹 화면이 인식 할 수 있도록 하기위한 메타태그 입니다.
예) <meta name="viewport" content="width=device, intial-scale=1.0">
반응형을 제작 할 때 무조건 써야하는 태그이며 되도록 처음부터 적어주는 것이 좋습니다.
3. 웹 아이콘을 적용하기 위한 외부 CSS 링크 파일
웹 페이지를 제작 하다보면 아이콘을 많이 쓰는 경우가 있는데 그럴때 마다 일일이 작업해 나가면서 사용하면 작업하는데 시간이 많이 걸리고 지치는 경우가 있습니다. 그런 경우를 대비해 사용 할 수 있는 웹 상에서 제공하는 외부 CSS 링크 파일을 이용해 보시길 바랍니다.
예) <link href="maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
4. 웹 폰트를 적용하기 위한 사이트
웹 폰트를 사용하면 좋은 점은 직접 로컬에 다운받아 해당 폰트를 불러올 필요가 없으며 또한 웹 상에서 직접 불러오는 것이기 때문에 상대방 로컬에 없는 폰트라도 브라우저에서 폰트 깨짐 없이 볼 수 있다는 점에서 많이 사용되고 있습니다.
- 구글 영문폰트
- 구글 한글폰트
https://font.google.com/earlyaccess
5. ftp 웹 서버
웹 페이지가 브라우저에서 보여지려면 FTP접속을 해야합니다. 유료 호스팅 말고도 무료로 호스팅 해주는 사이트도 있으니 참고 하시길 바랍니다.
-닷홈 : http://dothome.co.kr
6. 웹 표준 유효성 검사
웹 페이지가 완성이 되었으면 HTML표준에 맞게 태그를 올바르게 사용하였는지 CSS스타일을 올바르게 사용했는지 등 유효성 검사를 실행합니다.
- HTML 유효성 검사
- CSS 유효성 검사
위의 웹 제작에 필요한 웹 기술을 이용하여 웹 페이지 제작에 도움이 되길 바랍니다^^!
누구나 파워지식인이 되는 그날까지, 늘보지식인
#Copyleft(C)는 저작권의 반대개념으로, "모든것을 공유한다" 는 뜻입니다#
#사진과 이미지의 일부는 퍼온것도 있음을 밝힘니다#