1.학습한 내용
프로젝트 시작
1. 웹페이지 첫 화면 만들기
-
드디어 7월에 접어들었고 나는 프로젝트 팀에 속해 주어진 웹페이지와 같은 화면을 만드는 것을 진행
-
목표
-
내가 맡은 부분
-
해야할 일
- HTML 및 CSS 완성
- 페이지를 열었을 때 보이지 않다가 나타나는 이벤트
- 미디어쿼리 이용해서 창의 크기에 따른 페이지 변화주기
- 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>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="./css/section5.css">
</head>
<body>
<section>
<div class="back-5">
<img src="./image/리소프트로고_big.png" class="sec5-image">
</div>
<div class="wraper">
<ul class="wraper-ul">
<li class="columns">
<div class="icon-image">
<img src="./image/대구광역시 건축사회.png" class="icon">
</div>
<p class="icon-name">대구광역시 건축사회</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/대구광역시.png" class="icon">
</div>
<p class="icon-name">대구광역시</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/매일신문.png" class="icon">
</div>
<p class="icon-name">매일신문</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/경북대학교.png" class="icon">
</div>
<p class="icon-name">경북대학교</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/대구MBC문화원.png" class="icon">
</div>
<p class="icon-name">대구MBC문화원</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/대구광역시 체육회.png" class="icon">
</div>
<p class="icon-name">대구광역시 체육회</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/대구가톨릭대학교.png" class="icon">
</div>
<p class="icon-name">대구가톨릭대학교</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/송파구청.png" class="icon">
</div>
<p class="icon-name">송파구청</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/국민의힘.png" class="icon">
</div>
<p class="icon-name">국민의힘</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/국제라이온스협회.png" class="icon">
</div>
<p class="icon-name">국제라이온스협회</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/한국전기공사협회.png" class="icon">
</div>
<p class="icon-name">한국전기공사협회</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/즐거운세상.png" class="icon">
</div>
<p class="icon-name">(주)즐거운 세상</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/해양대학교.png" class="icon">
</div>
<p class="icon-name">한국해양대학교</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/상공회의소.png" class="icon">
</div>
<p class="icon-name">대구상공회의소</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/대한건설협회.png" class="icon">
</div>
<p class="icon-name">대한건설협회</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/한국청년회의소.png" class="icon">
</div>
<p class="icon-name">한국청년회의소</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/계명대.png" class="icon">
</div>
<p class="icon-name">계명대학교</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/해양대학교.png" class="icon">
</div>
<p class="icon-name">목포해양대학교</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/대구공고.png" class="icon">
</div>
<p class="icon-name">대구공업고등학교</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/대경산업협회.png" class="icon">
</div>
<p class="icon-name">대경ITC산업협회</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/한국조리기능장협회.png" class="icon">
</div>
<p class="icon-name">한국조리기능장협회</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/여성기업인협회.png" class="icon">
</div>
<p class="icon-name">IT여성기업인협회</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/중소기업융합연합회.png" class="icon">
</div>
<p class="icon-name">중소기업융햡연합회</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/대구신용보증재단.png" class="icon">
</div>
<p class="icon-name">대구신용보증재단</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/달서구청.png" class="icon">
</div>
<p class="icon-name">달서구청</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/대구디지털산업진흥회.png" class="icon">
</div>
<p class="icon-name">대구디지털산업진흥원</p>
</li>
<li class="columns">
<div class="icon-image">
<img src="./image/로타리클럽.png" class="icon">
</div>
<p class="icon-name">국제로타리클럽</p>
</li>
</ul>
</section>
</body>
</html>-css
@charset "utf-8";
/* 가장 기본적인 틀 */
*{
margin: 0;
padding: 0;
font-family: 'Noto Sans KR', sans-serif;
}
-------------------------------------------------------------------------------
/* sec-5 RESOFT Image */
.back-5{
background-color: #04088a;
width: 100%;
height: 300px;
}
.sec5-image{
position: relative;
padding-top: 140px;
padding-left: 250px;
}
이미지가 위치를 움직일 수 있게 포지션을 relative로 준다
-------------------------------------------------------------------------------
/* sec-5 Icon */
.wraper{
max-width: 1400px;
margin: 150px auto;
text-align: center;
}
.wraper-ul{
display: flex;
flex-wrap: wrap;
}
li요소들을 움직이기 위해 display를 flex로 주고 wrap해준다
.columns{
display: flex;
flex-direction: column;
align-items: center;
width: calc(100% / 9);
margin-bottom: 50px;
}
각 li들도 flex해주고 방향을 column 지정
요소들을 컨테이너의 세로선 상의 가운데로 정렬
-------------------------------------------------------------------------------
/* sec-5 Icon Image */
.icon-image{
position: relative;
width: 120px;
height: 120px;
border: 3px solid rgb(224, 221, 221);
border-radius: 50%;
}
.icon{
position: absolute;
max-width: 100%;
margin-bottom: 5px;
padding: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
absolute => 즉 부모요소인 .icon-image라는 클래스를 가진 div를 기준으로 top,left 값으로 이미지를 배치
transform: translate => X와 Y축을 따라 지정된 거리만큼 요소를 이동
p{
font-size: 15px;
color: rgb(224, 221, 221);
margin: 15px;
}
-------------------------------------------------------------------------------
@media screen and (max-width:940px){
.wraper-ul{
max-width: 500px;
margin: 0 auto;
}
.columns{
width: calc(100% / 4);
margin: 0 3% 30px 3%;
}
.icon-image{
width: 110px;
height: 110px;
}
}
@media screen and (max-width:1217px){
.wraper-ul{
margin: 0 5%;
}
.columns{
width: calc(100% / 8);
}
.icon-image{
width: 10vw;
height: 10vw;
}
}2.학습한 내용 중 어려웠던 점
-
하면서 가장 힘든 부분은 역시나 position, display, mediaQuery
-
다시 한번 개념 정리
1). display : flex
-요소들을 자유자제로 위치시킬 수 있는 속성
(1) flex-direction
-flexible item이 flex컨테이너 안에 위치되는 방법을 지정
-row : 기본값으로, 행으로 수평방향으로 왼쪽에서 오른쪽으로 정렬한다.
-row-reverse : 행으로 수평방향으로 오른쪽에서 왼쪽으로 정렬한다.
-column : 열로 수직방향으로 위에서 아래로 정렬한다.
-column-reverse : 열로 수직방향으로 아래에서 위로 정렬한다.
-initial : 디폴트 값으로 이 속성을 설정한다.
-inherit : 부모 요소로부터 값을 상속 받는다.
(2) flex-wrap
-flexible item을 wrap 할것인지 아닌지를 지정한다.
-nowrap : 기본값으로, flexible item이 wrap 되지 않도록 지정한다.
-wrap : 만일 필요하다면 flexible item을 wrap한다.
-wrap-reverse : 만일 역순으로 flexible item을 wrap할 필요가 있을때 지정한다.
-initial : 디폴트 값으로 이 속성을 설정한다.
-inherit : 부모 요소로부터 값을 상속 받는다.
(3) jutify-content
-속성을 가로로 움직이게 함
-flex-start : 요소들을 컨테이너의 왼쪽으로 정렬
-flex-end : 요소들을 컨테이너의 오른쪽으로 정렬
-center : 요소들을 컨테이너의 가운데로 정렬
-space-between : 요소들 사이에 동일한 간격을 둔다
-space-around : 요소들 주위에 동일한 간격을 둔다
(4) align-items
-세로 선에서 정렬한다
-flex-start : 요소들을 컨테이너의 꼭대기로 정렬
-flex-end : 요소들을 컨테이너의 바닥으로 정렬
-center : 요소들을 컨테이너의 세로선 상의 가운데로 정렬
-baseline : 요소들을 컨테이너의 시작 위치에 정렬한다
-stretch : 요소들을 컨테이너에 맞도록 늘린다
(5) order
-row나 column으로 충분치 않을 때 각 요소에 적용할 수 있다
-기본값을 0이며 양수나 음수로 바꿀 수 있다
(6) align-self
-개별 요소에 적용할 수 있는 또 다른 속성이다
-이 속성은 align-items가 사용하는 값들을 인자로 받으며 그 값들을 지정한 요소에만 적용된다
(7) flex-flow
-flex-direction과 flex-wrap이 자주 같이 사용되기 때문에 flex-flow가 이를 대신할 수 있다
-예를 들어, 요소들을 가로선 상의 여러줄에 걸쳐 정렬하기 위해
flex-flow: row wrap
(8) align-content
-align-content를 사용하여 여러 줄 사이의 간격을 지정할 수 있다
-flex-start : 여러 줄들을 컨테이너의 꼭대기에 정렬한다
-flex-end : 여러 줄들을 컨테이너의 바닥에 정렬한다
-center : 여러 줄들을 세로선 상의 가운데에 정렬한다
-space-between : 여러 줄들 사이에 동인한 간격을 둔다
-space-around : 여러 줄들 주위에 동일한 간격을 둔다
-stretch : 여러 줄들을 컨테이너에 맞도록 늘린다
-align-content는 여러 줄들 사이의 간격을 지정하며, align-items는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는지를 지정
-한 줄만 있는 경우, align-content는 효과를 보이지 않는다
2). position 속성
-문서상에 요소가 배치되는 방식을 결정
(1) position: static
-기본값, 원래 있어야하는 위치에 배치
-따라서 top,left,right,bottom 속성값은 무시됨
(2) position: relative
-요소를 원래 위치에서 벗어나게 배치할 수 있게된다
-요소를 원래위치를 기준으로 상대적으로 배치해준다고 생각하면 이해가 쉽다
-요소의 위치지정은 top,left,right,bottom 속성을 이용
(3) position: absolute
-가장 난해하고 주의해서 사용해야 하는 속성값
-포지션 속성이 absolute일때 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾음
-DOM트리를 따라 올라가다 포지션 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정된다
-만약 해당 요소 상위에 포지션 속성이 static이 아닌 요소가 없다면 DOM트리에 최상위에 있는 body요소가 배치 기준이 된다
-대부분 부모요소를 기준으로 top,left,right,bottom을 적용하기때문에 부모요소의 display속성을 relative로 지정해주는 것이 관례
-여기서 중요한 점은 absolute인 요소는 HTML문서 상에서 독립되어 앞뒤에 나온 요소와 더이상 상호작용을 하지 않게 된다는 것!
(4) position: fixed
-화면을 움직여도 브라우저 화면의 특정부분이 고정되어 움직이지 않는 UI를 구현할 때 쓰임
-fixed속성값의 배치 기준이 뷰포트, 즉 브라우저 전체화면이기 때문에 가능
-top,left,right,bottom속성은 각각 브라우저 상단,좌측,우측,하단으로부터 해당 요소가 얼마나 떨어져있는지를 결정
(5) position: sticky
-브라우저 화면을 스크롤링할 때 효과를 나타냄
-스크롤바를 움직이면 화면에 붙어서 움직이지 않는 것을 알 수 있음
3. translate 속성
-translate함수는 기본적으로 X 축과 Y 축을 따라 지정된 거리만큼 요소를 이동시킬 때 사용
(1)translate (x, y)
-요소를 왼쪽에서부터 x거리, 위에서부터 x거리만큼 상대적으로 위치를 정하거나, 이동 및 재배치를 지정합니다. Y방향의 거리는 생략할 수 있지만, 이 경우의 Y방향의 거리는 "0"이 됩니다
(2)transform:translateX()
-translateX함수는 좌우(수평 방향)의 이동 거리 값을 지정합니다
(3)transform:translateY()
-translateY함수는 상하(수직 방향)의 이동 거리 값을 지정합니다
(4)transform:translateZ()
-translateZ함수는 Z 방향의 거리로 이동을 지정합니다. 이 함수는 백분율 값으로 지정할 수 없습니다. 백분율로 값을 지정해도 "0"이 됩니다
3.해결방법
- 개념을 다시 정리 하니 확실히 처음에 배웠을 때 보다 이해가 잘 되는 것 같다. 뿐만 아니라 사용해 봤을 때 이해가 좀 된다. 처음 배울 땐 너무 따라가기 급급했고 어려웠는데 지금 그래도 조금 배웠다고 이해되는 부분이 늘어난 것 같다.
4.학습소감
- 이제 가장 기본적인 부분을 만들었을 뿐인데 진이 다 빠져버렸다. 혼자서 저걸 다 만든다고 생각하면 눈 앞이 캄캄할 정도다. 아직 더 어려운 부분인 이벤트?애니메이션?부분들이 남아있다. 주말에 찾아보고 다시 공부하면서 해본다면 기본적인 HTML과 CSS처럼 더욱 잘 이해되었으면 하는 바램과 이해되는 만큼 잘 해결할 수 있기를 바랄 뿐이다. 코드만 보면 눈 앞이 캄캄하지만 중요한 건 재미가 있다. Do it책을 살펴보면서 좀 더 익숙해질 수 있게 공부해야겠다.
- 아직 난 겨우 몇 개월 기본을 공부한 비기너일뿐이다. 좌절하지말고,실망하지말고,겁내지말고,한 걸음, 한 걸음. 할 수 있는 만큼 열심히 해보자.
