티스토리 뷰
안녕하세요 동기 여러분! 오늘 부터는 CSS대해 달려보도록 합시다!
Intro to CSS
HTML은 기본적인 웹사이트의 구조를 담당합니다. HTML만을 가지고 웹사이트를 만든다면 상당히 투박하고 멋이 없습니다. 그래서 등장한 것이 Cascading Style Sheets(CSS)입니다. CSS에서는 적절한 색을 사용하고 폰트 타입을 바꾸어 넣고 이미지를 넣고 각 요소의 위치를 조정합니다. 그 밖에도 더욱 많은 기능들이 있습니다.
자 그럼 HTML에 CSS를 연결하는 방법부터 알아보도록 합시다.
가장 쉬운 방법
비주얼 스튜디오를 사용하면 아주 쉽게 연결을 해줄 수 있습니다.
1. 비주얼 스튜디오를 켠다.
2. 오른쪽 하단에 HTML이 설정 되어 있는지 확인 (제 비주얼 스튜디오는 항상 장고HTML을 기본으로 두고 있어서 자동완성 기능이 실행이 안되어서 확인을 해줍니다.)
3. ' ! ' 를 타이밍 해주면 아래와 같이 자동 완성을 해줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
4. <head>태그 안에 아무곳이나
※ 여기서 rel은 relation의 줄임말로 관계를 의미합니다. easy.html에 stylesheet가 연결 되었다고 생각하면 될거 같습니다.
※ href는 Hypertext REFerence의 줄임말로 URL이나 클릭이 가능한 텍스트를 끌어올 때 사용합니다.
오늘의 느낌
오늘 부모님과 영상통화를 했는데 늦둥이라서 부모님 연세가 많으심... 어머니께서 말씀 하시길 "젊어서 고생은 사서도 한다지만 요새는 고생하면 골병든다."라고 명언을 주셨음... 우리 엄마 센스가 대단하심!
두분 모두 항상 건강하고 행복하세요.
혹시 이 글을 읽고 계시다면 부모님께 전화 꼭 하세요!!!
'CSS' 카테고리의 다른 글
| [CSS] Type (0) | 2021.12.18 |
|---|---|
| [CSS] External Stylesheet (0) | 2021.12.18 |
| [CSS] Internal Stylesheet (0) | 2021.12.18 |
| [CSS] Inline Styles (0) | 2021.12.17 |
| [CSS] CSS Anatomy (0) | 2021.12.17 |
- Total
- Today
- Yesterday
- 반복문
- HTML 기본
- Python
- 파이썬
- 타입스크립트
- if문
- Array
- CSS
- function
- Typescript
- 프로그래머스
- Margin
- 실수
- html
- method
- Object
- Type
- html table
- 함수
- css position
- javascript
- 메서드
- padding
- for문
- 자바스크립트
- CSS 포지션
- 객체
- 동기코딩
- em
- 타입 좁히기
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |