본문 바로가기

분류 전체보기93

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.
How to use CSS CSS 를 작성하는방법. 1. 태그를 사용하는 방법. 2.inline 방식을 사용하는 방법 (비추xxxxxx) 악마같은 방법 요소에다가 직접적으로 스타일을 때려박음. 유지보수 측면에서 어려움. 3.link 태그를 사용해서 내가 작성한 CSS 파일 import. (권장) ★ 2021. 4. 3.
GO GO where there are people that you wanna be like" 2021. 4. 2.
Sectioning tag *nav *article *section *aside 반드시 문법적으로 첫줄에 헤딩 태그 작성하자. 비록 헤딩으로 작성할게 없어도. (우리눈에 보이지 않게 처리 할 수 있으니까). xxx ... 태그는 문서에 하나만 사용가능. Sectioning tag h1뿐만 아니라 바로 header 태그 가능. 2021. 4. 2.
Table 우리의 눈에는 보이지 않게(완성된 그림에서 thead 가 존재 하지 않으니까 그리고 의미론적으로 맞게 마크업을 하는게 맞으니까) , 하지만 스크린리더기로는 읽을 수 있게 해야한다. 2021. 4. 1.

티스토리툴바