프론트개발자의 필수적인 요소인 CSS에 대해 전체적인 틀만 정리해보고자
이 글을 작성해본다.
What is CSS?
- CSS stands for Cascading Style Sheets
- CSS describes how HTML elements are to be displayed on screen, paper, or in other media
- CSS saves a lot of work. It can control the layout of multiple web pages all at once
- External stylesheets are stored in CSS files *출처 w3school
CSS
- CSS의 정의
우선 CSS의 기본적인 부분부터 알아보고자한다,
작성자의 😂짧은영어실력으로.. 글을 해석하며 천천히 개념을 이해해보려고 한다
개인적인 해석이라 틀릴수도 있음을 강조한다
- CSS는 스타일시트를 Cascading(폭포처럼 떨어뜨리다)라는 뜻인데 아마 '웹페이지상에 스타일을 구현하여 폭포처럼 떨어뜨린다는걸 나타낸다' 이정도로 의역할수있겠다.
- CSS는 HTML의 요소들이 스크린, 종이, 또는 다른 미디어에 전시되는것을 설명할수있다
- CSS는 많은작업을 할수있다. CSS는 다양한 웹페이지의 레이아웃을 한번에 수정이 가능하다.
- 외부적인 스타일시트는 CSS 파일에 저장이된다.
- CSS 사용이유
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
*출처 w3school
- CSS를 사용함으로서 당신의 웹페이지(스크린사이즈와 여러장치들에 대한 표시의 다양성,레이아웃, 디자인을 포함하여) 정의할수있다.
- CSS를 쓰는 이유는 해당부분이 담당하는 역활을 보다 명확하게 구분짓기 위해서라고 생각하면 될거같다. HTML의 경우 구조를, CSS의 경우 디자인을, JS의경우 작동or기능 의 역활을 한다고 이해하면 될거같다.
- 아래 예시는 정말 CSS의 일부분만 사용한 예시이다. 보다 많은 명령어가 존재하며 그 명령어들에 사용되는 em, rem, px등등 많은 단위들이 존재하기에 많은 공부가 필요하다고 생각된다. 😢
ex) 코드, 간단한 예시
<style>
.test div{
width:100px;
height:100px;
border:20px solid #00ff;
margin:5px;
padding:5px;
background:#000;
color:#fff;
font-size:12px;
text-align:center;
font-weight:bold;
}
</style>
<body>
<div class="test">
<div>example</div>
</div>
</body>example(미리보기에는 정상적으로 나오는데 도대체 발행하면 왜 안나오는걸까..)
- CSS사용방법
ex)
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>hi nice meet you</p>
<p id="para1">find. thanks and U?</p>
<p>me too</p>
</body><예시>
hi nice meet you.
find. thanks and U?
me too
도대체 왜 미리보기에는 잘 나오는데 발행하면 css가 작동되지 않는걸까..
- id, class
사실 이부분을 가장 중점적으로 공부해야할거같다.
위 내용중 p{...} 해당부분에 id를 추가하거나, class를 추가하거나
이런내용을 앞으로 CSS를 다루며 가장 많이 보게된다.
기본적인틀은 id ->#${obj}{..}, class -> .${obj}{...}
해당부분의 상세 내용은 다음챕터에서 알아보도록 하자.
