[HTML,CSS기초]7-2.오늘의 일기
결과물
주요코드
<div class="title">오늘의 일기</div>
//css
.title{
background-color:rgb(52, 175, 185);
height:50px;
width:1500px;
position: fixed;
top: 0px;
line-height:50px;
font-weight:bolder;
font-size:30px;
}
<div class="title">오늘의 일기</div>
//css
.title{
background-color:rgb(52, 175, 185);
height:50px;
width:1500px;
position: fixed;
top: 0px;
line-height:50px;
font-weight:bolder;
font-size:30px;
}
:title클래스에 position을 fixed로 함으로 스크롤을 내려도 title클래스는 위치가 고정된다.
그리고 heigh = line-height 이면 글씨가 div의 수직 중간에 위치한다.
//css
.box{
width: 500px;
height:800px;
background-color: lightgray;
margin: auto;
}
: box클래스는 회색배경을 나타내는 클래스로 margin:auto 로 설정함으로써 회색배경이 화면 중간에 위치한다.
//css
.box img{
position:relative;
top: 10px;
left: 10px;
}
: box클래스내부의 img
태그에 대한 style으로 postion:relative로 설정해서 위치를 조정하였다.
Author And Source
이 문제에 관하여([HTML,CSS기초]7-2.오늘의 일기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sue06004/HTMLCSS기초7-2.오늘의-일기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)