JUSTCODE - preWeek1(HTML, CSS)

김정현·2022년 9월 3일

JUSTCODE

목록 보기

1/20

HTML/CSS

border

border도 padding, margin처럼 width를 가진다
(padding > border > margin 순서)

box-sizing

padding, margin이 적용돼 있을 때는 최종적인 width값을 가늠하기 어렵기 때문에
box-sizing: border-box;를 사용하여 width내에서 padding, margin이 적용되게 할 수 있다

div의 크기 결정

div태그의 width는 화면의 크기,
height는 div 컨텐츠의 height를 따른다

단 border는 영역이 아닌 두께를 의미한다

이미지를 넣는 두 가지 방법

이미지는 두 가지 방법으로 넣을 수 있다
첫 번째로, HTML에서 img태그를 사용하는 방법,
두 번째로, CSS에서 background-image속성을 사용하는 방법
background-image를 사용할 때는 태그가 가지는 영역 만큼 이미지가 보여진다

img태그와 background-image의 차이

img태그:
alt로 대체 이미지를 출력해야 할 때 사용
컨탠츠에서 중요한 이미지 일 때 사용
검색 성능을 높히고 싶을 때 사용
backgound-image:
컨텐츠에서 중요하지 않은 이미지 일 때 사용

margin: outo

태그가 가진 영역의 가로 중앙 정렬을 할 때 사용한다

table

tr: 행 추가
td: 열 추가 (th로 대체하여 콘텐츠를 강조할 수 있다)
rowspan: 행 병합 (병합 될, 빈 td는 작성하지 않는다)
colspan: 열 병합 (병합 될, 빈 td는 작성하지 않는다)

input과 textarea의 width

1번 input, textarea에 직접 class를 주고 직접 width값을 적용할 수 있다
2번 input,textarea의 부모에 width를 주고 input, textarea의 width를 100%로 지정한다

특정 속성을 가진 태그만 select하는 방법

input[type="text"] {
}

position: relative

relative 현재 위치를 기준으로하여
top, bottom, left, right로 위치를 조절할 수 있다
반대로 top, bottom, left, right속성도
position속성이 있을 때만 적용된다
적용된 태그는 absolute의 기준이 된다
따라서 absolute를 적용할 부모 태그에 사용된다

position: absolute

상위 태그 중 relative, fixed, absolute 중 하나가 적용된 태그 위치를 기준으로
top, bottom, left, right로 위치를 조절할 수 있다
일반적으로 기준이 될 부모에게 relative를 부여한다

position: fixed

top, bottom, left, right로 지정한 위치에
해당 요소를 고정시킬 수 있따

가운데 정렬 방법

position: absolute
left: 50% - 요소의 width/2를 사용하여
부모를 기준으로 가운데 정렬을 할 수 있다

flex

전체 배치

display: flex;

flex-direction: row, row-reverse, column, column-reverse
flex-wrap: nowrap, wrap, wrap-reverse
flex-flow: flex-direction와 flex-wrap를 합친 것

justify-content: flex-start, flex-end, center, space-between, space-around
align-items: flex-start, flex-end, center, baseline, stretch

align-content: flex-start, flex-end, center, space-between, space-around, stretch

요소 별 배치

order: 음수, 0, 양수
align-self: align-items의 속성과 동일

float

필요할 때 보기

Media Query(반응형 웹)