본문 바로가기

분류 전체보기91

i'll make a much better programming i'll make a much better programming 많이 더 좋은 i'm gonna make a much better frist impression tomorrow 2021. 4. 7.
transform: translate || scale || rotate inline 요소들을 좌|가운데|우 배치하고 싶을때 text-align : 사용하자 block 요소 안에 있는 inline(text,이미지 포함) 요소 만 적용가능 transform : 나의 원래 위치를 기억 하고 있다. 즉, 다른 주변요소들에게 영향을 주지 않는다. transform 의 기준은 항상 자기 자신이다. *transform : translateY(-50%) 내가 가진(현재요소) height값을 기준으로 height의 반 정도만 올리겠다는 의미 *transform : translateX(-50%) 내가 가진(현재요소) width 값을 기준으로 width의 반 정도 왼쪽으로 땡기겠다는 의미 현재 내가 가진 (width,height)를 기준으로 배치를 할 수 있다 - 올리겠다. +내리겠다. pos.. 2021. 4. 7.
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.

티스토리툴바