6일차! (CSS의 기초)

오늘도 어제처럼 많이 어렵진 않았다! 다만 외울것이 많을뿐!!! 여기서부터는 정말 처음이라 더욱 열심히 복습해야겠다.

 

CSS(Cascading Style Sheet)

CSS를 사용하면 인터페이스를 직관적으로 볼수 있고 그로인해 일반 사용자들이 보다 편리하게 사용할 수 있다. HTML로 뼈대를 만들고 CSS로 폰트, 여백, 레이아웃 등 여러 꾸미는 역할을 한다.

.class {
	width : 100%;
}

• .class 부분은 셀렉터로 HTML의 tag를 선택하는 부분이다.
• {} 부분은 선언 블록으로 tag의 형태를 바꾸는 선언들이 들어간다.
• width : 100% 선언으로 속성 명과 속성 값을 적는다.

Text 요소

• 글꼴 - font-family
• 사이즈 - font-size
• 두께 - font-weght
• 밑줄 - text-decoration
• 자간 - letter-spacing
• 행간 - line-heigth
• 정렬 - text-align

#red {
    font-size: 10px;
    color: #ff0000;
    font-weight: 900;
    text-decoration:underline;
    letter-spacing: 30px;
    line-height:50px;
    text-align:center;
 
  }

  .emphasize {
    font-size: 2rem;
    font-family: "SF Pro KR", "MalgunGothic", "Verdana";
  }

 

단위

• 절대 단위 - px, pt
• 상대 단위 - %, em, rem, ch, vh, vw,...

html {
    font-size: 10px;
  } 
 
.div1 {
    font-size: 20px;
    width: 10em; /* 200px */
    border: 0.1em solid rgb(255, 145, 0);
}

.div2 {
    font-size: 20px;
    width: 10rem; /* 100px */
    border: 0.1em solid blue;
}

박스 모델

• margin, border, padding, content로 이루어져있다.

.div3 {
  margin: 10px 20px 30px ;
  border: 1px solid red;
  padding: 10px 20px 30px 40px;
  
}