안녕하세요! 오늘은 CSS에 대해서 정리해보도록 하겠습니다!
사실 CSS는 내용이 HTML보다 더 많아서 포스팅이 더 길어질 것 같긴한데 그래도 이왕 시작한거 끝을 봐야겠죠~~??
그럼 CSS첫번째 포스팅 시작해보도록 하겠습니다!
1. CSS란 무엇인가?
Cascading Style Sheet의 약자입니다! 여기에서 Cascading는 '폭포, 연속적인'이라는 의미를 갖는 단어인데 이는 상위요소에서 지정한 스타일이 하위요소까지 연속적으로 적용된다는 의미로 css에서는 적용해 볼 수 있겠죠?
모든 속성이 다 cascading 되지는 않지만 중요한 속성이므로 cascading의 의미는 잘 알아두는 것이 좋다고 합니다!
웹페이지를 디자인 하기위해 사용하는 스타일 언어죠!
그렇다면 CSS는 왜 사용하는 걸까요? HTML이 빈 집이라고 하면 CSS는 그 안을 인테리어하는 것이라 볼 수 있습니다!
웹브라우저에서 CSS가 하는 역할은 개발자도구(F12)를 눌러 HEAD에서 링크들을 모두 없애면 CSS가 사라지는데 이를 통해서 CSS가 어떤 역할을 하는지 확인해 볼 수 있어요!
한번 APPLE홈페이지에서 확인해보도록 할게요!
apple 홈페이지를 접속하면 이와 같은 화면이 뜹니다!
여기에서 개발자 도구를 열어서 <meta>tag아래의 <link>태그를 모두 없애보도록 할게요!
모두 지워주면~~
이렇게 보니 웹브라우저에서 CSS가 얼마나 중요한 역할을 하는지 아시겠나용??
그런데 이렇게 우리가 친숙하게 사용하던 웹페이지의 개발자 도구를 열어서 직접 바꿔볼 수 있다니 신기하지 않나요?
일시적이긴 하지만 우리는 개발자도구를 열어서 지금 보고 있는 웹페이지의 HTML, CSS, JAVASCRIPT등을 볼 수 있어요. 개발자 도구를 이용하면 특정 요소의 코드를 볼 수도있고, 크기도 줄여볼 수 있고, 모바일버전도 확인이 가능해요!
2. CSS 참조방식
그럼 우리 이제 CSS가 무엇인지, 웹브라우저에서 어떤 역할을 하는지 알아보았으니 어떻게 하면 CSS를 사용할 수 있는지 알아보도록 하겠습니다!
css를 사용하는 방법을 참조 방식이라 하는데 크게 인라인방식, 내장방식, 링크방식으로 나눠볼 수 있어요!
1)인라인방식
인라인 방식은 각 요소의 style 속성에 전부 스타일을 직접 적어주어야 해요. 아래에서 같은 스타일을 가진 태그를 사용하려면 코드를 복붙해야해요. 즉 재사용이 전혀 불가능하다는 말이죠! 그러니 인라인 방식은 되도록 피해주는게 좋겠죠?
2)내장방식
HTML의 <head>태그 내부에 사용할 style을 <style>태그로 미리 선언하여 사용해요. 태그에 같은 스타일 적용이 가능해서 인라인 방식보다는 편리합니다. 하지만 다른 HTML파일에는 사용할 수 없고, 스타일이 바뀌면 모두 바꾸어줘야하는 불편함이 있어요!
3)링크방식
링크방식은 모든 style을 하나의 CSS파일에 넣고, 필요한 HTML파일에서 해당 파일을 링크해서 사용하는 방식으로 재사용이 가능해서 가장 많이 사용하고 추천하는 방식이에요!
세가지 방식이 겹칠 경우 인라인 방식이 가장 우선순위가 높고, 내장방식과 링크방식은 때에따라 우선순위가 달라지는데 이는 늦게 쓰여진 것의 우선순위가 높다고 해요!
위의 코드는 index.html이고 아래는 링크방식<link rel="stylesheet" href="./index.css">으로 CSS를 참조한 index.css파일 입니다!
웹 브라우저에서는
이렇게 나오는 것을 확인해 볼 수 있겠네요!
이렇게 세가지 방식을 살펴보았는데요, 앞으로 우리는 어떤 참조방식을 가장 많이 사용하게 될까요? 당연히 링크방식이겠죠? 그래서 다음 포스팅부터는 html에 css파일링크를 연결해서 html의 요소들에 스타일을 적용하는지 알아보는 "선택자(selector)"에 대해서 알아보도록 하겠습니다!
'[새싹X코딩온]웹 풀스택' 카테고리의 다른 글
| [새싹X코딩온]웹 풀스택 1주차(7/21)회고록|CSS(3)-선택자(Selector)2 (0) | 2023.07.26 |
|---|---|
| [새싹X코딩온]웹 풀스택 1주차(7/21)회고록|CSS(2)-선택자(Selector)1 (0) | 2023.07.25 |
| [새싹X코딩온]웹 풀스택 1주차(7/19) HTML(3) 회고록 (0) | 2023.07.24 |
| [새싹X코딩온]웹 풀스택 1주차(7/19) HTML(2) 회고록 (1) | 2023.07.24 |
| [새싹X코딩온]웹 풀스택 1주차(7/19) HTML(1) 회고록 (0) | 2023.07.24 |
