원래 내 3번째 TIL이 이게 될 줄 몰랐다
오늘 아는 지인이 HTML쓸 일이 있어 도와달라고 했는데 맨날 에디터에다 CSS적용하니까
갑자기 헷갈리는거..진짜 초초 기초적인거에 헷갈려해서 충격먹고
집가서 얼른 블로그 작성해놔야겠다고 생각했다 (한숨)😓
인라인 방식
HTML 태그의 style 속성에 CSS 코드를 넣는 방법이다.
예시코드💁♀️
<div style="background-color: black;
color:white";> 인라인 방식 </div>
결과 ✍️ 인라인 방식
div가 선택자가 되고 CSS코드에는 속성과 값만 들어간다.
예시처럼 태그안에 style을 작성하는 방식이고,
벨로그 폰트컬러랑 바꾸는 방법이랑 같다.
하지만 꾸미는데 한계가 있고, 재사용이 불가능한 단점이 있다.
(쓸 일이 거의 없지만, 이렇게 안쓰다가 쓰려니까 갑자기 헷갈리쥬)
내부 스타일 시트
HTML 문서 안에 스타일 코드를 넣는 방법이다.
예시코드💁♀️
<head>
<style>
p { background-color: black;
color:white;
}
</style>
</head>결과 ✍️ 인라인 방식
<style></style> 안에 CSS코드를 넣는다.
<style> 태그는 <head> 태그 사이에 넣어서 사용하는 방법이다.
문서 안에 여러 요소를 한번에 꾸밀 수 있다는 장점이 있지만,
해당 HTML 문서에만 스타일을 적용할 수 있는 단점이 있다.
외부 스타일 시트
CSS파일을 만들고 HTML 문서와 연결하는 방법이다
예시코드💁♀️
<link rel="stylesheet" href="style.css">link태그로 css파일을 연결해주고, css 파일에다
css 기본문법을 사용해가면서 파일을 작성해준다.
여러 HTML 문서에 사용할 수 있고, 적용시키고 싶은 HTML에
link 태그로 연결만 해주면 된다.
@import
css안으로 다른 css파일을 불러들일 경우 사용한다.
@import는 css 파일 안에 공통 css를 불러들일 경우에도 사용할 수 있다.
공통으로 들어가야 할 스타일을 따로 저장하여 다른 css에 삽입시켜 사용 할 수 있도록 한다.
스스로 진짜 너무 충격이었는데..그때 다행히 금방 생각나서 잘 해결하긴 했다.
이번 기회로 다신 안 까먹겠다 하핳 🤪
