CSS_1

10977 단어 CSSCSS

어렸을때 젓가락질을 못 했었다
부모님 말로는 엄청나게 가르쳤다고는 하는데 결국 내가 배우기를 거부했겠지
나이가 들어 나의 젓가락질이 남들에게 창피하다고 느낄때 비로소 후회를 했다
고쳐야한다는 생각에 에디슨 젓가락을 구매하고 집어든 순간
너무 어색해, 힘도 들어가지 않아, 손 마디뼈가 너무 아퍼, 이대론
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로 작아진것을 확인 할 수 있다 기억하도록 하자

자동 제작 병렬 링크 로봇(기계편)
병렬 링크 로봇을 만들어 봤어요.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage