이번 포스팅에서는 css의 기본 스타일 속성을 공부해 보려고 한다.
스타일 속성이 굉장히 많으므로 전체를 공부할 수는 없다. →그 외의 속성들은 https://www.w3schools.com/ 참고!
CSS1에서 다루었듯이, css는 선택자{속성: 속성값;} 형태로 쓰인다.
먼저, 주로 쓰이는 속성 값의 단위만 간단히 알고 넘어가자.
<css에서의 단위>
1. 크기 단위: %, em, cm, mm, inch, px 등..
-%: 백분율 단위/ 기본 설정된 크기에서 상대적으로 크기를 지정
-em: 배수 단위/ 1배=1em=100%/1.5배=1.5em=150%
-px: 픽셀/ 절대적인 크기 지정
(크기 단위에서 0을 입력하는 경우, 단위를 입력하지 않아도 됨)
2. 색상 단위
-HEX 코드 단위: #0000/ 16진수로 나타낸 것
-RGB 색상 단위: rgb(red, green, blue)/ 각각의 숫자는 0~255까지 입력가능
3. URL 단위: url() 함수 내부에 경로를 입력하면 됨
-현재 폴더에 있을 경우: url('Desert.jpg')
-현재 폴더 내부에 있는 Other폴더에 있을 경우: url('Other/Desert.jpg')
- 루트 폴더에 있을 경우: url('Desert.jpg')
이제부터는 css의 여러 속성에 대해 다뤄보자(대표적인 키워드만-)
CSS로 주로 무엇을 바꾸고 꾸밀까?
<CSS의 주요 속성>
1. width(넓이), height(높이) => 고정값(px), 가변값(%)으로 설정가능
2. font
font-family(폰트체)
: 브라우저마다 지원하는 폰트가 다르며, 없을 경우 대체하여 적용할 폰트들을 여러 개 적는다.
순서대로 우선순위를 적용한다.
sans-serif는 모든 브라우저가 갖고 있는 폰트체이므로, 맨 마지막에 디폴트값으로 작성한다.
font-weight(글자 두께)
: 100~900 사이의 숫자 또는 bold 등 문자로 입력가능
font-size(글자 크기)
font-style(글자 기울기)
3. border
width, height : 크기 설정 가능
border-style
: 선 스타일을 결정 ex) solid(실선), dotted(점선), hashed(선과 점이 번갈아,,) 등 적용 가능
border-clolor(색깔)
border-width(굵기)
이러한 선에 대한 스타일을 한 줄에 이어서 써서 적용할 수도 있음(쉼표없이 띄어쓰기로만-)
=> ex) border: solid 10px red;
4. background
background-color(배경색)
background-image(배경 이미지)
:background-image:url(이미지 경로); 형태로 작성한다.
background-repeat(배경 반복)
:종류로는 x-repeat(x축으로 반복), y-repeat(y축으로 반복), no-repeat(반복 없음)
background-position(위치)
:공간 안에서 이미지의 좌표를 변경할 때
종류로는 top,bottom, center, left, right 등..
선에 대한 스타일과 마찬가지로, 한 줄에 이어서 써서 적용할 수도 있음(쉼표없이 띄어쓰기로만-)
=> ex) background: yellow url(이미지 경로) no-repeat left;
<가시 속성>
: 태그가 화면에 보이는 방식을 지정하는 속성
1. display 속성: block과 inline 요소의 성격을 바꿀 때 사용
display:none - 태그를 화면에서 보이지 않게 만듦
display:block - 태그를 block 형식으로 지정
display:inline - 태그를 inline 형식으로 지정
display: inline-block - 태그를 inline-block 형식으로 지정 => block과 inline 성격을 모두 가짐
=> inline과 inline-block 을 썼을 때 출력결과가 같더라도, 두 형식은 확실한 차이가 있다.
inline: width, height 속성 적용 불가능 & margin은 좌우로만 적용됨
inline-block :width, height 속성 적용 가능 & margin은 상하좌우로 적용됨
2. visibility 속성: 대상을 보이거나 보이지 않게 지정하는 스타일 속성
visibility:visible - 태그를 보이게 만듦
visibility:hidden - 태그를 보이지 않게 만듦
visibility:collapse - table 태그를 보이지 않게 만듦/ 인터넷 익스플로어와 파이어폭스에서만 작동
=> display:none과 visibility:hidden의 차이점?
display:none - 태그가 화면에서 제거됨! (=> 따라서, 공간 자체가 만들어지지 X)
visibility:hidden - 태그가 제거되는 것이 아니라, 그저 안보이는 것! (=> 따라서, 공간은 만들어짐)
3. opacity 속성 : 태그의 투명도를 조절하는 스타일 속성
0.0 ~ 1.0 사이의 숫자를 입력할 수 있으며, 숫자가 낮을수록 투명, 높을수록 불투명
<박스 속성>
웹 페이지의 레이아웃을 구성할 때 가장 중요하게 쓰이는 속성
margin vs padding
border를 기준으로 구분하면 됨
=> border 안: padding
=> border 밖: margin
margin-left: border 바깥쪽에서 왼쪽에 여백을 만듦
padding-left: border 안쪽에서 왼쪽에 여백을 만듦
작성법) 시계방향 순
top right bottom left
ex) margin: 100px 0 0 100px;
border의 속성
border-width: 테두리의 너비 지정(숫자 or 문자-medium, thick, thin 등)
border-style: 테두리의 형태 지정 (dashed, dotted, double, solid, hidden 등등.. 다양한 형태 존재)
border-color: 색깔
border-radius:테두리가 둥글게-
border 속성은 margin과 padding 처럼 top, right, bottom, left 부분의 값을 부분 적용 가능 => ex) bottom-left-style
<배경 속성>
특정 태그의 배경 이미지 or 색상을 지정하는 스타일 속성
background-image :url('이미지 경로') / 이미지 여러 개 적용 가능 => , 로 구분 => 왼쪽에 있을수록 위에 위치(층을 이룸)
background-size: width(숫자) height(숫자);
background-repeat: no-repeat/ repeat-x/ repeat-y/ repeat 등..
background-attachment: fixed(화면 스크롤시, 배경 이미지 고정)/scroll(스크롤시, 배경 이미지도 함께 이동) 등..
background-position: 키워드(bottom, center, left, right, top 등..)/ x축 크기(숫자)/ y축 크기(숫자)
<폰트 속성>
앞 글에서 다룬 것은 생략
line-height: 글자의 높이 지정 => 수직 중앙 정렬시 사용됨(글자를 감싸는 공간의 높이와 같은 크기로 지정하면 됨)
text-align: 글자 정렬/ center, justify(양쪽 정렬), left, right, start, end 등.. / block에만 사용 가능
text-decoration: none; => a태그에서 링크에 밑줄을 삭제
<위치 속성>
요소의 위치 => 절대 위치 좌표 & 상대 위치 좌표
절대 위치 좌표: 요소의 x, y 좌표를 설정하여 절대 위치 지정/ 웹페이지 왼쪽 상단 (0,0)
상대 위치 좌표: 요소를 입력한 순서를 통해 상대적으로 위치를 지정
position: static - 태그가 위에서 아래로 순서대로 배치됨
position: relative - 초기 위치 상태에서 상하좌우로 위치 이동=> 상대 위치 좌표 설정
position: absolute - 절대 위치 좌표 설정
position: fixed - 화면을 기준으로 절대 위치 좌표 설정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Property Basic</title>
<style>
*{
margin: 0;
}
.box{
width: 100px;
height: 100px;
position: absolute;
}
.red{
background-color: red;
left: 10px;
top: 10px;
}
.green{
background-color: green;
left: 50px;
top: 50px;
}
.blue{
background-color: blue;
left: 90px;
top: 90px;
}
</style>
</head>
<body>
<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
</body>
</html>
위의 코드는 position:absolute 절대 위치 지정 후,
left, right 속성을 주어 박스를 이동시킨 것이다.
웹브라우저의 왼쪽 상단이 절대 위치이며, 그 기준에 따라서 각 박스들이
주어진 left, right 속성값만큼 이동했다는 것을 볼 수 있다.
파란색 상자가 가장 위에 있다.=> 기본적으로 맨 뒤에 입력한 태그가 상위에 올라감
=> 이러한 순서를 변경하고 싶을 경우 => z-index 속성 사용
z-index 속성에는 숫자를 적용하며, 숫자가 클수록 앞에 위치한다.
따라서,
레드 박스에 z-index:20 + 그린 박스에 z-index:10 + 블루 박스에 z-index: 1 => 레드가 가장 위로 올라간다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Property Basic</title>
<style>
*{
margin: 0;
}
.box{
width: 100px;
height: 100px;
position: relative;
}
.red{
background-color: red;
left: 10px;
top: 10px;
}
.green{
background-color: green;
left: 50px;
top: 50px;
}
.blue{
background-color: blue;
left: 90px;
top: 90px;
}
</style>
</head>
<body>
<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
</body>
</html>위의 코드는 position:relative 초기 위치 상태에서 left, right 속성을 주어 박스를 이동시킨 것이다.
만약, 위의 코드에서 세 상자를 다시 <div>로 묶으면, 부모 태그인 <div>가 영역을 차지하지 x
=> 따라서, 자손의 position 속성에 absolute를 적용할 경우에는 부모 태그에 다음의 처리를 해야됨(중요)
1. 부모는 height 속성을 사용할 것
2. 부모의 position 속성에 relative를 적용할 것
overflow 속성: 내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할지 지정하는 속성
overflow:hidden - 영역을 벗어나는 부분을 보이지 않게 설정
overflow:scroll - 영역을 벗어나는 부분을 스크롤로 만듦 => 범위를 벗어나는 부분은 스크롤 사용시 볼 수 있음
<float 속성>
: 선택된 요소를 왼쪽 끝 or 오른쪽 끝에 정렬시키고자 할 때 사용
선택자를 띄워 새로운 레이어층을 만드는 것! / 수평 정렬시 사용!
float: left - 태그를 왼쪽에 붙임
float: right - 태그를 오른쪽에 붙임
레이어가 겹쳐지지 않는 상태로 왼쪽에서부터 정렬시키고 싶은 경우
=> float:left;을 연속적으로 입력
ex)
★clear★
: float에 대한 속성을 제어하고자 할 때 사용
clear:both - float로 인해 만들어진 레이아웃을 초기화
예시)
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Property Basic</title>
<style>
body{
width: 960px;
margin: 0 auto;
}
/*.clear{
clear:both;
}*/
#aside{
float:left;
width: 260px;
}
#section{
float: right;
width: 700px;
}
</style>
</head>
<body>
<div id="header"><h1>Header</h1></div>
<div id="navigation"><h1>Navigation</h1></div>
<div class="clear"></div>
<div id="aside">
<h1>Aside</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis molestias possimus nulla illo obcaecati dicta adipisci amet minus neque perferendis quidem error asperiores ea, cumque non facere, illum, debitis modi!</p>
</div>
<div id="section">
<h1>Section</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt aliquam quae itaque, facere nihil, provident quis quos modi ut cumque perferendis nobis at deleniti vero quia tenetur a error.</p>
</div>
<div class="clear"></div>
<div id="footer">
<h1>Footer</h1>
</div>
<div class="clear"></div>
</body>
</html>
위의 예제는 flaot 속성을 적용한 html 문서이다.
여기서, 하단 구역인 footer 위에서 float 속성을 사용하여 레이아웃을 변형시켰으므로,
footer은 하단에 자리잡지 못하고 위로 올라간 모습이다,
float으로 인해 일그러진 레이아웃을 초기화 시키기 위해 float을 적용했던 대상들 뒤에 clear 속성을 적용시켜보자.
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Property Basic</title>
<style>
body{
width: 960px;
margin: 0 auto;
}
.clear{
clear:both;
}
#aside{
float:left;
width: 260px;
}
#section{
float: right;
width: 700px;
}
</style>
</head>
<body>
<div id="header"><h1>Header</h1></div>
<div id="navigation"><h1>Navigation</h1></div>
<div class="clear"></div>
<div id="aside">
<h1>Aside</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis molestias possimus nulla illo obcaecati dicta adipisci amet minus neque perferendis quidem error asperiores ea, cumque non facere, illum, debitis modi!</p>
</div>
<div id="section">
<h1>Section</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt aliquam quae itaque, facere nihil, provident quis quos modi ut cumque perferendis nobis at deleniti vero quia tenetur a error.</p>
</div>
<div class="clear"></div>
<div id="footer">
<h1>Footer</h1>
</div>
<div class="clear"></div>
</body>
</html>.clear{clear: both;}를 추가하였다.
그 결과, 위로 올라갔던 하단의 footer 영역이 원래의 자리로 내려온 것을 확인할 수 있다.
'웹 프론트엔드' 카테고리의 다른 글
| 자바스크립트1 - 개념과 기초 문법(변수 & 함수) (0) | 2024.01.09 |
|---|---|
| 웹 기초5 - CSS transition & animation (0) | 2022.06.29 |
| CSS1 - CSS 선택자 (0) | 2022.06.27 |
| 웹 기초2 - HTML 기본 태그 (0) | 2022.06.07 |
| 웹 기초1 (0) | 2022.06.02 |