HTML과 CSS의 개념
HTML은 뼈대, CSS는 꾸미기
HTML은 구역과 텍스트를 나타내는 코드로, CSS는 잡은 구역을 꾸며주는 것으로 생각하기
- HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담습니다.
- head 안에 들어가는 대표적인 요소들: meta, script, link, title 등
CSS 기초
<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성합니다.
- div 태그에 클래스 라는 명찰을 붙여줄 수 있다.
- <style> </style> 로 감싼 곳에 .클래스{ ... } 로 지칭해주면 꾸밀 수 있다.
글씨 가운데 정렬
text-align: center;
만약에 .mytitle 안에 있는 h1 태그를 가리키고 싶다면?
.mytitle > h1 {
font-size: 56px;
margin-bottom: 0px;
}
CSS 적용하기 - 배경
배경 바꾸기
body {
background-color: green;
}
배경 모양
body {
background-color: ivory;
background-image: url('<https://new-year.spartacodingclub.kr/images/pattern.png>');
}
배경을 이동
body {
background-color: ivory;
background-image: url('<https://new-year.spartacodingclub.kr/images/pattern.png>');
background-position: 600px 100px;
}
배경의 반복도 없애기
body {
background-color: ivory;
background-image: url('<https://new-year.spartacodingclub.kr/images/pattern.png>');
background-position: 600px 100px;
background-repeat: no-repeat;
}
'💻 프로젝트 > 스파르타코딩클럽 르탄즈 2기' 카테고리의 다른 글
| [스파르타코딩클럽] IT 전공자의 덕담 공유 코딩 패키지 리얼 후기 (0) | 2022.01.29 |
|---|---|
| [스파르타코딩클럽] 프론트엔드 지식 1도 없는 학부생의 웹 사이트 만들어보기! (0) | 2022.01.28 |
| TIL 1주차 개발일지 - (2) (0) | 2022.01.28 |
| TIL - 2주차 개발일지 (0) | 2022.01.28 |
| 1시간 만에 끝내는 직장인 코딩 용어 해설 [후기 및 강의 정리] (0) | 2022.01.21 |