간단한 CSS 찍먹하기!

2024. 11. 22. 15:57ㆍTIL

✔오늘 배운 중요한 🔑 point

  • CSS는 외관을 바꾸기 위해 사용한다.
  • HTML내에서 STYLE 태그나 속성을 사용해서 직접 CSS를 작성할수 있지만 가독성,유지보수,재사용 불가 등의 이유로 잘 사용되지는 않는다. 하지만 사이트가 한 페이지로 구성되있거나 CSS를 특정 페이지에만 적용하는 경우에는 사용되기도 하니 상황에 맞게 사용하는것이 좋다.
  • display:block을 사용하게 되면 <div> <p> 처럼 한줄을 차지하는 요소로 바뀌기 때문에  width을 특정 수치로 고정하고 margin: 0 auto로 설정하면 가운데 정렬이 가능하다.

🎯 오늘 배운 내용

 

background-color:  배경화면 색깔 지정 #bbf1ef;
font-family:  글꼴 지정, 여러 글꼴 지정 가능 'Verdana','NanumGothic',sans-serif;
font-size: 크기 18px;
font-weight 굵기 bold;
border: 테두리 설정 (두께,종류,색상) 5px solid #ffffff;
border-radius: 모서리 각도  20px;
padding: 테두리 안쪽 여백 6px 0;
margin: 테두리 바깥 여백 0 auto;
width: 폭(길이) 지정 300px;
text-align:  인라인 박스의 정렬 위치 지정 center;
display: 레이아웃의 종류 지정 block;

 

 

HTML은 문자열에 의미를 부여하기 위해 사용

CSS는 요소의 색상,크기,배치와 같이 외관을 바꾸기 위해서 사용한다.

어디의 {무엇을 : 어떻게; } 형식으로 3가지의 항목을 지정한다.

<!DOCTYPE html>
<html lang="kr">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/style.css">
  <title>css를 연습해봅시다</title>
</head>
<body>

</body>
</html>

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

<link> : HTML문서와 외부 리소르를 연결할때 사용

rel : 연결된 리소스의 유형 지정. "stylesheet"를 사용하여 연결된 파일이 CSS 스타일시트임을 나타냄

 

 

body {
  background-color: skyblue;
}

css파일 내에서 배경색을 바꿔주게 되면

배경 색깔이 바뀌게 된다.

기본 스타일에 의해 css가 적용되지 않을때는 desyle.css를 불러오면 된다.

https://unpkg.com/browse/destyle.css@4.0.1/

 

UNPKG - destyle.css

destyle.cssVersion: 1.0.01.0.11.0.21.0.31.0.41.0.51.0.61.0.71.0.81.0.91.0.101.0.111.0.121.0.131.0.141.0.152.0.02.0.12.0.23.0.03.0.13.0.24.0.04.0.1

unpkg.com

 

<!DOCTYPE html>
<html lang="kr">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/destyle.css">
  <link rel="stylesheet" href="css/style.css">
  <title>css를 연습해봅시다</title>
</head>
<body>

</body>
</html>

 

폰트의 경우에는 내 PC에서는 잘 보이나 다른 디바이스에서는 지원하지 않는 글꼴일수도 있다. font-family에 3가지나 되는 폰트를 적용시킨것은 맨 앞에 있는 1순위의 글꼴이 없을때 2순위의 글꼴이 적용되고 2순위의 글꼴이 없다면 3순위의 글꼴이 적용되는 식이다.

body {
  background-color: skyblue;
  font-family: 'Verdana','Apple SD Gothic Neo','NanumGothic',sans-serif;
}
h1 {
  font-size: 30px
}

 

 

https://github.com/kotlin2024/warming_up

 

GitHub - kotlin2024/warming_up

Contribute to kotlin2024/warming_up development by creating an account on GitHub.

github.com

 

 

🤔 어떻게 활용할까?

간단한 css를 활용하여 배경색,글꼴,정렬,크기, 여백 등을 조절할수 있게 되었다.

📓 오늘의 한줄

"Dream big and dare to fail."

- Norman Vaughan -

'TIL' 카테고리의 다른 글

간단한 블로그 만들기(다듬기)  (0) 2024.11.24
간단한 블로그 만들기  (2) 2024.11.23
간단한 HTML 찍먹하기!  (0) 2024.11.21
개인 프로젝트 3일차 <Get요청과 @RequestParam>  (1) 2024.11.20
QueryDsl 설정 관련 오류  (0) 2024.11.19

관련글

티스토리툴바