티스토리 뷰

DB/SQL

CSS박스모델

douStory 2021. 8. 30. 17:58
728x90

블럭 레벨 요소

한줄을 통째로 차지하는 요소

div, p, hm, ul, ol, from, table, fieldset, address

 

인라인 레벨 요소

표시되는 컨텐츠만큼만 차지하는 요소

img, strong, br, sub, span, input

 

display속성

필요에 따라 인라인 레벨과 블록 레벨을 설정 할 수 있음

  1. display : block  (해당요소를 블록레벨로 지정)
  2. display : inline 
  3. display : inline-block
  4. display : none  (안보임, 공간차지x) **visibility : hidden; (안보임, 공간차지)

박스위 테두리 스타일 지정

 

none : 기본 값.

hidden : 나타나지 않음.

dashed : 짧은 선으로 효시

dotted : 점선으로 표시

double : 이중선으로 표시. 두 선 사이의 간격은 border-width로 지정

solid : 실선으로 표시

border-width : 테두리 두께 지정

border-color : 박스의 테두리 색상을 지정

border-radius : 박스 모서리 둥굴게 처리

border : 테두리스타일, 두께, 색상 등 여러 속성 동시 표시

 

margin : 현재 요소 주변의 여백

padding : 콘텐츠 영역과 테두리 상이의 여백

box-sizing

요소 배치를 위해 요소의 너비 계산에 이용

컨텐츠 영역의 너비에 패딩과 테두리 크기까지 하벼서 width 속성 지정이 가능하다

 

flot : 웹 요소를 문서위에 떠 있는 상태로 만듬, 요소의 왼쪽 구석 혹은, 오른쪽 구석에 요소가 배치된다는 것

clear : flot이 끝났다는 걸 알려줌

 

 

position

fiexd : like 고정배너

 

z-index

한 요소 위에 다른 요소를 쌓기 위해 순서를 지정한다

값이 작을 수록

 

시맨틱 테그

<header>

특정부분의 머릿말 <body>문 안에 위치

**<head> 랑 햇갈리지 말자. head 문서설명

<nav>

링크연결, <header>, <footer>, <aside> 어디든지 포함가능

<ifame>

웹페이지 속 웹페이지 

** 해킹위험이 있어서 youtube 빼고는 잘 사용 하지 않는다.

<section>

콘텐츠를 주제별로 묶을 때 사용

웹상에 실제 내용을 넣음

<article>

콘텐츠

like 블로그 포스트, 웹사이트의 내용

 

 

'DB > SQL' 카테고리의 다른 글

스프링 프로젝트의 생성 및 스프링의 파일구조  (0) 2021.10.06
[SQL요점정리#9]오라클 주요함수(INITCAP, UPPER, LOWER)  (0) 2021.08.24
[SQL요점정리#8] SET연산자  (0) 2021.08.19
[SQL요점정리#7] WHERE 조건과 연산자  (0) 2021.08.19
[SQL실습예제#1]  (0) 2021.08.19
댓글