css semantic tag, position, float

시맨틱 태그(Semantic Tag)

• 문서의 구조와 콘텐츠 의미를 나타내는 역할을 하는 div 태그
• 검색 엔진 접근성을 개선하고 코드 가독성을 높이는 데 도움을 줌
• 태그의 이름만 다를 뿐 div 태그와 기능은 동일

• <header>: 페이지의 머리글로 내비게이션 메뉴 등을 포함한다.
• <footer>: 페이지의 꼬리글로 저작권 정보, 연락처, 링크 등을 포함한다.
• <nav>: 메뉴를 구성한다.
• <aside>: 콘텐츠와 관련성이 적은 보조 콘텐트
• <section>: 주제별로 콘텐츠의 구역을 나눌 때 사용한다.
• <article>: 독립적으로 구분되는 기사나 포스트, 배포 가능하거나 재사용할 수 있는 콘텐츠
• <main>: 문서의 주요 콘텐츠 부분

 

 

 

위치 지정 방식(Position)

1. 정적 위치 지정 방식 (position: static)

• position 속성의 초깃값
• HTML 문서에 작성된 순서대로 요소들의 위치가 결정된다.
• 요소가 겹치지 않는다.

 

2. 상대 위치 지정 방식 (position: relative)

• 원래 위치인 static position을 기준으로 위치를 재설정하는 방식
• top, left, right, bottom 속성을 사용한다.
• 요소가 겹쳐질 수 있다.

/* CSS */
div{ width: 200px; padding: 20px; }

.static{ background-color: darkcyan; }

.relative{ 
    background-color: tomato;
    position: relative;
    left: 100px;
    top: 50px;
}

<!-- HTML -->
<div class="static">static</div>
<div class="relative">relative</div>

 

static, relative

 

3. 고정 위치 지정 방식 (position: fixed)

• 스크롤하여도 요소가 항상 지정된 위치에 고정되어 배치한다.
• top, left, right, bottom 속성을 사용한다.

/* CSS */
.fixed{
    background-color: goldenrod;
    position: fixed;
    width: 100px;
    height: 200px;
    right: 10px;
    bottom: 10px;
}

<!-- HTML -->
<div class="fixed">fixed</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, officiis ducimus. Sed, excepturi dignissimos? Sit, debitis! Placeat temporibus sed quidem reiciendis iusto, quam repellendus perferendis quisquam itaque tempore dolores odit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, officiis ducimus. Sed, excepturi dignissimos? Sit, debitis! Placeat temporibus sed quidem reiciendis iusto, quam repellendus perferendis quisquam itaque tempore dolores odit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, officiis ducimus. Sed, excepturi dignissimos? Sit, debitis! Placeat temporibus sed quidem reiciendis iusto, quam repellendus perferendis quisquam itaque tempore dolores odit.</p>
<!-- ... -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, officiis ducimus. Sed, excepturi dignissimos? Sit, debitis! Placeat temporibus sed quidem reiciendis iusto, quam repellendus perferendis quisquam itaque tempore dolores odit.</p>

 

fixed

 

4. 스티키 지정 방식 (position: sticky)

• 부모 요소 기준으로 relative 위치를 가지면서 기준점을 넘게 될 경우 fixed 성질을 가지는 지정 방식
• top, left, right, bottom 속성을 사용한다.

/* CSS */
html, body { margin: 0; padding: 0;}
.header { height: 80px; background-color: burlywood;}
.container { display: flex; flex-flow: row nowrap;}
.content { width: 80%; height: 800px; background-color: darkcyan;}
.sidebar{
    position: sticky;
    top: 30px;
    width: 20%;
    background-color: brown;
    height: 400px;
}
.footer {
    background-color: yellowgreen;
    height: 100px;
}

<!-- HTML -->
<div class="header">헤더</div>
<div class="container">
    <div class="content">메인 컨텐트</div>
    <div class="sidebar">sticky 적용</div>
</div>
<div class="footer">푸터</div>

위쪽 화면에선 relative 속성을 가지다가

 

중간 화면에선 fixed 속성을 가지고

아래쪽 화면에선 relative 속성을 가진다

 

5. 절대 위치 지정 방식 (position: absolute)

• 속성이 부여된 부모를 기준으로 위치를 설정한다.
• 부모 요소가 없는 경우 body 기준으로 위치가 설정된다.
• 이때 absoute position의 부모 속성은 static position이 아니어야 한다.

/* CSS */
#wrap {
    position: relative;
    width: 500px;
    height: 400px;
    border: 3px solid red;
}
.box {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: deepskyblue;
}
#ab1 { top: 0; right:  0;}
#ab2 { bottom: 0; left:  0;}
#ab3 { bottom: 0; right:  0;}
#ab4 { top: 100px; left:  200px;}

<!-- HTML -->
<div id="wrap">
    <div class="box" id="ab1"></div>
    <div class="box" id="ab2"></div>
    <div class="box" id="ab3"></div>
    <div class="box" id="ab4"></div>
    <div class="box" id="ab5"></div>
</div>

absolute

 

6. float, clear

 

float

• div와 같은 세로로 나열되는 HTML 요소를 가로 수평으로 나열되도록 해 주는 속성
• 보통은 float 속성보다 float과 비슷한 flex 속성을 주로 사용한다.
• float를 적용 받은 요소의 다음 요소는 끌어올려지며 left, right로 다음 요소의 방향을 설정할 수 있다.

clear

• float 속성이 적용된 이후 다음 요소가 float 속성에 영향을 받지 않도록 설정하고 싶을 때 사용한다.
• left, right, both

/* CSS */
img { float: left; margin-right: 20px; margin-bottom: 20px;}
hr { clear: both;}

div { padding: 20px; }

#box1 { 
    background-color: gold;
    float: left;
    margin-right: 20px;
}
#box2 { 
    background-color: gray;
    float: left;
    margin-right: 20px;
}
#box3 { 
    background-color: rosybrown;
    float: left;
    margin-right: 20px;
}
#box4 { 
    background-color: royalblue;
    float: left;
    margin-bottom: 20px;
}

p{
    padding: 10px;
    text-align: center;
    font-size: 20px;
}

#p1 {
    width: 38%;
    background-color: cornflowerblue;
    float: left;
    margin-bottom: 20px;
}

#p2{
    width: 53%;
    background-color: khaki;
    float: right;
}

#p3{
    clear: both;
    background-color: sienna;
}

<!-- HTML -->
<img src="./winter1.png" alt="겨울">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat omnis dolore porro minus nesciunt dolorum odit cumque doloremque id, illo est tenetur ducimus molestias ullam obcaecati? Quasi nemo voluptas velit?
<hr>
<div id="box1">박스1</div>
<div id="box2">박스2</div>
<div id="box3">박스3</div>
<div id="box4">박스4</div>
<hr>
<div id="p1">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium tempora iure exercitationem nam doloribus consectetur at, blanditiis modi laboriosam sapiente saepe deserunt, quasi suscipit perferendis nemo esse maxime placeat quam!</p>
</div>
<div id="p2">
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus, suscipit illo? Praesentium nam iusto vel dolor molestias facilis dicta voluptate neque harum cupiditate, enim minima. Tempora a vero dolores placeat!</p>
</div>
<div id="p3">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias nemo voluptas voluptates hic. Illo, voluptates cum. Praesentium, temporibus iure voluptate perspiciatis explicabo deserunt, pariatur, non magni est consectetur distinctio nobis?</p>
</div>