반응형 웹사이트 제작이론[css리셋, IR기법, float 해제]

css reset 

크로스 브라우징: 어떤 웹 브라우저를 써도 화면이 똑같이 나오고, 입력과 사용에 문제가 생기지 않도록 하는 것.

CSS 리셋: 모든 브라우저에서 똑같은 화면을 볼 수 있도록 기본값을 초기화하는 것, 정해진 형식이나 코드는 없음.

---

inline 요소의 여백 없애기

1. display로 block 요소로 변경

2. vertical align: top; 으로 변경

---

요소 숨김 처리(너무 설명이 긴 이미지, 내용이 너무 긴 경우 사용)

ㅡ> 따로 숨김처리 해놓고, 글자 인식은 되는 화면을 만들어 주는 것.

---

권장 사용방법

부모(wrap)를 기준. 자식 위치 이동.

 

relative로 clip_wrap 영역 지정한뒤, 그 안에서 absolute가 놀게 함.

absoulte는 top, left 등 자리 값을 지정해 주지 않으면, 그냥 그 자리에 있게됨. 음수면 relative 기준 으로 벗어나게 됨.

 

absolute 0,0,0,0 으로 자리 잡아 놓고, 붉은색지정된 clip_wrap가 전부다 보여야 하지만

clip: rect으로 clip-wrap 중 딱 그 지정된 부분만 보이게끔 함.

 

clip은 저 빨간 부분을 가리는 margin 같은 느낌인데... 만약 abs가 rel 밖을 벗어나게 된다면...

clip영역도 rel 영역을 벗어나기 때문에 rel의 margin이 더 커보이는 현상이 나타나기 때문에, 그런 부분을 없애고자, 

rel의 margin 부분을 따로 필수로 지정해 줘야함. 

보통 아래처럼 class로 묶어서 많이 사용한다.

---

프로모션 페이지 제작-1

 

h1~h6 태그는 font-size css를 통해 크기를 지정할 수 있다.(지정 size에서 곱해서 큰 값이 되거나 그러지 않는다.)

a링크는 blind 클래스로 넣어버리기 보단, 따로 그 이미지에 걸맞는 자리에 찾아서 위치하게끔 한다.

 

---

float해제 방법1 - 부모요소 height 부여

먼저 부모 요소에 높이 값을 부여하는 방법에 대해서 살펴보겠습니다.

 

 

그림과 같이 좌우로 플로팅 된 요소를 가지고 있는 부모 요소를 파란 점선으로 표시했습니다.

플로팅 된 자식 요소의 높이 값만큼을 부모 요소에게 높이 값으로 부여해 공간을 늘려 마치 플로팅 된 내용이 해제된 것처럼 보이는 효과를 줍니다.

아래 예제를 통해 확인해보겠습니다.

<div class="box_wrap">
  <div class="box_parent">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
  </div>
</div>

.box_wrap {
  width: 400px;
  margin: 0 auto;
}
.box_parent {
  height: 100px;  /* 자식인 .box들의 높이값이 고정일경우 같은 높이값을 부여함. */
  border: 3px dotted blue;
  padding: 10px;
  
}
.box {
  width: 100px;
  height: 100px;
  color: #fff;
  text-align: center;
}
.box1 {
  float: left;
  background-color: green;
}
.box2 {
  float: right;
  background-color: pink;
}​

위의 주석 내용과 같이 두 자식인 .box의 높이 값이 100px로 고정일 경우에 부모인 .box_parent에게 똑같은 높이 값인 100px을 부여함으로써 float의 영향에서 벗어난 것처럼 할 수 있습니다.

하지만 이는 전체의 흐름을 방해하지 않도록 하는 방법일 뿐 정확하게는 플롯이 해제된 것처럼 보이는 눈속임과 같은 해제 방법이라고 할 수 있습니다. 예를 들어 여기 box2의 높이 값을 200px로 바꾼다면 부모의 높이 값도 고정이기 때문에 이처럼 자식 요소가 넘치는 현상이 일어나게 됩니다.

결론적으로 이 방법은 자식 요소가 고정된 높이 값을 가지며 부모 역시 고정된 높이 값을 가진 경우에만 사용할 수 있을 것입니다.

 

float해제 방법2 - 부모의 요소의 float 속성

자식 요소가 좌우로 플로팅 되었을 때 부모가 float 속성(none을 제외)을 가진다면 그 부모 요소는 자식 요소의 높이 값을 수렴하게 됩니다. 

 

 

 이미지와 같이 부모가 float 속성을 이미 가지고 있을 시에는 자식의 float을 따로 해제해 주지 않아도 됩니다. 하지만 그 부모의 요소 또한 float의 영향을 받기 때문에 그 부모도 float이 해제한 상태가 됩니다.

결론적으로 이 해제 방법은 이미 float이 되어 있는 부모 요소가 자식 요소들에게 float이 부여된다고 했을 때 따로 해제 방법을 사용할 필요가 없다는 것으로 인식을 하기 위한 방법의 소개입니다.

위의 여러 가지 상황처럼 자식 요소의 float을 해제하기 위해서 부모 요소에 의미 없는 float을 부여하는 방법을 사용하는 것은 좋지 않다는 것을 알아두시면 좋겠습니다.

 

float해제 방법3 - overflow(visible 제외)를 이용한 해제

이 방법은 여러 가지 해제 방법 중에 가장 간단한 방법입니다.

 

 

방법은 아주 간단합니다. float이 된 부모 요소에게 visible을 제외한 overflow를 부여하면 됩니다. 예제 코드를 보겠습니다.

