CSS 박스모델

2019-01-17

⏱ 읽기 소요 시간: 26 분

1일차

1교시

1
2
3

.wing {
  색상: 빨강;
}

웹사이트는 .html이라는 확장자를 가진 파일이 실행된다.
https://www.naver.com에 접속하면, 실제로는 index.html파일이 실행되는 것이다.

https://www.naver.com/index.html
Ctrl + + / Ctrl + -로 화면을 확대, 축소를 할 수 있다.
전체 큰 틀부터 작성하라.

<!DOCTYPE html>
<!--태그`<>`안에 들어있는 내용은 이미 약속된 내용-->
<html>
  <head>
    <title>Orange</title>
    <!--Orange라고 작성한 내용은 내가 작성하고 싶은 내용-->
  </head>
  <body>
    Orange
  </body>
</html>
<!--태그의 시작부분에 `/`가 있으면 종료 태그를 의미-->

작성한 html 파일을 웹 브라우저를 통해 해석하는 개념이므로,
꼭 저장을 한 후! 실행한 html파일에서 F5를 눌러서 새로고침해서 웹사이트를 확인
검색 엔진에 정보를 전달하기 위해서 내가 어떤 태그를 써야할까 고민하는 게 첫 번째 일이다.
html의 목표는 시각화 하는게 목적이 X. 검색 엔진을 위한 것이기 때문에 디자인적인 요소는 들어가지 않는다.
엔터를 쳤다고 해서 목록으로 정렬되는 게 X.
태그를 사용해서, 목록이라는 의미를 부여해 줘야 한다.

ul(Unordered List): 순서가 정해지지 않은 목록

이미지 삽입

html문서에 이미지가 포함되는 게 X.
이미지를 별도의 파일로 만들고, 불러오기만 가능하다.
image를 줄여서 <img>라는 태그를 사용한다.
는 다른 태그와 목적이 다르기 때문에 닫는 태그가 없다.
태그는 태그 자체가 컨텐츠이기 때문에.
어떤 내용물을 꾸며주는 태그가 아니라, 이미지 자체가 내용물이기 때문에 닫는 태그가 없다.
src(source)는 이미지 경로를 줄 때 사용

2교시

<!DOCTYPE html>
 /* 문서의 버전을 명시(이렇게 작성하면, 최신 버전으로 만들어줌)  */
<html>
/* <head>안에는 문서의 정보가 들어감 */
  <head>
    <title>Orange</title>
    /* html과는 별개로 head안에 style태그를 넣어줌 */
    <style>
      body {
        /*
                background-repeat: no-repeat;
                background-position: center;
*/
        background-image: url(fruit/orange-bg.png);
        background-color: #c5b1fc;
        color: red;
      }
      div {
        background-color: white;
        width: 400px;
        /* margin은 바깥쪽 여백을 주어 전체 요소가 내려갈 수 있게 해줌.*/
        /*                margin-top: 50px;*/
        /* auto는 내가 쓸 수 있는 공간 다 쓸게.*/
        /*
                margin-left: auto;
                margin-right: auto;
                margin의 상단, 하단, 왼쪽, 오른쪽 다 auto로 준다.
                margin: auto;
*/
        /* 상하 좌우 margin주는 걸 실무에서 가장 많이 사용함 */
        margin: 20px auto;
        /*      상하  좌우        */
        margin: 30px auto 40px;
        /*      상   좌우   하    */
        margin: 30px auto 40px 50px;
        /*      (시계 방향을 생각)
                    상    우    하   좌 */

        padding: 50px;
        /*
                border-width: 10px;
                border-style: solid;
                border-color: orange;
*/
        /*단축속성인 border로 여러가지의 속성들을 한꺼번에 줄 수 있다. */

        /* div야, 네 안에 있는 text들이 다 가운데 정렬되게 해라. */
        /* div 자체가 가운데 정렬되는 게 X */
        /* text-align: center;*/
        /* height값을 주지 않았을 때는 자동으로 조절되지만,
        고정값을 주면 나중에 내용이 넘칠 경우에 내용이 밖으로 나가게 된다. */
        /* height는 안 적는게 좋다. */
        /* height: 400px;*/
        /* 넘쳐 흐르는 내용 처리하는 방법*/
        /* overflow: hidden;*/
        /* overflow: scroll;*/
      }
      h1 {
        border-bottom: 5px solid orange;
        /* background-color: antiquewhite; */
        width: 110px;
        /* 기본적으로 배치가 왼쪽으로 붙으므로  */
        /* h1도 박스다. h1은 기본적으로 div처럼 부모의 너비만큼 너비를 차지한다.
        /* 따라서 -> margin을 주려면, width값을 먼저 줘야 적용된다.  */
        /* width값을 따로 주지 않으면, 꽉 차있는 상태니까 margin이 적용되지 않는다.
              ex) 꽉 차 있는 방을 어떻게 가운데 정렬할 수 있겠어요?!
              */
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 5px;
        text-align: center;
      }
    </style>
    /* 태그`<>`안에 들어있는 내용은 이미 약속된 내용 */
    /* Orange라고 작성한 내용은 내가 작성하고 싶은 내용 */
  </head>
    /* 실제 우리 눈에 보이는 영역 */
  <body>
    <div>
      <img src="fruit/orange.png" />
      /* heading1의 의미. 제목을 적을 때 작성 */
      /* h1태그는 웹브라우저에 미리 저장되어 있는 CSS가 적용된 것이다. */
      <h1>Orange</h1>
      <ul>
        <li>Orange</li>
        <li>Kiwi</li>
        <li>Strawberry</li>
      </ul>
    </div>
  </body>
