ccs1-1. 스타일 시트

CSS

by 𖠂𖢕🜇𐃄༶இ௹𒀱𐦄𐦉 2022. 9. 11. 20:58

예전에는 웹 문서 안에 여러 개의 스타일 규칙이 사용되는 경우가 많았습니다.

이러한 스타일이 태그 사이에 여러 곳이 존재하면 찾기도 힘들고 유지 보수 또한 어려울 것입니다.

스타일은 한눈에 묶어 놓은 것을 스타일 시트라고 합니다.

사용할 스타일 규칙을 정의하여 내부, 외부 스타일 시트로 나뉩니다.

1. 내부 스타일 시트

웹 문서 내에 스타일을 문서 안에 정리한 것을 말합니다. 전 강에 다루었던 <head> 안에 있던 것을 말합니다.

2. 외부 스타일 시트

웹 사이트를 만들 때 하나의 웹 문서로 끝나지 않고 디자인의 일관성 위해 같은 스타일의 여러 웹 문서를 사용하곤 합니다.

티스토리의 경우 css 하나로 정의가 되어있던거 같더군요.

태그,클래스,아이디 기준에 의해 정의된 스타일로 일괄적으로 적용될 것입니다. 티스토리 CSS 라인 수가 3700라인 이상

이더군요.

저도 뭐 하나를 찾아 수정하는데 시간이 걸렸습니다. HTML수업을 제대로 듣지 않고 대충 날로 공부해서 학점이 똥이 되었습니다. 오래전에 공부한 책으로 작성하기 잘못된 점이 있을 수 있으니 이 점은 참고해 주시길 바랍니다.

외부 스타일 시트 연결 시에는 아래와 같이 시트를 연결 합니다.

간단한 예제를 만들어 테스트 해 보겠습니다.

1.css 파일로 저장합니다. 비쥬얼 스튜디오 코드에서 작성해서 노트패드에 넣어서 1.css 작성.

2. <link rel="stylesheet" href="1.css" type="text/css" >

여러분의 환경에 따라 type 속성이 없을 때 적용되지 않을 수 있습니다.

rel은 relationship 관계를 나타내는 속성으로 보여지네요.

HTML 태그에서 링크로 href 가 어떤 경로의 파일을 가리키는 지 설정해 줍니다.

type 속성은 미디어 타입인 = "text/css" 속성값만 지원합니다.

3. 인라인 스타일

style = "속성 : 속성값;" 형식을 이룹니다. 아래처럼 태그 내에 요소에만 적용됩니다.

이렇게 내부,외부, 인라인 스타일에 대해서 알아보았습니다.

LIST

CSS1. CSS 포맷과 스타일 형식 (0)	2022.09.11

꼼찌냥1-web