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