<link href="style.css" rel="stylesheet" type="text/css"/>
  

2. 색상

글자색상부여
글자색 선택후 컨트롤+E->esc (#ffffff 추출)

font-size: 20px;
font-weight: 900;
line-height: 50px; /행간, px,em,pt,%/
font-family: "궁서";
font-style: italic;
letter-spacing: 10px;
text-align: left

body{background-color: beige;
background-image: url(img/cute3.jpg); / 배경이미지 속성 - url(이미지의 경로)
background-repeat: no-repeat;
background-size: 100%; /x(가로)x y(세로)/

3. DIV

• block: 박스와 같이 쌓이면서 나타나는 성격 / 화면 전체 사용/높낮이 폭 변경 O
  inline: 글자와 같이 옆으로 나열되어 나타나는 성격/ 내용의 폭값, 화면의 일부를 차지/높낮이 변경 코드 적용 x
  F12를 눌러서 박스 값 확인 가능
• 폭 전체를 사용 해당 부분만 사용
• border: 5px solid #000; : 선, 선의 굵기, 스타일, 색 /개별부여 가능/ border-radius: 50px 10px 30px 60px; /모서리 둥글기, 개별부여 가능/
  • 테두리 스타일 지정시 : '굵기', '모양', ' 색상' 순서
• size
  auto: 자동으로 맞춰줌
  %, px: 딱 맞지 않을 수 있음
• float: 박스를 옆으로 나열, 형성, 삽화/ 옆에 박스에 영향을 줌.. 나열하고자하면 다 같이 나열해야함
  • float 속성은 block요소의 배치를 인라인 요소와 같이 같은 라인에 배치 - 줄바꿈없이 나열

    float 방향에 따라 시작 지점이 달라짐
    .second > div{
      float: right;

  • clear: float 을 끊음, 나열 제거
  • box-sizing 사이즈를 자동으로 계산해서 맞춰줌 {box-sizing: border-box}
• 화면에 보이는 사각형의 크기: width(height)+내부여백2+테두리
  • 4가지 위치에 따라 값을 설정하는 border, padding, margin은 4개의 값을 위부터 시계방향으로 모두 설정
    • 혹은 2개의 값으로 위&아래, 양 옆 설정, 1개의 값이면 모두 같은 값
    • 값이 없으면 맞은편을 따라함