세번째날 7. 21과 네번째날 7. 24 이틀에 걸쳐 배운 것은 css였습니다!
css같은 경우 내용이 방대해서,,, 따라가기 정말 바빴습니다.....
그래서 저는 개념보다는 제가 어떤걸 했는지 기록하고,
새싹의 웹 풀스택 과정 자체가 궁금하신 분들이 참고하시면 좋을 것같습니다.
또한 기초부터 체계적인 css 실습거리를 찾으신다면 참고하셔도 좋을 듯합니다!
1. 무지개 만들기 실습 (css link하기, class 지정하기)
- css 파일을 html파일과 link 방식으로 연결하고 html의 class 속성을 이용하여 css에서 각각의 class마다
다른 색과 너비 등 기본적인 설정값 반영하는 방법을 배웠습니다.
웹 페이지 결과물
[SeSSAC] 웹 풀스택 영등포 5기 과정_HTML배우기
html소스
<body>
<h2 style="background-color: black; color: white; width: 80px;">무지개</h2>
<div class="red"></div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="navy"></div>
<div class="purple"></div>
</body>css소스
.red {
background-color: red;
width: 50px;
height: 50px;
}
.orange {
background-color: orange;
width: 100px;
height: 50px;
}
.yellow {
background-color: yellow;
width: 150px;
height: 50px;
}
.green {
background-color: green;
width: 200px;
height: 50px;
}
.blue {
background-color: blue;
width: 250px;
height: 50px;
}
.navy {
background-color: navy;
width: 300px;
height: 50px;
}
.purple {
background-color: purple;
width: 350px;
height: 50px;
}같은 div여도 클래스 이름을 red, orange, yellow등 다르게 부여하여 css에서 각각의 이름을 불러 다른 설정 값을 줄 수 있도록 하였습니다. 새로 배운 점은 점 (.)을 통해 클래스를 css에서 부를 수 있다는 점이었습니다.
2. 기본 선택자를 연습하는 실습 (class, id, 태그 css에서 불러오기)
html 소스
<body>
<h1>기본 선택자 연습해보기</h1>
<p>기본선택자 연습을 해보아요!</p>
<span>안녕하세요</span>
<ol>
<li id="first">1</li>
<li class="second">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<!-- 클래스의 그룹 사용 -->
<ul>
<li class="small">쥐</li>
<li class="big">소</li>
<li class="big">호랑이</li>
<li class="small">토끼</li>
</ul>
<!-- 클래스,id 속성의 올바른 사용 -->
<!-- 1. 한 요소에 여러 클래스 사용: 공백으로 구분 -->
<p class="hello hi meet">안녕하세요</p>
<!-- 2. 한 요소에 하나의 아이디를 사용 -->
<p id="my-hello">안녕하세요</p>
<!-- 3.한 요소가 여러 클래스와 하나의 아이디 사용 -->
<p class="hello hi meet" id="your-hello">안녕하세요</p>
<!-- 4. 한 요소가 여러 개의 아이디를 사용 = 올바르지 않음 -->
<p id="one two">안녕하세요</p>
</body>css 소스
*{
color: navy;
}
/* 태그명: 태그 선택자 */
h1{
background-color: pink;
}
/* .클래스명: 클래스 선택자 */
.second{
background-color: aquamarine;
}
/* #id명: id선택자 */
#first{
background-color: magenta;
}
/* 클래스와 아이디 차이점 */
/* -class: 그룹
-id: 고유
ex) "student"라는 클래스 이름은 여러 요소에 사용 가능
"teacher"라는 아이디 값은 한 요소에만 사용되어야함
*/
.small{
font-size: 20px;
}
.big{
font-size: 50px;
}이 실습에서는 html의 다양한 요소들을 어떻게 css파일에서 부를 수 있는지 배울 수 있었습니다.
온점 (.)은 클래스, #은 id를 부를 수 있었고 태그명은 그냥 아무 기호 없이 이름을 부르면 가능한 점이 신기하였습니다.
3. 복합 선택자 사용 연습하기 실습 (부모 자식 태그 및 클래스 선택하기)
html 소스
<body>
<h1>복합선택자 사용 연습</h1>
<p>동물원에 왔어요</p>
<div class="zoo">
<ul>
<span>여긴 사파리!</span>
<li>곰</li>
<li id="tiger">호랑이</li>
<li>팬더</li>
<span class="lion">사자1</span>
<li class="lion">사자2</li>
<li>사육사 allie</li>
<li>사육사 진형</li>
</ul>
<span class="lion"> 사파리 밖의 사자</span>
</div>
<p class="lion">야생의 사자</p>
</body>html소스
body p.lion{
background-color: red;
}
div .lion{
background-color: greenyellow;
}
#tiger{
background-color: yellow;
}
.lion{
color: sienna;
}
body div .lion{
font-weight: bold;
}
#tiger + li{
background-color: skyblue;
}
li.lion ~ li{
background-color: orange;
}이 실습을 통해서 단순히 <h1> 같은 태그 하나만 선택하는 것보단 div안에 li태그를 구체적으로 선택할 수 있다는 점을 알게 되었습니다.
한칸을 띄고 단일 선택자를 선택하듯이 차근차근 부모 태그에서 자식 태그로 좁혀나가면 되는 것을 확인했습니다!
그리고 어떤 태그 뒤에 오는 형제 태그를 선택하는 연산자(+)와 어떤 태그 뒤에 오는 모든 태그를 선택하는연산자(~)도 배울 수 있었습니다.
4. 가상 클래스 선택자 실습 (클래스에 반응형 변경 css 삽입하기)
html소스
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>실습_가상클래스_선택자</title>
<link rel="stylesheet" href="./test05.css">
</head>
<body>
<h1>제목</h1>
<a href="https://www.naver.com/">네이버</a>
<input type="text">
</body>css소스
h1:hover{
color: red;
}
a:active{
background-color: blue;
}
input:focus{
background-color: orange;
}이 실습으로 저희가 css에서 사용하는 어떤 동적인 반응형의 css도 삽입할 수 있는 것을 알게되었습니다.
하여 hover했을 때 제목을 red로 변경하고 하이퍼링크를 active했을 때 blue로 변경해서 클릭했다는 점을 알리고
text상자에 focus했을 때 상자의 배경색을 orange색으로 변경한 실습이었습니다.
즉각적으로 바로바로 반응이 보여서 너무 신기하고 재밌더라구요!
계속 백엔드만 파온 저에게 프론트는 신기한 투성이라는 점,,,
5. 줄무늬 만들기 실습(규칙적으로 변화하는 부분도 적용하기)
html 소스
<body>
<div class="stripes">
<div>navy</div>
<div>yellow</div>
<div>navy</div>
<div>navy</div>
<div>navy</div>
<div>yellow</div>
<div>navy</div>
<div>navy</div>
<div>navy</div>
<div>yellow</div>
<div>navy</div>
</div>
</body>css 소스
div:nth-child(even){
background-color: yellow;
color: black
}
div:nth-child(odd){
background-color: navy;
color: white
}이 실습에서는 nth-child를 통해 n번째 자식들에게 어떠한 설정값을 주는 실습을 하였습니다.
홀수행과 짝수행을 나눌 필요가 있었는데 인터넷에 검색해보니 홀수는 even이라고 주고 짝수는 odd라고 칭하더라구요
다른 분들은 홀수행을 2n+1이라고 하고 짝수행은 2n이라고 설정하신 분도 많았습니다!
6. 애벌레 만들기 실습( z-index활용 실습)
html 소스
<body>
<div class="header">
<div class="eye-white">
<div class="eye-black"></div>
</div>
</div>
<div class="body1"></div>
<div class="body2"></div>
<div class="body3"></div>
<div class="body4"></div>
<div class="body5"></div>
<img class="grass" src="./img/grass.png" alt="잔디">
</body>css 소스
.header{
width: 100px;
height: 100px;
background-color: rgb(30, 144, 188);
border-radius: 50%;
}
.eye-white{
width: 30px;
height: 30px;
background-color: white;
border-radius: 50%;
position: relative;
top: 20px;
left: 10px;
}
.eye-black{
width: 20px;
height: 20px;
background-color: rgb(0, 0, 0);
border-radius: 50%;
position: relative;
}
.body1{
width: 100px;
height: 100px;
background-color: rgb(58, 124, 224);
border-radius: 50%;
position: relative;
bottom: 50px;
left: 60px;
}
.body2{
width: 100px;
height: 100px;
background-color: rgb(33, 60, 182);
border-radius: 50%;
position: relative;
bottom: 120px;
left: 120px;
}
.body3{
width: 100px;
height: 100px;
background-color: rgb(157, 170, 228);
border-radius: 50%;
position: relative;
bottom: 200px;
left: 180px;
}
.body4{
width: 100px;
height: 100px;
background-color: rgb(14, 151, 185);
border-radius: 50%;
position: relative;
bottom: 300px;
left: 250px;
z-index: 10;
}
.grass{
width: 500px;
height: 100px;
position: fixed;
top: 120px;
}조금 심화된 실습이었는데, 그래도 여기도 할만 하였습니다.
즉각적인 라이브 웹페이지를 보면서 수행하니 적절한 에벌레의 크기, 값과 color, 그리고 포지션을 줄 수 있었습니다.
포지션을 relative로 설정하여 에벌레는 서로의 영향을 받도록 설정하였고, 땅을 나타내는 grass는 왜인지 대지를 나타내는 느낌이라서,
주변의 영향을 받지 않는 fixed로 설정하여 top에서 적절한 픽셀만큼 떨어지도록 하였습니다.
여기서 중요하게 쓰인 점은 z-index개념이었습니다.
자세히 보면, 에벌레의 body4가 grass보다 앞에 있도록 보여지고 있기 때문에
z-index를 넉넉하게 주어 grass위에 위치하도록 하였습니다.
7. 사진쌓기 실습 (이미지 포지션 활용과 tranform 개념 활용 실습)
html 소스
<body>
<div class="beach1">
<img src="./img/beach1.jpg" alt="바다"></div>
<div class="beach2">
<img src="./img/beach2.jpg" alt="바다"></div>
<div class="beach3">
<img src="./img/beach3.jpg" alt="바다"></div>
</body>css 소스
img{
transform: skewY(30deg);
width: 300px;
background-color: aqua;
}
.beach1{
position: fixed;
top: 500px;
left: 300px;
z-index: 3;
}
.beach2{
position: fixed;
top: 500px;
left: 500px;
z-index: 2;
}
.beach3{
position: fixed;
top: 500px;
left: 700px;
}이 실습에서는 tranform의 개념을 활용할 수 있었습니다.
tranform은 기존의 형태를 이리저리 변형시키는 개념이었습니다.
사진처럼 img가 있다면, img를 원하는 각도로 돌리거나 크기를 변형하는 등 다양한 기능을 지원하는 것도 수업시간에 보았습니다.
8. 다양한 헤더 만들기 실습 (flex의 등장,,,,!!)
html 소스
<body>
<h5>Flex를 이용해 여러 종류의 Header를 만들어보자!</h5>
<!-- header1 -->
<header class="header1">
<span>LOGO</span>
<ul class="menus">
<li>MENU1 </li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</header>
<!-- header2 -->
<header class="header2">
<ul class="menus">
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</header>
<!-- header3 -->
<header class="header3">
<div class="menu-left">
<span>LOGO</span>
<ul>
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</div>
<ul class="menu-right">
<li>LOGIN</li>
</ul>
</header>
<!-- header4 -->
<header class="header4">
<span>LOGO</span>
<ul>
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
<div>
<span>LOGIN</span>
<span>SIGNUP</span>
</div>
</header>
</body>css 소스
*{
box-sizing: border-box;
font-size: 30px;
font-weight: bolder;
}
ul{
/* ul태그가 기본적으로 가지고 있는 스타일 초기화 */
list-style: none;
padding: 0;
margin: 0;
}
header{
background-color: rgb(187, 187, 187);
width: 100%;
height: 60px;
margin-bottom: 200px;
padding: 0 20px;
}
.header1{
display: flex;
align-items: center;
}
.header1 .menus{
display: flex;
margin-left: 20px;
justify-content: flex-end;
}
.header2{
display: flex;
align-items: center;
}
.header2 .menus{
display: flex;
justify-content: space-between;
width: 100%;
}
.header3{
display: flex;
align-items: center;
justify-content: center;
}
.header3 .menu-left{
display: flex;
width: 100%;
justify-content: center;
}
.header3 .menu-left ul{
display: flex;
width: 100%;
justify-content: center;
}
.header3 .menu-left ul li{
margin-left: 20px;
}
.header3 .menu-right{
display: flex;
justify-content: flex-end;
}
.header4{
display: flex;
align-items: center;
}
.header4 ul{
display: flex;
width: 100%;
}
.header4 ul li{
margin-left: 20px;
}
.header4 div{
display: flex;
justify-content: flex-end;
}
.header4 div span{
margin-left: 20px;
}flex의 개념을 배웠습니다.
사실 아직도 크게 잘 와닿지 않아서 이 실습은 제가 집가서 따로하고 꼴찌로 낼 정도로 오래걸렸어요
css코드도 매우 길죠? ( = 아직 flex를 잘 못 쓴다는 뜻임)
제가 이해한 바로는, display=flex설정을 주게 되면 그 자식들이 한줄로 표현이 되고,
그 안에서 제가 원하는 대로 justify-content, align-item 속성을 사용해서 구체적인 위치들을 조정할 수 있었어요
근데 이 실습을 되게 오랫동안 끙끙댔는데 chat gpt에게 물어보니까 justify-content가 먹지 않는 이유가
구체적인 각각의 width를 주지 않아서 얘네가 어디가 기준인지 몰라서 안된다고 그러더라구요,,,
width = 100%라는 속성을 주었더니 바로 되더라던,,,
9. 원 움직이기 실습(애니메이션과 ketframes를 배움)
html 소스
<body>
<div class="ball"></div>
</body>css 소스
.ball{
background-color: rgb(218, 94, 115);
width: 50px;
height: 50px;
position: relative;
border-radius: 50%;
animation-name: moving;
animation-duration: 3s;
animation-iteration-count: 6;
}
@keyframes moving {
0% {
left: 0px;
top: 0px;
}
25% {
left: 300px;
top: 0px;
}
50% {
left: 300px;
top: 300px;
}
75% {
left: 0px;
top: 300px;
}
100%{
left: 0px;
top: 0px;
}
}이 실습에서는 애니메이션을 주는 방법을 배웠습니다.
그리고 애니메이션을 제가 원하는 대로 유연하게 속도를 조절하거나 횟수를 지정할 수 있는 구체적인 설정값들도 배웠습니다!
'개발 공부한 것들 > SeSSAC 웹 풀스텍 과정 회고록' 카테고리의 다른 글
| [SeSSAC] 웹 풀스택 영등포 5기 과정_javascript배우기(3)_dom (0) | 2023.07.31 |
|---|---|
| [SeSSAC] 웹 풀스택 영등포 5기 과정_javascript배우기(2)_map,filter,find메소드 (0) | 2023.07.29 |
| [SeSSAC] 웹 풀스택 영등포 5기 과정_javascript배우기(1)_변수, 배열 , 반복문 (0) | 2023.07.27 |
| [SeSSAC] 웹 풀스택 영등포 5기 과정_HTML배우기 (0) | 2023.07.20 |
| [SeSSAC] 웹 풀스택 영등포 5기 과정_GIT_깃허브 최초 연결하기 (0) | 2023.07.18 |