공부/컴퓨터 언어
[Front-end] CSS
시송
2025. 3. 8. 14:16
1. CSS 스타일 적용 방법
1) 외부 스타일시트 External Stylesheet: 별도의 css파일에 스타일을 정의하는 방법
- HTML 문서의 섹션에서 <link> 태그로연결
- 여러 HTML 페이지에서 재사용할 수 있다
2) 내부 스타일시트: HTML 문서의 섹션 내 < style > 태그안에 CSS를 직접 작성하는 방법
- 해당 HTML 문서에만 적용된다.
3) 인라인 스타일: HTML 요소의 style 속성을 사용하여 직접 스타일을 적용하는 방법
- 특정 요소에만 스타일을 적용할 때 사용한다.
4) @import: CSS에서 다른 CSS 파일을 가져오는 방법
<!DOCTYPE html>
<htmllang="ko">
<head>
<metacharset="UTF-8" />
<title>CSS 스타일시트 종류 예시</title>
<!--1. 외부 스타일시트 -->
<link rel="stylesheet" href="styles.css" />
<!--2. 내부 스타일시트 -->
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
color: navy;
}
/* 4. 임포트된 스타일시트 */
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
.imported {
font-family: "Roboto", sans-serif;
}
</style>
</head>
<body>
<h1>CSS 스타일시트 예시</h1>
<!--3. 인라인 스타일 -->
<p style="color: green; font-weight: bold">
이것은 인라인 스타일을 사용한 문단입니다.
</p>
<pclass="imported">이 텍스트는 임포트된 Roboto 글꼴을 사용합니다.</p>
</body>
</html>
번외) CSS 적용 우선순위: 인라인 스타일> ID 선택자 > 클래스 선택자 > Tag 선택자 > 전체 선택자
- 동일한 우선 순위를 갖는 두 규칙이 적용될 때, CSS 에서 마지막에 나오는 규칙이 적용
(위에서 아래로 덮덮덮덮 선형구조) - 자바스크립트는 가장 마지막에 넣어준다 (웹 문서의 해당 요소들을 제어하기 때문에 요소들이 모두 생성되고 나서 실행되어야 안정적이기 때문)
2. CSS 문법
/*콜론과 세미콜론에 유의*/
선택자{
속성1: 속성값;
속성2: 속성값;
}
1) 선택자
- 전체 선택자: *
- tag 선택자: 태그명
- class 선택자: .class명
- id 선택자: #id명 (해당 id를 갖는 페이지 내 단일요소)
- 그룹 선택자: 선택자1, 선택자2, ... (쉼표로 구분된 모든 선택자
- 속성 선택자: [attribute], [attribute="value"] (지정 속성/속성값을 가진 모든 요소)
번외) Q. class가 있는데 id도 쓰는 이유가 뭔가요?
더보기
id 는 일반적으로 동일한 이름으로는 한페이지에서 하나만 있는 반면 (id는 유일하게 존재하는 요소 하나에만 달아주는 용도입니다), class 는 같은 유형의 디자인이 적용되는 여러 요소에 모두 달아주는 용도.
2) 가상 클래스 선택자
- a.link: 링크가 걸려 있을 때
- a:visited: 이미 방문했을 때
- a:hover: 마우스를 올렸을 때
- a:activate: 클릭하는 순간
a:link {
text-decoration: none;
}
a:visited {
color: purple;
}
3. 디자인 상속
1) 상속되는 속성 : 텍스트 관련 속성
- color: 텍스트 색상
- font-family: 글꼴
- font-size: 글꼴 크기
- font-style: 글꼴 스타일 (이탤릭 등)
- font-weight: 글꼴 두께
- line-height: 줄 간격
- text-align: 텍스트 정렬
- text-indent: 텍스트 들여쓰기
- text-transform: 텍스트 대소문자 변환
- visibility: 요소 가시성
>> Initial: 상속되는 속성을 명시적으로 상속받지 않도록 설정
2) 상속되지 않는 속성 : 레이아웃 관련 속성
- margin: 외부 여백
- padding: 내부 여백
- border: 테두리
- width: 너비
- height: 높이
- display: 요소의 표시 방식
- position: 위치 지정 방식
- background: 배경 관련 속성들
>> Inherit: 상속되지 않는 속성을 명시적으로 상속받도록 설정
<style>
body {
color: red;
}
.container {
border: 1px solid black;
padding: 20px;
}
.inherit {
border: inherit; /* 명시적으로 상속 */
}
.initial {
color: initial; /*명시적으로 상속받지 않음*/
}
</style>**요소 경계선 안에 여백 추가 : padding
** 요소 경계선 밖에 여백 추가 : margin
4. 글꼴 스타일
- font-family : 글꼴 종류. 기본 설정은 사용자 시스템의 글꼴을 웹 브라우에 표시. 글꼴 스택/웹폰트 사용 가능
- font-size: 글꼴 크기 (px, em, rem)
- font-style: 이탤릭체 표시 (Normal, italic, oblique)
- font-weight: 글자 굵기 (normal, bold, lighter, bolder, 100~900)
- font: 한 줄에서 모든 폰트 속성을 설정할 때 사용
5. 텍스트 레이아웃 스타일
- ext-align: 텍스트 정렬 (left, right, center, justify(양쪽맞춤))
- text-decoration: 밑줄, 윗줄, 취소선(none, underline, overline, line-through)
- letter-spacing: 글자 간격 조절 (px, em)
- word-spacing: 단어 간격 조절 (px, em)
- line-height: 줄 간격 (px, 배수, %(font-size 기준))
6. 박스 모델(box model)
: 웹페이지의 모든 요소들을 사각형 박스로 나타내는 방법
1) 박스모델의 구성요소
- content : 내용
- padding: 콘텐츠 주변을 채운다.
- border : 패딩과 콘텐츠를 둘러싸는 테두리
- margin: 테두리 바깥쪽 영역
2) 박스모델의 스타일
- box-sizing: width, height 지정 기준border-box, content-box(디폴트)
- box-shadow: 박스에 그림자 효과 지정수평거리, 수직거리, 흐림정도, 번짐정도, 색상, inset
- border (맨 위부터 시계방향 ex. border-width: 5px 4px 3px 2px)
- border-style: 박스의 테두리 모양 지정none, hidden, Solid, dotted, dashed, double, grove, inset, outset, ridge
- border-width: 박스 테두리 두께 지정top right, bottom, left 별도 지정 가능-
- border-color: 박스 테두리 색상 지정top right, bottom, left 별도 지정 가능
- border-radius: 박스 테두리 둥글게top right, bottom, left 별도 지정 가능
- padding: 박스 테두리 내부 여백top right, bottom, left 별도 지정 가능(콘텐츠와 box 사이 간격)
- margin: 박스 테두리 외부 여백top right, bottom, left 별도 지정 가능(box 간 간격)
<style>
.box1,
.box2,
.box3 {
width: 400px;
border: 20px, solid, black;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div class="box1">나는 박스1입니다.</div>
<div class="box2">나는 박스2입니다.</div>
<div class="box3">나는 박스3입니다.</div>
</body>
7. 반응형 웹
: 화면의 크기에 반응하는 반응형 웹
<meta name="viewport" content="width=device-width, initial-scale=1.0" />- width: 설명 뷰포트 너비(px또는 device-width)
- height: 뷰포트 높이(px또는 device-height)
- user-scalable: 확대/축소 가능 여부(yes, no)
- initial-scale: 초기 확대/축소 값(1~10)
- vw (viewport width): 1vw는 뷰포트 너비의 1%에 해당
- vh (viewport height): 1vh는 뷰포트 높이의 1%에 해당
- vmin (viewport minimum): 1vmin은 뷰포트 너비, 높이 중 작은 값의 1%
- mmax (viewport maximun): 1vmax는 뷰포트 너비, 높이 중 큰 값의 1%
** 뷰포트(viewport): 사용자의 화면에서 웹 페이지가 실제로 표시되는 영역
8. 미디어 쿼리
: 사이트에 접속하는 장치에 따른 스타일시트 작성
@media screen{
/*화면용 스타일 작성*/
}
/*예시*/
@media screen and (min-width:1440px){
/*뷰포트 너비가 최소 1440px인(1440px 이상인) 화면용 스타일*/
}- width: 너비
- height: 높이
- min-width: 최소너비
- min-height: 최소높이
- max-width: 최대너비
- max-height: 최대높이
9. Display
- block: 항상 새로운 줄에서 시작, width, height 설정 가능, margin/padding 모든 방향 적용 가능
- inline: 줄 바꿈 없이 흐름대로 배치, width, height 설정 불가, margin/padding 좌우만 적용 가능
- inline-block: 줄 바꿈 없이 흐름대로 배치(inline), width/height 설정 (block), margin/padding 모든 방향(block)
- flex: 유연한 레이아웃 구성, 1차원적 레이아웃, 자식 요소의 크기와 순서를 쉽게 제어
- grid: 2차원 레이아웃 구성, 행과 열을 동시에 제어, 복잡한 레이아웃에 적합
- none: 요소를 완전히 숨김, 공간도 차지하지 않음
| block | inline | inline-block | |
| 줄바꿈 유무 | 항상 새로운 줄에서 시작 | 줄바꿈 없이 흐름대로 배치 | 줄바꿈 없이 흐름대로 배치 |
| width, height 설정 | 가능 | 불가 | 가능 |
| margin, padding 적용 방향 | 전 방향 | 좌우만 | 전 방향 |
번외) <div>의 각 요소 줄바꿈 이슈 개선
더보기
- CSS에서 display: inline
: 줄바꿈 없이 컨텐츠만큼 자리 차지 - CSS에서 display: inline-block
: 블록레벨 요소 특성을 가지지만 자동 줄바꿈이 미적용. 흐름을 따라가다가 화면 크기에 따라 요소 재배치
>> 중앙 정렬은 text-align으로 적용
<div id="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
</div>/*기존*/
<style>
#container{
background-color: lightblue;
padding: 10px;
}
.flexbox {
background-color: lightpink;
border: 1px solid white;
width: 100px;
height: 50px;
margin: 10px;
}
</style>
/*변경*/
<style>
#container {
background-color: lightblue;
padding: 10px;
text-align: center;
}
.box {
background-color: lightpink;
border: 1px solid white;
width: 100px;
height: 50px;
margin: 10px;
display: inline-block;
}
</style>
1) display:flex;
display: flex; 속성을 지정하면, 해당 요소는 flex 컨테이너가 되며, 그 직계자식 요소들은 flex 아이템이 됨
- 플렉스 아이템들은 컨테이너 내에서 자동으로 크기가 조정된다.
2) 주요 속성
- justify-content : 주 축(main axis)에 따라 아이템들을 정렬
- align-items : 교차 축(cross axis)에 따라 아이템들을 정렬
- flex-wrap: 아이템들이 컨테이너를 넘어갈 때 줄 바꿈 여부 결정
<!--flex 컨테이너-->
<div id="container">
<!--flex 아이템-->
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
</div> <style>
#container {
background-color: blue;
padding: 10px;
flex-wrap: wrap;
justify-content: center; /*자식요소 가로정렬*/
align-items: center; /*자식요소 세로정렬*/
}
.box {
background-color: pink;
border: 1px white;
width: 100px;
height: 50px;
margin: 10px;
/*box 안 숫자 중앙정렬*/
display: flex;
justify-content: center; /*flex-start(end): 시작점(끝점), space-between:좌우 맞춤*/
align-items: center;
}
</style>
3) display:grid;
: row와 column으로 웹 화면을 구성하는 방법
<style>
#container {
background-color: lightblue;
padding: 10px;
display: grid;
/*row, column 지정(3 갯수, 1fr 비율)*/
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
/*컬럼, 줄 사이 간격*/
grid-gap: 10px;
}
.box {
background-color: lightpink;
border: 1px solid white;
display: flex;
justify-content: center;
align-items: center;
}
</style>