Layout_CSS

miin·2021년 9월 7일

HTML / CSS

목록 보기

11/28

일반적으로 block 과 inline으로 나뉘어짐
요소사이에 간격줄때 margin 사용하기
웬만하면 const로 사용하기
웬만하면 padding & margin 으로 크기조절

Block

옆에 아무것도 올 수 없음, 한줄 전체 사용

div, p, form, header, footer, section

높이와 너비를 설정할 수 있음

div

block 요소
새 줄에서 시작하여 왼쪽과 오른쪽으로 화면에 맞춰짐

span

줄바꿈이 가능함

box

Inline

inline(in the same line)

같은줄에 위치 할 수 있다

image,a,span 등

높이와 너비가 없음 즉, block tag에 inline을 적용할 때 높이와 너비를 설정하면 안됨

display

block or inline으로 변경할 수 있음
display: inline-block;[inline에 높이와 너비를 설정하고 싶을때]
(단점: 모니터 크기가 다르면 달라짐)

margin

box의 border(경계)로부터 바깥에 있는 공간
없애려면 테두리와 테두리 사이의 공백 margin:0 을 준다
원하는크기가 있을때: margin-left, top, right...:50px; 등
(위 오른쪽 아래 왼쪽) 시계방향순,
하나만 적으면 모두가 해당, 두개적으면 (상하 좌우)

개발자 도구에서의 레이아웃

안에서 부터 바깥으로

파란색 content

연두색 padding

찐주황 border

주황색 margin

box-sizing

box size가 content인지 border인지 구분해야 함
box: 100px
border: 10px;
하면 총 박스의 너비가 120px 이 된다
그러므로, 항상 box-sizing: border-box;
으로 border를 총 박스 넓이로 설정

css 초기화
:브라우저에 기본으로 갖고있는 padding, margin 디폴트 값이 있기 때문에 초기화 해준다
*{
box-sizing: border-box;
margin:0;
padding:0;
}

가운데정렬

margin: 0 auto; width:fit-content;
flex 사용(화면페이지 관계없이 가운데정렬)
body{
display: flex;
justify-content: center; //가로 가운데정렬
align-items: center; //세로 가운데정렬
text-align: center;
}
grid 사용
body{
display: grid;
place-items: center;
text-align: center;
}
position 사용
body{
position: relative;//가운데 이동하고 싶은 자식요소를 사용할 수 있다
text-align: center;
}
html, body{
height: 100% //페이지 전체를 가져야 자식을 이동할 수 있다
}
.class(제일큰박스){
padding: 100px 50px;
border: 1px olid #e2e2e2
border-radius: 5px;
position: absolute;
top: 50%
left: 50%
transform: translate(-50%, -50%);
//꼭지점이 정가운데 오기때문에 -50%만큼 꼭지점을 올려줌
text-align: 모든 inline요소가 해당됨(img,button,a...)
css 가운데정렬 참고자료 https://webdir.tistory.com/31

position 속성
absolute 요소
부모 엘리먼트 내부에 속받되지 않고, 독립된 배치 문맥(positioning context)을 가지게 된다
어디든 원하는 위치에 자유롭게 배치시킬 수 있으며, 부모 엘리먼트 위에 겹쳐서 배치할 수도있다
영역 안에서 활동
relative
가장 가까운 엘리먼트의 내부에서만 엘리먼트를 자유롭게 배치할 수 있다
영역을 지정

IMG

img태그에 alt 속성작성 필수

img는 div사용 안하는게 좋다

오른쪽 끝으로 붙게하기
조상 div에 조상의 부모에 flex
align-items: center;
justify-content: flex-end;
왼쪽 끝으로 붙게하기
부모 div에
width:100%

onload 라는 속성은 scr가 불러와지면 실행됨

vertical-align: middel;

inline또는 table-cell box에서의 수직 정렬을 지정

대부분 이미지와 텍스트를 같은 요소에서 중간으로 배치하기 위해 많이 사용

텍스트 요소에는 line-height 를 주고,
img 태그에 vertical-align: top 주고 쓰면 웬만한 경우에서는 원하는 결과를 냄

IMG 위치조정

object-fit

< img>, < video>, < object>, < svg> 등과 같은)이 지정된 너비와 높이에 맞게 장착되는 방식을 지정

크기가 제각각인 오브젝트를 넘겨받아 비율을 유지한 채로 일정한 크기로 재가공할 수 있음

background-image에서는 background-size:로 사용
img{ width: 100px; height: 100px; object-fit: cover; border: 1px solid black; // 요소의 크기를 가늠하기위해 추가

object-fit: fill
지정된 너비와 높이에 강제로 넣음 (찌부될 수 있음)

object-fit: contain
종횡비를 유지하면서 지정된 너비와 높이 안에서 확대 됨

object-fit: cover
종횡비를 유지하면서 지정된 너비와 높이를 가득 채움(짤릴수 있음)

object-fit: none
크기와 상관없이 가운데 정렬됨 (가운데 빼고 다 짤림)

object-fit: scale-down
원본 크기보다 작아짐