728x90
반응형
CSS란?
Cascading Style Sheets의 약자이며 한 번에 여러 웹 페이지의 레이아웃을 제어가능
외부 스타일 시트는 css 파일에 저장된다. CSS에서 스타일이 적용될 때는, 우선순위를 가지고 적용(Cascading) 연속화 형태로 위에서 아래로 적용
CSS 작성방법
Selector(선택기)는 스타일을 지정할 HTML 요소를 말하며, 각 선언에는 콜론으로 구분된 css 속성 이름과 값이 포함. 여러 css 선언은 세미콜론으로 구분되며 선언 블록은 중괄호로 묶임
CSS Selector
CSS 선택기는 스타일을 지정할 HTML 요소를 찾는(또는 선택하는)데 사용
p{
text-align : center;
color: red;
}
/* 요소 이름을 기반으로 html 요소를 선택 */
#para1{
text-align : center;
color: red;
}
/*
id 선택자는 HTML 요소의 id 속성을 사용
요소의 id는 페이지 내에서 고유하므로 id선택기는 하나의 고유한 요소를 선택
id값은 #(해시)문자 뒤에 요소의 id 사용.
*/
.center{
text-align : center;
color: red;
}
/*
특정 클래스는 요소를 선택하면 .(마침표)문자와 클래스 이름을 사용
*/h1{
text-align:center;
color:red;
}
h2{
text-align:center;
color:red;
}
p{
text-align:center;
color:red;
}
/* */
h1, h2, p {
text-align: center;
color:red;
}코드를 최소화 하려면 선택기를 그룹화. 그룹화하려면 각 선택기를 쉼표(,)로 구분
CSS 우선 적용 순위
같은 요소에 따른 CSS 속성이 중복 설정되어 있을 때, 우선 적용되는 순서
우선순위 1 - 속성값 뒤어 !important가 붙어 있는 속성
우선순위 2 - 인라인 스타일로 적용되어 있는 속성
우선순위 3 - 선택자에 id가 쓰인 속성
우선순위 4 - class, attribute, pseudo-class로 지정한 속성
우선순위 5 - 태그 이름으로 지정한 속성
우선순위 6 - 부모 요소에 의해 상속된 속성
CSS 레이아웃 - 위치속성
이 position 속성은 요소에 사용되는 위치 지정 방법의 유형(정적, 상대, 고정, 절대 또는 고정)을 지정
position(위치속성)은 요소에 사용되는 위치 지정 방법의 유형을 지정
- static
- relative
- fixed
- absolute
- sticky
CSS 레이아웃 - Static
HTML 요소는 기본적을 정적으로 배치. 정적으로 배치된 요소는 top, bottom, left 및 right 속성의 영향을 받지 않음.
div.static{
position:static;
border: 3px solid #ddd;
}
CSS 레이아웃 - relative
정상 위치를 기준으로 배치, 상대적으로 배치된 요소의 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성을 설정하면 원래 위치에서 벗어나 조정.
다른 콘텐츠는 요소가 남긴 간격에 맞게 조정되지 않음.
div.relative{
position:relative;
left:30px;
border:3px solid #ddd;
}
CSS 레이아웃 - absolute
가장 가까운 위치에 있는 조상을 기준으로 위치가 지정. 하지만, 절대 위치 지정 요소에 위치 지정 조상이 없으면 문서 본문을 사용하고 있는 페이지 스크롤과 함께 이동.
div.relative{
position:relative;
left:30px;
border:3px solid #ddd;
}
div.absolute {
position:absolute;
top:80px;
right:0;
height:100px;
border:3px solid #ddd;
}
CSS Pseudo-class Selector
| Selector | 예제 | 설명 |
| :active | a:active | 활성 링크를 선택 |
| :hover | a:hover | 마우스 오버가 되는 링크를 선택 |
| :visited | a:visited | 방문한 모든 링크 선택 |
| :first-child | p:first-child | 부모의 첫 번째 자식인 모든 <p> 요소를 선택 |
| :nth-child(n) | p:nth-child(2) | 부모의 두 번째 자식인 모든 <p> 모소를 선택 |
<!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>CSS</title>
</head>
<body>
<style>
p{
border: 2px solid red;
margin-bottom: 20px;
padding: 10px;
text-align: center;
}
p:nth-child(3){
border-radius: 6px;
}
p:nth-child(4){
border-radius: 14px;
}
p:nth-child(5){
border-radius: 50px;
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 1px solid black;
}
.container div{
background-color: brown;
color:wheat;
padding: 10px;
}
.container_img{
width: 1000px;
height: 1000px;
background-image: url("https://i.pinimg.com/474x/3d/b7/e7/3db7e7c529c00ceef37337882ac17b0f.jpg");
background-size: cover;
background: linear-gradient(to bottom, #333, #f37474 75%);
}
</style>
<div>
<p>일반 테두리</p>
<p>둥근 테두리</p>
<p>더 둥근 테두리</p>
<p>가장 둥근 테두리</p>
</div>
<div class="container">
<div>아이템1</div>
<div>아이템2</div>
<div>아이템3</div>
</div>
<div class="container_img">
</div>
</body>
</html>
Grid와 Flex의 차이점
flex는 1차원 적인 부분만 고려한 레이아웃이며 한 방향으로 정렬가능
grid는 공간을 나눠 정렬 가능
Flex 방향설정
flex-direction : row / row-reverse / column / column-reverse
Flex 정렬
(가로정렬) justify-content :
<!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>실습3 css</title>
<script src="https://kit.fontawesome.com/85f067b64a.js" crossorigin="anonymous"></script>
<style>
*{
margin:0;
}
a{
text-decoration: none;
font-size: 0.8rem;
color:#333;
}
.wrapper {
display: grid;
grid-template-columns: repeat(12, 1fr);
padding:20px;
position: sticky;
top:0;
z-index: 999;
background-color:#fff;
}
.wrapper > div{
font-weight: 700;
padding-left: 0.5rem;
padding-right: 0.5rem;
text-align: center;
}
.wrapper img{
max-width: 100%;
height: auto;
width: 5rem;
}
.item:nth-child(1) {
grid-column: 1 / 3;
}
.edu-items{
margin: 0;
display: flex;
flex-direction: row;
}
.edu-item{
width: 320px;
border: 1px solid #ddd;
}
img{
max-width: 100%;
height: auto;
}
.wrap_edu{
margin: 10px;
}
.edu-item-img{
position: relative;
overflow: hidden;
}
.edu-item-img span{
position: absolute;
top:10%;
right:5%;
font-size: 0.4rem;
padding: 5px 10px;
}
.edu-item-img img:hover{
transform: scale(1.2);
}
.edu-item-tag{
margin-top: auto;
font-size: 0.7rem;
padding: 5px 10px;
}
.edu-item-title{
font-weight: 700;
margin-top: 20px;
}
.edu-item-context{
font-size: 0.75rem;
color: #a3a3a3;
margin-top: 10px;
}
.edu-item-tag-num{
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.edu-item-btn{
text-align: center;
margin: 20px 10px;
padding: 15px 10px;
background-color: aquamarine;
border-radius: 20px;
}
.radi{
background-color: #ddd;
border-radius: 20px;
}
</style>
</head>
<body style="height: 1000px">
<div class="wrapper">
<div class="item"><a href="#"><img src="https://sniperfactory.com/img/sfac.svg" alt=""></a></div>
<div class="item"><a href="#">스픽소개</a></div>
<div class="item"><a href="#">교육과정</a></div>
<div class="item"><a href="#">공지사항</a></div>
<div class="item"><a href="#">수료생 커뮤니티</a></div>
<div class="item"><a href="#">협력사</a></div>
<div class="item"><a href="#">스픽블로그</a></div>
</div>
<section>
<h3>교육과정</h3>
<div class="edu-items">
<div class="edu-item">
<p class="edu-item-img"><img src="https://sniperfactory.com/api/files/courses/2g41rrrm5lttkl0/flutter3rd_qdbQ03hu4U.png" alt=""> <span class="radi">스팩</span></p>
<div class="wrap_edu">
<span class="edu-item-tag radi">신청가능</span>
<p class="edu-item-title">Flutter 모바일 어플리케이션 개발 부트</p>
<p class="edu-item-context">
4개월 간 스나이퍼팩토리와 함께 Flutter로 "내가 원하는 어플리케이션"을 만들어보는 시간입니다.
Flutter와 Dart의 기초부터 심화, 응용까지 배워보고 나만의 어플리케이션으로 포트폴리오를 쌓아보세요.
최종적으로 기업의 실제 프로젝트까지 직접 진행할 수 있는 만큼의 개발자로 성장하세요!
</p>
<div class="edu-item-tag-num">
<p class="edu-item-tag radi">취업연계과정</p>
<p class="edu-item-tag">기수 : 3기 <i class="fa-solid fa-rocket"></i></p>
</div>
</div>
<p class="edu-item-btn">
더 알아보기
</p>
</div>
<div class="edu-item">
<p class="edu-item-img"><img src="https://sniperfactory.com/api/files/courses/2g41rrrm5lttkl0/flutter3rd_qdbQ03hu4U.png" alt=""> <span class="radi">스팩</span></p>
<div class="wrap_edu">
<span class="edu-item-tag radi">신청가능</span>
<p class="edu-item-title">Flutter 모바일 어플리케이션 개발 부트</p>
<p class="edu-item-context">
4개월 간 스나이퍼팩토리와 함께 Flutter로 "내가 원하는 어플리케이션"을 만들어보는 시간입니다.
Flutter와 Dart의 기초부터 심화, 응용까지 배워보고 나만의 어플리케이션으로 포트폴리오를 쌓아보세요.
최종적으로 기업의 실제 프로젝트까지 직접 진행할 수 있는 만큼의 개발자로 성장하세요!
</p>
<div class="edu-item-tag-num">
<p class="edu-item-tag radi">취업연계과정</p>
<p class="edu-item-tag">기수 : 3기 <i class="fa-solid fa-rocket"></i></p>
</div>
</div>
<p class="edu-item-btn">
더 알아보기
</p>
</div>
<div class="edu-item">
<p class="edu-item-img"><img src="https://sniperfactory.com/api/files/courses/2g41rrrm5lttkl0/flutter3rd_qdbQ03hu4U.png" alt=""> <span class="radi">스팩</span></p>
<div class="wrap_edu">
<span class="edu-item-tag radi">신청가능</span>
<p class="edu-item-title">Flutter 모바일 어플리케이션 개발 부트</p>
<p class="edu-item-context">
4개월 간 스나이퍼팩토리와 함께 Flutter로 "내가 원하는 어플리케이션"을 만들어보는 시간입니다.
Flutter와 Dart의 기초부터 심화, 응용까지 배워보고 나만의 어플리케이션으로 포트폴리오를 쌓아보세요.
최종적으로 기업의 실제 프로젝트까지 직접 진행할 수 있는 만큼의 개발자로 성장하세요!
</p>
<div class="edu-item-tag-num">
<p class="edu-item-tag radi">취업연계과정</p>
<p class="edu-item-tag">기수 : 3기 <i class="fa-solid fa-rocket"></i></p>
</div>
</div>
<p class="edu-item-btn">
더 알아보기
</p>
</div>
</div>
</section>
</body>
</html>출처 : https://velog.io/@ikkim01/CSS-Flex-VS-Grid
느낀 점
예전에 css코딩할 때 태그 하나하나 스타일주고 했었는데 시간도 많이 소요되고 너무 많다 보니 헷갈리기도 했는데, 다양한 css 규칙들을 활용해서 더욱더 간편하게 할 수 있는 방법들이 있다는 것을 배웠다.
* 유데미 큐레이션 바로가기 : https://bit.ly/3ZpMIP7
* STARTERS 취업 부트캠프 공식 블로그 : https://blog.naver.com/udemy-wjtb
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
728x90
반응형
'10주완성 프로젝트 캠프' 카테고리의 다른 글
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 과제 (0) | 2023.06.26 |
|---|---|
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 7일차 - 리액트 (0) | 2023.06.22 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 4일차 - HTML (0) | 2023.06.20 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 3일차 - 서비스기획3 (0) | 2023.06.11 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 2일차 - 서비스기획2 (0) | 2023.06.08 |