</html>
/* 태그의 시작부분에 `/`가 있으면 종료 태그를 의미 */

부모 태그
자식 태그

들여쓰기 해주는 이유?

부모 - 자식 간의 관계를 직관적으로 인지하게끔 하는 것임

Brackets에 ul>li라고 작성후 tab키 누르면, 부모-자식 관계로 자동 완성할 수 있음
Brackets에 실시간 미리보기라는 기능으로 Chrome에서 F5키를 누르지 않고,
바로 확인이 가능하나 오류가 많기 때문에 수동으로 새로고침하기를 권장

CSS(Cascading Style Sheets)

어떤 요소를 파악하려면, 어떻게 공간을 차지하고 있나를 파악하기 위해서 배경색(background-color)을 많이 사용한다.
h1, body 등은 선택자(Selector)라고 하고, 이 선택자에 {}안에 디자인 코드를 적어주면 스타일을 적용할 수 있다.
background-color, color 등은 속성(property)
:는 구분자
: 구분자 다음에 나오는 내용을 값(value)라고 한다.

; CSS에서 ;를 잘 적어줘야 한다. 빠뜨리면 스타일이 적용되지 x.

Ctrl+ E를 누르면, 컬러를 선택할 수 있는 표가 나온다.

background-image: url()

url()안에 이미지의 경로를 적어준다.
background-image와 background-color는 작성 순서가 중요하지 X

ex) background-repeat: no-repeat;

h1과 ul을 같이 묶어야 같이 옮길 수 있다. -> 새로운 태그로 감싼다.
cf) 이사 다닐 때 박스에 물건을 함께 넣으면 옮기기 편하다는 걸 떠올려라.
div(division): 내가 그룹핑하고 싶은 태그들을 감싸는 역할
ul처럼 목록, h1은 제목 등 의미가 있는데, div는 의미는 없다.
div의 너비(width)는 부모인 body가 가지고 있는 너비만큼이다.
div의 높이(height)는 자식들의 높이만큼 자동으로 조절이 된다.
주석(Comments) 작성법: /**/사이에 메모를 적으면, 브라우저가 이 사이에 있는 내용은 해석하지 않는다.

해당 요소를 가운데 정렬

CSS는 급격하게 발전하면서, 정렬에 대한 키워드가 따로 없다.
margin은 바깥쪽 여백을 나타냄.
사용자들은 각기 다른 화면으로 웹 브라우저를 보기 때문에 왼쪽 기준으로 여백을 주는 것이기 때문에 고정된 px로 주지 말고, auto로 주자.
auto는 내가 쓸 수 있는 공간 다 쓴다는 뜻

1 2	margin-left: auto; margin-right: auto;

여백의 개념은 2가지이다.

안쪽 여백(padding)을 지정할 수 있다.
안쪽 공간이라고 해서 width가 유지되는 게 아니라, width에 padding이 양 옆으로 붙음.
ex) width 400에 padding이 양 옆에 50px씩 붙으니까 500px이 됨.

테두리

border

border도 padding처럼 width, height값에 추가 된다.

border-width
border-style
border-color

CSS에는 단축속성이 있다.
여러가지의 속성들을 한꺼번에 적어줄 수 있다.

1	border: 10px solid orange;

오늘의 핵심 키워드는 CSS 박스 모델(Box Model) 5가지이다. > width, height, margin, padding, border

CSS를 잘하려면, 재료를 잘 이해하고 아이들이 물감 놀이 하듯이 많이 연습해보아야 한다.

/* 내가 작성한 내용 */
h1 {
  color: orange;
  border-bottom: 6px solid orange;
  /* h1도 박스다. margin을 주려면, width값을 먼저 줘야 적용된다. */
  width: 120px;
  margin: auto;
  padding: 6px;
}

/* 강사님이 작성하신 내용 */
h1 {
  border-bottom: 5px solid orange;
  /* background-color: antiquewhite; */
  width: 110px;
  /* 기본적으로 배치가 왼쪽으로 붙으므로  */
  /* h1도 박스다. h1은 기본적으로 div처럼 부모의 너비만큼 너비를 차지한다. */
  /* 따라서 -> margin을 주려면, width값을 먼저 줘야 적용된다.  */
  /* width값을 따로 주지 않으면, 꽉 차있는 상태니까 margin이 적용되지 않는다. 
  ex) 꽉 차 있는 방을 어떻게 가운데 정렬할 수 있겠어요?!
  */
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 5px;
  text-align: center;
}

h1도 박스다. margin을 주려면, width값을 먼저 줘야 적용된다.

꿈꾸는 지구별 개발자, Phang's IT Blog

Front-endCSS

CSS 박스모델

1일차

1교시

이미지 삽입

2교시

들여쓰기 해주는 이유?

해당 요소를 가운데 정렬

여백의 개념은 2가지이다.

테두리

border