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가 적용된 것을 볼 수 있다.
'html_ css > css' 카테고리의 다른 글
[CSS] 4. 박스모델과 여백 상쇄 (0) | 2022.07.23 |
---|---|
[CSS] 3. 선택자 (0) | 2022.07.21 |
[CSS] 2. 상속(inherit) (0) | 2022.07.19 |
댓글