내일배움카드(재직자) 웹표준 수업 / 3월30일 (수) 11회차

*레이아웃 CSS*
HTML 태그 블록요소 : 세로로 배열되는 HTML 태그(줄바꿈이 되는 태그)
인라인 요소 : 가로로 배열되는 HTML 태그(줄바꿈이 안되는 태그) > 크기지정 불가XX

 

 

display : 속성값;
가로배열, 세로배열 변경
속성값 ▶ block : 세로배열로 만듦
          ▶ inline : 가로배열로 만듦 (width,height 등 일부 블록요소 속성이 안먹힘)
          ▶ inline-block : 가로배열(=inline)이지만 블록요소(=세로배열)의 속성이 적용되게함
          ▶ none : 내용을 결과에서 숨겨줌


position : 속성값;
박스(=구역)의 위치를 원하는 곳으로 이동
속성값 ▶ relative(부모박스) : 부모박스에 적용하면 위치를 수정할 수 있다. 움직이는 박스를 가지고 있는 구역
      > top,left 속성으로만 위치 지정(bottmo,right는 너무 광범위해서 지정X) 앞에 있는 구역의 위치와 안겹친다
          ▶ absolute(자식박스) : 자식박스에 적용하면 위치를 수정할 수 있음. 실제로 위치가 움직이는 박스
                           > top,bottom,left,right 다 위치 지정 가능 / 구역끼리 침범해서 겹칠수 있음
          ▶ top : 상단으로부터 띄울 거리 지정 px,%
          ▶ bottom : 하단으로부터 px,%
          ▶ left / right : 왼쪽 / 오른쪽으로부터 px,%
(포지션 지정할때는 여기에서 저기로 간다 이런식이라서 속성값 쓸때,'여기서에'를 지정해야함
ex; 왼쪽에서 오른쪽으로 간다 position: left;)



☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★

*안쪽여백(=padding)은 여백크기만큼 박스 크기도 같이 커짐. 위,아래,좌우 치수가 다 반영됨 
width 와 height 모두 각각 값이 추가됨 (패딩을 20px 주면, width(좌우) + 40 / height(위아래)+ 40)

*박스 크기를 원하는값으로 유지하려면 여백X2 만큼 박스크기에서 빼기

*바깥여백(=margin)은 여백의 방향을(left,right,top,bottom) 지정하지 않으면 박스 사이사이 여백이 중첩됨
첫번째 박스 오른쪽,두번째박스 왼쪽이 이중 중복 발생. 그래서 여백을 일정한 간격으로 떨어지게 하려면
방향(left,right,top,bottom)을 꼭 지정해야함!

☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★

block & inline 참고이미지

 

 

 

 

 

---

<CSS 실습>

 

*{margin: 0;}
#container{
  background-color: powderblue; width: 700px; height: 300px;
  position: relative;
}
#content{
  background-color: palegreen; width: 600px; height: 150px;
  padding: 0px; margin-left: 20px; position: absolute;
  top: 20px;    
}   /*마진으로 안주고 마진레프트로 준 이유는 비율을 맞추기 위해서..
여백을 주면 박스 크기도 같이 커짐*/
h1{font: bold 25px "굴림";}

 

---

 

 

 

<사과 이미지 실습 코드>

완성본

 

html

 

css