[CSS] 02. 텍스트 스타일, 04. 레이아웃 스타일

ㅁ Emmet 문법 몇가지

p#p$*4

- p 태그 아이디 값으로 p1, p2, p3, p4 부여한다.

이때 시작태그와 종료태그 사이에 들어갈 문구는 중괄호에 쓴다.

p#p${글꼴 및 텍스트 Style Test}*4

<p id="p1">글꼴 및 텍스트 Style Test</p>

<p id="p2">글꼴 및 텍스트 Style Test</p>

<p id="p3">글꼴 및 텍스트 Style Test</p>

<p id="p4">글꼴 및 텍스트 Style Test</p>

ㅁ 텍스트 관련 스타일1

- 글꼴 : font-family

- 크기 : font-size

- 굵기 : font-weight

- 색상 : color

- 속성 : style

<style>

#p1 {

font-family: '보람체', '궁서체';

font-size: 32px; /* 기본값 16px, px | em | % */

font-weight: 900; /* 기본값 400, 100(=lighter) ~ 900(bolder) */

color: red;

color: #12f340; /* RGB 색상코드, 각2 자리(00~ff) 값을 가짐 */

color: rgb(132, 67, 192); /* RGB 색상 함수, 각 자리(0~255) 값을 가짐 */

color: rgba(132, 67, 192, 0.2); /* 마지막 alpha : 투명도 지정 (0:투명, 1:불투명) */

font-style: italic; /* normal(기본), italic, oblique */

}

</style>

- 글꼴마다 한글만 지원되기도 하고 영문도 지원하기도 함.

- 글꼴을 여러개 나열할 경우 첫번째 글꼴이 없으면 그 다음 글꼴이 반영된다.

ㅁ 외부 웹폰트 사용

- 구글에서 제공하는 구글 폰트를 많이 사용한다.

http://fonts.google.com에서 원하는 폰트를 선택해서 해당 폰트 사용

- filter - language에서 korean 적용

- 맘에 드는 폰트를 선택(영어는 지원 여부 확인)해서 "get font "

- 장바구니가서 "< > Get embed code" 클릭

(1) 사용법1. <link>

- Copy code해서 head 태그에 붙여넣기.

- 그리고 스타일 블록에 본인이 선택한 글꼴명 입력.

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#p2 {

font-family: Black Han Sans;

font-family: Nanum Gothic;

}

</style>

</head>

<body>

<p id="p1">글꼴 및 텍스트 Style Test</p>

<p id="p2">글꼴 및 텍스트 Style Test</p>

<p id="p3">글꼴 및 텍스트 Style Test</p>

<p id="p4">글꼴 및 텍스트 Style Test</p>

</body>

</html>

(2) 사용법2. @import

- "style 태그"의 최상단에 작성한다.

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Nanum+Gothic&display=swap');

#p2 {

font-family: Black Han Sans;

font-family: Nanum Gothic;

}

</style>

</head>

<body>

<p id="p1">글꼴 및 텍스트 Style Test</p>

<p id="p2">글꼴 및 텍스트 Style Test</p>

<p id="p3">글꼴 및 텍스트 Style Test</p>

<p id="p4">글꼴 및 텍스트 Style Test</p>

</body>

</html>

- vscode에서 ctrl누른채로 http링크 클릭하면 열림.

ㅁ 텍스트 관련 스타일 2

- 자간 : letter-spacing

- 단어간 : word-spacing

- 행높이 : line-height

- 줄긋기 : text-decoration

- 들여쓰기 : text-indent

- 대소문자 : text-transform

#p3 {

letter-spacing: -2px;

word-spacing: 10px;

line-height: 32px; /* 주로 수직 가운데 정렬을 위해 사용 */

text-decoration: line-through; /* none(기본값), line-through(취소선), underline(밑줄), overline(윗줄) */

text-indent: 20px;

text-transform: capitalize; /* uppercase, lowercase, capitalize(단어의 앞글자마다 대문자) */

}

- 요소의 height와 line-height가 동일하면, 텍스트가 요소의 수직 중앙에 위치합니다.

- 정렬 : text-align (블럭 요소만 제대로 반영됨. 인라인 요소는 제대로 반영 안 됨. 영역이 한줄 전체가 아니라.)

- 그림자 : text-shadow

#p4 {

text-align: right; /* center, right, left(기본값), justify(양쪽 정렬) */

text-shadow: 5px 5px 10px yellowgreen; /* 가로로 5픽셀, 세로로 5픽셀, [번짐정도], [그림자의 색상] */

