1. HTML의 기본형태
1) 기본 태그
- <html></html> : HTML 문서의 시작과 끝을 나타낸다.
- <head></head> : 웹페이지에서 보여지지 않는 것들을 설정. ex) 한국어를 지원할 것인지, 웹페이지의 제목, 작성자, 파비콘 등등 메타데이터를 지정할 때 사용.
- <body></body> : 사용자에게 보여지는 부분. 해당 웹페이지의 본문이다. 모든 내용이 이 곳에 들어간다.
2) 기본 구조
1 2 3 4 5 6 | <html> <head> </head> <body> </body> </html> | cs |
3) 간단한 실습
1 2 3 4 5 6 7 8 | <html> <head> <title>Hello!!!</title> </head> <body> 안녕하세요 </body> </html> | cs |
4) 크롬 개발자 도구
- Elements : 기본적인 구조를 볼 수 있고 직접 수정하여 변경된 화면을 바로 확인해 볼 수도 있다.
- 프론트엔드 개발할 때 맞게 짜여진 것인지 확인할 때 주로 사용한다.
2. 글과 이미지
1) 한글 설정 : utf-8
- <meta charset="utf-8">를 페이지 영역에 보여지지 않은 중요한 정보를 설정해주는 <head> 태그 안에 넣는다.
- meta 태그는 head 태그 안에 넣는데, 이 meta 태그는 여러가지 종류가 있다. 그 중에 charset라는 속성을 지닌 meta 태그를 사용하면 어떤 언어로 지정할 것인지 설정할 수 있다.
- 이와 같이 어떤 언어로 읽어야 하는지 안내해주는 것을 <인코딩>이라고 한다.
2) <br /> : 개행
- <br>태그가 필요한 이유 : 줄바꿈을 의도한 것인지 의도하지 않은 것인지 구분하기 어렵기 때문에 줄바꿈을 원할 경우에 <br> 태그를 작성해준다.
3) <p></p>
- paragraph의 약자
- 문단을 구분하기 위해서 사용하는 태그
4) <strong></strong>
- 강조하기 위해서 사용하는 태그
5) <u></u>
- underline의 약자
- 밑줄 태그
6) <h1></h1>
- heading의 약자
- 제목을 작성할 때 사용하는 태그
- h1 > h2 > h3 > h4 > h5 > h6
7) <hr />
- 구분선을 넣을 때 사용하는 태그
8) ul / ol 태그와 리스트 li 태그
- <ul> : unordered list, 순서가 없는 리스트를 나타낼 때 사용
- <ol> : ordered list, 순서가 있는 리스트를 나타낼 때 사용
- <li> : list item
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <html> <head> </head> <body> <!--순서가 없는 리스트--> <ul> <li>강아지</li> <li>고양이</li> <li>기니피그</li> </ul> <!--순서가 있는 리스트--> <ol> <li>강아지</li> <li>고양이</li> <li>기니피그</li> </ol> </body> </html> | cs |
9) 특수문자 > / &li; /
- : 띄어쓰기를 여러 번 시행할 때 사용
- &li; : <를 쓰고 싶을 때 사용
- > : >를 쓰고 싶을 때 사용
10) img 태그
- src : source의 줄임말
- 이미지의 주소를 적으면 된다.
- html 파일과 img 파일이 같은 위치에 있을 경우, <img src = "image.jpg" /> 라고만 작성하면 된다.
- 이 이미지 파일이 imgFolder라는 이름의 폴더 안에 있고, 이 imgFolder라는 폴더가 html 파일과 같은 위치에 있을 경우, <img src = "imgFolder/image.jpg" /> 로 작성해야 한다. (상대 경로)
3. Hypertext
1) a 태그와 그 속성
- anchor(닻) 의 줄임말
- 웹 문서와 또 다른 웹 문서를 연결해줌.
- <a href="url 주소"></a>
- target="_blank" : 기본적으로는 현재 페이지가 새로운 페이지로 바뀌지만, target="_blank"를 a 태그의 속성으로 지정하면 새로운 페이지가 새 창에서 열리게 된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <html> <head> </head> <body> <!--순서가 없는 리스트--> <ul> <li><a href="https://www.naver.com" target="_blank">강아지</a></li> <li>고양이</li> <li>기니피그</li> </ul> <!--순서가 있는 리스트--> <ol> <li>강아지</li> <li>고양이</li> <li>기니피그</li> </ol> </body> </html> | cs |
2) 태그의 구성과 홀 태그, 짝 태그
- tag name (태그 이름) ex) img, a
- tag attribute (태그 속성) ex) src, href
- 홀 태그 : 여는 태그만 있으면 된다. ex) <br>,<hr>, <img>
- 짝 태그 : 여는 태그와 닫는 태그가 모두 있어야 한다. ex) <p>, <li>, <h1> 등
3) 해시태그
- 한 페이지 안에서 원하는 곳으로 이동하는 기능을 말한다.
- #을 이용해서 해시태그를 할 수 있다.
- <a href="#dog">강아지</a>
- <li id="dog">강아지의 설명입니다.</li>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <html> <head> </head> <body> <!--순서가 있는 리스트--> <ol> <li><a href="#dog">강아지</a></li> <li><a href="#cat">고양이</a></li> <li><a href="#guineapig">기니피그</a></li> </ol> <ol> <li id="dog"> <h1>강아지</h1> 강아지 설명 구간 </li> <li id="cat"> <h1>고양이</h1> 고양이 설명 구간 </li> <li id="guineapig"> <h1>기니피그</h1> 기니피그 설명 구간 </li> </ol> </body> </html> | cs |
5) button 태그
- <button></button>
- ex) <a href="https://www.naver.com><button>독서</button></a> : 독서라고 적힌 버튼 태그를 하이퍼링크 태그로 감쌌기 때문에, 독서 버튼을 클릭하면 해당 url 주소로 이동하게 된다.
4. 메타 태그
1) 메타 태그
- head 태그 안에 들어갈 수 있는 태그 중 하나
- 인코딩 처럼 화면에 보여지는 내용은 아니지만 문서가 어떤 규칙을 따르고 있고 어떤 속성이 있는지 알려주기 위해서 작성
- ex) <meta charset="utf-8">
- ex) <meta name="description" content="메타 태그 알아보기!"> : 이 웹문서가 어떤 설명을 갖고 있으면 좋을지 알려주기 위한 태그
- ex) <meta name="keywords" content="메타, 태그, tag, meta"> : 어떤 정보를 주로 담고 있는지 키워드를 적어주기 위한 태그
- ex) <meta name="author" content="홍길동"> : 작성자가 누구인지 알려주기 위한 태그
- ex) <meta name="viewport" content="width=device-width, initial-scale=1.0"> : 접속하는 기기마다 어떻게 보여주면 좋을지 알려주기 위한 태그
2) title 태그
- head 태그 안에 들어갈 수 있는 태그 중 하나
- 웹 문서의 제목을 설정하기 위한 태그
3) favicon
- 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다.
- https://www.favicon-generator.org/ 에서 파비콘을 크기별로 만들 수가 있다.
'STUDY > Fullstack-Bootcamp' 카테고리의 다른 글
| [풀스택 부트캠프] 섹션 6. jQuery 사용하기 (0) | 2018.02.06 |
|---|---|
| [풀스택 부트캠프] 섹션 5. 자바스크립트 기본 (0) | 2018.02.03 |
| [풀스택 부트캠프] 섹션 4. 웹퍼블리싱 (0) | 2018.01.31 |
| [풀스택 부트캠프] 섹션 3. CSS 기초 (0) | 2018.01.26 |
| [풀스택 부트캠프] 섹션 1. 웹 기본 (0) | 2018.01.24 |