Web 구현 중 기능 정리

Position

01 static

기본값으로 element가 원래 있어야할 위치

 

02 relative

부모 element와의 관계가 포인트

부모와의 관계를 기준으로 static 위치가 정해지면,

left | right | top | bottom을 지정할 때 이동

 

03 absolute

부모 element와의 관계성이 부분 단절

width를 지정하지 않으면 자신의 content 크기만큼 크기 지정됨

offset을 지정하지 않으면 부모 아래 위치

why? 기본값으로 left, top값이 부모 offset만큼 설정되어 있기 때문

 

부모 element들	자식 element의 position:absolute
position: static	부모와 완전 무관, HTML의 시작점(0,0)을 기준으로 시작 top, left 지정하면 이동, 지정하지 않으면 static위치(부모의 위치 속에서 결정된 위치)
position: relative	부모가 기준 부모의 위치를 기준으로 시작 | top, left 지정하면 이동
<div class = "thumbnail_img" style="background-image:url('blahblah')">                  <a class="hover_place" href="main.html"><ul class="hover_place_ul"><li class="hover_place_li">성수동</li><li class="hover_place_li">음식점</li></ul></a></div>	두 요소(묶음,div)가 나란히 오지 않을 때 문제와 해결 정확히 이해가 안되는데, 왼쪽 아래 그림은 좌측 코드와 같은 구조를 가지고 있고, 오른쪽에선 a~text까지의 코드가 빠져있었다.  각 div를 또다른 div가 감싸고 있었는데, 해당 display:inline-block이었기 때문에 두 묶음이 나란히 와야하는데 계속해서 첫번째 묶음이 아래로 탈락함 ① 요소 크기 점검, padding, margin ② 각 요소의 display와 width, height값 1,2 모두 해봤지만 해결 못함 뭐가 문제일까 봤더니 ul을 안넣으면 작동한다. 그럼 ul의 위치가 문제는 아닐까? 혹시나 싶어 ul의 position:absolute으로 주었더니 의도대로 작동한다. 아니 왜 자식 요소가 부모요소(div wrapper)의 위치까지도 영향을 주는지 이해를 못하겠다. 일단은 졸려서 여기까지만 (나중에 공부해야지)

04 fixed

스크롤과 독립되게 고정

absolute과 비슷하게 부모와의 관계가 단절되기 때문에

width, height값을 지정하지 않으면 자신 content의 크기만큼 크기 지정

또한 부모 element의 크기는 자식 element의 크기를 가지지 않게 됨

 

 #fixed를 이용하여 헤더를 가운데 맨 위에 고정하는 법 

header{
                position: fixed;
                height, width: 100px; [지정하지 않으면 content크기만큼]
                text-align:center; 
                left, top : 헤더 뿐만 아니라 버튼이라면 버튼의 크기 고정

}

body{  padding-top:height(header의 높이) }

 

 

생활코딩 position

 

---

 

box-sizing

transition

 

---

float

float을 사용하여 레이아웃을 만들 때 div(class="wrapper")로 감싸줘야한다

float의 방향이 정 반대인 nav와 content사이 간격을 조절하기 위해서이다

 

또한, 하단에 footer가 nav나 content 중 높이가 작은 영역의 밑에 오지 않게 하기위해 clear:both;를 선언한다

 

wrapper{ width:800px; }

nav{ float:left; width:200px; height:400px; }

content{ float:right; width:600px; height:700px; }

footer{ width:100% height:50px; clear:both; } 

 

---

 

# 요소에 적당히 자연스러운 그림자 주는 법 (외 2가지 방법 서치)

    box-shadow: 0px 4px 3px  rgb(178, 178, 178); 

 

# 웹에서 살짝 깨지는 폰트를 부드럽게 만드는 법 (PT에서 텍스트 윤곽선+투명도100%와 유사)

    -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.3)

    -transform: rotate(-0.03deg);

 

# 체크박스와 라벨 수직정렬하기

   .label{ vertical-align: 2px; }

 

# 버튼 테두리 없애기

button{ border:0 none;}

 

# 요소 가운데 정렬 (자세한 내용 링크참조)

 ① margin:auto

 ② text-align:center 

 ③ 박스 position:absolute;   left:50%; | 요소 margin-left:-50%;

 

# 접기, 펼치기 버튼

 ① html+css만으로 구현하기 : input type="checkbox"

 ② onclick 속성을 이용 (스크립트)

      onclick 속성을 이용2

 

# a태그의 속성

a:link : 방문 전 링크 상태

a:visited : 방문 후 링크 상태

a:hover : 마우스 오버 했을 때 링크 상태

a:active : 클릭 했을 때 링크 상태

밑줄 속성을 제거하고 싶다면 a { text-decoration: none; }

 

 

# 상단 메뉴바 

① ul li a span 구조만들기

② ul display:block;

      li width:%로 계산해서 지정, float:left; border-top,bottom으로 선만들기

      a postion:relative; display:block; line-height지정

③ 수직선 긋기(:before 가상요소 이용)

      top:50%;   height:2n;   margin-top:n;  width:1px;   left:1px;

.detail_tab{
    padding:0 0 60px;
    overflow:hidden;
    top:0;
    transition: top .5s ease-in-out;
}

.detail_tab ul{ padding:0;}

.detail_tab ul li{
    float:left;
    width:25%;
    text-align:center;
    border-top:1px solid #e6e6e6;
    border-bottom:1px solid #e6e6e6;
}

.detail_tab ul li a{
    position:relative;
    display:block;
    line-height:60px;
    font-size:16px;
    letter-spacing:-1px;
}

.detail_tab ul li  a:before{
        content:'';
        display:inline-block;
        width:1px;
        height:16px;
        background:#ccc;
        position:absolute;
        left:-1px;
        top:50%;
        margin-top:-8px;
}

 

 

# fixed를 줬는데 헤더가 상단 고정되지 않을 때

기존에는 잘만 작동하다가 어느순간 헤더가 스크롤을 내렸을 때 같이 사라져버린 걸 발견했다.

뭘까 하나하나 돌려서 수정해보니, 웹폰트를 부드럽게 출력하기 위해 body{transform: rotate(-0.03} transform 속성을 퉁쳐서 준 것이 문제였다. 텍스트가 있는 요소들을 대충 쭉 뽑아서 선택하는 걸로 수정하니 해결

 

 

# 컨텐트의 양이 적어도 푸터를 하단에 고정하기

position만으로 푸터를 고정하기엔 여러가지 한계가 존재했다. 특히, 화면에 비해 컨텐트 양이 작아 body끝에 푸터가 오다보니 중간쯤에서 끝나버릴 때

이를 해결하기 위해 구글링해보니 여러가지 방법이 존재했는데, 그중 난 제일 간단해보이는 걸로 적용했다.

 

① html, body{height:100%; padding:0; margin:0;}

② <div class="wrapper">을 body 바로 아래 요소로 적용해 요소들 감싸기

③ .wrapper{ display:flex; flex-direction:column; height:100%}

④ main { flex:1;} //사진에서 top을 준 이유는 헤더 아래 위치하도록 하기 위해서임