국비 지원 IT(웹앱개발) 취업반 강의 34일차 (HTML, CSS, JS)

사실 어제 티스토리에는 코드펜이 제대로 올라왔는데 벨로그는 그렇지 않았다는 것을 알고 있다. (사실 너무 귀찮아서 하나하나 수정하기 버겁다고 생각해서 딱히 수정은 하지 않았다. 뭐 링크 클릭하면 들어갈 수 있으니까..) 보니까 벨로그에는 html로 복붙하는게 아니고 Iframe으로 복붙해와야된다고 한다. 오케이 참고 하고서 벨로그엔 iframe으로 티스토리에는 html로 해야지. 암튼 어제 bnx 사이트 모작하던거..는 전혀 발전이 없다. 딱 어제 내가 구현한 거기까지에서 멈춰있다. 아무튼 찝찝하게 다음으로 넘어간다.

이미지 주변에 애매한 여백 없애는 라이브러리

See the Pen 이미지 주변에 애매한 여백 없애기.(라이브러리) by qBlackBirdp (@qBlackBirdp) on CodePen.

다음은 음수 margin을 활용해서 태그를 컨트롤하는데 많이 쓴다는 것을 강사님이 보여주셨다. 뭘 어떻게 활용하는지는 잘 모르겠지만 일단 메모.

See the Pen Untitled by qBlackBirdp (@qBlackBirdp) on CodePen.

이걸 활용해서 풀어본 문제!

See the Pen 음수 margin 활용 문제 by qBlackBirdp (@qBlackBirdp) on CodePen.

이렇게 하면 굳이 왼쪽 오른쪽 신경쓰면서 컨트롤 할 필요 없다. 상속받은 너비를 계속 가져갈 수 있게끔한다.

See the Pen 음수 margin 활용 문제 by qBlackBirdp (@qBlackBirdp) on CodePen.

다음으로 이미지에 공백을 일정하게 주는데, 수식을 이용해서 변화시키기 편하게끔 하는것.
자식지정자의 변수를 확인하고 같은 숫자를 바꿔주면 적용할 수 있다. 근데 예전방식이라고 한다.

See the Pen 이미지 나누기 음수마진 사용 x by qBlackBirdp (@qBlackBirdp) on CodePen.

.box-1 > img {
  width: calc(100% / 5 - 20px * (5 - 1) / 5);
  margin-top: 20px;
}

.box-1 > img:not(:nth-child(5n)) {
  margin-right: 20px;
}

여기서 한줄에 이미지를 4개씩 넣고 싶다면 4번째 자식으로 지정해준 다음 5들을 4로 바꿔주면 된다.
전체 크기가 바뀌어도 퍼센트로 지정해 놓았기 때문에 잘 작동 된다.
만약 간격의 픽셀을 조절하고 싶다면 수식에서 픽셀들을 일정하게 바꿔주면 된다.

향상된 방법은 좀 전에 배운 음수 margin을 사용해서 수식을 사용할 필요가 없게 만든다. div태그도 분리해준다.

See the Pen 이미지 띄우기(음수 마진 사용) by qBlackBirdp (@qBlackBirdp) on CodePen.

이렇게 하면 width에 정수 부분이 우리가 이미지를 몇개로 나눌지 정하는 부분이고 공백을 더 띄우거나 덜 띄우고 싶다면 margin과 padding을 같은 픽셀로 고쳐주면 된다. 예전의 복잡한 수식도 비교해서 보려고 각주처리해뒀다. 비교해보면 향상되어있는 쪽이 훨씬 더 쓰기 편해보인다.

.box-1 {
  margin: 0 -10px;
}
.box-1 > img {
  width: calc(100% / 3);
  margin-top: 10px;
  padding: 0 10px;
}

코드만 빼서 보면 이런 형태.

다음.

문제 해결을 할 때 이 순서가 좋다고 한다.

div {
  display
  position
  float
  flex
}

display로 해결이 안되면 다음 position으로, 또 안되면 다음 float... 이런 식으로 .

그래서 이제 position이 뭔지 배운다.

div{
    position: static; /* 겹치지 않는 상태 (기본값)*/
    position: absolute; /* 겹칠 수 있는 상태 (유령화)*/
    position: relative; /* 유령의 집 (유령을 가둘 수 있음) */
}

See the Pen position by qBlackBirdp (@qBlackBirdp) on CodePen.

예제 코드에서 relative를 지우면 글자가 박스안에서 탈출하는 것을 볼 수 있다.
top, right, left, bottom 등으로 내가 원하는 위치에 놓을 수 있는데 relative가 부모에게 없다면 화면 자체를 기준으로 움직인다.

position 속성

종류	absolute, fixed	relative	static
너비	최대한 줄어든다.	그대로 유지	그대로 유지
본질	유령화, 유령의집화	유령의집화	사람화
겹침허용	겹치는게 가능	겹치는거 불가능	겹치는거 불가능
이동	top, left, right, bottom으로 이동, 기준이 부모유령	top, left, right, bottom으로 이동, 기준이 현재위치	-

z-index를 사용해서 우선순위로 보이게끔하는 것도 있는데 아마 나중에 문제 풀면서 확인할 수 있지 않을까 싶다.

아쉽게도 문제에서는 z-index가 나오지는 않았다.
하지만 코드로 보여줄 순 있지

See the Pen z-index by qBlackBirdp (@qBlackBirdp) on CodePen.

2번째 자식한테 z-index를 먹여준 모양이다. 디폴트가 0이라서 1만 줘도 앞으로 튀어나온다.

나머지 문제들은 다 시간만 조금 들이면 해결할 수 있는 것들이라 어렵지 않아서 굳이 다시 올리지는 않겠다. 굳이 하나 올려보면 이걸 보고 넘어가자.

See the Pen position 문제. by qBlackBirdp (@qBlackBirdp) on CodePen.

그리고 이 문제, 사이즈를 section > div에서 w,h를 지정하지 않고도 상하좌우(top..등) 다 먹이면 영역이 나타난다,

See the Pen top,bottom,left,right 로도 그릴 수 있다.(position) by qBlackBirdp (@qBlackBirdp) on CodePen.

다음 문제가 relative를 사용하는건데 위에 써둔 표를 잘 살펴보자. absolute에도 유령의집화가 있다.

따라서 상속 받는 애들을 꼭 relative로 제한할 필요는 없다는 것.

See the Pen position:relative 문제 > absolute도 유령을 집합시킬 수 있다. by qBlackBirdp (@qBlackBirdp) on CodePen.

transform: translateX(-50%) translateY(-50%);

이 코드도 처음 보는건데 눈으로 볼 때 완벽하게 중앙에 위치하기 위해서 넣어줬다. 나중에 flex를 배우게 된다면 이렇게 중앙정렬하지 않을 것 같다.

See the Pen 선택자 확인 by qBlackBirdp (@qBlackBirdp) on CodePen.

다음으로 매뉴 구성할 때 선택자를 어떻게 활용해야하나에 대한 것이다. 여기 보더나 백그라운드 컬러를 사용해서 하나하나 확인 가능하니까 참고해서 공부하자.

See the Pen white-space, overflow-x, text-overflow by qBlackBirdp (@qBlackBirdp) on CodePen.

white-space, overflow-x, text-overflow를 잠고하자!!

이후 1차 2차 메뉴 만들기를 숙제로 받았다.