<div class="box_wrap">
  <div class="box_parent">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
  </div>
</div>

.box_wrap {
  width: 400px;
  margin: 0 auto;
}
.box_parent {
  overflow: hidden; /* 부모요소에게 overflow (visible 제외) 부여 */
  border: 3px dotted blue;
  padding: 10px; 
}
.box {
  width: 100px;
  height: 100px;
  color: #fff;
  text-align: center;
}
.box1 {
  float: left;
  background-color: green;
}
.box2 {
  float: right;
  height: 100px;
  background-color: pink;
}

위와 같은 방법으로 아주 간단한 코드 한 줄을 추가하여 float의 상황에서 벗어날 수 있습니다.

하지만 이 방법에도 치명적인 단점이 있습니다. 만약 이 부모 요소 안에 부모의 영역을 벗어나는 팝업과 같은 자식 콘텐츠가 있다고 가정한다면 그 팝업의 내용이 보이지 않는 현상이 일어납니다.

overflow의 유일하고 가장 큰 단점 중에 하나입니다.

그래서 이 방법을 사용하여 float을 해제할 때는 이처럼 안에 내용 중에 부모의 내용을 넘쳐나서 노출되는 콘텐츠는 없는지 확인이 될 때 사용하여야 합니다.

 

float해제 방법4 - 인접 형제요소의 clear 속성을 이용한 해제

인접 형제 요소의 clear를 부여하는 방법입니다. clear 속성은 float의 흐름을 끊기 위한 float 해제 전용 속성이라고 보시면 됩니다.

설명에 앞서 clear 속성의 값을 잠깐 설명하자면 clear는 left, right, both, none 등의 속성값을 가지고 있습니다. 이는 각각 float의 left를 해제, right를 해제, 그리고 방향에 상관없이 좌우 모두일 때 해제, 그리고 해제를 하지 않을 때 사용합니다.

 

 

 

이 그림을 보시게 되면 마크업의 순서로 보자면 자식 요소가 box1, box2, 빈 span의 순서로 되어 있습니다. box1,2는 좌우로 플롯팅이 되어 있는 상태이고 그와 인접해있는 형제 요소인 빈 태그에 clear:both 속성이 부여되었습니다.

clear 속성을 사용하기 위해서는 요소가 블록 레벨 요소여야 가능합니다. 이미지의 예시처럼 만약 인접 태그가 span 일 경우에는 display: block 속성을 주어 해당 태그를 블록 레벨로 변경해줘야 합니다.

<div class="box_wrap">
  <div class="box_parent">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="clear"></div>
  </div>
</div>

.box_wrap {
  width: 400px;
  margin: 0 auto;
}
.box_parent {
  border: 3px dotted blue;
  padding: 10px;
  
}
.box {
  width: 100px;
  height: 100px;
  color: #fff;
  text-align: center;
}
.box1 {
  float: left;
  background-color: green;
}
.box2 {
  float: right;
  height: 100px;
  background-color: pink;
}
.clear {
  clear: both;
}

이와 같은 방법은 clear라는 float을 해제시키는 전용 속성을 이용하여 가장 깔끔한 플롯의 해제를 할 수 있습니다.

하지만 이를 위해서는 아무런 의미가 없는 빈 태그를 이용해야 하기 때문에 시맨틱적인 요소에선 불필요한 요소가 생기는 것이기 때문에 조금 번잡하다는 단점이 있습니다.

 

float해제 방법5 - 가상요소를 이용한 clear 속성을 이용한 해제

 

4번째에 설명한 빈 태그를 이용한 clear 해제가 불필요한 태그를 이용한다는 단점을 보완할 수 있는 해제 방법입니다.

 

 

4번 해제 방법과 비교한다면 빈 태그로 오는 부분이 :after를 이용하여 가상 요소로 구성된 것을 알 수 있습니다. 예제 소스를 살펴보겠습니다.

<div class="box_wrap">
  <div class="box_parent">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
  </div>
</div>

.box_wrap {
  width: 400px;
  margin: 0 auto;
}
.box_parent {
  border: 3px dotted blue;
  padding: 10px;
}
.box {
  width: 100px;
  height: 100px;
  color: #fff;
  text-align: center;
}
.box1 {
  float: left;
  background-color: green;
}
.box2 {
  float: right;
  height: 100px;
  background-color: pink;
}
.box_parent:after { /* :after를 이용하여 인접요소로 구성하여 해제 */
  display: block;
  clear: both;
  content: '';
}

css를 코드를 보게 되면 부모 요소에 :after를 이용하여 자식 요소들 중에서 가장 마지막에 위치하도록 해주었습니다. 그 뒤에 블록 요소로 만들어주고 clear 해제를 해줍니다. 마지막으로 가상 요소는 content 요소가 필수이기 때문에 "" 이처럼 빈 내용을 주어 빈 태그를 넣어준 것과 같은 효과를 만들어줍니다.

이 해제 방법은 앞서 배운 overflow hidden을 사용하는 방법과 같이 팝업과 같은 콘텐츠를 벗어나는 경우에도 대응이 되며, 콘텐츠의 높이 값이나 사이즈의 변화에도 유연한 대응이 됩니다.

지금까지의 해제 방법으로 보편적으로 가장 많이 사용하고 있는 해제 방법 중에 하나입니다.

---

가상 요소를 이용한 clear 해제에서 그 부모의 :after 속성에 들어갈 속성 값들로 맞는 것은?

display: block; clear: both; content: '';

 

 

솔직히 float도, float 해제도 잘 모르겠다.