데이터 분석을 위한 웹 개발 언어
✔️ 폰트 변환
✔️ 텍스트 변환
✔️ 레이아웃 설정
✔️ 폰트 변환
폰트 굵기 변경
font-weight: 굵기 설정
normal : 일반적인 굵기
bold : 두꺼운 굵기
h1 {font-weight: normal;}
p > span {font-weight: bold;}<div class="font_style">
<h1>HELLO</h1>
<p>Lorem <span>ipsum</span> dolor sit amet.</p>
</div>(HELLO는 일반적인 굵기로 나타나고, p문장 중 ipsum만 굵은 글씨로 표시)
폰트 크기 변경
font-size : px, em, rem 단위로 설정
px : 한 픽셀이 한 글자로 설정
em : 부모요소를 기준으로 폰트 크기를 조정 (부모 20px 자식 2em(40px))
rem : html(16px)을 지준으로 폰트 크기 조정 (2rem(32px))
.font_size > article > p {font-size: 30px;}
.font_size_em > article {font-size: 40px;}
.font_size_em > article > p {font-size: 1em;}
/* html 전체 글씨 16px 설정 */
html {font-size: 16px;}
.font_size_rem h1 {font-size: 3rem;}<h1>font_size</h1>
<div class="font_size">
<article>
<p>Lorem ipsum dolor sit amet.</p>
</article>
</div>
<h1>font_size_em</h1>
<div class="font_size_em">
<article>
<p>em_Lorem ipsum dolor sit amet.</p>
</article>
</div>
<h1>font_size_rem</h1>
<div class="font_size_rem">
<article>
<h1>title_rem</h1>
</article>
</div>(font_size의 article의 p 문장 글자 크기는 30px로 설정, font_size_em의 article의 글자 크기는 40px로 설정
font_size_em의 p문장의 글자 크기는 1em(40px) 설정, font_size_rem은 html(16px) 설정되어 h1의 글자크기는 3rem(48px)로 설정)
폰트 모양 변경
font-family: "한글 글씨체"/ 영어 글씨체
원하는 글씨체를 사용할 수 있음(기본으로 제공하는 글씨체는 사용 가능)
.font_type li:nth-of-type(1) {font-family: "돋움";}
.font_type li:nth-of-type(2) {font-family: Arial;}<h1>폰트 모양 바꾸기</h1>
<div class="font_type">
<ul>
<li>글자 서체_돋움</li>
<li>font family</li>
</ul>
</div>(기본으로 제공되는 돋움 글씨체와 font family 문장에 Arial(영어 글씨체) 적용)
+
구글 폰트
구글 폰트에 존재하는 글씨체 사용
구글 폰트(구글 검색) -> 구글 폰트 사이트에서 원하는 폰트 선택 -> Get font ->Get embed code -> Web ->
@import -> html코드 카피해서 title 위에 넣음 -> CSS코드 카피해서 붙여넣고 실행
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
<head>
<style>
@import url('구글 폰트 URL');
</style>
</head>
<body>
<h1>구글 폰트 사용하기</h1>
<div class="google_font">
<p class="monoton-regular">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis, architecto.
</p>
</div>
</body>(구글 폰트 중 원하는 글씨체를 p 문장에 적용)
font awesome
font awesome 사이트 활용
회원가입 후 Your kits 진행 -> 프로 말고 나머지 선택 진행 -> 상단 메뉴의 Icons ->
원하는 아이콘 선정 -> HTML코드 복사 및 붙여넣기
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
<h1>폰트 어썸 사이트 이용해서 아이콘 사용하기</h1>
<div>
<!-- 폰트 어썸 사이트의 페이스북 아이콘 HTML코드 -->
<i>폰트 어썸 아이콘 코드</i>
</div>(폰트 어썸 사이트의 원하는 아이콘의 HTML코드를 붙여넣으면 확인 가능)
폰트 색상 변경
색상 적용 방법 : 색상명, 16진수, RGB, RGBA
색상명 : Red, Green, Blue, ...
16진수 : #000000
RGB : rgb(0, 0, 255)
RGBA : rgba(0,0,255,1) (마지막 숫자는 투명도 지정)
.font_color li:nth-child(1) {color: red;}
.font_color li:nth-child(2) {color: #555555;}
.font_color li:nth-child(3) {color: rgb(0, 0, 255);}
.font_color li:nth-child(4) {color : rgba(255, 0, 0, 0.7);}<h1>폰트 색상 변경하기</h1>
<ul class="font_color">
<li>색상명 표기법</li>
<li>16진수 표기법</li>
<li>RGB 표기법</li>
<li>RGBA 표기법</li>
</ul>(색상명 표기법의 글자색은 빨간색, 16진수 표기법의 글자색은 짙은 회색,
RGB 표기법의 글자색은 파란색, RGBA 표기법의 글자색은 70%의 투명도를 가지고 있는 빨간색으로 변환)
✔️ 텍스트 변환
텍스트 줄 간격 변경
.line-height 속성 : 텍스트의 가독성을 조정하거나 디자인 레이아웃을 맞출 때 유용
(문장 표시 할때 문장과 문장 사이의 줄 간격 나타냄)
.line_height {border: 1px solid green}
.line_height .text1 {
font-size: 20px;
line-height: 40px;
border: 1px solid red;
}<h1>텍스트 줄 간격 바꾸기</h1>
<div class="line_height">
<p class="text1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum ipsum laudantium doloribus aliquam reprehenderit sed, officiis ad dolore blanditiis et velit quibusdam delectus veritatis quidem quasi cumque rerum dolorem pariatur.</p>
<p class="text2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus quas similique itaque ratione ducimus ipsum non, tempora molestias temporibus voluptates commodi sequi reprehenderit sint qui voluptate esse quis assumenda fugiat!</p>
<div><p class="text3">Lorem ipsum dolor sit amet.</p></div>
</div>(div는 1px 두께의 초록색 실선 테두리 확인, text1은 글자 크기는 20px이고
줄 간격이 40px의 크기만큼 벌여져 있고, 1px 두께의 빨간색 실선 테두리 확인)
텍스트 정렬 방향 지정
text-align : 텍스트나 인라인 요소의 수평 정렬 방향을 지정
(블록 요소 안에 있는 내용을 왼쪽, 오른쪽, 가운데, 또는 양쪽 정렬 가능)
left : 텍스트를 왼쪽으로 정렬
right : 텍스트를 오른쪽으로 정렬
center : 텍스트를 가운데로 정렬
justify : 텍스트를 양쪽으로 맞춰 정렬(마지막 줄 제외)
.align p:nth-child(1) {text-align: left;}
.align p:nth-child(2) {text-align: center;}
.align p:nth-child(3) {text-align: right;}
.align p:nth-child(4) {text-align: justify;}<h1>텍스트 정렬 방향 지정하기</h1>
<div class="align">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>(p의 1번째 문장은 표시되는 화면 기준으로 왼쪽 정렬, 2번째 문장은 가운데 정렬
3번째 문장은 오른쪽 정렬, 4번째 문장은 텍스트가 한 줄이고,컨테이너 폭을 채우지 못해 왼쪽 정렬처럼 보임)
텍스트 자간 설정
letter-spacing : 텍스트의 문자 간 간격을 조정 가능
(단어 안의 글자들 사이 공간을 넓히거나 좁힐 수 있으며 주로 텍스트 요소에 사용)
.letter_spacing p:nth-child(1) {letter-spacing: 0px;}
.letter_spacing p:nth-child(2) {letter-spacing: 2px;}
.letter_spacing p:nth-child(3) {letter-spacing: -5px;}<h1>텍스트 자간 지정하기</h1>
<div class="letter_spacing">
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
</div>(p의 1번째 문장은 자간을 0px로 설정하여 일반적인 자간으로 표시, 2번째 문장은 자간을 2px로 설정,
3번째 문장은 자간을 -5px로 설정하여 글자끼리 서로 겹쳐서 무슨 단어인지 확인 불가능)
✔️ 레이아웃 설정
너비와 높이 지정
width : 요소의 너비 설정
height : 요소의 높이 설정
(레이아웃을 확인하기 위해서는 border 지정 필요)
설정 가능 단위
px: 너비값과 높잇값을 px 단위로 지정
%: 부모 태그를 기준으로 너빗값과 높잇값을 % 단위로 지정
vw: 웹브라우저의 너비를 기준으로 너비값과 높잇값을 백분율로 지정
vh: 웹브라우저의 높이를 기준으로 너비값과 높잇값을 백분율로 지정
.width_height article:nth-child(1) {width: 100px; height: 100px;}
.width_height article:nth-child(2) {width: 20%; height: 20%;}
.width_height article:nth-child(3) {width: 10vw; height: 10vw;}
.width_height article:nth-child(4) {width: 10vh; height: 10vh;}<div class="width_height">
<article>100px</article>
<article>20%</article>
<article>10vw</article>
<article>10vh</article>
</div>(artcle의 1번째 요소는 너비와 높이를 100px로 설정, 2번째 요소는 너비와 높이가 20%로 설정
3번째 요소는 너비와 높이가 10vw로 설정, 4번째 요소는 너비와 높이가 10vh로 설정)
테두리의 형태 지정
border : 요소의 테두리 두께, 스타일, 색상 설정
(각 블록 요소를 구분할 수 있는 테두리 생성)
div.line_type {border: 1px solid red;}
div.line_type div:nth-child(1) {
border-width: 1px;
border-style: dashed;
border-color: green;}
div.line_type div:nth-child(2) {
border-width: 10px;
border-style: dotted;
border-color: blue;}<h1>테두리의 형태 지정하기</h1>
<div class="line_type">
<div>line1</div>
<div>line2</div>
</div>(line-type은 1px 두께의 빨간 실선 테두리 설정, line1은 1px 두께의 대쉬로 이어진 초록색 테두리 설정
line2는 10px의 점으로 이어진 파란색 테두리 설정)
바깥쪽 여백 지정
margin : 요소 바깥쪽 여백을 설정
(상하좌우를 개별 또는 한 번에 지정 가능)
설정 가능 단위
px, %, em, auto 등
(음수(-) 설정하면 여백을 줄여 겹치는 것도 가능)
margin-top : 위쪽 여백
margin-bottom : 아래쪽 여백
margin-left : 왼쪽 여백
margin-right : 오른쪽 여백
/* 위쪽, 오른쪽, 아래쪽, 왼쪽 */
.margin div:nth-child(1) {
margin: 0px, 10px, 20px, 30px;
text-align: center;}
.margin div:nth-child(2) {
margin-top: 20px;
text-align: center;}
.margin div:nth-child(3) {
margin-left: 20px;
text-align: center;} <h1>바깥쪽 여백 지정하기</h1>
<div class="margin">
<div>box1</div>
<div>box2</div>
<div>box3</div>
</div>(box1은 위(0px), 오른쪽(10px), 왼쪽(20px), 아래(30px)의 여백이 설정,
box2는 위(20px)의 여백과 텍스트 중앙 정렬 설정, box3은 왼쪽(20px) 여백과 텍스트 중앙 정렬 설정)
안쪽 여백 지정
padding : 요소 내부 여백을 설정
(콘텐츠와 테두리 사이 공간 생성)
/* pdding이 적용되었는지 확인하기 위한 테두리 설정 */
div.padding div {border: 1px solid red;}
.padding div:first-child {padding: 30px;}
.padding div:last-child {padding: 30px; box-sizing: border-box;}<h1>안쪽 여백 padding 지정하기</h1>
<div class="padding">
<div>box1_padding</div>
<div>box2_padding</div>
</div>(box1_padding은 1px 두께의 검은색 실선 테두리가 있으며 테두리와 텍스트 사이의 30px의 여백 설정,
box2_padding은 동일하게 적용되었으나 패딩이 크기에 포함되어 요소의 전체 크기는 변하지 않지만 콘텐츠의 영역이 줄어듦)
이번 내용에서는 HTML과 CSS에서의
HTML과 CSS를 활용한 폰트 변환, 텍스트 변환, 레이아웃 설정에 대해 공부하였습니다.
HTML을 공부하는 이유는 데이터 분석을 위해서는 데이터 수집을 진행해야 하는데
웹에서 원하는 데이터를 효율적으로 가져오기 위함입니다.
더불어 데이터 분석을 위해서 DB와 SQL을 공부도 필요한데
위 블로그 글 참고해서 공부하면 좋을 것 같습니다.
'BOOTCAMP/SQL(MySQL)' 카테고리의 글 목록
데이터 분석 공부 열심히 하는 중😁
everyonelove.tistory.com
'BOOTCAMP > 웹 개발 언어' 카테고리의 다른 글
| [HTML][CSS]웹 개발 언어_배경과 배치 및 요소의 효과 설정 (0) | 2025.03.10 |
|---|---|
| [HTML][CSS]웹 개발 언어_CSS의 복합 셀렉터와 가상 셀렉터 (0) | 2025.03.07 |
| [HTML][CSS]웹 개발 언어_CSS의 태그/아이디/클래스/속성 셀렉터 (0) | 2025.03.07 |
| [HTML] 웹 개발 언어_HTML의 목록, 폼, 오디오와 비디오 태그 활용 (0) | 2025.03.06 |
| [HTML] 웹 개발 언어_HTML의 서식 태그 활용 (0) | 2025.03.05 |