CSS란?
Cascading Style Sheets의 약자로, 웹 사이트의 html을 꾸며주는 역할을 한다. 한 번에 여러 웹 페이지의 스타일시트를 제어할 수 있다. CSS에서는 우선순위를 가지고 스타일이 적용된다. 마치 폭포처럼 적용된다고 하여 'Cascading'이란 단어가 포함되었다.
CSS 작성 방법
h1(selector) {
color(property): red(value);
} (declaration)- css 속성은 ';' 세미콜론으로 나뉜다. 세미콜론이 없을 경우, 에러가 발생한다.
- selector는 스타일을 지정할 html 요소(태그 이름, 클래스명 등)를 의미한다.
CSS Selector
태그 선택자
p {
background: yellow;
color: white;
}
Id명 선택자
#word {
color: blue;
text-decoration: underline;
}
클래스명 선택자
.container {
display: flex;
flex-direction: row;
align-items: center;
}코드의 최소화와 유지보수를 위해서는 css 속성이 같을 경우에는 그룹화해주는 것이 좋다. 그룹화는 쉼표에 따라 묶어줄 수 있다.
.word, p, #text { color: white; background: green; }
CSS 기본 선택자 예시
| selector | 예제 | 설명 |
| #id | #test | id명이 test인 요소를 선택 |
| .class | .intro | class명이 intro인 요소를 선택 |
| * | * | html 전체 요소를 선택 |
| element | p | 모든 p 태그 요소를 선택 |
| element, element | div, p | 모든 div와 p 태그 요소 선택 |
| element > element | div > p | 부모가 div 태그인 모든 p 태그를 선택 |
| element + element | div + p | div 태그 바로 뒤에 배치되는 첫 번째 p 태그를 선택 |
HTML에 CSS 스타일 시트 삽입하기
- 외부 css: css 스타일 파일을 html에 적용하기 위해서는 link 태그를 사용하여 head 부분에 추가한다.
<head>
<link rel="stylesheet" herf="styles.css" />
</head>- 내부 css: html 파일에 직접 css를 적용할 때에도 head 구간에 추가하면 된다. 단, style 태그를 사용하여 그 사이에 선택자를 불러와 적용한다.
<head>
<style>
p {
color: red;
text-decoration: underline;
}
.student {
background-color: skyblue;
color: white;
}
</style>
</head>CSS 적용 우선순위
- !important가 붙어있는 속성 (하지만, 매우 위험하기 때문에 사용을 권장하지 않음.)
- 인라인 스타일로 적용되어 있는 속성
- 선택자에 id가 쓰인 속성
- class, attribute, pseudo-class로 쓰인 속성
- 태그 이름으로 지정한 속성
- 부모 요소에 의해 상속된 속성
CSS 박스 요소
CSS에서 '상자 모델'이라는 용어는 디자인과 레이아웃을 말할 때 사용된다. CSS 상자 모델은 기본적으로 모든 HTML 요소를 감싸는 상자이다. margin, border, padding, content로 구성된다.
Flex
flexible box, flex box 등 유연하게 레이아웃을 배치하는 방식을 말한다. 다음은 flex 방식 중에서 개인적으로 가장 잘 잊어버리는 속성들을 정리해보았다.
flex-flow
- flex-direction과 wrap을 함께 사용할 수 있는 속성이다.
.pond {
display: flex;
flex-flow: column wrap;
}
align-items vs align-content vs align-self
| 이름 | 정의 | 차이점 |
| align-items | 한 줄 이상의 줄을 수직 방향으로 정렬 | 한 줄 이상의 라인을 정렬한다. |
| align-content | 두 줄 이상의 줄을 수직 방향으로 정렬 | 두 줄 이상의 라인을 정렬한다. (flex-wrap: wrap의 상태에서만 적용된다.) |
| align-self | 부모 요소 안의 자식 요소를 부모와 다른 방식으로 정렬 | 하나의 특정 요소에 적용된다. |
- align으로 정렬하고자 할 때에는 height를 반드시 적용해야 한다.
Grid
- flex 방식 보다 복잡한 레이아웃 제작이 가능한 방식이다. grid는 flex와 달리 한 방향이 아니라 가로-세로 두 방향 레이아웃 시스템이다.
grid-template-columns
레이아웃 열(가로)의 배치를 결정하는 속성이다.
.container {
display: grid;
grid-template-columns: 200px 600px 800px
}grid-template-rows
레이아웃 행(세로)의 배치를 결정하는 속성이다.
.container{
display: grid
grid-template-rows: 100px 300px 600px
}repeat(넓이, 개수), minmax 함수
- repeat 함수를 사용하면 코드를 간략화할 수 있다.
- minmax(최소값, 최대값)을 사용하면 최소와 최대 길이로 grid를 나눌 수 있다.
.container{
grid-template-rows: repeat(1fr, minmax(100px, auto))
}CSS 실습
첫 번째 실습 - flex 실습
조건
1. https://flexboxfroggy.com/#ko 이용하기
두 번째 실습 - 페이지네이션과 폰트 적용하기
- https://fonts.google.com/specimen/Moirai+One 폰트를 적용하고, 페이지네이션을 list로 만들었다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>페이지네이션</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=Jua&display=swap"
rel="stylesheet"
/>
</head>
<style>
body {
font-family: "Jua", sans-serif;
}
li {
list-style-type: none;
}
.pagination {
display: flex;
flex-direction: row;
gap: 5px;
}
.num {
padding: 5px 10px;
background-color: rgb(234, 234, 234);
color: black;
border-radius: 4px;
}
.num:hover {
background-color: black;
color: white;
}
</style>
<body>
<header>
<h1>Here!!!</h1>
</header>
<ol class="pagination">
<li class="num">1</li>
<li class="num">2</li>
<li class="num">3</li>
<li class="num">4</li>
<li class="num">5</li>
</ol>
</body>
</html>세 번째 실습 - 나의 프로필 CSS 적용
조건
1. HTML 내용 보완
2. 핀터레스트 참고하여 꾸미기
3. 미디어 쿼리를 사용하여 반응형 적용하기 (768px 일 때 변경되도록)
- 미완성으로 끝났기 때문에 목요일 과제로 제출하기로 함.
네 번째 실습 - 스나이퍼팩토리 홈페이지 메뉴 만들기
조건
1. Grid 또는 table-cell 사용하여 만들기
2. 스크롤 내리더라도 상단 바 고정
<!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>스나이퍼팩토리 홈페이지 메뉴 만들기</title>
<style>
* {
margin: 0;
}
header {
position: sticky;
padding: 1.5rem 1rem;
display: flex;
gap: 10px;
align-items: center;
border: 1px solid gray;
}
img {
width: 5vw;
}
ol {
width: fit-content;
padding-left: 0;
list-style-type: none;
display: grid;
grid-template-columns: repeat(6, minmax(30%, auto));
text-align: center;
font-weight: 600;
}
</style>
</head>
<body>
<header>
<img src="./sfac.svg" alt="스나이퍼팩토리 로고" />
<nav>
<ol>
<li>스팩소개</li>
<li>교육과정</li>
<li>공지사항</li>
<li>수료생 커뮤니티</li>
<li>협력사</li>
<li>스팩블로그</li>
</ol>
</nav>
</header>
</body>
</html>다섯 번째 실습 - 스나이퍼팩토리 교육 과정 만들기
조건
1. 마우스 올렸을 때 transition 효과 적용
2. https://fontawesome.com/ 사용해 서 아이콘 불러오기 (로켓)
- 이미지 사이즈를 맞추는데 시간 소비를 많이 했다.
- 이미지 hover 시에 어두운 바탕을 밝게 하는 것은 'filter' 속성으로 처리가 가능하다.
img {
width: 100%;
object-fit: cover;
filter: brightness(0.5);
transform: scale(1);
}
.img:hover img {
filter: brightness(1);
transition: 0.3s ease-in-out;
transform: scale(1.3);
}여섯 번째 실습 - 원 주위로 작은 사각형 움직이도록 만들기
조건
1. keyframe, animation 사용
2. transform 사용
<!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>원 주위 사각형 돌기</title>
<style>
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.circle {
position: relative;
height: 100px;
width: 100px;
border-radius: 50%;
background-color: red;
animation: spin 2s linear infinite;
}
.square {
position: absolute;
left: 100px;
height: 30px;
width: 30px;
background-color: blue;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="circle">
<div class="square"></div>
</div>
</div>
</body>
</html>
더보기
출처 및 참고자료
1. 프론트엔드 강의 교안 (2일차).pdf, 유데미X스나이퍼팩토리.
2. box model을 구성하는 요소, https://velog.io/@gil0127/%EB%B0%95%EC%8A%A4%EB%A5%BC-%EA%B5%AC%EC%84%B1%ED%95%98%EB%8A%94-%EC%9A%94%EC%86%8C
box model을 구성하는 요소
박스 모델은 다음 그림만 기억하면 됩니다.border(테두리), padding(안쪽 여백), margin(바깥 여백)테두리는 심미적으로도 필요하지만, 개발 과정에서도 매우 의미있게 사용된다. 각 영역이 해당하는
velog.io
3. align-items / align-content / align-self의 특징과 차이점, https://letsgojieun.tistory.com/49
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
'외부활동 > 유데미X스나이퍼팩토리' 카테고리의 다른 글
| [유데미X스나이퍼팩토리] 10주 완성 프로젝트 캠프 12일차 - Javascript 기본 (0) | 2023.06.16 |
|---|---|
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 11일차 - 내 프로필 만들기 (0) | 2023.06.15 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 9일차 - (구)세이프홈즈 랜딩페이지 반응형 퍼블리싱(html만) (0) | 2023.06.13 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 8일차 - 웹표준과 HTML5 과제 (0) | 2023.06.12 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 7일차 - 아이디어 스케치 과정 과제 (0) | 2023.06.11 |
