- 다중 클래스
- 컬러
- 단위
- line-height
- letter-spacing
- white-space
- word-break
- text-transform
- display
1) 다중 클래스
하나의 요소에 여러 가지 클래스를 적용시킬 수 있다.
예를 들어 아래와 같이 몇 가지 조건을 통일시킨 박스를 각각 다른 조건으로 만들고 싶을 때
.box {
border: 2px solid #000;
height: 100px;
margin: 15px auto;
text-align: center;
font-size: 25px;
}다음과 같이 알아보기 쉽게 여러 클래스를 만들어 두고
.red {background-color: red;}
.pink {background-color: pink;}
.green {background-color: green;}
.w100 {width: 100px;}
.w200 {width: 200px;}
.w300 {width: 300px;}원하는 클래스만 나열하면 그대로 적용이 된다.
<div class="box red w100">테스트1</div>
<div class="box green w200">테스트2</div>
<div class="box red w100">테스트3</div>
<div class="box pink w300">테스트4</div>
<div class="box red w300">테스트5</div>
2) 컬러
css로 컬러를 적용시키는 방법 4가지 방법을 배웠다.
2-1) 헥스 코드
#ffffff 처럼 16진수(0~8,9,a,b~f)를 사용하는 헥스 코드
2-2)키워드
red, green, white, orange처럼 직접 키워드를 입력해도 적용할 수 있다.
2-3)rgb
각각 red, green, blue를 의미하며 값의 범위는 rgb(0~255,0~255,0~255)이다.
rgba는 기존 rgb에서 투명도를 나타낼 수 있는 alpha가 추가되었다. rgba(0~255,0~255,0~255,0~1(alpha 투명도))
2-4) hsl
각각 색상, 채도, 밝기를 의미하며 마찬가지로 값의 범위를 hsl(0~360,0~100,0~100)와 같이 나타낼 수 있다.
hsla(색상,채도,밝기,투명도) hsla(0~360,0~100,0~100,0~1)
3)단위
가장 기본적으로 사용하는 단위는 px(픽셀)이며 모바일용 웹 혹은 반응형 웹엔 부모의 크기를 기준으로 설정하는 %가 많이 쓰인다.
.box1 {background-color: #F48FB1;
width: 10%;}
.box2 {background-color: #FF8A80;
width: 20%;}
.box3 {background-color: #90CAF9;
width: 30%;}
.box4 {background-color: #4DD0E1;
width: 40%;}
.box5 {background-color: #FFF59D;
width: 50%;}
*전체 박스를 margin: auto를 사용하여 가운데 정렬을 하였다. {margin: auto;}
body {
font-size: 50px;
/* 하위 자식, 자손은 상속 */
}
/* 부모(body) 크기의 100% */
.box2 { font-size: 80%;}
/* 부모(box1) 크기의 80% */
.box3 { font-size: 80%;}
.box4 { font-size: 80%;}
.box5 { font-size: 80%;} <div class="box box1">
안녕하세요1
<div class="box box2">
안녕하세요2
<div class="box box3">
안녕하세요3
<div class="box box4">
안녕하세요4
<div class="box box5">
안녕하세요5
</div>
</div>
</div>
</div>
</div>
위와 같이 box1(부모) 안의 box2(자식) 그리고 box2(부모)와 box3(자식)처럼 크기가 하위로 갈수록 상속되어 적용된다.
4)line-height
글자 간의 세로 간격 행간을 조절할 수 있다.
.box1 {line-height: 30px;}
.box2 {line-height: 1.5;}단위는 px 또는 em을 사용할 수 있다.
5)letter-spacing
글자 간의 가로 간격 자간을 조절할 수 있다
사용방법은 line-height와 동일하며 아래와 같이 사용할 수 있다.
.box2 {letter-spacing: -0.02px;}
.box3 {letter-spacing: -0.2%;}6)white-space
요소의 공백을 어떻게 처리할지 정의할 때 사용한다.
nowrap만 배워서 다른 속성 값들은 언제 사용하는지 모르겠다.
white-space: nowrap; 를 적용시키면 아래 사진처럼 줄 바꿈을 하지 않고 표시한다.
7)word-break
줄 끝에서 단어가 끊어지지 않고 통째로 줄 바꿈을 해준다.
주로 한글보단 영어에 필요한 것 같다.
.box1 {
/* word-break: break-all; 영어는 끊어지지 않게 keep-all 사용 */
word-break: break-all;
}
.box2 {
word-break: break-all;
}한글과 영어 둘 다 break-all을 사용하여 단어가 끊어졌다.
.box1 {
/* word-break: break-all; 영어는 끊어지지 않게 keep-all 사용 */
word-break: keep-all;
}
.box2 {
word-break: keep-all;
}keep-all을 사용하여 단어를 유지한 채 줄 바꿈 한 모습.
8)text-transform
.box1 {text-transform: capitalize;}
.box2 {text-transform: uppercase;}
.box3 {text-transform: lowercase;}
text-transform: capitalize; 모든 단어 첫 글자 대문자
text-transform: uppercase; 대문자
text-transform: lowercase; 소문자
9)display
코드를 사용할 때 기본적으로 띄고 있는 성격들이 있다. (블럭, 인라인, 인라인 블럭)
이를 다른 성격으로 바꾸어 화면에 표시되게 설정할 수 있다.
예를 들어 너비, 높이를 정할 수 없는 인라인 요소인 span을 블럭 요소로 바꾸어 정해줄 수 있다.
span {
display: block;
background-color: coral;
width: 150px;
height: 60px;
margin: 20px;
padding: 15px;
}
display: block;
display: inline
9-1)블럭 요소
div, hn, p, ul, li, il, dl, dd
1) 너비는 부모 크기만큼 인식한다 (100%) : 한 줄
2) 너비/높이 지정 가능
3) padding, margin 모두 가능
9-2)인라인 요소
a, span, em, b, i, strong
1) 자신의 내용 크기만큼(콘텐츠만큼) 인식, 옆으로 나열
2) 너비, 높이 사용 불가
3) margin/padding : 좌우만 가능
단, 상하 가능, 다른 콘텐츠에 영향을 줄 수 없다
9-3) 인라인 블럭 요소
img, dt, button, input
1) 자신의 내용만큼만 인식(열으로 나열) - inline 성격
2) 너비/높이 가능 - block 성격
3) margin/padding 가능 - block 성격
4) 옆 사이 공백 해결
부모의 요소에 font-size:0, 자신의 요소에 font-size:지정
4일 차 과제
그동안 배운 내용들을 활용하여 구조를 짜고 html, css를 작성해 보았다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.box {
width: 570px;
margin: 30px;
padding: 40px;
}
.box strong {
display:block;
border-bottom: 1px solid rgba(182, 173, 173, 0.541);
font-size: 15px;
font-weight: 600;
margin-bottom: 30px;
padding-bottom: 20px;
}
.box h2 {
font-size: 25px;
font-weight: 700;
margin-bottom: 15px;
}
.box p {
font-size: 16px;
margin-bottom: 70px;
}
.box img {
margin-bottom: 20px;
}
.box h3 {
font-size: 25px;
font-weight: 700;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="box">
<strong>
공지사항
</strong>
<h2>
LG U+ 고객센터 공식 사이트가 새롭게 오픈하였습니다.
</h2>
<p>
LG U+ 고객센터인들은 어떤 업무를 하고 어떤 환경에서 근무하는지 뿐만 아니라 장기적인 비전 제시와 다양한 복지 혜택까지 소개 하고있습니다.
</p>
<img src="images/notice.png" alt="LG U+ 고객센터">
<h3>
해피하우스
</h3>
<p>
행복한 일터를 만들기 위한 LG U+고객센터의 노력을 사진으로 확인하세요.
</p>
</div>
</body>
</html>
