1. text, font
2. box
3. align
4. overflow
5. visibility, display, opacity
1. text, font
[ 속성 ]
1) color
- 텍스트 색상, 전경색(Fore Color)
- 보통 웹 페이지에서는 #333333 ~ #666666을 많이 쓴다. (기본값인 Black은 잘 안쓴다.)
<style>
#txt1 { color: #666666; }
</style>
2) text-align
- 텍스트 정렬
- 수평 정렬( left, center, right, justify )
- 내용물 수평 정렬( * 여기서 내용물은 모든 인라인 태그(문자열)을 뜻한다. )
<style>
#txt1 { text-align: left; } /* 왼쪽 정렬 */
</style>
3) font-size
- 텍스트 크기
<style>
#txt1 {
font-size: 14px; /* 보통 웹 페이지내의 px 크기는 12px ~ 16px */
font-size: 12pt; /* 보통 웹 페이지내의 pt 크기는 10pt ~ 14pt */
font-size: 0.765em; /* 보통 웹 페이지내의 em 크기는 0.7em ~ 1.2em */
}
</style>
4) line-height, word-spacing, letter-spacing
- line-height : 줄과 줄 사이의 간격
- word-spacing : 단어와 단어 사이의 간격
- letter-spacing : 문자와 문자 사이의 간격
<style>
#txt1 {
line-height: 1.5em; /* 보통 줄 간격은 1.3em ~ 1.6em */
word-spacing: 0em;
letter-spacing: -1px;
}
</style>
5) font-family, font-style, font-weight
- font-family : 글씨체
- font-style : 글씨 스타일 ( normal, italic(기울임) )
- font-weight : 두께 ( normal, bold(굵게) )
<style>
#txt1 {
font-family: '맑은 고딕'; /* 폰트명에 공백이 있을 시 따옴표 표시할 것! */
font-style: italic;
font-weight: bold;
}
</style>
6) text-decoration, text-indent
- text-decoration : 꾸미기 ( none, underline(밑줄), line-through(가운데 줄) )
- text-indent : 문단 들여 쓰기 ( px, em )
<style>
#txt1 {
text-decoration: underline;
text-indent: 1em; /* 보통 들여쓰기는 em을 자주 쓴다. -> 1em 마다 1칸 들여쓰기 */
}
</style>
[ 요약 ]
| 속성 | 설명 |
| color | 텍스트 색상을 설정한다. |
| text-align | 텍스트 정렬을 설정한다. |
| text-decoration | 텍스트 효과(밑줄, 가운데줄)를 설정한다. |
| text-indent | 텍스트 들여쓰기를 설정한다. |
| font-size | 텍스트 크기를 설정한다. |
| font-family | 텍스트 글씨체를 설정한다. |
| font-style | 텍스트 스타일(기울임)을 설정한다. |
| font-weight | 텍스트 두께를 설정한다. |
| line-height | 텍스트 줄 간격을 설정한다. |
| word-spacing | 텍스트 내에서 단어 사이의 간격을 설정한다. |
| letter-spacing | 텍스트 내에서 문자 사이의 간격을 설정한다. |
2. box
[ 정의 ]
- 박스 모델, Box Model
- HTML의 모든 태그는 화면에 출력될 때 직사각형 형태로 출력된다. 이 규칙을 기반으로 적용되는 CSS의 속성(규칙)들을 박스 모델이라고 한다.
[ 속성 ]
1) 테두리 ( border )
- 모든 태그는 출력시 자신의 영역을 가진다. (독점)
- 순수 HTML에서 테두리를 가지는 태그는 일부(테이블, 이미지, 폼 컨트롤)이다.
- CSS는 모든 태그에 테두리 표현이 가능하다. (HTML은 일부 불가)
<style>
#box {
/*
border 표기법 2가지
1. 속성 그룹(한줄)
border: 3px dashed black;
2. 케밥 표기법(HTML, CSS에서 많이 쓰인다.)
border-width: 3px;
border-style: dashed;
border-color: black;
border-style 종류
- solid: 일반선
- dashed: 실선
- dotted: 점선
*/
/* border 방향 지정 */
border-top: 5px solid red;
border-right: 5px solid yellow;
border-bottom: 5px dashed yellowgreen;
border-left: 5px solid blue;
}
</style>
2) 너비, 높이 ( width, height )
- 모든 태그의 영역 크기를 지정한다.
- width : px, %
- height: px, %
<style>
#box {
background-color: orange;
border: 1px solid black;
width: 30%; /* 100% = auto랑 똑같다. */
height: 50px;
}
</style>
3) 여백 ( padding, margin )
| padding (안쪽 여백) | 테두리와 안쪽 컨텐츠 사이의 거리 |
| margin (바깥쪽 여백) | 해당 요소(테두리)와 외부 요소간의 거리, |
<style>
#box {
/*
[ 문법 ]
1. padding 방향(위, 오른쪽, 아래, 왼쪽)
- padding-top: 0px; -> 위
- padding-right: 0px; -> 오른쪽
- padding-bottom: 0px; -> 아래
- padding-left: 0px; -> 왼쪽
2. top -> right -> bottom -> left
- padding: 0px 0px 0px 0px;
3. top -> (right+left) -> bottom
- padding: 0px 0px 0px;
4. top(bottom) - right(left)
- padding: 0px 0px;
5. top(right, left, bottom)
- padding: 0px;
*/
}
</style>
3. align
- 인라인 태그와 블럭 태그의 수평 정렬
1) 인라인 태그
- 내용물의 수평 정렬은 지정할 수 없다.
- 내용물의 크기와 공간의 크기가 동일하기 때문에 움직일 여백이 없다.
- text-align 속성 사용 X
- 스스로 수평 정렬을 할 수 없지만, 부모인 블럭 태그의 text-align을 통해서 수평 정렬이 가능하다.
2) 블럭 태그
- 내용물의 수평 정렬을 지정할 수 있다.
- 내용물의 너비와 무관하게 블럭 태그는 항상 너비가 100%이기 때문에 움직일 여백이 있다.
- 블럭 태그 자체가 스스로 수평 정렬은 못하지만, margin을 사용해서 수평 정렬을 대신한다.( margin-left/right: auto;)
4. overflow
[ 정의 ]
- 요소의 컨텐츠가 너무 커서 요소의 내에 모두 보여주기 힘들 때 그것을 어떻게 보여줄지 지정한다.
- 기본적으로 컨텐츠를 포함하고 있는 요소의 크기가 고정되어 있지 않다면(auto) 컨텐츠를 모두 포함할 수 있도록 요소의 크기가 자동적으로 커진다.
- 만약 크기가 고정되어 있다면 overflow에 지정된 값에 따라 보여지게 된다.
[ 속성 ]
1) visible: 기본값 (넘칠 경우 컨텐츠가 상자 밖으로 보여진다.)
2) hidden: 넘치는 부분은 잘라서 보여지지 않는다.
3) scroll: 스크롤바가 추가되어 스크롤을 할 수 있다.
4) auto: 컨텐츠 량에 따라서 스크롤바를 추가할지 자동으로 결정 된다.
<style>
#box {
overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;
}
</style>
5. visibility, display, opacity
[ visibility 정의 ]
- 요소를 화면에 출력하는 역할
- 요소의 영역이 그대로 유지된다. (눈에 보이지 않을뿐, 객체는 존재한다.)
[ visibility 속성 ]
- visible(기본값): 보임
- hidden: 숨김
<style>
#img { border: 1px solid black; }
#box { visibility: hidden; }
</style>
[ display 정의 ]
- 요소를 화면에 안보이게 하는 역할(none)
- none(기본값): 출력 결과를 생성하지 않는다.
- 요소의 영역도 같이 사라진다. (객체가 없음)
[ display 속성 ]
- block, inline, none(기본값) 등...
<style>
#img { border: 1px solid black; }
#box { display: none; }
</style>
[ opacity 정의 ]
- 요소의 불투명도를 조절한다.
- 불투명도는 요소 뒤쪽 컨텐츠가 숨겨지는 정도 이며 투명도의 반대이다.
[ opacity 속성 ]
- 0 ~ 1 (소수점 가능)
- 0: 투명
- 1: 불투명(기본값)
<style>
#box > img {
opacity: 0.3;
cursor: pointer;
}
#box > img:hover {
opacity: 1;
}
</style>
MEMO>
# CSS에서 가장 중요한것은 selector(선택자)와 Box Model 2가지 이다!!
# CSS작성 시 범위가 큰 것부터 시작해서 작은 것으로 하는게 좋다.
# 문법은 쉬운데 속성들이 많아서 머릿속에서 정리가 잘 안되는거 같다. 틈틈히 CSS 문법 정리 해서 속성도 같이 한눈에 볼 수 있도록 정리해야 겠다.
# 현재 배우고있는 HTML, CSS는 "w3schools" 사이트를 기본 자습서라고 생각하고 자주 들여다 보자.
'교육 > CSS' 카테고리의 다른 글
| CSS 개발자 수업 58일차 - transform, transition (0) | 2021.06.20 |
|---|---|
| CSS 개발자 수업 57일차 - 가상 클래스 선택자, 속성 선택자, 전후 선택자, shadow (0) | 2021.06.20 |
| CSS 개발자 수업 56일차 (0) | 2021.06.17 |
| CSS 개발자 수업 55일차 - float, position, z-index (0) | 2021.06.17 |
| CSS 개발자 수업 53일차 - css, selector, background (0) | 2021.06.12 |
댓글