Dev-dotoli TIL

CSS 1



7th id, class


  • attribute? (속성) class, id값을 줘야한다
  • id=’#’(딱한번), class=’.’(반복) 
<div id="myform">
  노란색
  <a href="http://google.co.kr">
    <img src="../data/google.png" />
    google
  </a>
</div>

<div class="red">빨간색</div>



a {
  font-size: 30px;
  color: rgb(226, 162, 88);
  font-weight: 500;
}

#myform {
  background-color: rgb(236, 221, 169);
}

.red {
  background-color: red;
}



8th web font


웹폰트 적용법

  • google font 에서 사용할 font 결정
  • style sheet 에 통째로 적용
  • html에 바로 적용

웹에서 폰트를 가져와 stardard link(html), import(CSS) 값을 입력
입력한 link 나 import 폰트를 사용할 부분에 명령입력(font-family:””)

    <link href="./data/style/default2.css" rel="stylesheet">



@import url("https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap");

body {
  font-size: 30px;
  font-family: "Do Hyeon", sans-serif;
}



9th width, height


  • width : 너비
  • height : 높이

<div class="main-frame">나라사랑 한글사랑</div>



.main-frame {
  border: 5px solid rgb(201, 97, 97);
  width: 140px;
  height: 25px;
}


boder 값을 줌으로써 시각적으로 사이즈를 조절할 수 있다.

Q) solid 의 기능은?

A) border 는 테두리를 설정하는 속성으로 background 속성과 비슷하게 세부적인 속성들을 한번에 쓸 수 있다

  • border : witdh style color 순으로 사용
  • width : 테두리 두께 px 단위
  • style : solid(실선), dotted(점선), dashed(대쉬선), double(이중선), groove, ridge, inset, outset
  • color : 테두리 색상