
23.05.25 학습일기
✅ 시멘틱 태그
계층 (1) > (2) > (3) > (4)
상위 컨테이너 : .container(1) / .wrapper
문서의 주요 내용 지정 : main
주제별 콘텐츠 영역 : section(2)
해더 영역(로고, 메뉴, 로그 검색 등) : header(2)
제작 정보 및 저작권 정보 표시 : footer(2)
콘텐츠 내용 넣기 : article(3) -> div(4: 세부정보)
문서를 링크하는 탐색 영역 : nav
세부 사항 요소 : summary / 추가 세부 정보 정의 : details
[ 문제 상황 ]
.logo는 기본 왼쪽 정렬로 두고, .navi는 float : right; 을 했을 때 .navi는 부모 요소를 넘어가버림
[ 해결 방법 ]
.logo와 .navi 둘 다 float성질을 적용한 후
이 둘을 감싸고 있는 부모 요소인 .header요소에
높이를 적용해줘야 한다
(왜?) float를 적용하면 자식 요소가 없다고 판단
따라서 높이가 줄어듦
[ 높이 지정 방법 ]
height지정
overflow:hidden;설정
header태그에는 height를 지정해줌
✅ 시멘틱 태그를 사용한 레이아웃 만들기
주의할점 : 공통적인 부분과 개별적인 부분의 CSS속성을 분리하여 적용하기
<section class="box2">
<article class="sub1"></article>
<article class="sub2"></article>
<article class="sub3"></article>
</section>
공통적인 부분
section > article
/* box2의 자식 공통적인 부분 */
.box2 article{
width:33.33333%; /*거의 비슷해짐*/
height:300px;
float:left;
}
개별적인 부분
article, article, article
/* 개별적인 부분 */
.sub1{
background-color: darkgray;
}
.sub2{
background-color: lightgray;
}
.sub3{
background-color: lightslategray;
}
✅ CSS 포지셔닝 (1)
position속성 ⭐⭐
relative : 부모 요소에 줌
absolute : 자식 요소에 줌
postition 속성을 함께 써줘야 적용
/*예시*/
potition:absolute;
left:
right:
top:
bottom:
부모요소(.parent)에 position : relative;를 주지 않으면
자식요소(.child)는 부모요소를 브라우저로 인지
자식요소왈 > "아! 내 부모는 body태그이구나!"
-> 브라우저에서 위치를 잡음
[ 정리 ]
position을 사용할 경우
부모 > 자식의 계층 구조 잡기
부모 position:relative, 자식 position:absolute; 적용하기
position:absolute;을 선언한 자식에게 top, bottom, right, left 선언하기
[ 미션 ]
자식요소를 오른쪽 하단에 배치하기
html
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
css
/* 부모요소 position:relative */
/* 자식요소 position:absolute */
.parent{
background-color: skyblue;
width:1000px; /* 부모요소 크기지정 */
height:500px; /* 부모요소 크기지정 */
position:relative;
}
.child{
background-color: grey;
width:200px; /* 자식요소 크기지정 */
height:100px; /* 자식요소 크기지정 */
position:absolute;/*position:absolute;이 선언되어 있어야 아래의 right, bottom 적용가능*/
bottom:0;
right:0;
}
✅ CSS 포지셔닝 (2)
자동으로 수평 수직 중앙 위치 시키기(자식 요소를 원하는 대로 위치)
position속성과 함께 사용⭐⭐
left, right, top, bottom 좌표 속성
x-index속성
이전 내용 복습 - 포지셔닝 하기
부모 > 자식 요소 간 계층 구조 설정
부모 - position:relative, 자식 - position:absolute; 지정
주의할점
부모 요소의 높이가 없을 경우
자식 요소의 높이만큼 차지
그러나 자식 요소가 position:absolute를 가진다면
붕 떠버림 => float적용한 것과 동일한 원리
.parent{
position:relative;
border:1px solid #000;
width:500px; /* 부모요소 크기지정 */
}
.child{
position:absolute;
background-color: grey;
width:100px; /* 자식요소 크기지정 */
height:100px; /* 자식요소 크기지정 */
}
수직 중앙 정렬
html요소의 좌표 기준 : 왼쪽 상단
x축 +값 왼쪽에서 오른쪽으로
y축 + 값 위에서 아래로
자기 자신의 크기에서 x축 -50%, y축 -50%
transform: translate(-50%, -50%);
수직 수평 중앙 위치시키기
/* 부모요소 position:relative */
/* 자식요소 position:absolute */
.parent{
position:relative;
border:1px solid #000;
width:500px; /* 부모요소 크기지정 */
height:500px;/* 부모요소 크기지정 */
}
.child{
/* 브라우저 크기에 관계없이 항상 수직 수평 중앙 정렬하기 */
position:absolute;
top:50%; /*x축 +값 왼쪽에서 오른쪽으로*/
left:50%;/*y축 +값 왼쪽에서 오른쪽으로*/
transform: translate(-50%, -50%);
/* 자식요소 크기지정 */
background-color: grey;
width:100px;
height:100px;
}
퍼센트는 상대적이므로 브라우저 크기가 작아지거나
부모 요소가 작아져도
설정한 수직 수평 중앙 정렬은 일정하게 유지
요소를 부모요소에서 정중앙에 배치?
[ 암기 ]
.parent{
position:relative;
}
.child{
position:absolute;
top:50%; /*x축 +값 왼쪽에서 오른쪽으로*/
left:50%;/*y축 +값 왼쪽에서 오른쪽으로*/
transform: translate(-50%, -50%);
}
요소를 브라우저에서 정중앙에 배치?
[ 응용 ]
.parent{
/*position:relative적용안함*/
}
.child{
position:absolute;
top:50%; /*x축 +값 왼쪽에서 오른쪽으로*/
left:50%;/*y축 +값 왼쪽에서 오른쪽으로*/
transform: translate(-50%, -50%);
}
댓글을 작성해보세요.