CSS 기초
CSS란 HTML이라는 뼈대를 갖고 있는 웹페이지, 웹문서를 예쁘게 꾸미기 위해 만들어졌다. 글씨크기, 글씨 색깔부터 각 버튼이나 요소들의 위치와 크기, 색깔, 간격, 여백, 등등을 조절한다.
CSS를 이용해 HTML을 꾸미기 위해서는 HTML문서의 <head></head>태그 안쪽에 <style></style>태그를 위치시키고 그 안쪽에 CSS코드들을 작성해주면 된다.
<head>
<meta ~>
<link ~>
<script>~</script>
<title>~</title>
<style>
* {
font-size: 20px;
}
p {
color: red;
}
.className {
width: 200px;
}
#idName {
margin: auto;
}
</style>
</head>대략 위와 같은 방식이다.
* 를 쓰면 모든 요소(HTML태그)에 대해 적용하기
p 라고 쓰면 모든 <p></p>태그들에 적용하기
.className 이라고 쓰면 태그 안에 class="className" 이라는 속성을 갖고 있는 태그들에 적용하기
#idName 이라고 쓰면 태그 안에 id="idName" 이라는 속성을 갖고 있는 태그들에 적용하기
- 이렇게 어느 요소(태그)를 꾸며줄지를 지정(선택)하는 역할을 하는 것들을 '선택자'(Selector)라고 부른다. 아래와 같은 것들이다.
*
p
.className
#idName
선택자에 대한 더 자세한 설명은 https://www.nextree.co.kr/p8468/
CSS 파일 분리
- HTML파일에 CSS코드를 다 넣으면 HTML파일의 소스코드가 너무 길어지고 가독성이 떨어진다.
- 동일한 CSS 작업들(글씨체라든가)을 서로 다른 HTML파일에서 각각 해줘야하고, 수정하려고 해도 전부 다 수정해줘야하는 사태가 발생한다.
.css 확장자를 가진 파일에다 CSS코드만 따로 작성한 뒤, 아래와 같은 소스코드를 통해 HTML에서 불러와서 쓴다.
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">이 link 태그를 삽입하는 곳은 head 태그 안쪽이고 그 중에서도 meta태그 아래, script(자바스크립트 파일들을 불러오는)태그의 위쪽, 그러니까 보통 meta태그와 script태그 사이에 위치시킨다.
Bootstrap
Bootstrap은 쉽게 말하면, 맨날 CSS와 Javascript를 일일이 짜는 건 너무 귀찮고 힘든 일이고, 항상 쓰는 것들은 정해져있으니, 미리 예쁘게 만들어놓은 것들을 제공해주는 모음집같은 느낌이었다.
사실 그동안 Bootstrap에 대해 많이 들어는 봤지만, 제대로 써본 적이 없었다. 생각보다 더 쉬웠다.
https://getbootstrap.com/docs/4.0/getting-started/introduction/
1. 위 링크에 가면 Starter Template이라는 게 있다. 묻지도 따지지도 말고 내가 만든 HTML파일에 모든 걸 다 지우고나서 이걸 그대로 복사 붙여넣기하고 시작하면 된다.
https://getbootstrap.com/docs/4.0/components/buttons/
2. 그 다음 요 링크로 가서 눌러보면서 나한테 필요한 게 보이면 그대로 복사해서 코드 넣고 글자같은 것만 조금씩 수정하면 된다. 영어를 몰라도, 뭔지를 보여주고 그 밑에 바로 해당하는 코드가 있기 때문에 쉽게 알 수 있다.
