[CSS] float 실습예제

2023. 8. 10. 15:56· CSS/CSS 실습
반응형

/* float 속성 특징 : float 걸린 태그는 떠 있음 */
/* float 밑에 있는 태그들이 높이가 없다고 가정하여 위로 말려 올라옴(겹침현상) */
/* 여백 초기화 */
* {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
}

#image {
  float: left;
  border: 1px solid red;
}

#desc {
  border: 1px solid red;
  margin-left: 30px;
  float: left;
  width: 300px;
}

#menu {
  border: 1px solid red;
  float: right;
}
반응형
저작자표시 비영리 변경금지 (새창열림)

'CSS > CSS 실습' 카테고리의 다른 글

[CSS] 메뉴디자인  (0) 2023.08.11
[CSS] display 실습  (0) 2023.08.10
[CSS] 웹 폰트 적용 예제  (0) 2023.08.09
[CSS] 테이블 스타일 적용  (0) 2023.08.09
[CSS] 배경이미지 연습문제  (0) 2023.08.08
'CSS/CSS 실습' 카테고리의 다른 글
  • [CSS] 메뉴디자인
  • [CSS] display 실습
  • [CSS] 웹 폰트 적용 예제
  • [CSS] 테이블 스타일 적용
2주녘
2주녘
가디사는 개발자의 기술블로그
반응형
2주녘
Just Do "IT"
2주녘
전체
오늘
어제
  • 분류 전체보기 (243)
    • 이론 (0)
    • Node.js (2)
    • Flutter (19)
    • Project (1)
      • Team Project (3)
    • Daily (0)
      • 일기 (0)
      • 리뷰 (0)
    • Spring Boot (23)
      • 스프링부트 예제 (20)
    • Java (88)
      • Java 이론 (67)
      • Java 연습문제 (21)
      • 오류 노트 (0)
    • HTML (9)
      • HTML 이론 (9)
      • HTML 실습 (0)
    • CSS (27)
      • CSS 이론 (19)
      • CSS 실습 (8)
    • JavaScript (8)
      • JS 이론 (5)
      • JS 실습 (0)
      • jQuery (3)
    • React (19)
      • 이론 (13)
      • 실습 (6)
    • SQL (18)
      • SQL_이론 (18)
    • Git (3)
    • 자격증 (16)
      • SQLD (13)
      • 정보처리기사 (3)
    • 기술면접 (4)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 백앤드
  • HTML
  • 프론트앤드
  • 벡엔드
  • JavaScript
  • 자바스크립트
  • Spring
  • JPA
  • 상수
  • 자바
  • TypeScript
  • sqld
  • Java
  • 플러터 기초
  • 플러터
  • 제이쿼리
  • Flutter
  • 스프링부트
  • flutter 기초
  • 개발자
  • DART
  • 댓글구현
  • jQuery
  • 리액트
  • springboot
  • 타입스크립트
  • CSS
  • 변수
  • SQL
  • JSP

최근 글

hELLO · Designed By 정상우.v4.2.1
2주녘
[CSS] float 실습예제
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.