[CSS] 1. css 기본작성 방법

css는 Cascading Style Sheets의 약자이다. 이는 문서를 표시하는 방법으로 스타일이나 레이아웃을 지정하는 용도로 활용한다. 즉, css를 통해서 사이트의 레이아웃을 만들고, 텍스트의 색상을 변경하며 애니메이션을 적용함으로써 시각적으로 아름답게 웹 페이지를 표현한다. 

 

CSS의 기본 작성법

---

css는 비교적 간단한 스타일 적용방법을 사용한다. 쉽게 말해 A를 B로 C 하겠다는 것을 모든 적용의 기본 문법으로 활용한다. 아래의 예를 대입하여 설명하면, 'h1 태그 내 모든 내용의 폰트 크기를 14px로 설정해줘'라는 의미로 보면 된다.

1) 하나의 태그 요소 안에 여러 개의 프로퍼티(효과)를 적용하고 싶다면?

만일 하나의 태그 요소에 여러 개의 프로퍼티를 부여하고 싶다면 중갈호{   } 안에 여러 개의 프로퍼티와 값을 작성하면 된다. 이 때 각 프로퍼티 : 값 ; 과 같이 끝에 ' ; '를 붙여야 한다.

2) 외부 CSS 파일에 작성된 스타일을  HTML 페이지에 연결 하려면?

이 때 활용하는 것이 <link/> 태그 이다. 이는 href 속성을 통해 css 파일 위치를 지정하고 rel(참조)로 관계를 표현한다. 보통 css는 참조(rel)값을 stylesheet 로 넣는다.

형식 예)  <link rel="stylesheet" href="./파일명.css" type="text/css"/>

 

아래와 같이  css와  html이 연결되면서 css의 효과가 웹 사이트에 적용되어 나타났다.

 

3) css는 무조건 외부 파일 형태로 링크되어 열어야 하는가?

그것은 아니다.  CSS는  HTML 내의 <style> ~</style> 태그를 활용하여 직접 css 스타일 효과를 적용할 수 있다.

 

아래 예시처럼 style 태그 내에 css 시트에서 적용한 형식대로 입력해주면 스타일이 적용된 것을 확인할 수 있다.

 

4) style 태그를 h2 태그 등의 요소 안에 직접 적용할 수도 있을까?

가능하다. 요소에 직접 작성할 때는  style 속성을 사용해 선택자와 중괄호{}  없이 적용이 가능하지만 지정 값 마지막에는 필수적으로 ' ; ' 를 넣어줘야 한다. 아래와 같이 따로 스타일 태그가 없더라도 <p> 태그 내에 스타일 형식을 지정해준 것으로도 css가 적용된 것을 볼 수 있다.

 

 

---

[CSS] 2. 상속(inherit)