CSS 기초
- class
<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성
ex) <h1>제목</h1>
h1에 클래스명을 주고 싶을 때
<h1 class="mytitle">제목</h1>
mytitle 클래스를 가리킬 때
.mytitle {
...
}.을 맨 앞에 붙여 사용하며, 여러 객체에 적용할 수 있다.
-
margin
경계로부터 바깥에 있는 공간
ex)margin: 10px 20px 30px 40px;
(시계방향순으로 적용)
margin: 20px;
(값이 하나 일 경우 사방으로 적용됨) -
padding
경계로부터 안쪽에 있는 공간
적용방법은 margin과 동일
-
text-align :center;
텍스트 가운데 정렬하기 -
div를 화면 가운데 위치하기
width값을 주고 margin: auto 사용
다른 css는 필요할 때 검색해서 사용하기!-
폰트
구글웹폰트 https://fonts.google.com/?subset=korean
1.마음에드는 폰트 선택 후 클릭
2.<head>~</head> 사이에 넣기
3.CSS 태그 전체에 적용
* {
} -
주석
프로그램의 코드와 실행에는 영향을 주지 않는 문장
코드에 대한 간단한 설명을 적고 싶을 때 사용
코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때 사용
모든 CSS를 외우면서 쓰기에는 무리가 있는 것 같아 상황에 맞게 찾아서 적용을 해야겠고 구글링을 많이 해봐야겠다.
- 부트스트랩
https://getbootstrap.com/docs/4.0/components/alerts/
다른 사람들이 미리 만들어 놓은 CSS (현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많다)
처음엔 margin, padding이 헷갈렸지만 적용해 보고 바로바로 확인을 해보니 어느 정도 감이 잡힌 것 같다.
부트스트랩을 쓰면 웹사이트 제작에 필요한 도구들을 갖다 쓰기에는 편하지만 뭔가 공장에서 찍어 나온 듯한 느낌이 나올 것 같아서 부트스트랩에 많은 의존을 하는 건 안 좋을 것 같다.