text-shadow: 5px 5px 10px yellowgreen, 0px -3px 8px yellow, 0px -10px 10px red; /* 그림자 여러개도 가능 */

}

ㅁ CDN

- Contentes Delivery Network

- URL을 이용해서 외부 자원을 사용할 수 있는 방식

- 구글 웹 폰트도, 아이콘도 CDN 방식이다.

ㅁ fontawesome

= 아이콘을 내가 이미지로 다 가지고 있기는 번거로우니까.

- 무료로 아이콘을 제공하는 곳

- 아이콘 사용을 위해 CDN URL이 필요함

- https://cdnjs.com 접속

- fontawesome 검색해서 CDN URL 가져오기 (link 또는 @import 사용)

제일 위의 font-awesome 73k 가장 많은거 선택.

2번째 Copy Link Tag하고 vscode의 head에 복붙.

- https://fontawesome.com 접속해서 원하는 아이콘 검색

user 검색. user모양 아이콘 검색됨. pro붙은거는 유료다.

html에서 그냥 박스 아무데나 클릭하면 바로 복사됨.

- 아이콘 태그 복붙하기

- 아이콘 크기 기우기

- 아이콘 색깔 변경

- 아이콘을 클릭하면 특정 웹사이트로 넘어가게 하기

<p>

</p>

- 전송 버튼을 아이콘으로 하기 (fontawesome에서 search 검색해서 돋보기 아이콘 가져오기)

</form>

</form>

ㅁ 목록 관련 스타일

ul>li*4

<ul>

</ul>

<li>JavaScript</li>

<li>jQuery</li>

</ul>

<li>JavaScript</li>

<li>jQuery</li>

</ol>

- css로도 불릿기호를 변경할 수도 있다.

<style>

#ul1 {

/* 불릿기호 */ list-style-type: none; /* disc(기본값), circle, square, none */

/* 불릿기호 대신 이미지 파일 */ list-style-image: url(../assets/assets/image/icon.png);

}

#ol1 {

list-style-type: decimal-leading-zero; /* decimal 그냥 숫자, decimal-leading-zero 앞에 0붙은 숫자*/

list-style-type: upper-alpha;

list-style-type: lower-alpha;

list-style-type: upper-roman;

list-style-type: lower-roman;

/* 들여쓰기 */ list-style-position: inside; /* outside(기본값), inside */

}

</style>

ㅁ

- 블럭 요소를 박스라고도 얘기함.

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.wrap1 > * {

background: pink;

}

/* 블럭요소는 크기를 지정할 수 있음 */

.wrap1 > div {

width: 100px;

height: 100px;

}

/* 인라인요소는 크기를 지정할 수 없음(아무 변화 없음) */

.wrap1 > span {

width: 100px;

height: 100px;

}

</style>

</head>

<body>

<span>인라인요소</span>

</div>

</body>

</html>

ㅁ 요소 구조

- 외부 여백, 테두리, 내부 여백을 다 포함.

- #이 여백이다. 테두리와 내용물 사이의 여백이다.

[수업자료 주석봐야함]

- 한 요소의 전체 크기는 border + padding + content를 전부 합산한 사이즈이다.

- 가로, 세로 길이 : 내용물 + 내부여백 + 테두리까지

.wrap2>.box${box$}*4

</div>

(1) 테두리 관련 스타일 : border

- 테두리 두께는 기본적으로 box 크기에 영향을 미침.

내가 지정한 가로세로 길이는 content 길이이고, 테두리가 커지면 요소의 사이즈는 내가 지정한 위드 하이트보다 더 커진다. 테두리 사이즈만큼.

- 주요 스타일 속성

border[-위치]-width : 테두리 두께

border[-위치]-style : 테두리 종류

border[-위치]-color : 테두리 색상

border[-상하 중 위치][-좌우 중 위치]-radius : 테두리 모서리(꼭지점)를 둥글게 하는데 사용.

- 단축 스타일 속성

border[-위치] : 테두리 두께, 종류, 색상 한꺼번에 지정

.wrap2 > div {

/* width와 height는 기본적으로 content 영역의 사이즈 */

width: 100px;

height: 100px;

}

.wrap2 > .box1 {

/* 위치를 생략하면 상하좌우 전부 적용 */

border-style: solid; /* solid, dotted, dashed, double, groove, ridge, inset, outset */

border-width: 10px;

border-color: gray;

border-radius: 30px;

}

.wrap2 > .box2 {

border: 3px solid pink;

}

.wrap2 > .box2 {

border-top: 5px dashed red;

border-right: 10px dotted blue;

border-left: 8px double yellow;

border-bottom: 7px double green;

border-top-right-radius: 50px;

border-bottom-left-radius: 30px;

}

