HTML&CSS 공부하기!

[Chapter 4] CSS 불러오는 방법과 박스모델

CSS 사용방법 3가지

외부 스타일 시트(External style sheet)
내부 스타일 시트(Internal style sheet)
HTML 태그내에 스타일 지정 (Inline style)

외부 스타일 시트(External style sheet)

외부 스타일 시트는 .css 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML문서에서 연결하여 사용하는 방법이다. 이 스타일을 사용할 경우 하나의 파일을 변경하여 전체 웹사이트의 디자인을 변경할 수 있다.

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

내부 스타일 시트(Internal style sheet)

내부 스타일은 하나의 페이지에 고유의 스타일인 경우 내부 스타일를 사용할 수 있다. HTML문서 내에 <head> 섹션에 <style> 요소 내에 정의하는 방법니다.

<head>
    <style>
        body {
            background-color: linen;
        }

        h1 {
            color: maroon;
            margin-left: 40px;
        }
    </style>
</head>

인라인 스타일 시트(Inline style)

인라인 스타일은 단일 요소(태그)에 고유한 스타일을 적용하기 위해 사용한다.

인라인 스타일은 일괄변경의 효율성 측면으로 볼때는 바람직하지 않는 방법이다. 스타일 시트의 많은 장점을 잃기 때문에 가급적 이 방법은 사용하지 않는 것이 좋다.

사용범위가 매우 제한적이다.
추후 웹 사이트를 수정하는데 엄청난 시간과 비용의 낭비를 가져올 수 있다.

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

다수의 스타일 시트 (Multiple Style Sheets)

일부 속성이 다른 스타일 시트에서 동일한 선택자를 정의 된 경우, 값이보다 명화학 구체적인 스타일 시트에 상속한다.

스타일을 계단식으로 지정할 수 있다.

외부 CSS 파일
HTML 페이지 <head> 내부 섹션
HTML 요소 내부

CSS Selector

p { color: red } 이 경우, p는 선택자, color는 속성, red는 값이다. { }는 속성을 선언하는 부분 이다.

The element Selector

태그 선택자는 태그 이름을 기준으로 태그를 선택한다.

같은 페이지 있는 모든 <p>태그를 선택할 수 있다. (모든 <p>태그는 빨간색 텍스트 색상으로 가운데 정렬이 된다.)

p {
    text-align:center;
    color:red;
}

The id Selector

ID 선택자는 특정 요소를 선택하는 HTML 엘리먼트에 id 속성을 사용한다. 중요한 구조에 해당하는 엘리먼트를 지정할 때 유용하게 사용할 수 있다. 또한 특정 링크나 폼 엘리먼트처럼 하나만 존재하는 엘리먼트를 지정할 때도 유용하다.

주의: ID이름 숫자로 먼저 시작하지 않는다!

The Class Selector

Class 선택자는 특정 클래스 속성을 가진 요소를 선택한다.

.center {
    text-align:center;
    color:red;
}
p.center{
    text-align:center;
    color:red;
}

주의: 숫자로 클래스 이름을 시작하지 않는다!

Grouping Selectors

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

그룹으로 선택하면 다음과 같다. 코드를 최소화 시킬 수 있다.

h1, h2, p {
    text-align: center;
    color: red;
}

Box Model

페이지 안에 표시되는 모든 요소는 사각형의 박스모델로 다뤄진다. 박스모델은 margins, borders, padding, content으로 구성된다.

Content - content 박스는 텍스트와 이미지가 표시된다.
Padding - content 주위의 영역이고 투명이다.
Borders - padding과 content 주위에 border가 있다.
'Margins' - border 바깥 영역에 있다. 그리고 투명이다.

예제보기

Width and Height 요소

모든 브라우저에서 넓이 및 높이를 올바르게 설정하기 위해서는 박스모델이 어떻게 돌아가는 알 필요가 있다.

요소의 전체 크기를 계산하려면, padding과 border 및 margin을 추가해야한다.

예제보기 위의 예제 계산을 해보면 320px (width) + 20px (left + right padding) + 10px (left+ right border) + 0px (left+right margin) = 350px 이렇게 나온다. 즉 이미지와 같은 영역이 된다.

Border

