5강 : div를 이용한 네모네모 디자인
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<link href="css/main.css" rel="stylesheet">
</head>
<body style="background-image:url('source/backgroundsea.jpeg');">
<img src="source/Myselfie.jpeg" class="profile">
<h1 class="title">future fullstack developer</h1>
<h3 class="ido"> insidepixce</h3>
<p class="texty">우리의 찬란한 일기(본문)<a href="https://insidepixce.tistory.com/">이동하기</a></p>
<p class="title"><strong>동서대학교 정보보안학과 1학년<br>코딩을 정복하고 말테야!</strong></p>
</body>
</html>이 상황에서 div를 사용해서 네모네모 디자인을 만들어보자
<div></div>
<p> 태그들 밑에 <div>태그를 넣어주었다. 지금은 가로세로 길이가 없어서 아무것도 안 보인다.
<div class="box"></div>
먼저 div 태그 안에 class를 지정해주었다.
.box {
width: 500x;
height: 500px;
background-color:#0C70F2 ;
padding: 40px;
border: 10px dotted white;
border-radius: 25px;
opacity:0.5;
display: block;
margin-left: auto;
margin-right: auto;
}
디자인은 이렇게 해주었다.
제목란
잘 적용된 것을 알 수 있다.
- 중앙 정렬 하는 3줄
margin-left: auto;
margin-right: auto;
display: block;
박스 안에 글자를 추가해보았다
<div class="box">
<p>don't ever say it's over if i'm breathin</p>
- Inherit
따로 뭔가를 지정하지는 않았는데 , 투명도까지 그대로 상속하게 된다. (일부 스타일만) 이를 inherit이라고 한다 .
.texty {
text-align: center;
color: black;
font-weight: bolder;
opacity: 1;
}
<p class= "texty"> don't ever say it's over if i'm breathin</p>
texty라는 클래스에 opacity(투명도) 값을 1로 줘봤지만 여전히 투명하게 떠서 , 이유를 알아본 결과
opacity 속성이 .box 클래스에 설정되어 있기 때문이라는 답변을 찾았다. opacity 속성은 요소 내의 모든 콘텐츠에 적용되며, 따라서 요소 내의 텍스트도 투명해지게 된다.
대안으로 RGBA 를 사용할 수 있다.
.box {
width: 500px;
height: 500px;
background-color: rgba(12, 112, 242, 0.5); /* 반투명한 파란색 */
padding: 40px;
border: 10px dotted white;
border-radius: 25px;
display: block;
margin-left: auto;
margin-right: auto;
}
Rgba값으로 변경해주고, <p>태그에 opacity를 설정해 주었다(사실 설정 안 해줘도 불투명하게 잘 나온다)
이렇게 잘 나온걸 볼 수가 있다.
흠… 뭔가 딥웹에 있을법한 디자인이다 ;;
여기서 좀만 더 다크하게 하면
send your bitcoin 버튼 있을 것 같은 느낌
이런 느낌으로 바꾸어주었는데 사실 사진이 없는 게 더 예쁠 것 같단 생각이 들었다
.box {
width: 500px;
height: 500px;
background-color: rgba(12, 112, 242, 0.5); /* 반투명한 파란색 */
padding: 20px;
box-shadow: 0 0 0 5px rgba(1, 1, 0, 0.5);
border-radius: 25px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
Css에서는 투명한 테두리를 지원하지 않는다고 해서 다른 방법을 찾다가 box-shadow 를 알게되어 사용해보았다.
좀 잘 어울리는것 같다.
사진은,,,뭐 빼야지
2030에 만들어진 웹사이트처럼 생겼다…
아직도 딥웹 비트코인 세탁소 느낌을 버리지 못한 나의 웹.
디자인만 할 때는 이런 고민 안 했는데 ㅠ
일단 이번 강의는 여기까지.
'2023 공부한것들' 카테고리의 다른 글
| [02-5] 자바스크립트의 특징 (0) | 2023.06.27 |
|---|---|
| 20230626 오전 회고록 (0) | 2023.06.26 |
| [02-4] 자바스크립트와 ECMAScript (0) | 2023.06.26 |
| [02-3] 자바스크립트 성장의 역사 (0) | 2023.06.26 |
| [02-2] 자바스크립트의 표준화 (0) | 2023.06.26 |