티스토리 뷰

웹/HTML, CSS

[CSS]박스 모델

cll179 2018. 1. 22. 13:03

태그 영역에 테두리 그리기

border-width: 5px;     →    테두리 굵기 5px
border-color : red;     →    테두리 색 빨간색
border-style : solid;    →    실선을 그린다.

 

ex)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
        /*
        block level element
        */
    h1{
        border-width: 5px;
        border-color : red;
        border-style : solid;
    }
    /*
    inline element
    */
    a{
        border-width: 5px;
        border-color : red;
        border-style : solid; 
    }
</style>
 cs

 

- <h1>태그처럼 해당 줄 전체 영역(block)을 쓰는 태그를 'block level element'
- <a> 태그처럼 태그가 씌어진 부분만 영역으로 쓰는 태그를 'inline element' 라고 부른다.
- 영역 크기에 맞게 테두리가 그려진다.


 

- 'display'를 이용해 부분을 지정 할 수 있다.

- 예를 들어 <h1>태그는 block level element지만, inline element처럼 표시할 수 있다.

display : block; , 전체 영역(block level element)로 표시한다.
display : inline; , 부분 영역(inline element)로 표시한다.
display : none; , 현재 영역을 숨긴다.

 

ex)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
        /*
        block level element
        */
    h1{
        border-width: 5px;
        border-color : red;
        border-style : solid;
        display : inline;
        display : none; 
    }
    /*
    inline element
    */
    a{
        border-width: 5px;
        border-color : red;
        border-style : solid; 
        display : block;
    }
</style>
 cs

 

- 위 코드에는 중복이 많다. 아래 처럼 간소화 할 수 있다.

ex) 위 코드와 똑같은 의미이다. 

1
2
3
4
5
<style>
h1,a {
        border: 5px solid red;
    }
</style>
 cs

 

- border : 뒤 순서는 상관 없다.

여백 설정하기

 h1{
        border: 5px solid red;
        padding : 20px;    →    태그 안쪽 여백
        margin : 20px;     →    태그 바깥쪽 간격
        display : block;    →있지만 생략되어 있음. 안적어도 됨
        width : 100px;     →100픽셀 크기만큼 태그 크기가 변경됨.
    }

 

- 웹브라우저의 요소검사를 적극 활용하면 좋다

박스 모델 써먹기

- 요소검사를 적극 활용하며 margin, padding를 설정한다.

ex)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!doctype html>
<html>
<head>
  <style>
    body{
      margin : 0;
    }
    h1{
      text-align : center;
      border-bottom : 1px solid gray;
      margin : 0;
      padding : 20px;
    }
    a{
      color : gray;
      text-decoration: none;
    }
    .saw{
      color : black;
    }
    #active{
      color : red;
    }
    ol{/*ol 태그는 block level element 
        width 지정*/
      border-right : 1px solid gray;
      width : 100px;
      margin :0;
      padding : 20px;
    }
  </style>
  <title>WEB1 - CSS</title>
  <meta charset="utf-8">
</head>
 
<body>
  <h1><a href="index.html">WEB</a></h1>
  <ol>
    <li><a href="1.html" class = "saw">HTML</a></li>
    <li><a href="2.html" class = "saw" id = "active">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <h2>CSS</h2>
  <p>
    Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.[2]
 
CSS is designed primarily to enable the separation of presentation and content, including aspects such as the layout, colors, and fonts.[3] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple HTML pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.
 
Separation of formatting and content makes it possible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. It can also display the web page differently depending on the screen size or viewing device. Readers can also specify a different style sheet, such as a CSS file stored on their own computer, to override the one the author specified.
  </p>
</body>
<html>
 
 cs

 

<실행 결과>

 

 

※

해당 게시물은 '생활코딩'에서 진행하는 코딩야학 3기 수강 내용을 정리한 내용입니다.


본 게시물은 개인적인 용도로 작성된 게시물입니다. 이후 포트폴리오로 사용될 정리 자료이니 불펌과 무단도용은 하지 말아주시고 개인 공부 목적으로만 이용해주시기 바랍니다.

※

저작자표시 비영리 변경금지

'웹 > HTML, CSS' 카테고리의 다른 글

[HTML,CSS]float 레이아웃  (0) 2018.05.22
[CSS]미디어 쿼리  (0) 2018.01.23
[CSS]그리드  (1) 2018.01.23
[HTML/CSS]CSS 문법, 선택자  (0) 2018.01.08
HTML 문법, 자주쓰는 태그  (0) 2017.12.31
댓글