Web 사이트를 만들거나 할 때 HTML만으로는 스타일 표시가 쉽지 않다는 것을 쉽게 알 수 있다. (태그를 써서 간격 정렬 등등을 일일이 표시하기란 정말 쉽지 않을 것이기에..) 그래서 나온 것이 CSS란 것인데 이것에 대해서 간략하게 알아보고자 한다.
background-color: red
일단 mdn 페이지에서 쉽게 찾을 수 있는 것으로 링크를 첨부해둔다. 아래의 예시처럼 background-color: 색상값을 넣는 형태로 쓴다는 것을 알 수 있다. 간단하게 키워드로 세팅하거나, rgb 값을 입력하는 방법, hsl (색조(hue) , 채도(saturation ), 명도(lightness))로 표시하는 방법 등의 다양하게 사용가능 한 것들을 알 수있다.
/* Keyword values */
background-color: red;
background-color: indigo;
/* Hexadecimal value */
background-color: #bbff00; /* Fully opaque */
background-color: #bf0; /* Fully opaque shorthand */
background-color: #11ffee00; /* Fully transparent */
background-color: #1fe0; /* Fully transparent shorthand */
background-color: #11ffeeff; /* Fully opaque */
background-color: #1fef; /* Fully opaque shorthand */
/* RGB value */
background-color: rgb(255 255 128); /* Fully opaque */
background-color: rgb(117 190 218 / 50%); /* 50% transparent */
/* HSL value */
background-color: hsl(50 33% 25%); /* Fully opaque */
background-color: hsl(50 33% 25% / 75%); /* 75% opaque, i.e. 25% transparent */
https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
background-color - CSS: Cascading Style Sheets | MDN
The background-color CSS property sets the background color of an element.
developer.mozilla.org
추가로 참고하기 좋은 색상 팔레트들이 있는 사이트도 첨부
Color Hunt - Color Palettes for Designers and Artists
Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.
colorhunt.co
추가로 키워드로 색상 입력이 가능한 리스트를 알 수 있기 위한 사이트 링크도 같이 첨부한다.
https://developer.mozilla.org/ko/docs/Web/CSS/color_value
<color> - CSS: Cascading Style Sheets | MDN
CSS <color> 자료형은 색을 나타냅니다. <color>는 이 색이 배경과 어떻게 합성되어야 하는지 나타내는 알파 채널 투명도 값도 가질 수 있습니다.
developer.mozilla.org
실제로 적용을 해본 html 코드는 아래와 같이 할 수 있다. (화면 전체의 색상을 바꾸기)
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body style="background-color: powderblue;">
</body>
</html>
만약 화면 전체가 아닌 내부의 각 태그들을 한 번에 스타일을 바꾸기 위한 방법은 어떻게 될 지 알아본다. 일단 방법은 아래처럼
head 영역 안에 style 태그를 넣고 바꾸길 원하는 태그값 { 속성: 값 } 이런 형식으로 적용이 가능하다
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
body {
background-color: powderblue;
}
hr {
background-color: white;
border-style: none;
height: 2px;
}
</style>
</head>
<body>
<h3>test</h3>
<hr>
</body>
</html>
추가로 browser default css가 이미 적용이 되어 있는 것들이 있는데 해당 값들을 알아야 원하는 css를 적용할 수 있으니 아래의 링크도 같이 첨부한다.
https://www.w3schools.com/cssref/css_default_values.php
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
또 이렇게 각 HTML 파일마다 세팅을 하는 것이 아니라 모든 페이지에서 적용이 되길 원할 경우 사용하는 외부 CSS로 만들어서 적용하는 방법을 알아본다.
일단 css/styles.css와 같은 파일을 하나 만든 후에 아래처럼 내용 부분만 적용을 해둔다.
body {
background-color: powderblue;
}
hr {
background-color: white;
border-style: none;
height: 2px;
}
그리고 적용하려는 페이지 HTML에는 아래와 같이 입력을 한다. <link> 부분과 같이 작성을 하면 된다.
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<h3>test</h3>
<hr>
</body>
</html>
추가로 html 페이지에서 문제가 있는지 확인하기 위해서 크롬의 개발자 도구 모드를 켜서 (f12)로 확인을 하면 편리하다
그리고 css 파일로 head 안에서 스타일을 적용을 하였다 해도 각 태그에서 직접 스타일을 바꾼 경우 직접 스타일을 바꾼 내용으로 바뀌게 되는 점도 알아두면 좋다. (외부 < 내부 < 직접 과 같은 우선순위라고 보면 될 듯 하다)
또 특정 태그만을 선택하기 위한 선택자라는 것이 존재하고 그러기 위해 사용되는 class를 알아본다
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<h3>test</h3>
<hr>
<hr class="testhr">
</body>
</html>body {
background-color: powderblue;
}
/*
주석
*/
hr {
background-color: white;
border-style: none;
height: 2px;
}
/********** class selector **********/
.testhr {
background-color: red;
height: 1px;
}
위와 같이 css에서 클래스 선택자를 사용할 경우 .클래스 이름 과 같이 사용하면 된다.
추가로 id selector 라는 것도 있다.
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<h3 id="heading">test</h3>
<hr>
<hr class="testhr">
</body>
</html>body {
background-color: powderblue;
}
/*
주석
*/
hr {
background-color: white;
border-style: none;
height: 2px;
}
/********** class selector **********/
.testhr {
background-color: red;
height: 1px;
}
/********** id selector **********/
#heading {
color: blue;
}
id selector의 경우 # 을 붙이고 id의 이름을 입력하는 형식으로 사용한다.
위 내용을 봤을 때는 id와 class는 동일한 기능으로 보이나 id의 경우 오직 한 곳에서만 사용 가능한 것이고 class의 경우 여러 곳에서 동일하게 사용이 가능하다.
추가로 class의 경우 한 태그에 여러개를 입력이 가능하다
class="A B C"
이런 식으로 여러개의 스타일 적용이 가능 (띄어쓰기로 구분) (id는 불가능)
추가로 마지막으로 의사 선택자 (Pseudo)가 있는데 특정 동작을 하는 경우 바뀌는 css를 적용하기 위함으로 보인다. (Ex. hover와 같은 케이스)
img:hover {
backround-color:blue;
}
위처럼 CSS를 입력시 img에 마우스를 올려두면 blue로 배경색이 바뀌게 된다.
position:relative
css에서 스타일 변경뿐만이 아닌 위치 변경까지 할 경우 세팅하는 방법을 알아보자.
<body>
<div class="rblock">
</div>
<div class="bblock">
</div>
</body>.rblock {
height: 100px;
width: 100px;
background-color: red;
/* 화면의 절대적인 위치가 아닌 해당 css가 적용될 태그가 있는 곳에서 하단 px만큼 이동 */
position: relative;
/*top, left, right, bottom이 있고 해당 px만큼 이동 */
top: 50px;
}
.bblock {
height: 100px;
width: 100px;
background-color: blue;
/* 화면의 절대적인 위치가 아닌 해당 css가 적용될 태그가 있는 곳에서 하단 px만큼 이동 */
position: relative;
/*top, left, right, bottom이 있고 해당 px만큼 이동. left 50이면 좌측에 margin 50px로 이해하기 */
left: 50px;
}
테스트로 적용해보면 원래 있어야 할 빨간색 100px짜리 정사각형은 아래로 50px 내려온 상태이고 파란색 정사각형은 원래 배치되어야 할 위치에서 우측으로 50 px 이동했음을 알 수 있다.
여기서 주의할 점 첫 번째는 position:relative라는 설정이 현재 위치될 예정이었던 곳(?)을 기점으로 해서 이동을 한다는 것이다. 두 번째로는 left: 50px 인 경우 좌측으로 50px이동이라는 의미가 아닌 우측으로 50px이동. 즉 left margin 50 px로 이해를 해야 한다는 것을 기억해야 한다.
추가로 테스트하기에 편한 사이트가 있어서 공유
https://codepen.io/2ANONYMOUSes/pen/RagzXd
RagzXd
...
codepen.io
위 도형을 보면 div 태그를 연달아 쓰면 아래 줄로 계속 내려가는 것을 알 수 있는데, 가로로 쭉 이어서 배치하고 싶은 경우에 사용되는 CSS를 알아 보자.
.rblock {
height: 100px;
width: 100px;
background-color: red;
display: inline-block;
}
.bblock {
height: 100px;
width: 100px;
background-color: blue;
display: inline-block;
}
추가로 현재 inline-block으로 세팅을 하게 되면 브라우저에 의해 조금씩 공백이 추가된다.
position:absolute
위에서 relative로 동작하는 것을 알아보았는데, 이번에는 absolute하게 동작하는 것을 알아보자. relative의 경우 배치되는 위치를 기준점으로 잡고 이동을 하는 것이지만, absolute는 화면 전체 페이지(상단 body)를 기준으로 잡고 이동한다. 아래 코드를 보자
위 스크린샷처럼 초록색 블록이 화면 전체를 기준으로 하단에서 30px위로 이동한 것을 알 수 있다.
여기서 위처럼 div 컨테이너 안에 div를 넣고 css를 absolute하게 넣으면 상단이 div 컨테이너이기에 해당 컨테이너를 기준으로 absolute하게 동작함을 볼 수 있다.
position:fixed
마지막으로 fixed로 위치를 고정시키는 방법이 있는데 이것을 사용하면 화면을 스크롤을 해도 해당 위치에 고정되는 것을 만들 수 있다.
위 스크린샷처럼 회색 박스가 화면에 고정되어서 스크롤을 해도 고정되어 있음을 알 수 있다.
text-align:center
화면의 내용을 정렬하기 위한 가장 간단한 방식으로 body 스타일에 넣게 되면 내용들이 전체가 다 정렬되는 것을 볼 수 있다.
참고로 text-align의 경우 width를 지정하지 않은 경우에만 제대로 동작하는 것을 볼 수 있다. 그래서 이런 경우를 위해서 사용하는 방법으로 margin: 0 auto 0 auto 와 같이 설정을 하면 해결이 된다고 한다. (상단과 하단은 0 나머진 auto)
margin에 대한 좀 더 자세한 내용은 아래 링크에 첨부한다.
https://developer.mozilla.org/ko/docs/Web/CSS/margin
margin - CSS: Cascading Style Sheets | MDN
margin CSS 속성은 요소의 네 방향 바깥 여백 영역을 설정합니다. margin-top, margin-right, margin-bottom, margin-left의 단축 속성입니다.
developer.mozilla.org
'Devs > CSS' 카테고리의 다른 글
| [CSS] rem, em, %, px 비교 (0) | 2025.04.23 |
|---|---|
| [CSS] 폰트 스타일 변경 (0) | 2025.04.22 |