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의 관계
앞서설명한 개념들은 다음과 같은 관계로 이루어져 있다.
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 |