Knowledge Wiki/HTML&CSS (34) 썸네일형 리스트형 [ 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 [ HTML/CSS ] CSS 쓸만한 기본 공식 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; } // 추.. [ HTML/CSS ] HTML 기본 코딩 상식 1. 글만 적지 말고 태그 등으로 감싸라 태그 이외에도 각자의 내용에 맞는 태그를 사용해라. HTML 문서의 목적은 내용의 "구조"를 표현하기 위함이니까. 요런걸 잘 지키는 걸 "웹 표준을 잘 지킨다"라고 말함. 2. HTML 꾸밀 때는 태그의 style 속성을 사용함 style 내용이 길어지면 css 파일로 따로 빼는 게 좋음. css 파일에 클래스 생성하고 css 파일 불러올 땐 아래처럼 링크 걸면 됨. // css 파일 .content { text-align: center; } 3. 안에서도 글씨 그냥 쓰지 말고 태그로 감싸는 게 좋음 4. body 태그 기본 마진이 있음 없애려면 [ HTML/CSS ] HTML 개발 시 쓸만한 Extension 1. VSCode 사용할 때 LiveServer Extension 설치해두면 HTML 미리보기가 되서 개발하기 편함 이전 1 2 3 4 5 다음