-
CSS Tutorial (2) / CSS 시작하기 (2)Programming/Web Programming 2023. 1. 22. 06:15
이어서 챕터2 내용도 작성해 남겨놓는다.
수업을 들을때는 기억이 나는데.. 한 하루 이틀만 지나면 금붕어처럼 까먹어 버리기 때문에!
이 글은 강의를 듣고 정리한 내용이다.
강의는 클래스101, 유노코딩 강사님의 프로그래밍 입문자를 위한 CSS 기초이다.
CLASS101+ | 세상의 모든 클래스를 하나의 구독으로
2700개 이상의 클래스로 일러스트, 공예, 코딩, 부업, 주식까지 세상의 모든 분야를 배워보세요. CLASS101에서 14일 무료 체험해 보세요.
class101.net
챕터2. 텍스트와 박스 모델 - 텍스트, 여백 그리고 배경까지
1강. 텍스트 꾸미기 속성
(1) 텍스트 관련 속성 종류
1) font-family : 글꼴 정의
2) font-size : 글자 크기 정의
3) text-align : 정렬 방식 정의
4) color : 글자 색상 정의
(1) font-family
텍스트의 글꼴을 정의한다.
글꼴 이름을 속성값으로 가진다.
해당 pc에서 혹은 웹브라우저에서 글꼴이 깔려있지 않거나, 지원하지 않는 경우를
대비하여 글꼴을 연달아 기입해 우선 순위를 지정할 수 있다.
* 예시코드
*{
font-family: Times, monospace, serif;
}
=> 모든 텍스트 요소들의 글꼴을 Times로 해주세요.
없으면 monospace 해주세요. 그것도 없으면 serif로 해주세요!
(2) font-size
수치와 단위를 지정해서 글자의 크기를 정의한다.
- 단위는 다음과 같다.
px : 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기
rem : <html> 태그의 font-size에 대응하는 상대적인 크기
em : 부모태그 (상위태그)의 font-size에 대응하는 상대적인 크기
*예시코드
span{ font-size: 16px; }
=> 절대적인 16px 크기로 글자 크기를 정하겠습니다.
span{ font-size: 2rem; }
=> html 태그의 폰트사이즈 * 2배 하겠습니다.
span{ font-size: 1.5em; }
=> 이 span 태그를 감싸고 있는 상위 태그의 font 사이즈의 1.5배를 해주겠습니다.
1. px 단위 사용해보기
h1 태그의 디폴트 사이즈는 32px, p 태그의 디폴트 사이즈는 16p이다.
이 둘의 사이즈를 바꿔보는 살습을 진행해보았다.
2. rem 단위 사용해보기
html 태그를 추가하여 그 안에 기준이 될 폰트 사이즈를 정한다.
2rem 하면 기본폰트 크기의 2배. 이런식으로 정의된다.
3. em 단위 사용해보기
(3) text-align
블록 내에서 텍스트의 정렬 방식을 정의한다.
- 속성값은 다음과 같다.
left / right : 왼쪽 또는 오른쪽 정렬한다.
center : 가운데 정렬한다.
justify : 양끝 정렬한다. (마지막 줄 제외)
모든 문장들의 시작점을 같게, 끝점도 동일하게 맞춰주는 기능이다.
* 예시코드
p{ text-align: right; }
h1 태그는 가운데 정렬, p 태그는 왼쪽 정렬을 했다.
(4) color
텍스트의 색상을 정의한다. 방법은 아주 다양하다.
- 속성값의 유형을 알아보자.
키워드: red,blue,yellow 등 미리 정의된 색상 이름을 사용한다.
RGB 색상 코드 : #+여섯자리 16진수 값 형태
RGB 함수 : Red, Green, Blue의 값을 각각 지정한다.
* 코드예시
span{ color: red; }
/* R: FF, G: 00, B: 00 */
span{ color: #FF0000; }
span{ color: rgb(100%, 0%, 0%); }
=> 모두 같은 레드 색상이다.
justify 속성도 함께 살펴볼 수 있다.
| 정리 |
* font-family는 글꼴을 지정하는 속성이며, 여러 글꼴을 연달아 기입하여 우선순위를 지정할 수 있다.
* font-size는 글자 크기를 지정하는 속성이며, px, rem, em 등의 단위를 사용할 수 있다.
* text-align은 블록 내에서 텍스트의 정렬 방식을 정의한다.
* color는 다양한 방법으로 텍스트의 색상을 정의한다.
(출처: 유노코딩(클래스 101), 프로그래밍 입문자를 위한 CSS 기초)
2강. display 속성 & border 속성
(1) html의 블록레벨 요소 / 인라인 요소 복습
- 블록 레벨 요소 : 영역의 너비를 모두 차지하여 블록을 형성한다. (ex. div, p, h1 등)
- 인라인 요소 : 필요한 만큼의 공간만 차지한다. (ex. span, a 등)
=> 그렇다면 a태그를 블록 레벨로 쓰고 싶다거나, div를 인라인 요소로 쓰고 싶으면 방법이 있을까?
이를, CSS 상에서 변경해줄 수 있다!
(2) display 속성
display 속성은 요소를 블록 / 인라인 요소로 처리하도록 변경할 수 있다.
* 예시코드
div{ display: inline; }
a{ display: block; }
(3) display 속성값
display에는 미리 정의된 키워드 값을 골라 속성값으로 지정한다.
- 속성값의 종류에 대해 알아보자.
inline : 인라인 요소로 처리한다.
block : 블록 레벨 요소로 처리한다.
inline-block : 인라인으로 배치하되, 블록 레벨 요소의 속성을 추가하도록 처리한다.
none : 디스플레이, 즉 화면에 띄우지 않는다.
=> 이 외에도 다양한 속성값들이 존재한다!
(4) border 속성
border 속성은 요소가 차지하고 있는 영역에 테두리를 그려주는 속성!
border 속성에는 속성값으로 테두리의 두께, 모양, 크기 등을 한꺼번에 지정할 수 있다.
이렇게 border 속성처럼 한번에 여러 속성값들을 적어줄 수 있는 속성을 '단축속성' 이라고 한다.
* 예시코드
span{ border: 2px solid green; }
=> 두께가 2px인 직선 모양 (solid)의 초록색 (green) 테두리를 그려준다.
(5) border 속성의 하위 속성
border 속성에 지정하는 값들은 꼭 한번에 써줄 필요는 없다.
취향에 따라 다음 속성명으로 따로 따로 지정해주어도 무관하다.
- 속성명들을 알아보자.
border-color : color 정의 방식과 동일
border-width : thin, medium, thick 등 키워드 또는 px, em, rem 등의 단위로
테두리의 두께를 표현
border-style : none(기본값), solid(직선), dotted(점선), dashed(긴 점선) 등
테두리의 스타일을 결정
border 속성을 이용해 블록 레벨 요소와 인라인 요소가 차지하는 공간의 영역을 볼 수 있다.
<div> 태그의 경우 한번에 모든 속성값을 입력해주었고,
<span>태그의 경우 나누어서 입력해주었다.
<div>는 인라인 요소로, <span>은 블록 레벨 요소로 바꿔주었다.
( <br>도 없애주어 사이의 공백이 사라졌다.)
꼭 div나 span같은 태그명이 아닌, id 값을 지정해 요소의 속성을 바꿔줄 수도 있다.
display의 또 다른 속성인 none과 inline-block을 사용해본 예제이다.
none은 말그대로 화면에서 안보이도록 처리해준다.
안보일 뿐이지 파일내에서 사라지는 것은 절대 아니라는 점을 주의하자.
(웹페이지 에디터에서도 내용이 보인다.)
inline-block은 조금 더 특별해보인다.
웹페이지의 너비를 다 사용하는 블록 레벨과 달리,
자신이 필요한 공간만 차지하는 inline요소로 지정하면서도 블록레벨의 속성을 사용할 수 있도록 해준다.
그렇다면 추가해줄 수 있는 블록 레벨의 속성은 무엇일까?
대표적으로 width와 height가 있다.
인라인요소는 자신에게 딱 필요한 공간만 디폴트로 갖기 때문에
블록레벨처럼 스스로 필요한 영역을 지정해줄 수 없다.
하지만 해당 속성을 사용하면 인라인요소로 사용되면서도 자유롭게 차지하는 영역을 지정할 수 있다.
이 외에도 정말 많은 속성들이 있다고 한다.
| 정리 |
* display 속성은 요소의 블록 레벨, 인라인 여부를 변경 처리할 수 있다.
* display 속성은 요소를 배치할 레이아웃을 결정할 때도 사용할 수 있다.
* border 속성은 요소가 차지하는 영역에 테두리를 그릴 수 있다.
* border는 여러가지 속성을 함께 정의할 수 있는 '단축속성'이다.
* border의 하위 속성은 border-style, border-width, border-color이다.
(출처: 유노코딩(클래스 101), 프로그래밍 입문자를 위한 CSS 기초)
이 글은 클래스 101, "프로그래밍 입문자를 위한 CSS 기초 (유노코딩)" 강의를
기반으로 작성되었음을 알립니다.
'Programming > Web Programming' 카테고리의 다른 글
CSS Tutorial (6) / CSS 시작하기 (6) 선택자, 의사클래스와 의사요소 (0) 2023.01.23 CSS Tutorial (5) flexbox / CSS 시작하기 (5) flexbox (0) 2023.01.23 CSS Tutorial (4) set position / CSS 시작하기 (4) 위치 정하기 (2) 2023.01.23 CSS Tutorial (3) Box Model / CSS 시작하기 (3) 박스 모델 (0) 2023.01.22 CSS Tutorial (1) / CSS 시작하기 (1) (2) 2023.01.22