Knowledge Wiki/HTML&CSS (34) 썸네일형 리스트형 [ HTML/CSS ] <select>, <textarea> 1. 유용한 태그들 asdfasf asdfasfddd asdfasf asdfasf dfsdf [ HTML/CSS ] <input> type별 CSS 스타일링 1. input의 type별로 CSS 스타일링 가능 input[type=email] { // CSS } [ HTML/CSS ] 좌표로 레이아웃 설정 1. 레이아웃을 좌표 속성으로도 배치 가능 position: relative; 를 먼저 선언해야 함 .main-button { position: relative; top: 100px; left: 100px; } 2. position: relative; 부여하면 1) 좌표이동가능 2) 공중에 뜸 3. position: static -> 좌표이동 X 4. position: fixed -> 현재 화면이 기준 스크롤해도 화면에 고정하고 싶을 때 사용 5. position: absolute -> 내 부모 중 postion: relative 속성을 가진 태그가 기준 가운데 정렬하려면 .main-button { position: absolute; left: 0; right: 0; margin: auto; width:.. [ 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. 태그도 와 마찬가지임 기능은 와 똑같지만 가독성이 좋아짐 이전 1 2 3 4 5 다음