7월 8일_CSS(float 속성, 요소 위치, 시멘틱태그언어)

CLASS_HTML&CSS

by awesong 2024. 7. 8. 15:25

728x90

# float 속성

요소를 왼쪽이나 오른쪽에 떠 있게 만듦

# clear 속성

float속성을 무효화 시킴

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>0708-3</title>
  <style>
    body {
      margin: 50px 60px;

    }
    img {
      float: right;
      margin-left: 30px;
    }
    div {
      padding: 20px;
      margin: 10px;
    }
    #box1 {
      background-color: yellow;
      float: left;
    }
    #box2 {
      background-color: skyblue;
      float: right;
    }
    #box3 {
      background-color: greenyellow;
      clear: left;
    }
    #box4 {
      background-color: royalblue;
      clear: left;
    }

  </style>
</head>
<body>
  <img src="image/tree.png">
  <p>Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Irure exercitation tempor aliqua laboris cupidatat anim in non officia aliquip excepteur fugiat labore.</p>
  <p>Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation. Commodo veniam sit quis nisi ea. Ipsum do aliqua nostrud laboris elit duis adipisicing id Lorem qui. Labore dolor ipsum enim incididunt. Velit qui cillum sunt labore incididunt duis aute Lorem nulla et. Sint commodo aute amet laboris ullamco exercitation Lorem dolore veniam ut reprehenderit incididunt. Laborum nulla eiusmod cillum irure anim aute.</p>
  <p>Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Incididunt adipisicing enim laboris voluptate.</p>
  <br>
  <hr>
  <br>
  <div id="box1">박스1</div>
  <div id="box2">박스2</div>
  <div id="box3">박스3</div>
  <div id="box4">박스4</div>

</body>
</html>

# 웹 요소 위치 지정하기

position : absolute / static / relative / fixed

# 시멘틱태그 언어

<header>	문서나 섹션의 머리말을 정의합니다. 주로 제목, 로고, 검색 폼 등을 포함합니다.
<nav>	네비게이션 링크를 정의합니다. 주로 메뉴, 목차, 색인 등을 포함합니다.
<main>	문서의 주요 내용을 정의합니다. <header>나 <footer>를 제외한 주요 콘텐츠를 포함합니다.
<article>	문서, 페이지, 애플리케이션, 사이트 등 독립적으로 구분되거나 재사용 가능한 영역을 정의합니다.
<section>	문서의 장(chapter)이나 절(section)을 정의합니다. 일반적으로 제목을 가집니다.
<aside>	주변 콘텐츠, 사이드바, 광고 등의 콘텐츠를 정의합니다.
<footer>	문서나 섹션의 바닥글을 정의합니다. 주로 저작권 정보, 연락처 정보 등을 포함합니다.
<figure>	콘텐츠의 독립적인 플로우 콘텐츠를 정의합니다. 보통 그림, 도표, 사진, 코드 블록 등을 포함합니다.
<figcaption>	<figure> 요소의 캡션을 정의합니다.

저작자표시 비영리 동일조건

'CLASS_HTML&CSS' 카테고리의 다른 글

7월 10일_CSS(선택자, 자식요소, 트래지션) (0)	2024.07.10
7월 9일_CSS(그라데이션, 속성 선택자, 가상클래스) (0)	2024.07.09
7월 5일_CSS(마진, 패딩, 박스모델) (1)	2024.07.05
7월 4일_CSS(!important, 웹폰트적용, 스타일시트링크, 다양한 스타일 적용) (0)	2024.07.04
7월 3일_HTML(도스명령어, 블록, 인라인, iframe, CSS) (1)	2024.07.03