CSS_2

rmfos82·2021년 11월 22일
0

Computers

목록 보기
3/13
post-thumbnail

블로그 작성은 언제 몇시에 딱딱 해야겠다라고 정해둔건 아니다
그래서 지금 난 자바스크립트제이쿼리쪽을 배워보고 있는데
어렵다... 이해가 될듯 말듯 하다
이해가 될듯 말듯 졸리기도 하고 너무 힘드네 정말
이게 정상이겠지..
이걸 며칠만에 이해하면 지금 내가 이러고 있을게 아니지 그럼..

CSS-part2

전 시간까지 중요한건 css는 classid 값을 주어 이름을 정해준 뒤
그 이름을 호출하여 디자인을 하는 것이라고 했다 그것만 기억하면 된다.

CSS에서 꼭 알야하는게 있다면 BOX MODEL이다 아래 사진을 보자

css는 간단한 텍스트라도 스타일을 주게 되면 보이지는 않지만 이렇게 박스모양을 하게 된다

margin = 바깥여백
border = 박스의 테두리
padding = 안쪽여백
content = 본문

BOX ?

예를들어

<style>
  .box {
   width: 200px;
   height: 200px;
  }
</style>

이렇게 .boxwidth 200px, height 200px 주었다
브라우저를 열어보면

엥? 텍스트만 보인다
하지만 이것은 배경색을 지정해주지 않아서 색이 없기 때문 여기에 색을 주게되면

배경색 지정 : background-color : powderblue;를 입력

이렇듯 CSS는 박스모델이라는 개념이 있다 알아두자
box라는 텍스트를 박스안에서 옮길 수 도 있다

text-align: center; 를 실행하면

뭐 이런식이지

활용

BOX모델을 좀 더 자세히 알아본다면

BOX 하나가 아니다 붙어있는거지 BOX는 3개이다 이제 여기에 margin이라고 하는 바깥여백을 준다면 BOX사이의 여백이 생겨 BOX들이 분리되는 것

<html lang="ko">
<head>
    <title>CSS</title>
    <style>
       .box {
        width: 100px;
        height: 100px;
        background-color: powderblue;
        margin-top: 15px;
        }
    </style>
</head>
<body>
    <div class="box_main">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

CSS는 BOX model만 잘 이해하고 있으면 사용하기도, 활용하기도 쉬워진다 꼭 숙지하고 복습하자

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

0개의 댓글