안녕하세요 오늘은 HTML을 꾸며주는 CSS에 대해 간단하게 알아보고자 합니다.
먼저 간단하게 HTML과 CSS를 설명드리자면
HTML은 구조나 뼈대를 생각하시면 됩니다.
CSS는 그 만들어진 것을 꾸며주는 것으로 생각하시면 되겠습니다.
예를 들어 HTML은 집 구조를 만들었다 치고
CSS는 인테리어를 한다고 생각하시면 되겠습니다.
CSS를 적용하는 방법은 3가지가 있습니다.
1.인라인 스타일(Inline style)
2.내부 스타일 시트(internal style sheet)
3.외부 스타일 시트(External style sheet)
이 3가지 방법이 있는데요.
이제 알아보도록 하겠습니다.
먼저
1.인라인 스타일입니다.
인라인 스타일은 태그 바로 안의 스타일을 넣어 꾸며주는 것인데요.
<h1 style="color:green;">안녕하세요</h1>
이렇게 HTML 태그 안으로 넣어주시면 CSS가 적용된 것을 확인할 수 있습니다.
빨리 확인하려고 할 때 사용하는 방법입니다.
개발자 도구에서 변경을 하시면 바로 인라인 스타일에 들어가 있는 점을 확인하실 수 있습니다.
물론 다시 원 코드내에 해야 완전하게 적용됩니다.
2. 내부 스타일 시트
내부 스타일 시트 방법은
태그 안으로 넣는 것이 아니라 html 문서 내부에 스타일 시트를
만들어서 사용하는 방법입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.test{
color: blue;
}
</style>
</head>
<body>
<h1 class="test">안녕하세요</h1>
</body>
</html>
이렇게 style 시트 안에 넣어서 바꾸고 싶은 것을 가져오는데요.
태그만 선택해서 할수도 있습니다만, 그렇게 되면 모든 태그가 다 바뀌기 때문에
클래스나 아이디를 통해 바꾸고 싶은 것들만 바꾸게 됩니다.
클래스 같은 경우 .클래스명
아이디 같은 경우 #아이디명
이렇게 해서 적용할 수 있습니다.
그래서 위에서는 클래스를 가지고 바꾸기 때문에. test를 이용한 점을 확인하실 수 있습니다.
다만 우선수위에 따라 인라인 스타일과 내부 스타일 방법이 같이 있을 경우 인라인 스타일이
적용됩니다. 그래서 빨리 확인할 때 사용하는 방법이죠.
3. 외부 스타일 시트
이 방법이 다른 사람들의 코드를 봤을 경우 가장 많이 보는 방법일 것입니다.
link를 통해 다른 css 파일을 연동하는 것인데요.
head부분에 link를 통해 외부 css파일을 연동시킵니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="test">안녕하세요</h1>
</body>
</html>
이렇게 타이틀 아랫부분을 보시면 link를 통해 연동시킵니다. 다만 혹시라도 연동이 잘되지 않는다면,
href 경로 부분을 확인해보셔야 할 것입니다. 파일 이름이 다르거나 또는 경로가 달라서 그럴 것입니다.
보통 html 파일과 css파일을 같이 생성하시겠지만 다른 폴더에 생성했을 경우는 ./ 를 통해
해당 위치에 가셔야 합니다.
css 파일에 코드를 이렇습니다.
.test{
color: red;
}
이렇게 하게 되면 색깔이 빨간색으로 바뀌게 됩니다.
다만 이것도 우선순위가 1. 인라인 2. 내부 스타일 3. 외부 스타일
이런 식이라 혹시라도 인라인이나 내부 스타일을 적용했을 경우 외부 스타일과 겹치면
생각한 것처럼 적용이 안됩니다.
그럴 경우 인라인이나 내부 스타일을 제거하는 방법으로 해결해야 할 것입니다.
오늘은 이렇게 CSS에 대해 간단하게 알아보았습니다.
감사합니다.
'프로그래밍 > CSS' 카테고리의 다른 글
| css background background-color 차이점 (0) | 2021.11.08 |
|---|---|
| CSS / 위치 고정 시키기 fixed 겹침 우선순위 z-index (0) | 2021.11.06 |
| css / 데스크탑 반응형 제작 / pc에서 모바일 환경 보기 / 크롬에서 모바일 기기 확인 / 웨일로 모바일 확인 / 데스크 탑에서 모바일 환경 확인 (0) | 2021.09.15 |
| CSS / 미디어 쿼리 / 반응형 웹 / @media / media screen (0) | 2021.09.15 |
| css / calc invalid property value 에러 (0) | 2021.08.20 |