M9 개발블로그

  • 홈

css display block 1

css display(inline, block, inline-block, none), inline과 block 레벨

html의 요소를 화면에 어떻게 보이게 할지를 정해주는 속성인 display에 대해 정리해보겠다. inline과 block 속성을 정리하기 앞서 inline과 block 레벨의 차이점을 정리해보겠다. 1 2 3 div{ width:70px; height:70px; background:red; margin-bottom:20px; } span{ background:black; width:20px; height:20px; } 위의 html, css코드의 결과는 아래의 사진이다. div가 block 레벨이고, span이 inline 레벨이다. 그런데 이 코드를 작성하며 알 수 있는 사실은 block레벨 첫째, 위에서 아래로 열을 기준으로 블록처럼 쌓인다. 둘째, 태그 안에 텍스트를 작성하지 않아도 화면에 표현할..

Front-End/css 2020.10.25
이전
1
다음
더보기
프로필사진

M9 개발블로그

개발 기본기 다지기

  • 분류 전체보기 (27)
    • Backend (0)
    • Front-End (5)
      • html (1)
      • css (3)
    • Javascript (6)
    • MySQL (6)
    • Linux (0)
    • 깃, 깃허브 (1)
    • 자료구조 및 알고리즘 (2)
    • Java (5)
    • 네트워크 (1)

Tag

css position relative, 화살표함수 this, inline block 차이, 자바스크립트, mysql 기본키, this, MySQL, JavaScript HTML 접근, javascript, inline과 block, css display inline-block, css display block, The Document Object Model, css display none, arrow function this, css position sticky, css position static, 문서 객체 모델, css display inline, JavaScript HTML 조작,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바