본문 바로가기

Knowledge Wiki

 (169)
[ HTML/CSS ] margin collapse 현상 1. margin collapse 현상 -> 버그임 박스 2개가 위쪽 테두리가 겹치면 margin이 합쳐져서 하나처럼 동작함. 즉, 한 박스에 적용한 margin이 두 개의 박스 모두에 적용됨. padding: 1px; 를 주면 서로 떨어지게 되니까 margin collapse 가 발생하지 않음.
[ HTML/CSS ] <a> 태그 밑줄 제거, text-decoration 1. a 태그에서 밑줄 제거하고 싶으면 text-decoration: none; 방문 후 보라색 되는것도 변경 가능
[ HTML/CSS ] 그림과 배경 레이아웃 맞추기 1. 그림을 배경에 잘 맞추고 싶으면 .main-background { background-size: 100%; background-repeat: no-repeat; } 아니면 cover도 많이 씀 cover -> 배경짤려도 상관없으니 빈공간 없이 배경으로 꽉채워라 .main-background { background-size: cover; } contain: 여백 남아도 되니까 배경 안짤리게. .main-background { background-size: contain; } 그외 .main-background { background-position: center; background-attachment: fixed; // 스크콜시 배경 위치 조정가능 filter: brightness(70%); // ..
[ HTML/CSS ] CSS Selector 1. CSS Selector > 문법 : ~안에 있는 직계 자식 .navbar>li { display: inline-block; } 공백 문법 : ~안에 있는 모든 자식 .navbar li { display: inline-block; }
[ HTML/CSS ] div, nav, footer 1. 네비게이션 바를 만들 때 쓰는 게 좋음 기능은 와 똑같지만 가독성이 좋아짐 2. 태그도 와 마찬가지임 기능은 와 똑같지만 가독성이 좋아짐
[ HTML/CSS ] display 1. float 안쓰고 가로배치 -> inline-block 쓰면 됨 자기 크기만큼 자리차지함 .menu { display: inline-block; } But, 이거쓰면 HTML의 공백을 다 인식해버려서 float이 더 편함.. style="font-size: 0px" 스타일을 추가하면 공백이 공간을 차지하지 않음. And, inline-block 쓴 HTML 태그에 글씨쓰면 레이아웃 이상해짐. 이땐 "vertical-align: top;" 스타일을 추가해주면 해결되긴 함. 해결되는 이유는 baseline이 조정되기 때문. 2. display display: block -> 한 행을 전부 차지 display: inline-block -> 내 크기만큼 차지 3. float로 인해 margin등이 제대로 ..
[ HTML/CSS ] HTML 레이아웃 1. 레이아웃은 기본적으로 사용 2. 레이아웃 잡을 땐 전체를 포함하는 하나 만드는 게 좋음 요걸 wrapper box라고 부르기도 함 3. width: 100%; 는 "부모 태그 width의 100%" 를 의미 { width: 100%; } 4. 레이아웃 정렬할 때 float 속성 좋음 float: left; 는 "요소를 붕 띄워서 왼쪽 정렬해주셈"을 의미 float 속성 쓰면 여러 개의 를 좌우로 정렬할 수 있음 { float: left; } 5. float을 이용한 좌우 정렬이 끝나면, 그 다음 요소에서 float 기능을 정지해야 함 clear: both; 를 사용하면 됨 앞서 float 적용된 요소들이 공중에 붕 떠있기 때문에 clear 해주어야 함 { clear: both; } 6. displa..
[ HTML/CSS ] CSS 상속 (inherit) 1. 일부 스타일은 부모 -> 자식 태그로 자동 inherit 됨

티스토리툴바