css 기본_2 (stylesheet 명시도, 공간분할 기타 등..)

<크기단위>

• Em단위의 사용 이유: 반응형 사이트 구축시 부모요소의 크기에 맞게 자동으로 변경되는 구조를 구축해야하는데 이때 필요하게 됨.

 

<반응선택자>: 사용자의 반응으로 생성되는 특성한 상태를 선택

 

• 글자색: 노란색 / 마우스올렸을때: 보라색 / 마우스올려서 클릭하면 보라색>>녹색 변화
• Active와 hover 둘다 적용시키기 위해서는 active선택자 위에 hover 선택자가 있어야함.

 

<스타일 시트 명시도 계산>

• 같은것을 지정하는 경우 가중치가 높은 순서대로 속성이 부여됨.

 

결국 같은 태그를 가리키고 있지만 가중치의 합이 아래것이 높기때문에 최종적으론 아래 코드가 적용되게 됨.

 

<공간분할태그> ; 경계를 분할하거나 영역을 나눌때 쓰는 태그

• <div></div> : 큰 영역을 분할할 때 사용
• <p></p> : 문단을 분할해 글자를 쓸 수 있는 공간을 할당함
• <span></span> : 세부적인 공간을 다룰때 한줄정도 쓸때.
• (실제 페이지 구성 예시)

• 가시속성: 요소가 화면에 보이는 속성
  : display:block ; 웹페이지의 가로공간을 모두 차지하는 속성 (ex:  p 태그)
  : display:inline ; 컨텐츠가 끝나는 지점까지 너비를 가지는 속성,w,h지정X (ex: span 태그)
  : display:none ; 화면에 보이지 않음.

• 

 

• 

 

(예제)

 

(결과화면)

 

 

<Box Model> ; 요소의 부피감을 결정하는 개념, 웹페이지의 디자인 및 레이아웃 설계시

• 웹페이지의 모든 공간을 사각형으로 나누는 것
• (box model의 종류)

• 

• 박스모델 속성

• 

 

• (margin 속성넣기)

• 

• 특정방향에만 넣고 싶을때는 margin-(left, right, top, bottom)을 입력하여 사용함
   
• Margin의 상쇄현상: 인접해있는 두 div영역에 마진을 줄경우 설정된 margin 값이 상쇄되어지는 것. 더 큰 여백은 작은여백을 포함시킴. 여백을 측정하는 기준은 각 div영역을 기준으로 매겨짐(시작점이 다름). ,,,,실제로 눈으로 봐야 잘 알 수 있는….

 

• (padding속성 넣기)
  : margin여백넣는것과 유사한 방식으로 적용됨.
  : 안쪽에 여백을 넣어주기 때문에 전체적인 div영역의 크기가 커진것처럼 보임.

• 

• Padding엔 auto기능이 없음: 가운데 정렬자체가 불가능하기 때문

 

• (box-sizing)
  : 요소의 크기를 화면에 포함하는 방식 설정
   

• 

• Border-box속성을 부여하는 경우 content영역에서 마진으로(패딩으로) 설정한 크기가 제외됨. Div전체영역의 크기는 원래대로 유지되지만, content영역의 크기는 설정해준 패딩의 크기만큼 줄어들게 됨.

 

• (border 속성)
  : 테두리를 기준으로 요소의 바깥여백 지정. ; 선두께, 선종류, 선색깔
  
  (선의 종류)

• 

• Solid 테두리를 가장 많이 사용함.

• 

 

• 

• Border : 선두께 선종류 선색 // 위의 내용이 가장 많이 쓰이는 속성
• Border는 div바깥으로 설정한 선 두께만큼 두께가 더 두꺼워짐.
• Box-sizing: border-box 속성을 줄 경우 설정한 선 두께만큼 content크기가 작아짐
• Border-radius 속성을 지정할때는 테두리두께까지 고려해서 모서리를설정해주어야 함.
  : (border-radiun의 값이 전체 크기의 절반일때 정확한 원이 됨.)
  : 단위에 %사용이 가능하며 50%를 입력할경우 깎는 양을 전체 크기의 50%로 설정함>>원이됨.

: %단위를 사용하는 것이 유지보수 할때 가장 좋음.

 

 

 

(예제) border-radius 속성을 이용해 나뭇잎 모양 만들기.

 

<위치속성>

Position의 기본값 >> static (쓰나 안쓰나 똑같음)

• Position: relative; 에의해 밀어진 공간은 비어있어 사용이 가능함.
  : 원래 위치를 기준으로 계산함. Top, bottom left right로 계산함.

• Position: absolute;

• 

• 
  >> static 속성을 가지고 있지 않은 부모 기준으로 움직임. 절대적인 수치값을 가짐.
  relative와 비교해보면 기준으로 움직이는게 아니고 절대적인 위치값을 가짐을 알 수 있음.

 

(실습) 창 각 모서리에 공간 위치시키기.(position: absolute; 사용)

 

창의 크기를 변경해도 사각형의 위치는 여전히 창의 4군데 모서리에 있음.

 

• Position:fixed;
  : 화면의 어떤 위치에 상대적인 위치를 부여해 공간을 고정시켜버림.
• 마우스 스크롤이 생기고 스크롤을 내려도 fixed속성이 부여된 div는 원래 위치에 그대로 있음.

 

<float 속성>

 

>> 그림에 float :left속성을 css로 주었을 떄 그림 왼쪽에서 글자가 표시되는 것을 볼 수 있음.
 

 

<레이아웃>

요즘 가장 많이 사용되는 웹페이지의 레이아웃 - 이런 모양으로 페이지를 구성하는게 가장 이상적임.

 

<스타일 시트 선언방식>

• 인라인 스타일 : 요소 내 style속성으로 스타일 지정
  <p style="color:blue;">인라인 스타일</p> 이런 모양. 하지만 일반 html이랑 섞여서 찾아서 유지보수 하기가 힘듦. 좋은코딩방식은 아님.
   
• 내부 스타일 : head 영역 내 style 요소를 생성한 후 스타일 지정. 작성한 페이지 내에서만 작동이 됨.
• 외부 스타일 : <link>태그로 외부파일에 접근하여 스타일을 지정함. 여러페이지에서 불러서 쓸수 있음.
   

• 

• 임포트 방식: 스타일 시트 안에 @import를 삽입해서 불러와서 사용. 거의 사용하지 않음.