[HTML/CSS] 컴알못의 도전기 1,2일차

 

 

👀 컴알못의 도전기 포스팅은 베어유의 HTML/CSS 강좌를 바탕으로 제작되었습니다.

 

 

 

 

 

 

 

 

---

 

 

 

1, 2일차는 웹,  HTML, CSS에 대한 기본 개념과 개발에 필요한 환경 설정 방법, Visual Studio Code에서 HTML 페이지로 결과물 출력하기를 배웠다.  강의에서는 구글 크롬을 기반으로 해서, 모든 결과물은 이곳에서 확인할 수 있다.

 

 

개발 설정을 위한 과정

 

1. 크롬에서 vs code 검색

2.  해당 홈페이지에서 프로그램 다운로드

 

3.  처음 설치시 모든 설정은 '영문', '한국어' 설정으로 바꾸기 위해 extension에서 'Korean' 검색 후 설치

 

4.  바탕화면에서 새 폴더명은 web.

 

5.  Visual Studio Code 재 실행 후, 탐색기-폴더 열기-web, 파일 이름 index.html로 지정

 

6. web 파일-보기-파일 확장명을 체크해줘야 index.html로 파일명이 표기됨

 

. 을 기준으로 좌측은 파일 이름, 우측은 확장자 

windows에서는 파일이름만 표기되도록 설정, 추가적으로 파일 확장명도 체크해줘야

파일명과 확장자를 한눈에 파악할 수 있다.

 

 

 

 

웹페이지에 출력하기

 

텍스트 입력후 ctrl+s 키로 저장하지 않으면 아래와 같이 하얀 원이 생긴다. 저장 후 실행하는 것이 필요하다.

 

 

 

 

📌 웹 페이지에 구현을 위해 '태그' 필요

 

 

• P 태그: 줄 바꿈 가능, 문단 만들때 사용

 

• h1 태그: 제목(h1~h6; 크기 변화)