안녕하세요 MIN입니다.
오늘은 CSS에 대해 알아 볼께요.
css란 HTML로 만든 구조에 다양한 디자인을 적용 시킬 수 있는 기능입니다.
예전에는 css로 배경색을 정의하고 위치를 정의 할 수 있었지만 css가 css2 -> css3 으로 넘어오면서 점점 많은 작업을 할 수 있게 변경 되었습니다. 자세한 작업들은 추후에 알아보도록 해요~
혹시라도 궁금하신 분들은 구글링 해보시면 다양한 정보를 얻을 수 있을꺼에요.
우리가 웹사이트 Hello world 를 출력한다고 했을때 css가 없는 상태와 css가 있는 상태에서 어떻게 출력 되는지 한번 볼까요?
See the Pen Untitled by piwe2004 (@piwe2004) on CodePen.
이해 하기 쉽도록 inline-style로 작성하였습니다.
이렇게만 봤는데도 css가 없다면 홈페이지가 어떻게 나올지 아시겠죠??
그럼 css적용 법에 대해 알아보도록 할까요?
제가 위에 작업 했던 인라인 스타일이란 태그에 style 속성을 이용해서 바로 스타일을 작성하는 것을 말합니다. 인라인으로 작업이 될때도 있지만 추후 다양한 작업을 진행하시면 인라인 스타일은 거의 사용 되지 않는다고 보시면 됩니다.
두번째 내부 스타일시트는 HTML페이지 내에 style태그를 정의하여 해당 페이지에만 적용하는 스타일 시트를 만드는 방법입니다.
세번째는 외부 스타일시트를 불러와서 적용하여 해당페이지 외에도 해당 스타일시트만 불러오면 어디서든 동일한 클래스나, 아이디, 태그에 스타일을 적용 시킬 수 있습니다.
<head>
<link rel="stylesheet" href="css주소">
</head>이런식으로 헤드 태그안에서 불러오시면 됩니다.
그럼 내부 스타일시트와 외부 스타일시트 적용 된걸 보실까요?
See the Pen Untitled by piwe2004 (@piwe2004) on CodePen.
우리가 외부 css에 스타일을 정의를 해놓으면 해당 css를 불러오는 곳이라면 어디서든 사용 할 수 있어서 재사용성에 용의 합니다.
그럼 위의 3가지중에 스타일 우선순위를 한번 알아 볼까요?
- inline스타일
- 내부/외부 스타일
- 브라우저의 기본 스타일
그래서 우리가 스타일을 정의할때 왜 적용이 안되지 왜 해당 스타일이 우선 적용 되지 라는 의문이 생깁니다.
순위를 보시면 인라인스타일은 1순위로 적용되기 때문에 실무에서 정말 중요한게 적용되야 되거나 추후 홈페이지 개발 작업이 진행될때나 한번씩 사용 되는 스타일시트 입니다.
그래서 스타일을 정의할때 내부나 외부에서 정의를 하는편입니다.
그럼 내부와 외부의 우선 순위는 어떻게 정해지는 순위는 기본적으로는 위에서 부터 차례대로 적용되기 때문에 똑같은 스타일이더라도 마지막에 불러오는 스타일 시트가 적용됩니다.
See the Pen Untitled by piwe2004 (@piwe2004) on CodePen.
위에 코드를 보시면 외부 스타일 시트에 적용했는데 내부 스타일시트가 적용된게 보이시나요?
<head>
<style>
#text2 {color:white; width:100px; height:100px; text-align:center; background-color:black;}
</style>
</head>
<body>
<style>
#text2 {color:red; width:100px; height:100px; text-align:center; background-color:black;}
</style>
<p id="text2">Hello World</p>
</body>쉽게 설명드려서 이렇게 된다고 보시면 될거에요.
그럼 우선순위가 내부 css가 먼저 되겠죠? 그런데 심화과정으로 가시면 외부 스타일시트가 내부 보다 우선 적용 되는 방법이 여러가지가 있는데 오늘은 css의 기초만 알아보도록 해요.
그럼 우리가 css 작업할때 중요한건 뭐다?? 스타일시트의 우선순위를 알고 작업을 진행하는 것입니다.
저는 특별한 상황이 아니면 내부 스타일 시트는 사용하지 않는 편입니다.
왜 와이? 그렇게 되면 우리가 외부에 정의한 스타일를 수정해야 되고 그렇게 되면 다른 페이지의 디자인이 전부 엉망이 되어 버릴테니깐요. 그렇게 되면 다시 다 작업해야 되는거 아시죠?? ㅠㅠ.....
그럼 여러분들 css작업 하실때 우선 순위를 잘 기억 하시고 작업 하시기 바래요~
다음 시간에 또 같이 공부하도록 해요 ㅎㅎ
'HTML·CSS' 카테고리의 다른 글
| 같이 공부하며 배우는 : 선택자?? (0) | 2023.02.20 |
|---|---|
| 같이 공부하며 배우는 : Display 요소 (0) | 2023.01.24 |
| 같이 공부하며 배우는 : HTML 구조 (0) | 2023.01.15 |
| 같이 공부하며 배우는 : HTML 원리 (0) | 2023.01.15 |
