[Let's TIL✍️] 코딩 18 : 1 Week _ 게시판 만들기

드디어 기다리던 패스트 캠퍼스 개강 👀

​

1주차 _ 게시판 만들어 보기

 

비주얼 스튜디오 코드 APP 활용

배울 언어 : HTML, CSS, Java Script

: 이들은 각각 웹페이지를 구성하는 뼈대, 꾸미기, 움직임(동적) 이라 할 수 있다.

 

01. 개발환경 구성

 

1) 먼저 비주얼 스튜디오 코드를 설치한다.

- 이때 '한국어 팩'을 깔고 재시작을 하면 한국어로 구동된다.

- 새 파일을 만들때는 왼쪽 <탐색기>를 사용한다.

- 이후에 html, head, body 기본 태그를 작성하는 실습으로 이어진다. 

 

 

2) table 태그와 tr, td를 이용해 행과 셀을 만들어 보기.

- CSS 없이 html 만으로 나름 '표처럼 나오게' 만들 수 있다.

 

 

3) CSS 테이블에 스타일 적용 후, width 하고 500px ; 

이때 끝에 세미콜론 꼭 붙여주자!

 

 

TIP🤖 Class

- class를 쓸때는 my-table 앞에 .을 붙여줘야 인식한다는 것도 명심한다.

 

TIP🤖 RGB코드 

- RGB 코드에서, 000000 중 앞 두자리는 Red 중간 두자리는 Green 끝 두자리는 Blue 이다.

(이외에도 다양한 표현방식이 있다.)

 

 

4) CSS 태그 배우기

- padding, margin 의 경우 여백이라는 의미이며 각각 내부, 외부 여백이다.

- 이때 이들은 4개의 값을 지정하여 위에서부터 시계방향 순서로 여백을 각각 지정해줄 수도 있다.

 

TIP🤖 CSS 태그

- padding = 내부 여백 (td 안에 지정해서 여백 주기)

- text - center 을 이용하면 text-align, 즉 배열을 해주게 된다. 

 

5) 기본 태그

- Head에는 리소스 (CSS, Java Script) 가 들어가고, Body 부분에는 내용이 들어가게 된다. 

 

---

 

02. 부트스트랩 이용하기

 

1) 네이버에 Bootstrap (부트스트랩)을 검색해서 접속한다.

 

- 부트스트랩을 이용해서 CSS와 Java Script 를 넣고, 버튼을 만들어보는 실습을 할 것이다.

 

- 방법은 부트스트랩에서 Copy를 한 후,

비주얼 스튜디오 코드에 붙여넣기하는 방식으로 이뤄진다. 

 

 

2) 위 사진에서 html과 css가 혼재되어서 보기 불편하므로,

- css 파일을 만들어서 관리하기 위해 크롭한다 (흰색 부분)

- 동그라미 모양이 옆에 뜨면 저장이 안된 것이므로, 늘 ctrl + s 를 눌러 저장하자.

 

TIP🤖 파일의 경로 

- 파일의 경로를 표현할 시, 현재 디렉토리를 의미하는 . 과 / 를 포함하여 작성한다. 

./를 꼭 같이 포함해서 작성하자

 

 

TIP🤖 태그와 띄어쓰기

- 각 속성은 띄어쓰기를 하고 있으므로,

새로운 걸 추가할때도 띄어쓰기가 필요!

 

 

3) 실습완료! 

- html과 css를 이용한, 게시판 만들기 (+ 부트스트랩을 이용한)

 

 

---

첫 강의 소감 ​✍️

​

기다리고 기대한 만큼 첫 강의를 좀 일찍 들었다.

그런데 솔직하게, 너무 좋아서 놀랬다.

​

이전에 들은 강의들은 두서없거나, 혹은 수준의 차이가 많이나서

따라가면서 이해가 안되거나 or 지금 뭘 하고 있는지 회고하기 힘들었는데,

​

첫 강의를 통해서 '네이버'를 예시로 들어서 이 페이지를 구성하는 언어들 (html, css, java script)에 대한 설명을 듣고,

그 이후에 코드를 따라해보는 실습을 하니

머리에도 잘 남고 따라가기가 수월했다.

​

특히 강사님이 진짜 초보 대하듯이 알려주셔서 너무 좋았다. (비전공자, 초보자에게 탁월한 강의)

나머지를 또 듣고 작성하러 와야지 💪