본 내용은 해당 강의 토대로 작성
Learning CSS
1. CSS 추가하기
CSS를 HTML에 추가하는 방법은 두 가지가 있다.
HTML파일에 인라인 코드로 작성하기
<head>
<style>
CSS 코드 작성
</style>
</head>HTML의 <head> 안에 <style> 태그를 만들고 그 안에 코드를 작성한다.
CSS파일 분리하기
Externel CSS라고 한다.
<head>
<link href="style.css" rel="stylesheet" />
</head>HTML의 <head> 안에 <link> 를 이용해서 .css 파일과 연결하고 rel에 관계를 적어준다.
2.CSS의 문법
selector{
property : value ;
}
- selector : 선택자. 스타일을 적용할 HTML 태그를 가르킨다.
- Property : 속성. 글자 크기, 색상 등의 스타일을 설정할 수 있도록 한다.
- vlaue : 속성에 적용할 값
- 속성에 값을 부여하면 세미콜론(;)으로 마친다.
- 속성은 띄어쓰기를 쓰지 않는다.
- font-size 처럼 '-'를 사용한다.
- 속성은 어떤 것이든 쓸 수 있지만 브러우자가 인식하지 못한다.
- 올바른 속성을 입력해야 스타일이 적용된다.
- 적용 예시
<style>
h1 {
color: blue;
font-size:50px;
font-style: italic;
}
address {
text-align: center;
color: tomato;
}
</style>3. Cascading의 의미
- 위에서 있는 코드부터 차례대로 읽는다는 의미
- 위에서부터 아래까지 차례대로 적용된다.
- 같은 것을 설정한 경우, 마지막의 설정이 적용
- 겹치지 않는 것은 같이 적용
- 예시
<style>
h1 {
color: blue;
font-size:50px;
font-style: italic;
}
h1 {
color: tomato;
}
</style>h1의 color 속성은 마지막에 설정된 tomato 로 된다. font-size, font-style은 겹치지 않으므로 같이 적용된다.
4. Block, Inline
Block
- 옆에 다른 요소가 올 수 없다.
- div, p, address
- 높이와 너비가 있다.
Inline
- 옆에 다른 요소가 올 수 있다.
- span, a, img, link
- 높이와 너비가 없다.
Block과 Inline 바꾸기
<style>
div {
display: inline;
height: 150px;
width: 150px;
background-color: tomato;
}
span {
display: block;
background-color: turquoise;
}
</style>display 에 inline이나 block을 설정할 수 있다. 단, inline은 높이와 너비가 없으므로 div는 화면에 출력이 안된다.
inline-block
- inline과 block의 속성을 동시에 줄 수 있다.
<style>
div {
display: inline-block;
width: 50px;
height: 50px;
background-color: teal;
}
</style>그러나, inline-block은 반응형 디자인을 지원하지 않아서 각 기기마다 출력되는 화면이 다르고 최적값을 일일이 찾아야 한다. 이를 해결하기 위해서, Flexbox 속성을 사용한다.
5. Box model
- Block은 margin, padding, border 속성을 가진다.
- 브라우저는 기본적으로 style 속성을 준다. margin의 기본값은 8이다.
Margin
- 경계의 바깥에 있는 공간이다.
- inline에는 좌,우에만 적용된다.
- inline은 높이와 너비가 없기 때문이다.
- border보다 바깥에 있다.
- margin의 크기를 조절할 수 있다.
<style>
div {
margin: 50px; /*상하좌우 적용*/
height: 150px;
width: 150px;
}
body{
margin-top: 20px;
margin-left: 10px;
margin-right: 5px;
margin-bottom: 10px;
}
h1{
margin: 20px 15px; /*첫번째 : 위아래 , 두번째 : 좌우*/
}
h2{
margin: 10px 20px 15px 5px; /*위, 우, 하, 좌*/
}
</style>Collapsing margins
- box들의 경계가 같을 때, 상하 margin이 같아진다.
- 각각의 상하 margin을 수정해도 하나처럼 적용된다.
Padding
- box의 경계로부터 안쪽에 있는 공간
- inline에도 적용된다.
Border
- box의 경계이다.
- 예시
<style>
div {
padding: 20px;
border:2px solid black;
}
</style>굵기, 스타일, 색상 순으로 설정할 수 있다.
Asterisk
- Asterisk(*)를 사용하여 전체 요소에 속성을 줄 수 있다.
- 예시
<style>
* {
border:2px solid black;
}
</style>6. id와 class
id
- 한 요소를 하나의 id를 지정할 수 있다.
- 특정 id의 값을 지칭하려면 #id를 이용해 접근한다.
- 예시
<head>
<style>
#first {
background-color: whitesmoke; /* 각각의 아이디에 속성을 설정할 수 있다.*/
width: 150px;
height: 150px;
}
#second {
background-color: teal;
width: 100px;
height: 100px;
}
#third {
background-color: wheat;
width: 50px;
height: 50px;
}
#fourth {
background-color: blanchedalmond;
width: 25px;
height: 25px;
}
</style>
</head>
<body>
<div id="first">
<div id="second">
<div id="third">
<div id="fourth">
</div>
</div>
</div>
</div>
</body>Class
- 여러개의 요소들에게 부여해서 사용할 수 있다.
- .class를 이용해서 접근한다.
- 예시
<style>
body{
margin: 20px;
}
.btn {
padding: 5px 10px;
border-radius: 10px;
}
.teal{
background-color: teal;
}
.tomato{
background-color: tomato;
color: white;
}
</style>
</head>
<body>
<span class="btn teal">hello</span>
<span class="btn tomato">hello</span>
<span class="btn teal">hello</span>
<span class="btn tomato">hello</span>
<span class="btn teal">hello</span>
<span class="btn tomato">hello</span>
<span class="btn teal">hello</span>
<span class="btn tomato">hello</span>
</body>'programming study > Clone coding' 카테고리의 다른 글
| [노마드코더]코코아톡 클론코딩 (6)(2021.1.7 ~ 8) (0) | 2021.01.08 |
|---|---|
| [노마드코더]코코아톡 클론코딩 (5)(2021.1.7) (0) | 2021.01.07 |
| [노마드코더]코코아톡 클론코딩 (4)(2021.1.6) (0) | 2021.01.06 |
| [노마드코더]코코아톡 클론코딩 (3)(2021.1.5) (0) | 2021.01.05 |
| [노마드코더]코코아톡 클론코딩 (1)(2021.1.1 ~ 2) (1) | 2021.01.02 |
