[WEEK1] 자기소개 페이지 호스팅

dosilv·2021년 3월 11일

🎲 목표: 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 { }
    }

@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%);}