2021 추석 스파르타코딩클럽 이벤트 -1일차

강의 자료

https://www.notion.so/1-4b2f8f0a33c04b2d8fd1604458480a71

1일차

각종 개발 툴 설치

html, css 이해 

서버, 클라이언트, 웹의 동작 개념 이해 

 

- 우리가 보는 웹 페이지는 서버에 있던것을 그대로 보여주는 것(원본은 서버에 있다.)

- 웹 페이지는 서버에 요청을 하여 데이터를 받고, 그 데이터를 그대로 그려주기

- html은 뼈대, css 꾸미기, javascript는 동작

 

 

html 기초 

- head, body로 구성, head안에는 페이지 정보, body안에는 페이지 내용

- head 구성 요소 : meta, script, link, title 등

 

css 기초 

- 이름이 있어야 가르킬 수 있다. 

- div 이름을 지정하고, style로 지정하자

- 누구를 어떻게 꾸며주겠다는걸 명시하자. 

- 명찰을 특정 태그에 달아주자 => <div class="mytitle">  

- class로 명찰을 달아주는 것 

 

  누구를 ====>>        .mytitle { 

  어떻게 ====>>            color:red

        }

 

css 속성은 잘 찾고, 잘 가져다 쓰자

 

태그를 바로 지칭하는 경우는 태그명을 씀(하나일 경우)

body {

            background-color: green;

        }

 

 

배경에 이미지 넣기

- 어떤 이미지, 위치를 명시해준다.

vs code에서 빈 페이지에서 ! 를 누르면 html 기본 템플릿을 사용 가능 

body {

            background-color: ivory;

            background-image: url('https://new-year.spartacodingclub.kr/images/pattern.png');

            background-position: 600px 100px;

            background-repeat: no-repeat;

        }

 

 

font 적용

google font에서 검색해서 link를 이용하여 사용

head tag 밑에 넣으면 된다.

누구를 어떻게라는 명령어를 내려야지 적용됨

 

모두를 적용하고 싶을때는 * 이용 (style임)

google font 사이트에 적용 방법이 있음 (CSS rules to specify families)

* {font-family: 'Yeon Sung', cursive;}

 

꾸미기

- a tag에서 그래도 있어라는 '#'을 넣어주면 됨

- display:flex 는 div안의 내용물을 정렬하는 방법

- flex는 3가지가 같이 다님, flex-direction, justify-content...

- flex-wrap:wrap을 주면 웹의 너비만큼 알아서 배치됨

- margin:auto를 주면 동등하게 마진 너비를 가지게 됨

- 이미지를 꽉 차게 넣고 싶다. ---> background-size : cover, background-position:center를 적용하자 

- hover -> 마우스가 위로 올라왔을때 반응 주기 (:hover 효과를 주자)

- text-decoration 이용

 

 

1일차 후기 

html,css를 대학교때 잠깐 해보고, 직장 취업하고는 Android, iOS 앱 개발자이기때문에 거의 할일이 없었다.

이번에 회사에서 웹으로 프로젝트를 진행하면서 css에 대해서 막막했는데, 

"누구를, 어떻게" 라는 것만 기억하면 css 적용도 쉽게 할 수 있을 것 같아서 좋은 강의였다. 

2일차도 얼른 듣고 좀 더 공부해봐야겠다.

 

 

숙제 

https://new-year.spartacodingclub.kr/ <-----이 페이지 만들기