HTML
Visual Studio Code 를 사용한 HTML 첫걸음.
lily_y
2023. 7. 24. 21:30
HTML의 선행학습에 대한 내용이다.
1. 구글에 "visual studio code" 를 검색 후 다운로드
2. 안드로이드용 설치 -> C드라이브 설치시엔 방화벽을 잠시 꺼둬야 설치가 된다!
(D / E 드라이브 소유시 방화벽 관계없이 위치 설정 후 그냥 다운로드)
3. 첫 사용시엔 라이트 모드로 사용할 것을 권장
4. 해당 설치한 드라이브 (C or D,E) 에 '새로만들기-새폴더' 를 만든 뒤 꼭! 영어로 폴더명을 작성한 후,
vscode에서 Open Folder 의 버튼을 선택하고 새로 만든 폴더를 클릭만! 한 뒤 폴더선택버튼 누르기
5. EXTENSIONS 카테고리에서 해당사진의 5개의 항목을 검색 후 instal 할 것
이로써 기본 환경 구성은 완료!
첫 번째로 연습한 작업은,
| <html> | |
| <!-- | |
| html 태그를 가장 먼저 적용합니다. | |
| --> | |
| <head> | |
| <meta scheme="ko"> | |
| <!--head는 언어셋이랑 각종 파일을 로드하는 공간 | |
| meta 태그는 언어셋을 셋팅하는 태그 이며 | |
| ko : 한국어 | |
| en : 영어 | |
| jp : 일본어 | |
| 태그 : 모든 html 코드를 말합니다. | |
| 마크업 : 열고 닫는 기능이 있는 태그를 말합니다. | |
| 씨멘틱마크업 : HTML코드 중 한번만 사용하며, 해당 태그를 어떤 용도로 사용했는 지 알 수 있는 태그를 말함 | |
| --> | |
| </head> |
|
| <body> | |
| <!--body : 이미지, 동영상, 오브젝트(버튼,도형) 등 표현하는 웹페이지에 표현하는 공간을 말합니다. | |
| u : 밑줄표현 | |
| i : 기울기 | |
| b : 굵은체 | |
| <br> : 엔터 | |
| s : 취소선 , 이전의 strike가 s가 됨 | |
| --> | |
| <u>홍길동님</u> <i> 환영 </i> 합니다. <br> | |
| 포인트는 <b> 7000 </b> 점 있습니다. <br> | |
| 장바구니에 <s> 총 3개의 상품이 있습니다. </s> | |
| </body> | |
| </html> |
이다.
이에 결과물은,
두 번째 작업은,
| <!--html 태그에 제작언어셋으로 변경되었으며 lang 라는 속성을 사용--> <html lang = "ko"> |
|
| <head> | |
| <meta charset="utf-8"> |
|
| <!--서버에서 사용하는 언어셋 기준으로 사용 | |
| eud-kr : 한국어를 기반으로 제작 | |
| utf-8 : 모든 언어를 *인코딩하여 출력하는 형태 | |
| ( 암호화 형태, 일반적인 유니코드) | |
| utf-16 : 16bit 암호화 | |
| utf-32 : 32bit 암호화 | |
| --> | |
| </head> |
|
| <body> | |
| <!--color 속성 : 글자색상 | |
| size 속성 : 글자 크기 1~7 까지 | |
| --> |
|
| <font color = "red" size = "7"> | |
| 아이디를 <u>입력</u>하세요 <br> | |
| <i> 패스워드를 입력하세요 </i> | |
| </font> | |
| <br><br> | |
| <!--a태그 : 링크를 적용하여 페이지를 이동 시킬때 사용 | |
| 상위태그 : 사용자가 입력하는 내용이나, 게시글을 출력할 때 나오는 태그 | |
| 하위태그 : 폰트색상, 폰트체, 사이즈, 두께 등 | |
| --> |
|
| <a href="https://www.naver.com/">네이버로 이동</a> | |
| <br><br><br> |
|
| <a href="https://nate.com/"> | |
| <font color ="red" size = "5"> | |
| 네이트로 이동하기 | |
| </font> | |
| </a> | |
| </body> | |
| </html> |
두 번째의 결과물은,