CSS 배치속성 & 반응형 웹

블록 레벨 요소 & 인라인 레벨 요소

display 속성

• 기본값이 블록(block) or 인라인(inline) 설정됨
• 블록과 인라인의 존재이유는 보기 좋게 배치하기 위함임.
• 블록 레벨 요소는 요소가 있는 가로 줄 전체를 차지함
  • 상자(레이아웃)를 만들기 위한 요소들
• 인라인 레벨 요소는 요소가 있는 공간만 차지함
  • 글자를 만들기 위한 요소들

div

• 대표적인 블럭 요소
• 본질적으로 아무것도 나태내지 않는, 콘텐츠 영역을 설정하는 용도
• 특별한 의미가 없는 구분을 위한 요소
• 요소가 수직으로 쌓임
• 부모 요소의 크기만큼 자동으로 늘어남!(너비)
• 포함한 콘텐츠 크기만큼 자동으로 줄어듬!(높이)

span

• 대표적인 인라인 요소
• 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도
• 요소가 수평으로 쌓임
• 포함한 콘텐트가 크기만큼 자동으로 줄어듬!

인라인 레벨 요소로 바꾸기

    h1 {display : inline;} 

블록 레벨 요소로 바꾸기

    h1, span {border : 3px solid red;  display:block;}

박스 모델 : 테두리, 패딩, 마진

• 기본적으로 모든 HTML 요소를 감싸는 상자임.
• 요소, border, padding,margin으로 구성됨

요소

• 테스트, 사진 등 보여줄 대상임.

패딩

• 내부여백
• 요소 주변 영역을 감쌈. 해당 부분은 투명색임.

    <span style="padding : 20px 20px;">LOVE</span>

테두리 (border)

• 요소와 패딩을 감싸는 테두리

                /* 두께 1픽셀, 검정색, 실선*/
    h1 {border-bottom: 1px solid black;	}

• border : 요소의 테두리 선을 지정하는 단축 속성

선-두께 (border-width) 선-종류(border-style) 선-색상(border-color)

• 요소 테두리 선의 두께

   border-width : top  right  bottom  left	    (값을 1개만 줌)
   border-width : (top,bottom)    (left,right)	(값을 2개 줌)
   border-width : top   (left,right)   bottom	(값을 3개 줌)
   border-width : top  right  bottom  left	    (값을 4개 줌)

• 요소 테두리 선의 종류

   border-style : none(선없음)
   				  solid (실선 - 일반선)
   				  dashed(파선)

• 요소 테두리 선의 색깔을 지정하는 단축 속성

   border-color : 색상 이름 
     			  Hex 색상코드 (16진수 색상)  ex: #FFFFFF, #FF0000
                  RGB (빛의 삼원색)
   				  RGBA (빛의 삼원색 + 투명도)

마진

• 외부 여백
• 테두리 밖의 영역을 감쌈. 해당 부분은 투명색임.
• 요소, 패딩, 테두리를 표시하고 남은 영역

<span style="margin : 20px 20px;">HAPPY</span>

반응형 웹

반응형 디자인

• 화면 해상도에 따라 HTML과 CSS를 자동으로 맞춰서 보여주는 기능.
• 미디워 커리(media query)를 사용하면 됨.

media query

• 미디어 타입과 특징에 따라 다른 CSS 스타일을 적용하도록 도와주는 규격

     @media (속성) {적용 값}
     @import - 문서 최상단에 있어야 함.

     <style>
        @media 미디어 타입 (적용조건) { 규칙 }
     </style>

• 미디어 타입 : (기본)all-생략가능, print, screenn ,speech
• ex) 너비가 600px 이하인 화면에서는 배경색이 올리브

@media (max-width: 600px){
	body{
		background-color : olive;
	}
}

• 601px이상

float 속성을 이용한 레이아웃

• 웹페이지 요소를 공중에 띄워서 좌측 또는 우측에 배치할 수 있음.

float 속성 값

• left : 해당 요소를 부모 요소로 만들어 우측에 배치
• right : 해당 요소를 부모 요소로 만들어 우측에 배치

clear 속성

• 하나의 요소에 float 속성이 적용되면 그다음에 오는 요소들도
  계속해서 float 속성의 영향을 받음.
• float 속성이 적용된 요소 다음에 오는 요소들 float속성의 영향을 받지
  않고 새로운 줄에 배치하고자 할때 사용

clear 속성 값

• left : 이전에 사용된 ‘float: left’의 기능을 해제함.
• right : 이전에 사용된 ‘float: right’의 기능을 해제함.
• both : 이전에 사용된 float 속성 값 left와 right의 기능을 둘다 해제함