2021. 5. 14. 01:07ㆍcss
이번에는 css의 기본을 배워 봅시다.
※ visual studio code 에서는, .html 파일을 만든 후 "html:5" 를 입력 후 Tab 키를 누르면 기본적인 html 코드가 빠르게 작성이 됩니다.
css
css는 html로 만들어진 파일에 외형을 꾸며줄 때 사용하는 건데요,
css에 본격적으로 들어가기 전에, 기본적으로 알고가야 하는 개념이 있습니다.
바로 블럭 요소 와 인라인 요소 입니다.
블럭 요소
1. 블럭요소는 화면에서 블럭(공간)의 크기를 갖는다. 자동 줄바꿈
2. 블럭요소 안에는 블럭요소와 인라인요소를 가질 수 있습니다.
블럭 요소에는 div , h1 ~ h6 , p , ul , ol , li , section , header , aside , article , footer 등이 있습니다.
해당하는 태그를 사용할 경우에는, 네모 모양의 공간이 생긴다고 생각을 하면 됩니다.
인라인 요소
1. 인라인은 줄바꿈이 없습니다.(한줄출력)
2. 인라인요소 에는 인라인만 들어갈 수 있습니다.
인라인 요소에는 블럭 요소를 제외한 span , b , strong , img , a 등이 있습니다.
해당하는 태그를 사용할 경우에는, 뒤에 따라붙는 글자의 수 정도만 공간이 생긴다고 생각을 하면 됩니다.
위의 개념을 알고 가야 이해가 편합니다.
이제 본격적으로 css에 대해서 알아 봅시다.
시트
css 에는 외부스타일시트 , 내부스타일시트 , 인라인스타일시트 가 있습니다.
쉽게 말해서, 외부에서 가져오는 css 스타일, 내부에서 사용하는 css 스타일, 태그에서 사용하는 css 스타일 이라고 생각을 하시면 되겠습니다.
<head> </head> 사이에 <style> </style> 를 만듭니다.
css의 style 은 , 식별자 { style : 속성 ; } 으로 사용합니다.
여기서 식별자란, 어디에 해당 style, 속성을 적용할 지 표시해 주는 겁니다. ex) p -> <p> 태그
css는 <style> 사이에 정의를 내립니다. </style>
<style> 을 어디서 사용하느냐에 따라 외부 , 내부, 인라인 으로 나누어 지는 건데요
외부스타일시트
외부에 .css 파일을 만들어서 가져오는 것을 말합니다.
.css 파일을 만들고, 해당 파일을 <link> 를 통해서 가져 옵니다.
rel 에는 항상 "stylesheet" 를 입력해주어야 합니다 !
그리고, body 에서 <div> 를 사용하면, 해당하는 스타일이 적용이 됩니다.
import 를 통해서 가져오는 방법도 있습니다. ( 위에서 이미 link를 통해 style.css 를 가져옴 )
내부스타일시트
<head> </head>내부에 <style> 태그를 만들어서 사용합니다.
인라인시트
인라인시트는 , 태그 안에 css 스타일을 만들어 주는 건데요,
css 적용할 태그 안에 style="" 를 사용합니다.
적용 순서
이러한 css의 여러가지 스타일은 가장 가까운 스타일시트를 적용합니다.
인라인시트 > 내부스타일시트 -> 외부스타일시트
즉. 거리가 가까운 css 스타일 의 영향을 받습니다.
'css' 카테고리의 다른 글
| Day63 - [css]윤곽, 패딩, 마진, 상자크기 (0) | 2021.05.16 |
|---|---|
| Day63 - [css]background (0) | 2021.05.16 |
| Day62 - [css]폰트, 문단, 디스플레이 (0) | 2021.05.14 |
| Day62 - [css] 선택자 (0) | 2021.05.14 |
| Day62 - visual studio code 다운로드 및 설치, 설정, 깃사용 (0) | 2021.05.14 |