이미지의 크기를 바꾸고 싶다면

img {
    width: 200px;
    height: 200px;
    border-radius: 100px;
}

등의 속성을 이용하여 높이, 넓이, 모양 등을 설정 가능하다.

또, 이미지의 위치를 옮기고 싶다면 CSS폴더에서

body {
    text-align: center;
}

을 입력해줄 수 있는데, 이는 이미지가 body에 속한 콘텐츠라는 가정이며, 'text-align: center;'는 콘텐츠를 가운데로 정렬해주는 요소이다.

웹페이지를 만드는 작업을 하다보면 이미지 파일, css 스타일 등이 더욱 많아져 복잡해지게 되는데,

이러한 경우 작업 폴더 안에 ‘images’, ‘styles’ 와 같은 폴더를 생성한 후에 이미지 파일과 CSS 파일 등을 폴더 안에 넣어서 관리해 줄 수 있다.

이러한 경우 HTML 파일에서 CSS 파일의 경로를 수정해야 하며

CSS 파일이 'styles' 폴더 안에 있다면 HTML 파일의 <link> 태그를 다음과 같이 수정해야 한다:\

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

마찬가지로 이미지 파일의 경로도 수정해야 한다. 'images' 폴더 안에 이미지가 있다면 <img> 태그의 src 속성을 다음과 같이 변경해야 한다:

<img src="images/challenges-trophy.jpg" alt="A trophy">

이렇게 폴더 구조를 정리하면 프로젝트가 더 체계적으로 관리되며, 파일을 찾고 수정하는 것이 더 쉬워진다. 또한, 다른 개발자들과 협업할 때도 이러한 구조가 도움이 된다.

이러한 요소는 닫는 태그를 입력하지 않으며, 요소를 닫지 않는 태그를 ‘빈 요소(void element)’라 한다.

 src와 alt 같은 요소를 HTML 요소 속성이라 하며 이러한 속성을 통해 링크와 같은 요소를 구성할 수 있다.

텍스트 크기와 굵기 설정

font-size와 font-weight를 이용하면 텍스트의 크기를 바꿀 수 있으며

font-size를 사용하면 다양한 단위를 이용하여 글자 크기를 바꿀 수 있고, font-weight를 이용하면 두께를 바꿀 수 있다.

(px, inch, centi등도 입력 가능)

예시

.roboto-regular {
  font-family: "Roboto", serif;
  font-weight: 400;
  font-style: normal;
}

글꼴 설정

글꼴은 외부 페이지에서 로드할 수도 있으며, ‘href’속성을 이용하여 링크를 입력하면 된다.

예를 들어,

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

와 같이 표현할 수 있다.