css
[유노코딩] CSS 기초강의 4~6강
목차(T.O.C)
1. 텍스트 꾸미기 속성
1-1. 텍스트 관련속성
2. display/ border 속성
2-1. 블록 레벨 요소/인라인 요소
3. 박스모델
3-1. 박스모델
CSS 에 대해 알아보자
4강. 텍스트 꾸미기 속성
글자를 꾸며보자
텍스트 관련속성
1. font-family : 글꼴을 정의한다
요소를 구성하는 텍스트의 글꼴을 정의한다
글꼴명을 속성값을 지정한다.
여러개의 글꼴을 연달아 기입하여 우선순위를 지정가능하다.
*{
font-family: Times, monospace, serif;
}
2. font-size: 글자크기를 정의한다
수치와 단위를 지정하여 글자의 크기를 정의한다
- px: 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기
- rem: <html> 폰트 사이즈에 대응하는 상대적인 크기
- em: 부모 태그에 대응하는 상대적인 크기
span{ font-size: 16px;}
span{ font-size: 2rem;}
span{ font-size:1.5em;}
3. text-align : 정렬 방식을 정의한다
블록 내에서 텍스트의 정렬방식을 정의한다. 미리 정의된 키워드 값을 지정한다.
- left/right: 왼쪽 또는 오른쪽 정렬한다
- center: 가운데 정렬한다
- justify: 양끝정렬한다
p{ text-align: right; }
4. color: 글자색상을 정의한다
텍스트의 색상을 정의한다
- 키워드: 미리 정의된 색상별 키워드를 사용한다(red, blue)
- RGB 색상 코드: # + 여섯자리 16진수 값 형태로 지정한다
- RGB 함수: Red, Green, Blue 의 수준을 각각 정의해 지정한다.
span{ color: red;}
span{ color: #FF0000;}
span{ color: rgb(100%, 10% , 0%;}
5강. display 속성/ border 속성
인라인이냐 블록이냐
블록 레벨 요소 vs 인라인 요소
1. 블록 레벨 요소
자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다
2. 인라인 요소
자기에게 필요한 만큼의 공간만 차지한다.
3. display 속성
display 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할 지 정의한다.
/*
블록 레벨 요소인 div 요소를
인라인으로 처리하고 싶다면
*/
div { display: inline; }
/*
인라인 요소인 a 요소를
블록레벨로 처리하고 싶다면
*/
a{ dispaly: block; }
4. display 속성값
display에는 미리 정의되어 있는 키워드를 속성값으로 지정한다.
- inline: 인라인으로 처리한다
- block: 블록 레벨로 처리한다
- lnline-block: 인라인으로 배치하되 블록레벨 요소의 속성을 추가가능하도록 처리한다
- none: display 에 표시하지 않는다.
5. border 속성
border 속성을 사용하면 요소가 차지하고 있는 영역에 테두리를 그릴 수 있다.
border 속성에는 속성값으로 테두리의 두께 모양 색상등을 함께지정할 수 있다.
span{ border: 2px solid green; }
- border-width: thin, medium ,thick 등의 키워드 또는 px,em, rem 등의 단위
- border-style: none(기본값), solid(직선), dotted(점선), dashed(긴 점선) 등
- border-color: color 의 정의방식과 동일
6강. 박스모델 1
레이아웃은 모두 사각형이다.
박스모델(Box-Model)
브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다.
이 영역을 '박스' 라 표현하며,
Css 는 박스의 크기 위치 속성을 결정할 수 있다.
하나의 박스는 4개의 영역으로 구성된다
- 콘텐츠 영역
- 안쪽 여백
- 경계선
- 바깥쪽 여백
1. 박스 각 영역의 크기는 어떻게?
박스 각 영역의 크기를 정의할 수 있는 속성은 다음과 같다.
- 콘텐츠 영역: width, height
- 안쪽 여백: padding
- 바깥쪽 여백: margin
- 테두리: border-width
'CSS' 카테고리의 다른 글
| #29. [유노코딩] CSS 기초강의 1~3강 (3) | 2025.08.13 |
|---|