css/기본 문법
CSS 기능
코딩 화이팅
2023. 2. 2. 11:01
크기 단위
- 길이 값 : px, cm, mm, in, em(부모의 font-size를 배수만큼 확대, 축소), rem(root element의 font-size를 배수만큼 확대, 축소 / 주로 em보다 많이 쓰임) 등의 길이 단위 사용
색상 단위
- 색상 키워드 : 대소문자 구분 x, ex)red, blue
Font
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
html {
font-size: 50px;
}
.parent {
font-size: 30px;
}
.em {
font-size: 1.5em;
}
.rem {
font-size: 1.5rem;
}
</style>
</head>
<body>
<ul class="parent">
<li class="em">1.5em</li>
<!-- 부모(parent)의 속성을 받아 픽셀이 30*1.5px -->
<li class="rem">1.5rem</li>
<!-- html(root element)의 속성을 받아 클래스가 parent지만 html의 50*1.5px -->
<li>no class</li>
<!-- parent의 클래스 안에 속해 있어 parent값을 속성 받아 30px -->
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Font</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;1,100&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Gugi&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Gugi&family=Hi+Melody&display=swap"
rel="stylesheet"
/>
<!-- 폰트를 링크로 가져와서 지정 가능 -->
<style>
.font1 {
/* 사이즈 */
/* font-size: large; */
font-size: x-large;
/* 사이즈를 large, x-large식으로 정할 수 있음 */
}
.font2 {
/* 스타일 */
font-style: italic;
/* 기울임체 */
}
.font3 {
font-variant: small-caps;
/* 작은 대문자 */
}
.font4 {
font-weight: 900;
/* 굵기 */
}
.font5 {
font-family: 'Roboto', sans-serif;
/* 글꼴 지정 */
}
.font6 {
font-family: 'Gugi', cursive;
}
.font7 {
font-family: 'Hi Melody', cursive;
}
</style>
</head>
<body>
<div class="font1">내용1</div>
<div class="font2">내용2</div>
<div class="font3">content3</div>
<div class="font4">내용4</div>
<div class="font5">content5</div>
<div class="font6">가나다라마사</div>
<div class="font7">가나다라마사</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Text</title>
<style>
.text1 {
/* 텍스트 가운데 정렬 */
text-align: center;
}
.text2 {
text-decoration: line-through;
/* text-decoration: 취소줄; */
}
.text3 {
text-indent: 10px;
}
/* 픽셀 만큼 띄어줘서 출력 */
.text4 {
/* 대문자 / 소문자 / 앞글자만 대문자=capitalize 등등 */
text-transform: lowercase;
}
.text5 {
letter-spacing: 15px;
}
/* 글자와 글자 사이 간격 */
.text6 {
word-spacing: 20px;
}
/* 단어와 단어 사이 간격 */
.text7 {
line-height: 100px;
}
/* 줄과 줄 사이 간격 */
.text8 {
color: red;
}
/* 색변경 */
.text9 {
text-shadow: 1px 1px 2px blue;
}
/* 그림자 */
.text10 {
text-decoration: none;
color: black;
/* cursor: none; */
}
</style>
</head>
<body>
<div class="text1">Lorem ipsum dolor sit amet consectetur</div>
<div class="text2">Lorem ipsum dolor sit amet consectetur</div>
<div class="text3">Lorem ipsum dolor sit amet consectetur</div>
<div class="text4">Lorem ipsum dolor sit amet consectetur</div>
<div class="text5">Lorem ipsum dolor sit amet consectetur</div>
<div class="text6">Lorem ipsum dolor sit amet consectetur</div>
<div class="text7">Lorem ipsum dolor sit amet consectetur</div>
<div class="text8">Lorem ipsum dolor sit amet consectetur</div>
<div class="text9">Lorem ipsum dolor sit amet consectetur</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Text</title>
<style>
body {
background-color: ivory;
}
</style>
</head>
<body>
</body>
</html>
Box Model-Margin
- 값 1개->모든 면 적용
- 값 2개->{위,아래},{왼쪽,오른쪽}
- 값 3개->{위},{왼쪽,오른쪽},{아래}
- 값 4개->위,오른쪽,아래,왼쪽
- margin: 0 auto를 통해 가운데 정렬이 되도록 설정 가능
- 마신 상쇄 현상이 일어날 수 있음.
Box Model-Padding
- 값 1개->모든 면 적용
- 값 2개->{위,아래},{왼쪽,오른쪽}
- 값 3개->{위},{왼쪽,오른쪽},{아래}
- 값 4개->위,오른쪽,아래,왼쪽
Box Model-Border
- border-style : 선의 모양
- border-width : 선의 굵기
- border-color : 선의 색상
- 위의 세 속성을 줄여서 사용 가능
- border-radius : 선의 모서리를 둥글게 만드는 속성
- box-shadow : 그림자 효과
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>box</title>
<style>
div {
/* box-sizing: border-box; */
width: 100px;
height: 100px;
background-color: aqua;
}
.margin {
/* 모든 면적용 */
/* margin: 100px; */
/* margin: 50px 100px; */
/* margin: 50px 100px 80px; */
margin: 50px 100px 80px 70px;
}
.margin-top {
margin-top: 200px;
}
.padding {
padding: 100px;
}
.border {
border: 2px dotted black;
border-radius: 50px;
}
.shadow {
box-shadow: 10px 5px 5px red;
}
</style>
</head>
<body>
<!-- <div></div> -->
<!-- <div class="margin"></div> -->
<!-- <div class="margin-top"></div> -->
<!-- <div class="padding"></div> -->
<!-- <div class="border"></div> -->
<!-- <div class="shadow"></div> -->
</body>
</html>Display : block
- 줄 바꿈이 일어나는 요소
- 화면 크기 전체의 가로 폭을 차지
- 블록 레벨 요소 안에 인라인 레벨 요소가 들어갈 수 있음
- 대표적인 블록 레벨 요소
- div
- ul, ol, li
- p
- hr
- form...
Display : inline
- 줄 바꿈이 일어나지 않는 행의 일부 요소
- content 너비만큼 가로 폭을 차지
- width, height, margin-top, margin-bottom을 지정할 수 없음
- 상하 여백은 line-height로 지정
- 대표적인 인라인 레벨 요소
- span
- a
- img
- input, label
- b,e,i,strong...
Display : inline-block
- block과 inline 레벨 요소의 특징을 모두 갖는다.
- inline처럼 한 줄에 표시 가능
- block처럼 width, height, margin 속성 지정 가능
Display : none
- 해당 요소를 화면에 표시하지 않는다.(공간 x,화면x)
- visibility : hidden은 해당 요소(공간o, 화면x)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>display</title>
<style>
.block {
display: block;
background-color: red;
margin: 20px;
}
.inline {
display: inline;
background-color: blue;
margin: 20px;
width: 200px;
}
.inline-block {
display: inline-block;
background-color: purple;
width: 200px;
}
.none {
display: none;
}
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<div class="block">div 블록</div>
<span class="inline">span 인라인</span>
<div class="inline">div 인라인</div>
<span class="block">sapn 블록</span>
<div class="inline-block">div 인라인블록</div>
<!-- <div class="hidden">div 히든블록</div> -->
<div class="none">div none</div>
<div class="inline-block">div 인라인블록</div>
</body>
</html>
Position
- relative : HTML 문서에서의 일반적인 내용물의 흐름을 말하지만, top, left 거리를 지정
- absolute : 자신의 상위 box속에서의 top, left, right, bottom 등의 절대적인 위치를 지정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid black;
}
.parent {
position: relative;
width: 300px;
height: 300px;
}
.absolute {
position: absolute;
top: 100px;
left: 100px;
background-color: crimson;
}
.box2 {
background-color: deepskyblue;
}
.relative {
position: relative;
top: 100px;
left: 100px;
background-color: crimson;
}
.relative2 {
position: relative;
top: 50px;
left: 50px;
background-color: crimson;
}
</style>
</head>
<body>
<div class="parent">
<div class="absolute">box1</div>
<div class="box2">box2</div>
</div>
<hr />
<div class="parent">
<div>box1</div>
<div class="box2">box2</div>
</div>
<hr />
</body>
</html>
Float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 150px;
height: 150px;
border: 1px solid black;
background-color: crimson;
/* margin: 20px; */
}
.left {
float: left;
}
.right {
float: right;
}
</style>
</head>
<body>
<!-- <div class="box"></div> -->
<!-- 상자가 한 줄(div)을 다 차지하고 그 밑에 글들이 작성 -->
<div class="box left">float left</div>
<!-- 박스가 왼쪽 상단에 출력되고 바로 그 옆에 글들이 작성 -->
<!-- <div class="box right"></div> -->
<!-- 박스가 오른쪽 상단에 배정되고 그 옆에 글들이 작성 -->
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore eum
quibusdam voluptatem debitis, nesciunt corrupti laudantium rem velit culpa
sint autem iure earum aliquam natus distinctio, assumenda dolore hic
tenetur fugiat reiciendis sunt, expedita libero. Possimus placeat odit
quidem earum illum. Impedit nobis modi magnam aliquam amet dicta quaerat
sed quos vero ipsum? Officia vero rem, corporis, culpa harum aliquam illum
dolorum inventore voluptates minima dignissimos dolor atque obcaecati!
Voluptas assumenda, neque magnam fugiat quis quasi dolor dolorum obcaecati
officiis quam distinctio consectetur aliquam dicta veritatis quibusdam,
eligendi ratione laboriosam ea vel odit. Necessitatibus cumque voluptates
perspiciatis hic maiores libero odit rem error eum quasi sit, dolor et ut
corrupti pariatur corporis aliquid in dolores adipisci, obcaecati
perferendis impedit! Nam doloribus dicta ratione temporibus aliquid quod!
Assumenda rem suscipit minus ipsum placeat alias quibusdam architecto
dolorem aliquid maiores quae officia libero rerum modi, explicabo mollitia
numquam pariatur et nemo repellat fugiat commodi delectus. Maxime
quibusdam mollitia excepturi ducimus iusto ipsam. Quod, nostrum
necessitatibus reprehenderit illum quo sequi voluptatum numquam cum
suscipit eligendi, voluptates excepturi, eius tempore est porro aut!
Cumque sint assumenda, minima nemo sed ea inventore rerum qui odio unde
voluptatibus animi. Fuga repellendus soluta explicabo nihil modi ex eius
nesciunt exercitationem sapiente iste adipisci eligendi laborum,
doloremque iure repellat praesentium enim, quasi qui illo rerum deserunt
provident? Inventore odit esse enim ipsum doloribus quia accusantium
ducimus dolorem veritatis tempora corrupti laborum molestiae ab, earum
numquam perferendis magnam! Id voluptatibus sit ab optio autem dolorum
tempora labore est laudantium, exercitationem cupiditate eveniet placeat
aspernatur iure dolorem atque culpa animi. Ducimus mollitia quasi iure
natus sit. Totam aliquid quod ad ipsam at magnam facere veritatis,
molestias repellat impedit ab in! Magnam, doloremque illo molestias earum
eligendi culpa nobis accusamus. Alias odit necessitatibus fuga at
cupiditate asperiores incidunt architecto vitae culpa.
</p>
</body>
</html>Z-index
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid black;
}
.box1 {
background-color: crimson;
position: absolute;
}
.box2 {
background-color: deepskyblue;
position: absolute;
top: 50px;
left: 50px;
}
.box3 {
background-color: gold;
position: absolute;
top: 100px;
left: 100px;
z-index: 3;
}
.box4 {
background-color: greenyellow;
position: absolute;
top: 150px;
left: 150px;
}
.box5 {
background-color: lightpink;
position: absolute;
top: 200px;
left: 200px;
z-index: -1;
}
.box6 {
background-color: black;
position: fixed;
right: 50px;
bottom: 50px;
}
</style>
</head>
<body>
<div class="parent">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
</div>
</body>
</html>