고정 헤더 영역
상세 컨텐츠
본문
반응형
후 코엑스에서 하루종일 서있었더니 몸이 나른하다.
오늘 룸메분이 낼온다고 하신당 그래서 오늘도 혼자 ㅎㅎ
서울 온김에 친한오빠한테 밥 얻어(아니 뜯어..)먹고 술좀 마셨더니 알딸딸,,
술먹고 이걸 해냅니다,,제가,,!!
오늘은 코딩의 아주아주 기본적인 걸 했다.
친절하고 천천히 해주셔서 나같은 코찐이들한텐 너무 좋았다.
비쥬얼 스튜디오도 넘 좋은 것 같다!
비쥬얼 스튜디오(VS code)
#설치방법
: vs code 주소 들어가서 그냥 다운 받으면 된다.
* 상태바 : 보라색 선 아래에 , 아무것도 열려있지 않을 때 이렇게 뜸
* 항상 폴더 단위, 프로젝트의 단위로 비쥬얼 스튜디오를 한다.
#한번 해보자(아주 쉬운 파일 만들기?)
1. 바탕화면에 폴더를 만들어주고, 영어 대문자,소문자로 띄워쓰기 하짐라고 이름을 만들어준다.
2. 파일-open folder를 통해 방금 만들어준 폴더를 열어준다.
3. 그러면 상태바가 보라색에서 파란 것으로 확인 가능하다.
(하나의 프로젝트로 관리가 가능한 폴더가 만들어 진 것이다.)
#프로젝트 안에 파일들 만들기
- 사이드 바 : 파일을 생성하거나 폴더를 생성하거나 새로고침하는 기능들이 있다.
1. 파일 버튼을 눌른다.
2. 이름을 index.html로 하나 만들어준다.(대문자 특수문자 사용 안됨)
3. 그럼 파일이 만들어지면서 옆에 뭔가가 나타난다.
(그리고 바탕화면에서 폴더 들어가면 index가 새롭게 생긴 것 확인 가능!)
4.그리고 파일 하나를 더 만든다.
5. main.css라는 이름을 만들어준다.
6. 오른쪽에 뜨고 파일 안에 main.css가 생긴 것을 볼 수 있다.
7. 123이라는 폴더를 만들면 폴더도 생성 가능하다.
[왼쪽에서 파일과 폴더를 만들 수 있다.]
#비쥬얼 스튜디오 한글화 시켜버리기
1.왼쪽에 아이콘에서 instance를 클릭해준다.
2. 검색창에 korean이라고 쳐본다.
3. 바로 밑에 한국어라고 마이크로소프트 붙혀있는거 클릭하고 설치한다.
4. 설치되면 restart을 눌러서 재부팅을 해준다.
+) 취소할려면 다시 똑같이 들어가서 제거 하면 된다.
#실제로 출력해본다.
1. index. html을 눌른다.
2. '!'를 입력하고 탭키를 눌러본다.
3. <body> /<body> 의 중간에 h1을 쓰고 탭키를 눌른다.
4. h1사이에다가 원하는 문구를 써서 작성한다.
5. 그 다음에 main.css를 열어서 h1을 연다.
6. 중괄호를 열고 color을 입력하고 원하는 색을 입력하고 ;를 넣어준다.
*동그라미가 우측 상단바에 뜨면 파일이 수정되었꼬 저장되지 않음을 의맣나다.
->컨트롤 s를 눌러서 저장을 하면 개별적인 파일들이 저장이된다,
파일에 모두저장이란거 클릭해서 저장하기
7. 다시 아이콘 왼쪽에 instance를 들어가서 live server를 입력한다.
8. 설치하고 프로젝트 구조를 열어준다.
9. index로 들어가고 오른쪽 마우스키를 눌러서 open with live Server를 눌러준다.
(**index에서만 열린다, html은 안열립니다)
* open with live server는 내 컴퓨터에 서버를 하나 만들어서 내가 만든 프로젝트를 오픈해 주는 것이다.
10. (색깔을 바꾸는 법) index.html 파일로 들어간다.
11. title 아래에 'link'를 작성하고 탭키를 누른다.
12. 그 중간에 따옴표에다가 "./main.css"를 입력해준다.
사랑스러운 나의 예제들
이건 한번 만들어 본 것
(사실 만든건 아니고,,탭 누르니까 자동으로 따따딱 뜨더라구요..?)
그리고 내가 요즘 빠진 드라마의 명대사,,ㅠ_ㅠ
달의연인 사랑해요 하........
이렇게 딱 뜬다
근데 마이크로소프트 엣지로 뜨는건 좀 불..편
크롬이 더 좋다
왜냠 회사에서 엣지 열렸다가 재부팅의 무한루트 된 경험이 있어서 ^^
파일도 이렇게 예쁘게 만들어져있다.
이정도 코딩이면 할만하고 좀 재밌는데
이제 어려운거 들어가면 아마 빠이...? 이겠지...??
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
반응형
'UXUI DESIGN > UXUI DESIGN - STUDY' 카테고리의 다른 글
| [UI/UX]패스트캠퍼스 챌린지 27일차 - 코딩 표기법 (0) | 2022.02.19 |
|---|---|
| [UI/UX]패스트캠퍼스 챌린지 26일차 - 코딩 용어정리 (0) | 2022.02.18 |
| [UI/UX]패스트캠퍼스 챌린지 24일차 - 코딩의 시작..! (0) | 2022.02.16 |
| [UI/UX]패스트캠퍼스 챌린지 23일차 - 피그마 컴포넌트 정리 (0) | 2022.02.15 |
| [UI/UX]패스트캠퍼스 챌린지 22일차 - 효과적인 실무 에셋 관리법 (0) | 2022.02.14 |