.wrap2 > .box3 {

border-style: solid dashed;

border-style: solid dashed dotted double;

border-color: red orange yellow green;

border-radius: 30px 10px; /* 상좌 하우, 상우 하좌 */

border-radius: 30px 10px 20px 40px; /* 상좌 상우 하우 하좌 */

}

.wrap2 > .box4 {

/* box에 그림자 효과 스타일 : box-shadow */

/* 가로거리, 세로거리 ,흐림정도, 번짐정도, 색상 */

border: 1px solid black;

box-shadow: 5px 5px 10px 2px lightgray;

}

(2) 내부 여백 (border와 content 사이 padding)

- 안쪽 여백 관련 스타일 : padding

- 요소 내부 여백은 기본적으로 box 크기에 영향을 미친다. (그만큼 요소 사이즈가 커진다.)

- 주요 스타일 속성

padding[-위치] : 안쪽 여백으로 지정할 값

.wrap3>.box${box$}*3

</div>

<style>

.wrap3 > div {

width: 100px;

height: 100px;

border: 10px solid gray;

}

</style>

<style>

.wrap3 > .box1 {

padding-top: 5px;

padding-left: 20px;

}

</style>

- 요소의 전체 가로길이는 padding과 border를 포함해야 한다.

100px(width) + 20px(여백) + 10px(테두리)

- 요소의 전체 세로길이는

100px(height) + 5px(여백) + 10px(테두리)

.wrap3 > .box2 {

padding: 10px 20px; /* 상하, 좌우 */

padding: 5px 10px 15px 20px; /* 위, 오른쪽, 아래, 왼쪽 */

padding: 10px; /* 상하좌우 */

}

- padding에 4개를 쓰면 "상우하좌" (시계방향).

ㅁ width와 height를 처음부터 테두리까지 포함한 사이즈로 선언할 수 있다.

- box-sizing 속성

width, height값이 어느범위까지의 값인지를 지정. (기본값 content)

(1) box-sizing: content-box;

- 기본값

- width와 height는 내용물(content)까지의 범위를 의미한다.

- 그래서 box 크기는 width/height + border + padding

(2) box-sizing: padding-box;

- width와 height는 내부여백(padding)까지의 범위를 의미한다. (많이 안 씀)

- box 크기는 width/height + border

(3) box-sizing: border-box;

- width와 height는 테두리(border)까지의 범위를 의미한다. (계산이 편해서 엄청 많이 씀)

- box 크기는 width/height

</div>

<style>

.wrap4 > .box1 {

width: 100px;

height: 100px;

box-sizing: border-box;

border: 10px solid gray;

padding: 10px;

}

</style>

ㅁ 외부 여백 관련 스타일 margin

- 요소는 아님. 요소의 바깥쪽 간격.

- 테두리 바깥쪽 공간을 의미하며 box 사이즈와는 상관없음.

- 타 요소간의 간격을 띄우고자할 때 주로 사용.

- 주요 스타일 속성

margin[-위치] : 외부 여백으로 지정할 값

.wrap5>.box${box$}*3

</div>

<style>

.wrap5 {

border: 1px solid black;

}

.wrap5 > div {

box-sizing: border-box;

border: 1px solid gray;

width: 100px;

height: 100px;

}

</style>

.wrap5 > .box1 {

margin-top: 30px;

margin-left: 10px;

margin-bottom: 10px;

}

.wrap5 > .box2 {

margin: 10px 50px; /* 두개만 쓰면 항상 상하, 좌우 */

margin: 50px; /* 한개만 쓰면 상하좌우 */

}

.wrap5 > .box3 {

margin: 10px auto; /* 부모 기준 수평정렬 */

}

- margin: auto; 부모 기준 수평정렬

ㅁ 범위에 벗어난 값 처리

'03. 웹 표준 기술 > CSS' 카테고리의 다른 글

[CSS] 04. 레이아웃 스타일 (0)	2024.08.06
[CSS] 실습문제 (0)	2024.08.06
[CSS] 테이블 관련 스타일 (0)	2024.08.06
[CSS] 03. 색상 스타일 (0)	2024.08.06
[CSS] 01. 기초선택자 (0)	2024.08.05

공부 블로그

[CSS] 02. 텍스트 스타일, 04. 레이아웃 스타일

'03. 웹 표준 기술 > CSS' 카테고리의 다른 글

티스토리툴바

[CSS] 02. 텍스트 스타일, 04. 레이아웃 스타일

'03. 웹 표준 기술 > CSS' 카테고리의 다른 글

관련글

티스토리툴바