CSS의 border 속성은 요소의 선 스타일, 크기 및 색상을 지정할 수 있다.
border 스타일 속성이 설정되어 있지 않으면 border 속성 중에 어떠한 영향을 주지 않습니다.

Border Style

HTML :

<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>

CSS :

p.none {border-style: none;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}

결과보기

Border Width

Border-Width는 border의 두께지정할 때 사용한다. border-width는 혼자 사용할 경우 적용되지 않는다. 항상 style과 함께 사용해야 적용이 된다.
HTML :

<p class="one">블라블라블라.</p>
<p class="two">블라블라블라.</p>
<p class="three">블라블라블라.</p>
<p><b>노트:</b> border-width를 단독으로 사용할 경우 적용되지 않는다. style도 지정해줘야 적용이 된다.</p>

CSS :

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: solid;
    border-width: 1px;
}

결과보기

Border Color

border color는 border의 색상을 지정할 수 있다.

name - 색상 이름으로 지정 할수 있다. 예) red
RGB - RGB값으로 지정할 수 있다. 예) rgb(255,0,0)
Hex - hex값으로 지정할 수 있다. 예) #ff0000 그리고 투명도로 지정할수 있다. 예)transparent

HTML :

<p class="one">빨간색 라인</p>
<p class="two">녹색 라인</p>

CSS :

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: #98bf21;
}

Note: border-color도 혼자 사용할 경우 적용이 안된다. border-style과 함께 사용해야한다. 결과보기

Border - 개별사용

HTML:

<p>border 2개가 다르게 지정하기</p>

CSS:

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}

결과보기

border 속성은 1개에서 4개의 값을 가질 수 있다.

border-style: dotted solid double dashed;
- top은 dotted
- right은 solid
- bottom은 double
- left은 dashed
border-style: dotted solid double;
- top border가 dotted
- right and left가 solid
- bottom은 double
border-style: dotted solid;
- top and bottom가 dotted
- right and left가 solid
border-style: dotted;
- 4개의 border 값이 dotted

Border - 축양형

예제보기 :

p {
    border: 3px solid red;
}

모든 CSS border 속성

border
border-width
border-style
border-color
border-top
border-top-color
border-top-style
border-top-width
border-right
border-right-color
border-right-style
border-right-width
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-left
border-left-color
border-left-style
border-left-width

Margin

Margin 속성은 요소 주위의 공간을 정의한다. border의 바깥 영역이다.

margin 값을 다르게 줄 수 있다. top, right, bottom, left HTML :

<p>마진 값을 지정하지 않음.</p>
<p class="ex">마진 값을 지정 함.</p>
<p class="ex2">마진 값을 지정 축약형</p>

CSS :

p {
    background-color: yellow;
}

p.ex {
    margin-top: 100px;
    margin-right: 150px;
    margin-bottom: 100px;
    margin-left: 50px;
}
p.ex2 { margin: 50px 30px; }

결과보기

margin 속성은 1개에서 4개의 값을 가질 수 있다.

margin: 25px 50px 75px 100px;
- top margin은 25px
- right margin은 50px
- bottom margin은 75px
- left margin은 100px
margin: 25px 50px 75px;
- top margin은25px
- right and left margins은 50px
- bottom margin은 75px
margin: 25px 50px;
- top and bottom margins은 25px
- right and left margins은 50px
margin: 25px;
- 4개의 margins은 25px

Padding

padding은 요소의 border와 내용 사이의 공간을 정의한다. border의 안쪽 영역이다. HTML :

<p>padding 값을 지정하지 않음.</p>
<p class="padding">padding 값을 지정.</p>
<p class="padding2">padding 값을 축약형으로 지정.</p>

CSS :

p {
    background-color: yellow;
}

p.padding {
    padding-top: 25px;
    padding-right: 50px;
    padding-bottom: 25px;
    padding-left: 50px;
}

p.padding2 {
    padding:25px 50px;
}

결과보기

padding 속성은 1개에서 4개의 값을 가질 수 있다.

padding: 25px 50px 75px 100px;
- top padding은 25px
- right padding은 50px
- bottom padding은 75px
- left padding은 100px
padding: 25px 50px 75px;
- top padding은 25px
- right and left paddings은 50px
- bottom padding은 75px
padding: 25px 50px;
- top and bottom paddings은 25px
- right and left paddings은 50px
padding: 25px;
- 4개의 paddings 값이 25px