css

css는 Cascading Style Sheets의 약자로 레이아웃을 제어하거나 디자인, 스타일을 정의할 때 사용된다.

각 element들을 어디에 어떤 형식으로 배치할 것인지 그리고 색생이나 크기요소 등을 제어하게 된다.

 

css는 3가지 방법으로 사용이 가능하다.

1. inline css(인라인)

먼저 태그에 style 속성을 통해 직접 접근하는 방법이 있다.

<h1 style="color:blue; text-align:center;">This is a heading</h1>

 

2. internal css(내부)

html 파일 내에 있는 head태그 안의 style태그를 통해 css style을 정의하여 사용하는 방식이다.

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

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

 

3. 외부 css

외부에 정의되어 있는 스타일 시트를 불어와 html파일에 적용시키는 방법이다.

외부 css는 head 섹션안에 <link>를 통해 그 링크는 설정함으로서 사용할 수 있다.

 

주석

html파일내의 주석은 <!-- -->이다.

css style태그 안에서의 주석은 /* */로 사용가능하다.

 

color

background-color

border:2px soild COLOR

opacity - 불투명도를 조정할 수 있다. 0에서 1까지의 값으로 한다.

 

 

border-style

 border-style속성은 표시 할 테두리 종류를 지정합니다.

다음과 같은 값이 허용됩니다.

dotted -점선 테두리를 정의

dashed -점선 테두리를 정의합니다

solid -단단한 테두리를 정의

double -이중 테두리를 정의

groove-3D 그루브 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.

ridge-3D 능선 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.

inset-3D 삽입 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.

outset-3D 시작 경계를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.

none -경계를 정의하지 않습니다

hidden -숨겨진 테두리를 정의

 

 

border-width - border의 넓이를 조정한

다.

 

하지만 border 속성하나로 넓이 크기 태두로 종류의 설정을 통합적으로 하는 것이 가능하다.

 

 

Margin

element의 여백을 설정하는 속성이다.

margin-top

margin-right

margin-bottom

margin-left을 통해

4방향의 여백의 크기를 결정할 수 있다.

 

방향설정 없이 그냥 margin:40px으로 설정하는 경우 4가지 방향 모두에 대해 40px의 여백이 적용되게 된다.

 

 

 

padding

margin과 비슷한 개념이지만 확실히 구별하여서 사용해야 하는 개념이다.

margin은 element바깥의 여백에 대한 값이지만 padding은 element안쪽 즉 테두리 안쪽의 공간의 폭을 설정하는 변수이다.

padding-top

padding-right

padding-bottom

padding-left으로 4가지 방향의 padding값을 설정할 수 있다.

 방향설정 없이 그냥 padding:40px으로 설정하는 경우 4가지 방향 모두에 대해 40px의 여백이 적용되게 된다.

 

 

 

 

Box 모델 : border, padding, margin, content의 관계

앞서설명한 개념들은 다음과 같은 관계로 이루어져 있다.

Box model

 

 

 

Box model 예시

 

outline

outline은 테두리 바깥 영역을 의미한다.

다른요소들과 마찬가지로 테두리 크기, 색상, 윤곽선 타입 등을 지정할 수 있다.

outline-width

outline-style

outline-color

 

outline-style type

dotted -점선 윤곽을 정의

dashed -파선 개요를 정의합니다

solid -견고한 윤곽을 정의

double -이중 개요를 정의

groove -3D 그루브 아웃 라인 정의

ridge -3D 능선 윤곽을 정의합니다

inset -3D 삽입 개요를 정의합니다

outset -3D 초기 외곽선을 정의

none -outline를 정의하지 않는다.

hidden -숨겨진 개요를 정의

 

 

 

 

 

outline-offsef

outline과 border(테두리) 사이의 공간값을 의미한다.

 

 

 

text 수직 정렬

vertical-align: middle;

vertical-align: top;

vertical-align: bottom;

 

text 수평 정렬

text-align: center;

text-align: left;

text-align: right;

text-align: justify; - 양쪽여백이 맞춰서 정렬됨. (양쪽정렬)

 

text 변환(대소문자)

text-transform: uppercase; - 모든글자를 대문자로 변환

text-transform: lowercase; - 모든 글자를 소문자로 변환

text-transform: capitalize; - 단어의 첫글자만 대문자로 변환

 

list 스타일

UL

list-style-type: circle;

list-style-type: square;

OL

list-style-type: upper-roman;

list-style-type: lower-alpha;

 

 

overflow 창이 넘쳤을 경우 그것이 보여지는 타입을 설정한다.

visible- 기본. 오버 플로우가 잘리지 않습니다. 내용은 요소 상자 외부에서 렌더링됩니다.

hidden -오버플로가 잘리고 나머지 내용은 보이지 않습니다.

scroll -오버플로가 잘리고 스크롤 막대가 추가되어 나머지 내용을 볼 수 있습니다.

auto-와 비슷 scroll하지만 필요할 때만 스크롤 막대를 추가합니다.

 

 

 

'개발 > Web' 카테고리의 다른 글

[web] Javascipt 기본 개념 정리  (0) 2021.06.17
[web] css 중앙정렬 방법  (0) 2021.06.17
[Web] html form  (0) 2021.06.16
[Web] html 기초정리2  (0) 2021.06.16
[Web] html 기초정리  (0) 2021.06.16

+ Recent posts