div 배치 시작하기

2021. 4. 9. 09:03·개발중/html
728x90
반응형

웹 디자인 개발자가 아니라 div 요소 정리는 늘 힘들다.

아래 참고.

복붙해서 응용 해려구 기록 

더보기

참고

blog.naver.com/jokercsi1/221907670908

<template>
  <div id="wrap">
    <div class="header"></div>
    <div class="aside"></div>
    <div class="contents"></div>
    <div class="footer"></div>
  </div>
</template>
<script>
</script>
<style lang="scss">
#wrap {
  width: 100%;
  margin: 0 auto;
}
.header {
  width: 100%;
  height: 150px;
  background: #9566cc;
}
.aside {
  float: left;
  width: 30%;
  height: 700px;
  background: #7c5772;
}
.contents {
  float: left;
  width: 70%;
  height: 700px;
  background: #0300ef;
}
.footer {
  clear: both;
  width: 100%;
  height: 150px;
  background: #00ef15;
}
</style>


 

728x90
반응형
저작자표시 (새창열림)

'개발중 > html' 카테고리의 다른 글

CSS를 이용하여 부모 요소의 높이에 자식 요소를 맞추는 방법  (0) 2021.04.26
vue 에서 div 에 마우스 hover 순간 - 버튼 만들기  (0) 2021.04.21
람다식 연습 기록  (0) 2021.02.25
router-link css 효과  (0) 2021.02.02
테이블 border 선이 두줄 => 한줄로 바꾸기  (0) 2021.01.22
'개발중/html' 카테고리의 다른 글
  • CSS를 이용하여 부모 요소의 높이에 자식 요소를 맞추는 방법
  • vue 에서 div 에 마우스 hover 순간 - 버튼 만들기
  • 람다식 연습 기록
  • router-link css 효과
Binsoo
Binsoo
내 트러블 슈팅
  • Binsoo
    정수빈 기술블로그임.
    Binsoo
  • 전체
    오늘
    어제
    • 빈수 개발자 개발 일기 (939)
      • 개발중 (635)
        • Spring Boot (95)
        • Spring Security (2)
        • Spring Batch (6)
        • Spring Boot & Redis (13)
        • Java Persistence API (JPA) (28)
        • Web (42)
        • Rest Api (7)
        • Spring Concurrency Control (3)
        • Redis (8)
        • Kubernetes (k8s) (4)
        • MYSQL (35)
        • AirFlow (15)
        • Docker (2)
        • Git (22)
        • Linux (9)
        • JSON Web Tokens (JWT) (4)
        • Troubleshooting (88)
        • Swagger (0)
        • Vue.js (52)
        • Java (74)
        • html (12)
        • C (5)
        • jQuery (15)
        • JavaServer Pages (JSP) (17)
        • Arduino (1)
        • JavaScript (35)
        • Amazon Web Services (AWS) (11)
        • Algorithm (9)
        • 참고 기능 (18)
        • mongo (2)
      • PROJECT (27)
        • 스프링부트+JPA+몽고 API 개발 (3)
        • MINI (2)
        • 게시판 (3)
        • vue 프로젝트 (1)
        • JPA 사이드 프로젝트 기록 (17)
      • TEAM STUDY (156)
        • 가상 면접 사례로 배우는 대규모 시스템 설계 기초 (8)
        • 한 권으로 읽는 컴퓨터 구조와 프로그래밍 (12)
        • NAVER DEVELOPER (4)
        • LINUX (23)
        • PYTHON (19)
        • SERVER (8)
        • 알고리즘 코딩 테스트 스터디 (31)
        • 쿠버네티스 (40)
        • 대세는 쿠버네티스 [초급~중급] (11)
      • BOOK (0)
      • 자격증 (61)
        • 리눅스 1급 - 필기 기록 (19)
        • 네트워크 관리사 (2)
        • 네트워크 관리사 2급 - 실기 기록 (21)
        • 네트워크 관리사 2급 - 필기 기록 (16)
        • 정보처리 (2)
      • 직장인 대학원 (18)
        • 기록 (3)
        • 캐글 스터디 (3)
        • R (12)
      • 논문 (5)
  • 블로그 메뉴

    • 홈
    • 태그
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    네트워크 관리사 학점
    쿠버네티스
    네트워크 관리사 자격증
    VUE
    리눅스 마스터 요약
    네트워크 관리사 실기
    네트워크 관리사 요약
    네트워크 관리사
    알고리즘
    리눅스 마스터 1급
    리눅스 마스터 1급 요약
    Spring
    redis
    파이썬 알고리즘
    리눅스 마스터 1급 정리
    BackendDevelopment
    쿠버네티스 스터디
    docker
    springboot
    스프링
    REST API
    리눅스 마스터
    네트워크 관리사 2급 실기
    git
    리눅스 1급 요약
    java
    네트워크 관리사 2급
    jpa
    Git 저장소
    파이썬
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.4
Binsoo
div 배치 시작하기
상단으로

티스토리툴바