CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드입니다. CSS 기초 에서 여러분이 처음 시작하며 필요한 내용을 익히도록 도와드립니다. 저희는 다음과 같은 질문에 관한 답을 드리겠습니다. 어떻게 하면 글자색을 검정이나 빨갛게 할 수 있을까? 어떻게 하면 콘텐츠를 화면의 이런 저런 곳에 보이게 할 수 있을까? 어떻게 하면 배경 이미지와 색상들로 웹페이지를 꾸밀 수 있을까?
그래서 CSS가 뭔가요?
HTML와 같이 CSS는 실제로 프로그래밍 언어는 아닙니다. 마크업(markup) 언어 도 아닙니다. Style sheet 언어 입니다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 말입니다. 예를 들면, HTML 페이지에서 모든 문단 요소들을 선택하고 그 문단 요소들 안에 있는 텍스트를 빨갛게 바꾸려고 한다면 다음과 같이 CSS를 작성할 것입니다.
p { color: red; }
한 번 해봅시다. 텍스트 에디터의 새 파일에 위의 CSS 3줄을 복사해 붙여넣으세요. 그다음에 styles 디렉토리에 style.css로 파일을 저장하세요.
아직 여러분의 HTML 문서에 CSS를 적용하는 것이 남아 있습니다. 그렇지 않으면 CSS 스타일은 그 HTML 문서가 브라우저에 표시될 때 아무 영향도 주지 않을 것입니다. (여러분이 우리 프로젝트를 따라오지 않으셨다면, 파일 다루기와 HTML 기본을 읽고 무엇이 먼저 필요한지를 알아보시기 바랍니다.)
- index.html 파일을 열고 head의 안쪽 어딘가(즉, <head>와 </head> 태그 사이)에 아래의 코드를 붙여 넣으세요:<link href="styles/style.css" rel="stylesheet" type="text/css">
- index.html을 저장하고 브라우저에서 불러오세요. 여러분은 다음과 같은 것을 보게 되실겁니다:
문단의 글자가 빨간색이라면 축하드립니다! 지금 여러분은 첫번째 CSS 를 성공적으로 작성하셨습니다!
CSS의 ruleset 해부
위의 CSS를 좀 더 자세히 살펴 봅시다:
전체 구조는 rule set 라 불립니다 (하지만 종종 줄여서 "rule"이라고 합니다). 각 부분의 이름에도 주목하세요:
선택자(selector)rule set의 맨 앞에 있는 HTML 요소 이름. 이것은 꾸밀 요소(들)을 선택합니다 (이 예에서는 p 요소). 다른 요소를 꾸미기 위해서는 선택자만 바꿔주세요.선언color: red와 같은 단일 규칙; 여러분이 꾸미기 원하는 요소의 속성을 명시합니다.속성(property)주어진 HTML 요소를 꾸밀 수 있는 방법입니다. (이 예에서, color는 p 요소의 속성입니다.) CSS에서, rule 내에서 영향을 줄 속성을 선택합니다.속성 값속성의 오른쪽에, 콜론 뒤에, 주어진 속성을 위한 많은 가능한 결과중 하나를 선택하기 위해 속성 값을 갖습니다 (color 의 값에는 red 외에 많은 것이 있습니다).
구문의 다른 중요한 부분들도 주목하세요:
- 각각의 rule set (셀렉터로 구분) 은 반드시 ({}) 로 감싸져야 합니다.
- 각각의 선언 안에, 각 속성을 해당 값과 구분하기 위해 콜론 (:)을 사용해야만 합니다.
- 각각의 rule set 안에, 각 선언을 그 다음 선언으로부터 구분하기 위해 세미콜론 (;)을 사용해야만 합니다.
그러니까 여러 속성 값들을 한번에 수정하기 위해서는, 세미콜론으로 구분해서 작성해야 합니다, 이렇게요:
p { color: red; width: 500px; border: 1px solid black; }
출처 : developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/CSS_basics
CSS 기초 - Web 개발 학습하기 | MDN
CSS 기초 CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드입니다. CSS 기초 에서 여러분이 처음 시작하며 필요한 내용을 익히도록 도와드립니다. 저희는 다음과 같은 질문에 관한 답
developer.mozilla.org
내 생각 : 위 글의 내용을 정리하자면, <head> ~</head> 태그안에 <style>~</style>로 공간을 만들어서 작성한다.
즉, style 태그 안에 css의 속성값을 집어넣으면 된다. p { color: red; width: 500px; border: 1px solid black; }
이런거를 말이다. 여기서 p는 html의 p태그를 의미한다.
'웹 프로그래밍(풀스택-->python)' 카테고리의 다른 글
| 6. 폰트, 주석, 파일분리 (0) | 2021.03.29 |
|---|---|
| 5. 자주 쓰이는 CSS 연습하기 (0) | 2021.03.29 |
| 3. 로그인 HTML 만들어보기 (0) | 2021.03.29 |
| 2. HTML 과 CSS 개념 (0) | 2021.03.29 |
| 1. 서버/클라이언트/웹의 동작 개념 (0) | 2021.03.29 |
