UI/UX 웹퍼블리셔 과정 2일차, float과 position

 

아무래도 블로그에 올리는건 그리 오래하지 못할 것 같다. 2,3일째인데 벌써 밀려버리다니...

 

어제는 배경, 색상표기, float, position등에 대해서 배웠다. 원래 알던 내용이라 조금 지루하긴 했지만, 새로 다시 복습한다는 느낌으로 집중했다. 이렇게 수업 배울수록 내가 하고 싶은 것을 잘 찾은 느낌이다. 디자인도 재밌지만, 너무 주관적인 분야다 보니 작업이 내 뜻대로 안나올때, 또 잘 나와도 남들이 보기에는 별로인 순간들이 있을 때면 의욕도 사라지고, 허무함도 느낄 때도 있어서 어쩔때는 다 때려치고 싶다는 생각을 가질 때가 있다. 그래서 답이 있는 코딩 작업이 재미있게 느껴진다. 그래서 이렇게 복습하면서 다시 들어도 재밌고, 과제를 받을때면 뚝딱뚝딱 만들어지는 결과물이 나올때면 더 큰 흥미를 느끼게 된다.

그치만 취업이 되어야 직업으로 삼으면서 재미를 느낄 수 있겠지!?!? 진짜 내년에는 웹퍼블리셔를 직업으로 삼고, 퇴근하고서는 배드민턴 칠 수만 있다면 정말 행복할듯하다. 코로나 시작되고나서 모든 행복요소를 다 잃은 느낌ㅠㅠㅠ

 

아무튼!!

 

레이아웃 배치할 때 필수로 알아야 배치하기 편한(?) 속성들을 배웠다. 

---

float 사용법

float은 배치할 수 있도록 도와준다. 사용법은 간단했다.

 <div class="box"> <!--부모-->
 	<div class="small_box"></div> <!--자식-->
 	<div class="small_box"></div>    
</div>

 

small_box 2개의 박스를 가로 배치하고 싶다면?

우선 float을 사용하기 위해서 태그 구조가 위와 같이 부모인 box와 자식인 small box의 관계가 형성되어야 하며, 부모에게는 플롯해제속성을, 가로배치하고 싶은 자식에게 플롯을 부여하면 된다. 해제속성이 왜 저렇게 적어야 하는진 모르겠다. 이유는 몰라도... float과 셋트로 움직이는 것 같다.

.box {
	
	content:'';
    clear:both;
    display:both;
    /* 위의 3가지는 부모의 float해제를 위해 필수 입력! */
}


.small_box {
	float:left;
    /* right가능하지만, 같은 자식 선상이라면 같은 방향으로 통이! */
    width:100px;
    height: 100px;
    background: lightblue;
    margin-left: 10px;
}

float:left 결과

부모에게 float해제속성을 입력하지 않는다면?

부모가 자식의 영역을 잡지 못하게 되는데 보기에는 멀쩡해보여도, 다음 내용이 추가된다면, 다음 내용과 자식들이 겹쳐지는 둥 구조가 엉망으로 변할 것이다. 그래서 필수로 해제속성을 입력해야 된다고 한다!

 

---

 

position 사용법

포지션 역시 배치할때 용이하게 쓸 수 있는데, float은 가로로 나란히 배치하는 것만 가능했다면, 포지션을 사용하면 사방팔방 자유롭게 배치가 가능하다. 하지만 이것 또한 부모, 자식간의 필수로 속성값을 적용해져야만 문제없이 구조를 만들 수 있는 듯하다. 나으생각...

 

position :static, relative,absolute,fixed
static :기본값. 따로 입력하지 않아도 스테틱 상태
relative : 렐러티브도 기본값에 가깝다고 보면 되는듯하다.
absolute : 현재 위치에서 붕뜬 상태로, 자유롭게 사방팔방 배치가 가능하다. 가장 중요함!!
fixed : 브라우저를 기준으로 원하는 위치값에 고정으로 위치할 수 있는 값(스크롤해도 그 위치에 있음)

 

가장 중요한 것이 absolute, fixed인데 이 두가지를 사용하기 위해서는 필수로 기준점이 있어야 한다. absolute는 기준점을 부모를 기준으로 하고, 픽스드는 브라우저를 기준으로 한다.

 

기준점을 만들기 위해서는?

absolute의 기준점은 부모이고, 기준점을 만드는 방법은 부모가 absolute, relative 값을 가지고 있으면 된다.

 

만일 relative, absolute값을 가지고 있지 않다면?

부모가 기준점이 안된다면, 그 위 기준점을 찾게 되는데 곧 브라우저를 의미하기 때문에 0,0 을 기준으로 움직이게 된다.

이렇게 되면 레이아웃이 개판이 된다. 그렇기 때문에 필수로 렐러티브나 엡솔루트는 부여해줘야 한다.

 

++ absolute,fixed 주의사항

absolute,fixed를 쓸때에는 위치값인 left or right 와 top or bottom 의 값을 필수로 입력해야 한다. 0의 지점에 있다 하더라도!!

 

 

부모가 absolute, relative 값을 가지고 있지 않을 경우

    <div class="box">
        <div class="small_box"></div>
    </div>

.box {
    width: 1000px;
    height: 500px;
    border: 1px solid black;
    margin: 0 auto;
}


.small_box {
	position: absolute;
    width:100px;
    height: 100px;
    background: lightblue;
    left: 0;
    top: 0;
}

스몰박스의 기준점은 브라우저가 되어 왼쪽 상단하는 문제가 발생한다. 단순히 이 구조라면 크게 문젠 없겠지만, 그 다음 태그들에서부터 개차반이 되어버린다.

부모가 기준점이 되지 못할때 예시

 

부모가 absolute, relative 값을 정상적으로 가지고 있을 경우

    <div class="box">
        <div class="small_box"></div>
    </div>

.box {
    position: relative;
    width: 1000px;
    height: 500px;
    border: 1px solid black;
    margin: 0 auto;
}


.small_box {
	position: absolute;
    width:100px;
    height: 100px;
    background: lightblue;
    margin-left: 10px;
    left: 0;
    top: 0;
}

box를 기준점으로 두어 box안에서의 0,0에 위치하게 된다.

부모가 정상적으로 기준점이 된 예시

 

css배울 때 float과 position이 가장 메인인 것 같다. 아직 공부하는 입장이라 정확한 내용을 파악하지 못했지만 차근차근 더 알아가면 좋을것같다. 이 두개만 마스터해도 어느정도는 구조를 짤수 있을 것 같은데  아직 모르는게 너무 많드아...ㅠㅠㅠ