3. CSS 적용 및 CSS 파일 활용법
안녕하세요~ 오늘은 CSS 적용 방법(작성법)과 파일을 이용한 적용 방법을 함께해 볼 꺼에요.
오늘 진행 할 내용은 head tag 안에 사용하는 style tag와
.css 파일에 대해 알아 볼 껀데요.
그 전에 사용했던 p tag, a tag 등 tag에 스타일을 적용하는 방법입니다.
스타일에 적용할 수 있는 언어(?)
-> https://www.w3schools.com/cssref/default.asp
위 사이트에 적용할 수 있는 스타일 종류들이 있습니다.
따로 설명하기엔 글이 너무 길어지기 때문에 생략하도록 하고 밑에 실습에서
기본적인 width와 height를 사용해서 넓이와 폭을 조정하는 것을 보여드리겠습니다.
자, 이제 스타일 종류 3가지를 알아 볼 껀데요.
첫번째로 인라인 스타일 적용
두번째로 내부 스타일 적용
세번째로 외부 스타일 적용에 대해서 알아 볼께요~~
1. 인라인 스타일 적용
가장 먼저 인라인 스타일로 적용을 해 볼 텐데요.
시작하기 전에 인라인 스타일이 무엇인지 알아야 될 꺼에요.
인라인 스타일이란 밑에서 설명할 내부 스타일과 외부 스타일과는 다르게
body tag 안에서 사용하는 스타일 입니다.
잠깐 예로 들자면 div tag가 있으면 <div style="width: 100px;"></div>
이런 식으로 적용 시켜주는게 인라인 스타일이라고 합니다.
실습을 한번 진행해 볼까요??
이런식으로 tag 안쪽으로 style이라는 속성이 들어가게 되면 이게
인라인 스타일이 되는 거랍니다.
인라인 스타일에 대해서 조금은 아시겠죠??
이제 결과값을 볼까요??
이렇게 주변에 영역부분이 늘어난 것을 보실 수 있습니다.
이런식으로 px값으로 지정해 주셔도 되고 %로 지정해 주셔도 됩니다.
참! 여기서 한가지 그냥 div에 height 값을 %로 지정해 주시면 적용이 되지 않습니다.
height 값을 %로 지정해 주시고 싶으실 때는 부모가 되는 객체가 있어야지만 그 위치에 대해서 % 값을 줄 수 있습니다.
자 이 설명은 css 게시판에서 자세히 설명해 드리도록하고
다른 tag에서도 이런식으로 적용할 수 있겠죠??
<tag명 style=""> 이렇게!!
2. 내부 스타일 적용
다음으로 내부 스타일에 대해 알아볼께요!!
자 여기서 눈치 빠르신 분들은 눈치 채셨겠지만 내부와 외부가 나눠져 있으면
안에서 쓰는 것과 밖에서 쓰는 것으로 나눠져 있겠네? 라고 말이에요.
그게 그건가요?? 그럼! 사용 예를 들어 보겠습니다!
html Templet을 보시면 head tag 안에 title과 meta가 써져 있는게 보이시나요??
그럼 여기서 두번째 게시글을 읽으신 분들은 아시겠죠??
head tag안에는 title tag, meta tag, style tag 등등 들어간다고 알려드렸죠??
그렇기에 <head><style></style></head>
이런식으로 들어간다고 보시면 됩니다.
인라인 스타일에서 tag 옆에 style을 줬다면 내부 스타일에서는
tag명 { 스타일 속성; 스타일 속성; } 식으로 들어 간다고 보시면 됩니다.
또한 같은 이름의 tag가 여러개 있을 때 한개의 tag의 스타일 속성만 변경하고 싶으면
class name과 id 값으로 그 tag만 변경할 수 있습니다.
또한 클래스명으로 줬을 경우에는
.tag명 { 스타일속성; 스타일속성; } tag명 앞에 . 이 들어가야하며
아이디 값으로 줬을 경우에는
#tag명 { 스타일속성; 스타일 속성; } tag명 앞에 # 이 들어가야 합니다.
그것은 실습으로 들어가서 확인해 보도록 할꼐요!!
이런 식으로 head tag 안쪽에 style tag를 입력하고 그 안에 tag 명 { 스타일 속성; } 식으로
입력하시면 됩니다.
단지 변경 된 것이라곤 body tag의 tag명 바로 옆에 붙어있었던 style tag가 gead tag 안으로 들어갔다고 생각하시면 됩니다.
자 이제 마지막으로 외부 스타일을 적용시켜 보겠습니다.
3. 외부 스타일 적용
외부 스타일은 말 그대로 외부에 있는 스타일은 main html파일에 적용 시킨다는 뜻 입니다.
그래서! 필요한게 새로운 파일을 생성해야 하는데요.
.css 파일이라고 스타일을 입력해서 그 파일을 불러오게 되는 것입니다.
이런식으로 스타일을 입히게 된다면 head안에는 style이라는 tag가 들어갈 필요가 없어지게 됩니다.
단, link tag를 이용해서 css 파일을 불러와야 하는데요.
사용 방법은 다음과 같습니다.
<link rel="stylesheet" href="파일명.css">
실습을 진행해 볼까요??
이런식으로 입력해 주시면 결과 값이 아래와 같이 나오게 됩니다!
자 이런식으로 인라인 스타일, 내부 스타일, 외부 스타일 식으로 정렬 된 것을 볼 수 있습니다.
스타일을 입히는 방법은 여러가지가 있는데 저는 css 파일을 만들어서 개발하시는 걸 추천하고 싶네요.
자 오늘은 여기서 마무리를 짖고
다음 게시글에서는 지금까지 했던 것을 응용해서 기본적인 페이지를 하나 만들어 볼께요!!
다음 게시글까지 건강하세요!!