Chapter 01. 웹브라우저와 편집기, 기본코딩
실제 스마트문화앱(모바일 웹 앱)을 제작하기 위한 기초 첫시간으로 웹분야1위 도서로 알려진 " HTML5+CSS3 웹표준의 정석" 을 줌을 통한 쌍방향 학습의 부교재로 선정하여 쌍방향학습하는 내용을 공개합니다. 코딩을 처음하는 분들에게 추천하며 교재를 참고하되, 교재없이 독학도 영상을 참고하면 가능합니다.
Chapter 02. HTML기초와 Head문에 삽입되는 것들
HTML문서는 본문에 대부분 보여지는 내용을 Body태그내에 구성한다.
HTML을 처음 배우는 분들은 Head문에는 title이 웹문서를 브라우저로 보는 타이틀만 보여지는 것으로 알 수 있는데, Head문에도 상당히 두뇌같은 복잡한 태그들이 들어가서 궁금해 하는 분들을 위해 정리해본다.
<!DOCTYPE html> <!-- html5문서라는 독립선언문 -->
<html lang="ko"> <!-- 한국어로 표현된 문서의미 -->
<head>
<!-- 브라우저 상단의 탭에 보여지는 웹문서제목 -->
<title>Hello</title>
<!-- 웹문서제목앞에 위치한 파비콘 표기 -->
<link rel="shortcut icon" type="image/x-icon" href="http://hbjeil.cafe24.com/fa.ico" />
<!-- 영어가 아닌 언어용 유니코드 Unicode Transformation Format -->
<meta charset="utf-8">
<!-- 익스플로러와 호환성 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 반응형웹을 위해 뷰포트를 디바이스크기로 지정해 100%인식 -->
<meta name="viewport" content="width=divice-width, initial-scale=1.0">
<!-- 검색엔진에서 키워드 검색용 메타태그 // 검색시 적용 -->
<meta name="keywords" content="키워드,콤마로구분">
<meta name="description" content="해당사이트의 설명 콤마없이">
<meta name="author" content="소유자">
<!-- 최초 페이스북에 의해 생성된 오픈그래프 메타태그 // 카톡,페북 URL공개시 적용 -->
<meta property="og:url" content="http://csclean.kr/">
<meta property="og:type" content="website">
<meta property="og:title" content="주식회사 청솔크린">
<meta property="og:image" content="http://csclean.kr/og_csclean_kr.jpg">
<meta property="og:description" content="공공시설물/신축/아파트/상업용 건물청소">
<!-- 헤드문은 메타태그 외에도 자바스크립트, CSS등이 삽입된다. -->
<style type="text/css">
/*태그외 스타일의 주석으로 문서스타일을 설명함*/
body{margin:0 300px;}
</style>
</head>
저 태그들은 다 외면서 하는 사람 없어요 필요한 부분 구글 검색해서 복/붙해서 일부만 수정하는 경우가 대부분이니 위 태그들을 종합해서 사용하면 도움이 될 것입니다.
Chapter 03. 글씨와 외부 이미지
기본적인 웹문서를 새문서를 생성하고 h1, p, img태그를 통한 간단한 html문서를 만들어 봅니다. 수업자료가 없는 분들은 위 라이언위 html.zip파일을 다운받아서 따라 해보세요
목록(List)을 표현하는 태그들 ul, ol, dl
보통 특정주제에 종류들을 나열하는 리스트(List) 라고하는 목록을 표현하는 태그들에는 순서없는(Unordered List) <ul>과 순서에 맞춘(Ordered List) <ol> 태그가 있어서 일정한 기호와 번호를 기재하는 리스트로 하부에 표현이된다.
<ul>
<li></li>
<li></li>
</ul>
그외에 커피샵처럼 기호없이 용어 및 설명이 포함된 설명 목록을 표현하는 <dl>
'UI UX(Web)' 카테고리의 다른 글
| HTML+CSS 중급 - 표(table) 태그와 스타일 (0) | 2021.10.06 |
|---|---|
| W3C vs Fontawesome (0) | 2021.10.04 |
| 반응형웹 플러그인 - 부트스트랩과 제이쿼리 (0) | 2021.05.27 |
| 웹사이트 제작 4편 - 오픈그래프으로 사이트 알리기 (0) | 2021.05.21 |
| 웹사이트 제작 3편 - 네비 및 내용구성 (0) | 2021.05.20 |
