CSS-제목, 이미지 스타일, div-
제목 스타일
제목의 위치를 조정하다.
위치 조정
심볼이 표시되는 위치를 변경하려면 text-align이라는 CSS 속성을 적용합니다.
이것은 중간, 우경, 좌경과 위치를 바꿀 수 있는 속성이다.
중앙의 경우center를 사용하고 오른쪽의 경우right를 사용하며 왼쪽의 경우left를 사용합니다.
h1에class 속성, title을 추가하십시오.
class로 선택기를 지정하여 요소를 가운데에 놓으십시오.
먼저 HTML에 씁니다.
<h1 class="title">タイトル</h1>
.class{
text-align: center;
}
여러 범주
한 요소에 여러 개의class 속성을 추가할 수 있습니다.
이전 글 (HTML - 라벨, 속성 -) 에서 같은 속성은 한 요소에 대해 최대 한 개만 쓸 수 있지만, 빈칸으로 구분하면 여러 개의class 속성을 추가할 수 있습니다.
실제 클라스 속성을 가진 프로그램을 몇 개 쓰면 이렇게 된다.
<h1 class="class-1 class-2">タイトル</h1>
이미지 스타일
이미지의 크기와 위치를 조정할 수 있습니다.
요소의 폭 및 수직 폭
요소의 폭과 세로 폭을 조정하여 이미지 크기를 조정할 수 있습니다.
CSS 속성을 사용하여 가로 및 세로 너비를 조정합니다.
(width:○○px(●％);height:○○px(●％);이렇게 쓰는 법.)
위치 조정에 사용되는 프레임
text-align을 사용하여 하위 요소의 위치를 위치 조정 항목에 설명했습니다.
그렇다면 다음 항목에서 요소를 중간에 집중하려면 어떻게 하면 좋을까.
<body>
<h1>サンプル</h1>
中央寄せしたい文章
</body>
따라서 중앙을 맞추고 싶은 범위를 둘러싸기만 하면 된다.
그 범위는div 라벨로 지정됩니다.
<body>
<h1>サンプル</h1>
<div>
中央寄せしたい文章
</div>
</body>
div로 포위한 후,class 속성 등을 추가하여 css에서text-align 등으로 위치를 조정합니다!
・
・
・
[추기]: css에서text-align을 사용할 때 어떤 프로그램을 써야 합니까?
우선div에 속성을 부여합니다.
예를 들어class 속성을 더해서 > 안에 프로그램을 씁니다.
실제로 쓰면 그렇습니다.
<div class=title-area>タイトル</div>
다음은 css에 프로그램을 씁니다.
이 제목을 중심으로 할 때는center를 사용하고, 오른쪽으로 정렬할 때right를 사용하며, 왼쪽으로 정렬할 때는left를text-align 다음에 붙인다.
실제로 중앙에서 썼다고 가정하면 이렇다.
.title-area{
text-align:center;
}
(title-area 이전의 점을 잊지 마세요!)
Reference
이 문제에 관하여(CSS-제목, 이미지 스타일, div-), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/reyow/articles/82f3749cc2549f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
