알 수 있는 간단한 사용자와 서버의 관계
우리가 흔히 보는 웹서비스를 만들때는 HTML , CSS , Javascript 를 사용한다.
HTML = 뼈대
CSS = 뼈대를 꾸며주는 것
JS = 만들어 놓은 것들에 액션을 주는 것
HTML
HTML은 head와 body로 기본 구조가 짜여져있다.
head 에는 브라우저 제일 위에 나오는 머리 부분에 대한 내용을 짜거나, 그 외에 참고하는 내용 등이 들어간다. meta, script, link, title 등..
body에는 만들려는 페이지의 내용을 짜준다.
HTML은 태그를 사용해서 코드를 짠다. 태그는 열고 닫는 것이 한세트이다. <> </>
CSS
CSS은 html의 head안에
CSS를 짤때는 꾸미고자 하는 것에 이름을(class명으로 지정) 붙여서 해당 이름에 주고자하는 옵션을 넣어준다.
물론 이미지 파일도 삽입할 수가 있다
배경이미지를 넣어주는 css 태그
background-image: url('이미지 주소');
background-position: 위치지정;
background-size: 사이즈 지정;
이렇게 세 태그는 대체로 항상 같이 사용하니 알아두자!
+이미지의 모서리를 위와 같이 곡선 형태로 만들고 싶다면 border-radius 태그를 이용하여 깍고 싶은 만큼의 값을 메겨주면 된다.
결과물
.
폰트변경도 가능한데, 수업에서는 구글폰트 웹폰트페이지를 활용해서 진행하였다.
(구글 웹 폰트 / https://fonts.google.com/?subset=korean)
페이지에서 마음에 드는 폰트를 고르고 링크만 복사하면 폰트를 변경할 수 있다!
head 안에 링크 삽입!
style 안에 별 하고, 별 안에 css 코드 삽입!
💡 css 코드를 html에 같이 쓰지않고, css파일을 따로 만들어서 사용할 수 있다 css 파일을 html과 동일한 경로에 만들고, 파일 경로가 다르다면 경로까지 입력해주어야한다.Bootstrap
→ 개발자들이 코드를 보다 편히 작성할 수 있도록 css 코드를 미리 만들어두고 모아둔 사이트.
(부트스트랩 / https://getbootstrap.com/)
몇가지 링크와 스크립트를 임포트 하면 사용할 수 있다.
부트스트랩을 이용해서 간단한 실습을 해보겠다.
이런 페이지를 만들어보자!
실습과정에서 얻은, 기억하고 싶은 css 코드들.
linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) 이미지 어둡게 하기. 숫자를 조절해서 명암을 조절할 수 있다.
background-color: transparent; 배경 투명하게 하기
.mytitle > button:hover { border: 2px solid white; } hover→마우스가 올라가 있을때.
⇒ mytitle 에 있는 button에 마우스가 올라갔을때 { } 이렇게 처리 해라.
-
display: flex;flex-direction: column;column → 세로 정렬 / row → 가로 정렬justify-content: center;align-items: center;- 영역안에 있는 내용물들을 정렬할때 이렇게 네가지 활용!
모바일 처리
→ 브라우저 창의 크기를 줄이거나, 모바일에서 볼 땐 페이지가 작아지기 때문에 창의 크기에 맞게 페이지가 알아서 변형 될 수 있도록 해주어야한다.
간단하게, widht 값으로 처리할 수 있다.
ex)
max-width: 500px;
width: 95%;
⇒ 최대 가로 넓이는 500px 이고, 500이 되기 전까지는 창의 95%만 차지해라
.
.
다음 -> 1강 JAVASCRIPT
