본문 바로가기

전체 글93

Position , Z-index(CSS),viewport 모든 태그들의 기본 position 값은 static position:relative 1. 자기 자신이 있는 위치를 기준으로 top botton left right 움직인다. 어떤 요소에게서도 영향을 끼치지 않는다. *right 에서 200을주면 200만큼 오른쪽에서 떨어진다 *left 200을주면 왼쪽에서 200 떨어지는 것. position:absolute 1. 자신이 기준으로 삼고 싶은 기준점을 새로 정 할 수 있음 ( 그 기준점을 잡고 위치를 조정한다 ). 2.자신의 조상요소들 중에서 position : static값이 아닌 요소를 기준으로 잡고 움직인다. 4. 자식이 집을 나감 5. display : block 됨. (크기 조정만 가능) padding margin top left right bo.. 2021. 4. 6.
padding padding은 %로 했을 경우, 상 하 좌 우값 모두 부모의 width를 100% 기준으로 잡는다. 즉 padding-bottom: 60%라는 의미는, 바닥의 패딩값을 부모 width의 60%로 잡겠다는 것. 즉, height 는 width의 60% 를 먹은 값이 된다. 엘리먼트의 높이를 height 대신 padding-bottom으로 잡아주는 방식이기 때문에 아래 그림처럼 height를 따로 갖고 있으면 우리가 원하는 height보다 커지므로, height는 명시적으로 0으로 해주는것. 2021. 4. 6.
float(CSS), 가상요소 부모의 width 값이 현재 얼마인지가 중요하다 (부모한테 무조건 종속되는 것 이 특징) 1. 가로배치 할 대상들에게 float 적용 시키자. 2. float 를 감싸고 있는 부모에게 clearfix 적용. *float 특징 *display 값이block으로변하게된다. *기존 블록의 성질을 버린다(크기 조절 만 가능 margin,padding,width ,top ,left,등등) . 자식은 집을 나가게되고 자식은 집을 나가게되고 부모와 뒤따라오던 형제들은 집나간 요소가 어디갔는지 알길이 없어진다. 차례대로 자리를 땡김. parent 의 height 가 400이 되었다 (기존 600px)block 인데 길막을 못하는 슬픈 block 실제content-box 크기(글자크기)만큼 붕~ 띄워지게 된다 붕 ~ 뜨.. 2021. 4. 5.
display (CSS) display : block; (길막) width,height,padding,margin 전부 사용가능. width 값을 주지 않았을 경우 : 부모의 content-box 100% 따라간다 width 값을 주었을 경우 : 빈공간 만큼 margin 으로 채운다. (옆에 아무도 못오게) margin-left : auto 마진을 왼쪽에 몰빵하겠다. margin-right : auto 마진을 오른쪽에 몰빵하겠다. 두개 다 쓰면 자동으로 중앙정렬 --> margin : 0 auto height 값을 주지 않았을 경우 : 자식 요소의 합 height = 부모의 height display : inline left, right 사용 가능. 인라인 요소 들은 좌에서 우로 줄간격에 맞춰서 흐르는 게 가장 우선이기 때문에 .. 2021. 4. 4.
Box model,Box-sizing (CSS) padding : content 와 border 안쪽 여백 * box-sizing : content-box 기준 기준이 content box 를 기준으로 width ,height 측정이 된다.(실제 사이즈 보다 크게 보인다.) (padding , border 값을 더한 값이 보이기 때문에) (밑 사진 참고) 즉, 사용자가 눈에 보이는 것은 width : 530px height: 520px 사람의 인지구조와 CSS가 동작하는것이 동일하게 보이려면 별도로 계산할 필요 없이 알아서 내가 원하는 크기를 가져다준다 참고 edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB.. 2021. 4. 4.
선택자(Selectors) CSS , 우선순위 class = . div.box.active = div인데 class가 .box이자 .active인 요소 .box, .active = class가 .box 이거나 .active인 요소 id Selector # => id selector는 #aaa { } 문서상에서 id 값은 단 한개만 존재 해야한다. 겹치면(x) 자손 선택 (자식포함) "공백" 자식만 선택하고 싶을 경우 > 형제(sibling)들을 선택하고 싶을 경우(1) ~ + active class 다음에 오는 모든 li 만 바꿔주고싶을 때 (2)active class 다음에 오는 li 만 바꿔주고싶을 때 + 구조적 가상 클래스 (Structural Pseudo-classes) *pseudo['수도'] 가상 태그:first-child { } 태그:l.. 2021. 4. 3.

티스토리툴바