목록Knowledge Wiki/HTML&CSS (34)
KorSA
1. a 태그에서 밑줄 제거하고 싶으면 text-decoration: none; 방문 후 보라색 되는것도 변경 가능
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%); // ..
1. CSS Selector > 문법 : ~안에 있는 직계 자식 .navbar>li { display: inline-block; } 공백 문법 : ~안에 있는 모든 자식 .navbar li { display: inline-block; }
1. 네비게이션 바를 만들 때 쓰는 게 좋음 기능은 와 똑같지만 가독성이 좋아짐 2. 태그도 와 마찬가지임 기능은 와 똑같지만 가독성이 좋아짐
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등이 제대로 ..
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..
1. 일부 스타일은 부모 -> 자식 태그로 자동 inherit 됨
1. display: block; 속성은 "가로행을 전부 차지하게 해주셈"을 뜻함
1. css 파일에서 사용할 수 있는 선택자(Selector)는 3개 1) class 2) id 3) tag 2. 스타일이 중복될 경우 적용 우선 순위 : 태그에 직접 입력 > id > class > tag
1. 이미지 가운데 정렬 공식 { display: block; margin-left: auto; margin-right: auto; } 2. z-index 공중에 떠있는 애들 중 누가 앞에 나올지 결정 z-index가 높을수록 앞에 옴 3. width는 padding의 영향을 안받음. width는 content 영역만 다루기 때문. padding은 content 외곽 영역임. padding, border 포함한 width를 지정하고 싶으면 box-sizing: border-box; 속성을 추가해주어야 함. 기본값은 box-sizing: content-box; 4. 좀 편하게 CSS 작업하려면 처음부터 div { box-sizing: border-box; } body { margin: 0px; } // 추..