block, liline 차이점 div와 span의 차이점 , 절대단위 상대단위 및 선택자 선언방법

 

그룹tag

block 요소 -> 줄바꿈
inline 요소 -> 줄바꿈X

의미없는태그
div : 블록요소를 그룹
span : 인라인요소를 그룹

마크업 규칙

블록요소는 블록요소를 포함 할 수 있다
   <div></div>
   </div>
블록요소는 인라인요소를 포함 할 수 있다
  <span></span>
  </span>
인라인요소는 인라인요소를 포함 할 수 있다
인라인요소는 블록요소를 포함 할 수 없다

색상
16진수
#ffffff

rgba(red,green,blue,alpha)
  0~255        0~1
alpha : 투명도     0: 투명   1:불투명
  rgba(255,0,0,0.5)

  단위 
  절대단위 :px외에는 사용하지 않음
  상대단위 :% ,em, rem, vw,vh

  CSS (Cascading style Sheet)
   HTML 문서를 디자인하기 위한 언어
   1)사용방법
    -head 요소안에서 style 선언 후 작성하기--권장
    -스타일 문서를 파일로 작성 후 HTML 문서에서 연결--권장

    -태그(요소)에 직접 선언하는 방식 --권장X
    2) HTML 문서 접근하기
     -Element 단위로 제어
     <tag>컨텐츠</tag> => Element
     <h1>title</h1> => h1 Element
    3)선언방법

    선택자 {속성 : 값}
    선택자 {속성 : 값  속성 : 값}
    
    클래스 .idname
    아이디 #classame
    


box Model

width, height : 컨텐츠가 차지하는 영역
padding : 테두리와 컨텐츠사이의 여백
border : 박스의 테두리

margin: 테두리 바깥쪽 여백 ( 요소와 요소사이의 여백 )

배경색, 배경이미지 ===> 패딩영역까지 적용됨

padding, border, margin

top, right, bottom, left

padding-top
padding-right
padding-bottom
padding-left


padding:50px;  -> 모든방향
padding:50px 100px -> 상하, 좌우
padding:50px 100px 200px -> 상, 좌우, 하
padding:50px 60px 70px 80px -> 상 우 하 좌우

border ( 선의두께, 선의 모양, 선의 색상 )
        width     style    color

border:10px solid #ff0000;
       크기  모양   색상
border-top:10px solid #00ff00; 

border-top-color:#0000ff;



선택자

1) 전체선택자 :  *  -> 모든요소를 선택
        -> 사용자제........
2) 요소선택자 ( 태그명 ) -> 동일한요소를 전부선택
        -> 사용자제
3) 클래스선택자 
    : 여러요소에 같은이름으로 중복사용이 가능.


Block 요소 기준
width, height 값이 표현되는 방식

---- 사용자가 값을 입력하지 않을때
width : 부모요소의 width값을 그대로 적용
height : 컨텐츠의 높이로 결정
        ( 컨텐츠 텍스트,이미지, 자식요소)

Inline 요소 기준
width, height 값이 표현되는 방식
---> 컨텐츠의 크기만큼만 적용됨.
---> w, h 적용불가