CSS_1

rmfos82·2021년 11월 21일
0

Computers

목록 보기
2/13
post-thumbnail

어렸을때 젓가락질을 못 했었다
부모님 말로는 엄청나게 가르쳤다고는 하는데 결국 내가 배우기를 거부했겠지
나이가 들어 나의 젓가락질이 남들에게 창피하다고 느낄때 비로소 후회를 했다
고쳐야한다는 생각에 에디슨 젓가락을 구매하고 집어든 순간
너무 어색해, 힘도 들어가지 않아, 손 마디뼈가 너무 아퍼, 이대론
5분도 제대로 식사를 못 할거 같다
교정하는데 얼마나 걸릴까? 한달? 두달? 20년을 넘게 해온 젓가락질이다
더 오랜 시간이 필요하겠지
지금 이 코딩도 그럴것이다 그냥 아무생각 없이 젓가락을 집어드는것 부터 시작해본다.

CSS(Cascading Style Sheets)

Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다

라는데... 뭐 그게 중요하겠나 CSS는 쉽게말하면 HTML의 문서를 디자인해주는 녀석이다.

CSS는 디자인

이렇게 아무것도 아닌 HTML의 뼈대를

사진을 넣고 , 폰트를 바꾸고, 위치를 옮겨주고, 테두리를 감싸는 디자인을 하는게 css란 말이다

CSS를 하려면


CSS를 시작하려면 어떠한 과정이 있어야하는데 아래를 보자
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML</title>
    <style>
        
    </style>
</head>
<body>
    <h1>안녕하세요~!!</h1>
</body>
</html>
<style>
</style>

여기서 style이라고 하는 태그를 작성

이곳에 우리가 디자인할 html태그를 지정해주고, 작성해주기만 하면 작동하는 원리

CSS 해보기


아주아주 평범한 이 BOX라는 텍스트를 꾸며보도록 하자

그 전에 알아야 할 것은 CSS는 절대 혼자서 작동할 수 없고 html과 같이 작성해야 작동이 된다는 점이다 그러기 위해서 html에 명령을 할 수 있게 이름을 지정해주여야 한다

쉽게 말해 명령할 사람의 이름을 부르는 것과 똑같은 이야기다

<body>
    <div>BOX</div>
</body>

html의 body태그 안에 div라는 태그를 만든뒤 box라는 텍스트를 작성하였다
그렇게 브라우저를 실행시키면


이렇게 아무것도 아닌 아주 정직한 BOX라는 텍스만 보이게 된다
이제 이것을 디자인할, 즉 명령을 해줄 이름을 주는 것이다

<div class="box">BOX</div>``

매우 간단하다 이렇게 class="" 라는 것을 통해 box 라는 이름을 부여했다 이 친구는 이제 box라는 이름을 가지게 된것

여기서 끝이 아니다 제일 처음 style이란 태그안에 이름을 지정해 주어야하는데 이런식이다

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .box {
            
        }
    </style>
</head>
<body>
    <div class="box">BOX</div>
</body>
</html>
<style> 태그안에 .box을 넣어준것 여기서 . 은 class를 지칭하는 기호라고 생각하면 된다

주로 사용하게 되는 것

class = .
id = #
전체 = *

이것을 기억하고 이제 BOX에 디자인을 줘보자

<style>
      .box {
      background-color: aqua;
      }
  </style>

box안에 background-color : aqua; 를 입력해보니

배경색이 바뀐것을 확인 할 수 있다

이번엔 여기에 width 라고하는 가로사이즈를 지정하면

<style>
        .box {
        background-color: aqua;
        width: 100px;
        }
    </style>

이렇듯 사이즈가 100px로 작아진것을 확인 할 수 있다 기억하도록 하자

profile
새벽에 처음 해보는 개발 공부! 뜨거운메로나

0개의 댓글