[WEEK1] 자기소개 페이지 호스팅
🎲 목표: 1주차 과제를 하면서 부딪힌 난관들과... 그 과정에서 배운 것들 정리하기~!
📚 layout 잡기
우선! 데스크탑 화면은 기본적으로 너비가 길기 때문에 가로 배치를 잘 해야 할 것 같았다. 그래서 저번에 정리한 display: flex
속성으로 레이아웃을 구성하려고 했는데, 작업 도중에 인터넷 익스플로러로 페이지를 확인해 본 결과...! 잉?justify-content:
의 값 중 space-evenly
가 적용이 안 됐다. 지원을 안 하는 건지 검색해 봐도 안 나옴~~;;
▶ [21.03.18 추가] item의 width를 (container width/item 개수)로 설정해 주고 justify-content: center로 설정하면 IE에서도 space-evenly와 비슷한 효과를 낼 수 있음!
그래서 고민+구글링 끝에 알아낸 다른 방법. display
의 또 다른 값인 table
과 table-cell
이용하기~~!
📌 table & table-cell로 레이아웃 잡기
step 1. 컨테이너(부모 요소)와 아이템들(자식 요소)을 설정한다 (flex 사용시와 동일)
step 2. 컨테이너에는 table을, 아이템에는 table-cell을 display 값으로 설정
step 3-1. 각 아이템 너비를 동일하게 만들 경우
▶ 컨테이너 속성으로 table-layout: fixed 추가!step 3-2. 아이템 너비를 다르게 하려는 경우
▶ 컨테이너width
지정하고 각 아이템width
지정! 나는 퍼센티지를 이용해서 분리함
table을 이용하면 좋은 점! vertical-align
으로 세로 배치도 유연하게 할 수 있다. 그치만 table 태그가 원래 배치를 위한 태그도 아니고, 주로 옛날에(flex가 나오기 전...) 많이 사용되던 방식이라고 한다. flex&grid와 친숙해지자!
(이후 flex 속성으로 코드 수정 완료)
📚 background image 설정
배경이 밋밋해서 이미지를 집어넣었다. 그래서 이것저것 써보게 된 백그라운드 이미지와 관련된 속성들!
- background-image: url("이미지주소");
- background-size:
- contain: 원래 사이즈 + 바둑판 형태로 반복
- cover: 화면 크기에 맞춰 늘림 (이미지 비율은 유지)
- x%: 전체 화면 폭의 x%로 이미지 width 설정 + 바둑판(여백 생길 경우)
*height에 맞추고 싶으면 값을 두 개 줘서 auto x%로 하면 되는 듯- background-repeat (반복 여부):
- repeat(default) / no-repeat / repeat-x(가로만) / repeat-y(세로만)
- background-position (배경 위치):
- default: 0(가로) 0(세로)
- 가로에는 left / center / right, 세로에는 top / center / bottom, 공통적으로 px, % 등 설정 가능
- background-attachment (스크롤 여부):
- scroll(default) / fixed / local
📚 selector 상속에 주의하자!
페이지를 만들면서 별거 손 안 댔는데도 먼가 배치가 이상하고... 혼자 올라가있고... 그런 적이 많았다. 뭐지? 하고 찾아보면 대부분 위에서 설정했던 스타일을 상속 받아서 그런 거였다(배경, padding, margin 등등),, 그 이유는 selector를 너무 포괄적으로 선언해서! 예를 들어서 그냥 img {margin: 0 0 5% 0;}
라고 해버리면 그 이후에 새로 넣는 이미지들도 다 조금씩 위에 배치된다. 당연한 건데... 실제로 하다 보니까 헷갈림ㅡ.ㅠ
그래서 selector를 잘 설정하는 게 중요! 공통 적용할 것들을 묶어서 class, id, 또는 부모 엘리먼트랑 같이 표시해 주기.
(+) 상속 때문인 줄 모르고 계속 background가 까맣게 돼서... 어쩌다 찾아보게 된 배경 투명하게 하는 법
: opacity: 0
으로 하면 배경뿐만 아니라 안에 컨텐츠까지 다 투명해진다. 그래서 background-color: rgba( 255, 255, 255, 0)
으로 해 줘야 함!
📚 반응형 웹 만들기
이번 과제 하면서 젤 애먹었던 것 중 하나~~ pc랑 모바일에서 다르게 보여지는 페이지를 구현하고 싶었다. 생각보다 어려워서 그냥 때려치울까 했지만... 이왕 하는 거 제대로 하고 싶어서(+오기 생겨서) 결국 해냄!일단 반응형 웹 만들 때 젤 중요한 건 미디어 쿼리!
📌 @media query 사용법
- css에
@media
를 선언하고 이어서 미디어유형(all, screen, print 등... 생략 가능)과 조건(e.g. (max width 800px))을 써 준다. 그리고 { } 열어서 일반 css 스타일 설정하는대로 하면 끝~~@media screen and (min-height:1100px) { html { font-size: 2.2rem; background-size: 300%; ... }
- 조건 설정하는 법: 예를 들어 "가로 800px 이하일 경우"="최대 폭 800px"이니까
(max width 800px)
, "세로 500px 이상일 때"="최소 높이 500px"이니까(min height 500px)
로 표현한다.나는 모바일로 볼 때 다른 화면을 설정하고 싶었기 땜에... 젤 작은 아이폰SE가 640x1136인 걸 확인하고 세로 1100 이상일 때를 기준점으로 잡았다. 그래서
(min height 1100px)
. 근데 이렇게 호환시키는 게 제대로된 방법인진 모름>.<;;▶ [21.04.02 추가] @media (orientation: landscape)로 가로가 세로보다 길 때, @media (orientation: portrait)로 가로가 세로보다 짧을 때를 설정할 수 있다!
- 주의할 점! 미디어 쿼리를 css 젤 하단에 둬야 함. 위에 있으니까 제대로 작동을.. 안 하던데... (이것도 왠진 모름ㅎㅎ -> css 룰이라고 한다~~)
여기까진 간단해 보이는데 힘들었던 이유...
- 컨텐츠 크기 잡기가 🐶어려웠음! 기기마다 화면 크기가 달라서 px은 안 씀. %랑 vw, vh를 주로 썼는데 비율 잡기가 은근 힘들었다 😖
참고로! %는 부모 엘리먼트를 기준으로 비율을 차지하고, vw, vp는 전체 뷰포인트를 기준으로 절대적 비율이 됨! 1vw = 전체 weight의 1%
- 폰트 사이즈도... 나는 rem 단위를 이용했다. 근데 수정할 때마다 크기가 지멋대로 늘어났다 줄어들어서 헷갈림. (아직 이유도 모름ㅠ) -> 더 공부하기..
- pc랑 모바일 화면에서 개행을 다르게 하기 위해서 고민함. pc에서는 타이틀인 'Welcom to Doeun World'가 한 줄로 나왔는데 모바일은 좁아서 줄바꿈돼버림 😕 'Welcome to Doeun \n World'로... 근데 'Welcome to \n Doeun World'로 바꾸고 싶었다. 어떻게 하지? 하다가 개행 넣고 싶은 부분에
<br id="enter" />
를 삽입하고#enter
에 기본 스타일로는display: none
, 미디어 쿼리 내에서display: inline
으로 설정하니까 됨!
- 컴퓨터랑 달리 페이지를 수정하고 확인할 때마다 깃허브에 commit&push를 반복해야 함. 근데 이건 cmd로 조작하는 방법을 배우고 나니까 나름 편했다!
📚 :hover 기능 구현하기
커서 올리면 이미지가 바뀌는 기능을 넣고 싶었다. :hover
만 있으면 쉬울 줄 알았지.. 마우스 올리면 폰트 색 뚝딱 바뀌는 그런 것처럼... 근데 사진 바꾸는 건 생각보다 복잡했음!! 왜냐면 폰트 컬러는 css 속성이지만 img 자체는 html에 지정된 내용이기 때문에... 그럼 자바스크립트 1도 모르는 나는 못하는 건가??ㅠ 하고 좌절했지만.....
그치만 굴하지 않고 또 (야매로) 해냄😏
📌 html+css만으로 :hover일 때 바뀌는 이미지 만들기
내가 생각해낸 방법: 이미지를 이미지 자체로 html에 집어넣는 게 아니라 background-image로 css에서 설정하기! 그러면 css 속성이니까 :hover { } 안에 backround-image를 다시 설정해서 다른 이미지로 바꿀 수 있다.
근데 주의할 점
- html 문서내 해당 자리에 빈 박스를 만들어줘야 함 (배경이 보이게 하기 위해서)
- 박스 사이즈, background-size, background-position을 잘.. 맞춰서 설정해야 함... 아니면 짤리거나
이상해짐 😓- 페이지마다 기본 이미지(커서 안 올렸을 때)가 다르면.. 그것 때문에 css파일을 여러개 만들 수 없으므로! 그 부분만 각 html 파일
<head>
부분에 임베디드 css 형태로 집어넣음
그래서 어떻게 어떻게 구현하긴 했는데.. 모바일로 넘어가는 것까지 사이즈 맞추기가 너무 복잡 🤒 딴 방법 없을까? 하고 집념의 구글링으로 찾아낸 다른 방법
onmouseover, onmouseout 사용하기!
html img 태그 내부에 onmouseover, onmouseout 속성을 추가해서 구현할 수 있음! 그런 속성이 있는지도 몰랐는데 짱신기
<img src="원래 이미지" onmouseover="this.scr='바뀔 이미지'" onmouseout="this.scr='원래 이미지'">
너무 간단한데,, 나 혼자 뭐한거지?ㅎㅎ 싶었지만 그래두... 그러면서 성장하는 거지 머~~~ㅎㅎ;;
▶ [21.03.18 추가] 자바스크립트를 쪼끔 배우고 나니.. 이게 바로 자바스크립트 이벤트였다는 걸 알게 되었다^^!
📚 CSS Animation
CSS로도 애니메이션 효과를 구현할 수 있다!
📌 @keyframe
- 애니메이션 효과 생성하기
@keyframe [애니메이션 이름] { from { } /*표현할 속성값을 넣어준다*/ to { } }
or
@keyframe [애니메이션 이름] { 0% { } 50% { } 100% { } }
- 생성한 효과 사용하기
selector { animation: [애니메이션 이름] [재생시간] [가속도] [지연시간] [반복여부] [진행방향]; } 예) animation: pop 1s linear 0s infinite alternate;
📌 transform 속성
회전, 크기조절, 기울이기, 이동 효과를 부여할 수 있는 속성!
- scale(): 가로/세로 배율을 입력받아 크기 조절
- transform(): 가로/세로 px, % 등을 입력받아 위치 이동
- rotate(): turn을 입력받아 회전
📌 transition 속성
hover효과와 함께 애니메이션 효과를 구현할 수 있음!
selector { transition: [바꿀 속성] [재생시간] [가속도] [지연시간] } 예) transition: all .5s
📚 기타 배우게 된 것들
- github commit & push
- 웹폰트 사용법
- white-space
- pre: 공백을 코드에 있는 그대로 표시. 자동 줄바꿈 X!
- pre-wrap: 공백을 코드에 있는 그대로 표시. 자동 줄바꿈 O!
- float속성을 쓰면 display: table-cell 이라도 vertical-align이 적용 안 됨
- position: absolute인 항목 가운데로 정렬하는 방법
- {position:absolute; left:50%; transform:translateX(-50%);}
그렇게 우여곡절 끝에! 호스팅한 페이지 (데스크탑/모바일ver.)
🙇♀️너무너무×100 도움된 자료들
width - CSS: Cascading Style Sheets | MDN
background - CSS: Cascading Style Sheets | MDN
transform - CSS: Cascading Style Sheets | MDN
CSS 애니메이션 사용하기 | MDN
웹퍼블리셔가 알고있어야 할 display: table 속성!
마우스 오버시 다른 이미지 보여주기 2종류
Author And Source
이 문제에 관하여([WEEK1] 자기소개 페이지 호스팅), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dosilv/1주차-과제-자기소개-페이지-호스팅저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)