본문 바로가기

분류 전체보기

 (596)
[ 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 됨
[ HTML/CSS ] display: block 1. display: block; 속성은 "가로행을 전부 차지하게 해주셈"을 뜻함
[ HTML/CSS ] CSS 선택자 (selector) 1. css 파일에서 사용할 수 있는 선택자(Selector)는 3개 1) class 2) id 3) tag 2. 스타일이 중복될 경우 적용 우선 순위 : 태그에 직접 입력 > id > class > tag

티스토리툴바