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%); }
