에이치의 모바일 앱 개발
HTML + CSS 본문
기능 목록
1. HTML
html 은 문서의 내용을 나타냅니다.
<!DOCTYPE html> : 코드문서 타입이 html(5버전) 이란 것을 의미 합니다.
<html> : html 문법을 모아 적습니다.
<head> : html 에 코드에 대한 정의를 넣습니다. <meta charset="utf-8 /> : 한글 설정
<body> : 내용을 적습니다.
body 내 내용
1. <h1>, <h2>, <h3> . . . 는 본문의 중요도 순을 나타내는 용도로 폰트 크기 및 컬러 변경의 방식에 사용하시면 됩니다.
ex) 대단원, 소단원, 내용
ex) <a href="링크 주소" target="링크 열리게 할 정보">
target 속성 값 목록 :
1) _blank = 새로운 창에 링크 주소가 열립니다.
2) _self = 기존 창에서 링크 주소가 열립니다.
3. <ol> 목록의 순차적인 그룹화를 나타냅니다. (ordered list)
<ul> 목록의 순서없는 그룹화를 나타냅니다. (unordered list)
ex)
<ol>
<li>하나</li>
<li>둘</li>
</ol>
<ul>
<li>수학</li>
<li>사회</li>
</ul>
4. 이미지의 링크를 넣어 나타냅니다.
ex ) <img src="http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/avatars/3a/3aecb2c37653ec936a1bd553117fa0ff1c0ea752_full.jpg" alt="">
5. 모든 태크는 id 를 가질 수 있습니다.
ex ) <h1 id="special_id">특별한 아이디<h1>
6. 줄바꿈 태그 : <br />
2. 의미
html 문서를 보면 실제로 작동하는 기능은 없지만 의미를 나타내기 위해 코딩하는 것이 있습니다.
아래의 내용이 그것입니다.
1. <header> 는 메인 제목에 사용된다는 것을 의미합니다.
2. <nav> 는 웹사이트를 탐색하는데 사용된다는 것을 의미합니다.
3. <article> 은 문서의 본문에 사용된다는 것을 의미합니다.
2. CSS
html 으로 작성한 문서의 스타일 변경을 할 수 있습니다.
html 문법으로 style 지정으로 h1 {color:red} 와 같이 h1 텍스트를 빨간 색으로 변경을 할 수 있습니다.
<style>
#special_id {color:red}
</style>
위와 같이 id 태그를 준 경우 # 을 넣어줘야 합니다.
style 은 css 로 구성이 되어있습니다.
되도록이면 스타일 지정 파일인 css 확장자 파일을 별도로 생성하여 html 문서와 연동 시키는 것이 중요합니다
4. 도구
개발 시 다음과 같은 도구를 활용하여, 코딩의 유지관리와 개발 속도 향상에 도움이 될 것입니다.
노드패드, 노드플플 등 다양한 에디터편집기가 있지만, 저는 아톰이라는 에디터 편집기를 사용하였습니다.
또한 구글 크롬 웹 스토어에 올라와 있는 다양한 도구를 다운받아 활용하면 좋습니다.
저와 같은 경우 아래와 같은 도구를 사용하였습니다.
1. 아톰에서 emmet 를 다운로드 하여 사용해 소스 작업 속도를 높힙니다.
2. chrome web extension stylebot 를 사용하여 디자인을 좀 더 원활하게 사용합니다.
'Web > HTML' 카테고리의 다른 글
| 파이썬 처음 접해보다. (0) | 2018.03.28 |
|---|---|
| JavaScrip, PHP (0) | 2018.02.05 |
| 비트나비 WAMP 설치 (0) | 2017.12.31 |
| 아마존 사용 (0) | 2017.12.23 |
