-
[CSS] CSS 기본Front-end/CSS 2022. 10. 17. 20:23
CSS의 등장 배경
style 속성을 이용해서 HTML의 배경색, 글꼴 등을 바꿔줄 수도 있다.
<nav style="background-color: black; font-size: 150%; text-align: center"> <a href="index.html" style="color: white">Home</a> <a href="blog_list.html" style="color: white">Blog</a> <a href="about_me.html" style="color: white">About Me</a> </nav>위처럼 쓴다면 여러 개를 수정할 때 하나씩 일일이 수정해줘야하는 번거로움이 있다.
아래처럼 작성하면 한번에 여러 태그들을 수정할 수 있다. 그리고 코드도 깔끔해진다.<head> <style> nav {background-color: green; font-size: 150%; text-align: center} nav a {color: yellow} </style> </head> <body> <nav style="background-color: darkgreen; font-size: 150%; text-align: center"> <a href="index.html" style="color: white">Home</a> <a href="blog_list.html" style="color: white">Blog</a> <a href="about_me.html" style="color: white">About Me</a> </nav> </body>위의 코드도 규모가 커질 경우에는 유지보수에 나쁘다. 여러 html에서 동일한 태그일 경우 동일한 style을 넣고 싶을 때 모든 html 파일에 style 코드를 넣는 것은 비효율적이다. 이를 위해 css 파일을 따로 만든다.
즉, html 파일에 상관없이 동일한 태그들에 동일한 style을 적용하기 위해 별도의 css파일을 사용한다!<!DOCTYPE html> <html> <head> <link href="./practice.css" rel="stylesheet" type="text/css"> </head> </html>CSS(Cascading Style Sheets)란?
웹 문서의 디자인을 구현하기 위한 언어이다.
html이 웹 페이지의 틀을 만들고 내용을 채운다면 css는 텍스트의 크기나 색, 이미지의 크기나 위치등을 지정한다.