카테고리 없음
프론트엔드 - html, css (웹사이트 만들기4)
리턴 투 개발
2023. 5. 13. 22:54
오늘은 전체적으로 css code로 디자인을 꾸미는 것에 신경을 썼다.
이번에도 css code를 작성하면 알게된 코드가있다. 저번에 사진을 자르는 코드를 알게 되서 큰 도움이 된 것 처럼
이번에 알게 된 코드도 나한텐 큰 도움이 되는 것 같다.
또한 무료 일러스트 사이트를 알게되어서 이번에 일러스트도 사용해보았는데 정말 일러스트가 주는 힘은 엄청난 것 같다.
한순간에 공간이 확 차보이면서 그 존재감을 잘 드러내고 있는 점이 정말 맘에 들었다.
그럼 바로 html code를 공개하겠다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>web browser</title>
<!-- 폰트어썸 아이콘 -->
<script src="https://kit.fontawesome.com/f9dbb42efe.js" crossorigin="anonymous"></script>
<!-- 메인 css6 -->
<link rel="stylesheet" href="main.css">
<!-- 구글폰트 -->
<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=Noto+Sans+KR:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<!--작성자 : 박성현
파일 용도 : 웹 브라우저 메인 화면
코드 작성 날짜 : 2023 - 05 - 10-->
<div>
<!-- 브랜드 로고, 브랜드 명, 메뉴 바, 로그인 및 회원가입 바, 검색 아이콘-->
<nav id=logo-layout>
<div class=logo-container>
<div><a href="#"><i class="fa-brands fa-envira"></i></a></div>
<div class=logo><a href="#">Envira</a></div>
</div>
<div id=menu-layout>
<ul class=menu-container>
<li><a href="#">강의</a></li>
<li><a href="#">로드맵</a></li>
<li><a href="#">멘토링</a></li>
<li><a href="#">커뮤니티</a></li>
<li><a href="#">채용</a></li>
</ul>
<ul class=login-container>
<li><a href="#">로그인</a></li>
<li><a href="#">회원가입</a></li>
</ul>
<div class=search><a href="#"><i class="fa-solid fa-magnifying-glass"></i></a></div>
</div>
</nav>
<!-- 메인 배너 슬라이드 이미지-->
<div id=mainbanner-layout>
<div><img src="/img/메인배너1.jpg" alt=""></div>
<div class=mainbanner-sm-text>고민은 이제 그만 </div>
<div class=mainbanner-bold-text>누구나 쉬운 입문 강의 여기 다 모였다.</div>
<div class=mainbanner-text>어디서부터 시작해야 할지 모르는 당신을 위한 입문 강의</div>
<div class=mainbanner-btn><a href="#">커리큘럼</a></div>
<div class=second-mainbanner-btn><a href="#">강의</a></div>
</div>
<!-- 취업과 관련있는 레이아웃 -->
<div id=main-layout>
<div class=main-container>
<div class=main-sm-text>여러분의 의지를 Envira 협업 기업에서 펼쳐 보세요.</div>
<div class=main-bold-text>누구나 성장과 배움을 평등하게 추구하는 Envira에서 함께 배우고, 나누고, 실행해보세요</div>
<div class=main-text>수강하고 기술 스택은 쌓였는데 어떻게 취업 준비를 해야 하는지 고민이신 분들, Envira에서 제공하는 강의들을 수강 할 시 협업 기업에 취업 할 수 있는 기회를 드리고 있습니다. 여러분의 열정을 Envira와 협업중인 약 300개의 기업에서 펼쳐 보세요, 여러분들을 기다리고 있습니다. 지금 바로 배우고, 나누고, 성장하세요.</div>
<div class=main-btn><a href="#">협업 기업 알아보기</a></div>
</div>
<div class=main-img-container>
<div><img src="img/메인.jpg" alt=""></div>
</div>
</div>
<!-- 자격증 레이아웃-->
<div id=second-main-layout>
<div class=second-main-img-container><img src="img/자격증.jpg" alt=""></div>
<div class=second-main-layout2>
<div class=second-main-container>
<div class=second-main-bold-text>어렵지 않은 자격증 취득 비법!</div>
<div class=second-main-text>직종 관련 자격증 취득은 취업으로 향하는 성공의 비법! 어렵지 않은 방법으로 Envira에서 자격증을 취득해보세요!</div>
<div class=second-main-btn><a href="#">자격증 관련 버튼</a></div>
</div>
<div class=second-main-container>
<div class=second-main-icon>자격증 관련 아이콘</div>
<div class=second-main-name>자격증 이름</div>
<div class=second-main-job>관련 직업</div>
<div class=seond-main-btn><a href="#">바로가기</a>
<div>아이콘</div>
</div>
</div>
<div class=second-main-container>
<div class=second-main-icon>자격증 관련 아이콘</div>
<div class=second-main-name>자격증 이름</div>
<div class=second-main-job>관련 직업</div>
<div class=seond-main-btn><a href="#">바로가기</a>
<div>아이콘</div>
</div>
</div>
<div class=second-main-container>
<div class=second-main-icon>자격증 관련 아이콘</div>
<div class=second-main-name>자격증 이름</div>
<div class=second-main-job>관련 직업</div>
<div class=seond-main-btn><a href="#">바로가기</a>
<div>아이콘</div>
</div>
</div>
<div class=second-main-container>
<div class=second-main-icon>자격증 관련 아이콘</div>
<div class=second-main-name>자격증 이름</div>
<div class=second-main-job>관련 직업</div>
<div class=second-main-btn><a href="#">바로가기</a>
<div>아이콘</div>
</div>
</div>
<div class=second-main-icon-container>
<div>아이콘</div>
<div>아이콘</div>
</div>
</div>
</div>
<!-- 각종 프로그래밍 언어 강의 레이아웃 -->
<div id=third-main-layout>
<div class=third-main-text-container>
<div class=third-main-text>무슨 강의를 들을지 고민이라면?</div>
<div class=third-main-bold-text>Envira Top 강의 보기</div>
</div>
<div class=third-main-container>
<div class=third-main-img-container>
<div class=third-main-img><img src="img/html.png" alt=""></div>
<div class=bold-text>HTML/CSS</div>
<div class=text>프론트엔드 개발의 시작, HTML/CSS.</div>
<div class=btn><a href="#">HTML/CSS 강의 보러가기</a></div>
</div>
<div class=third-main-img-container>
<div class=third-main-img><img src="img/자바스크립트.png" alt=""></div>
<div class=bold-text>JavaScript</div>
<div class=text>웹 동적 처리는? JavaScript!</div>
<div class=btn><a href="#">JavaScript 강의 보러가기</a></div>
</div>
<div class=third-main-img-container>
<div class=third-main-img><img src="img/svelte.png" alt=""></div>
<div class=bold-text>Svelte</div>
<div class=text>프론트엔드 신상 프레임워크, Svelte.</div>
<div class=btn><a href="#">Svelte 강의 보러가기</a></div>
</div>
</div>
<div class=third-main-container>
<div class=third-main-img-container>
<div class=third-main-img><img src="img/타입스크립트.png" alt=""></div>
<div class=bold-text>TypeScript</div>
<div class=text>개발 생산성을 높여주는 TypeScript.</div>
<div class=btn><a href="#">TypeScript 강의 보러가기</a></div>
</div>
<div class=third-main-img-container>
<div class=third-main-img><img src="img/리액트.png" alt=""></div>
<div class=bold-text>React</div>
<div class=text>프론트엔드 대세 라이브러리, React.</div>
<div class=btn><a href="#">React 강의 보러가기</a></div>
</div>
<div class=third-main-img-container>
<div class=third-main-img><img src="img/뷰.png" alt=""></div>
<div class=bold-text>Vue</div>
<div class=text>배우기도 쉽고 생산성도 높은, Vue.</div>
<div class=btn><a href="#">Vue 강의 보러가기</a></div>
</div>
</div>
</div>
<!-- 커뮤니티 레이아웃 -->
<div id=fourth-main-layout>
<div class=fourth-main-text-container>
<div class=bold>현직자에게 직접 듣는 묻고 답해요</div>
<div class=text>110만명의 커뮤니티!! 함께 토론해봐요.</div>
<div class=btn>질문 & 답변 하러가기</div>
</div>
<div class=fourth-main-img-container>
<img src="img/커뮤니티sv.svg" alt="">
</div>
<div class=fourth-submain-textcontainer>
<div class=bold>이번주 커뮤니티 인기글!</div>
<div class=text>매일 업계 선배들 혹은 동료들과 인사이트를 나눠보세요.</div>
</div>
<div class=fourth-submain-layout>
<div class=fourth-submain-container>
<div><img src="img/커뮤니티1.png" alt=""></div>
<div class=bold-text>코플소 ｜코캠러의 프로젝트를 소개합니다!</div>
<div class=text>안녕하세요! 실무 코딩 부트캠프, 코드캠프입니다 :) 어쩐지 요즘은 퇴근 시간에도 해가 안 진다 싶더니 오늘이 바로 낮🌞과 밤🌚의 길이가 같다는 ‘춘분’이래요! 새 학기가 시작하는 계절이기도 한 지금, 여러분은 어떻게 커리어를 준비하고 계신가요?</div>
</div>
<div class=fourth-submain-container>
<div><img src="img/커뮤니티2.png" alt=""></div>
<div class=bold-text>컴공 졸업생들은 어떤 일을 하고 있을까?</div>
<div class=text>혹시 대학교 전공이 컴퓨터 공학이신 분 있나요? 현재 하시는 일 혹은 하고 싶은 일이 전공과 얼마나 관련 있나요? 일반적으로 컴공과 하면 개발자를 떠올리게 되는데요. 오늘은 컴공과 출신인 인프런 팀원들의 사례를 중심으로 컴공 전공자가 어떤 일을 하고 있는지 살펴보려 합니다!</div>
</div>
<div class=fourth-submain-container>
<div><img src="img/커뮤니티3.png" alt=""></div>
<div class=bold-text>웹 디자이너와 웹 퍼블리셔가 자바스크립트 보다 제이쿼리를 잘해야 하는 이유</div>
<div class=text>웹 디자이너, 웹 퍼블리셔, 프론트엔드 개발자 중에 적지 않은 사람이 자바스크립트와 제이쿼리의 용도에 대해 이해하지 못하고 무조건 자바스크립트를 잘해야 하고 제이쿼리는 자바스크립트보다 한 수 아래라고 생각하는 사람이 있습니다. 뭐 그렇게 생각할 수도 있지만 저는 그렇게 생각하지 않습니다.</div>
</div>
<div class=fourth-submain-container>
<div><img src="img/커뮤니티4.png" alt=""></div>
<div class=bold-text>서류합격률이 0% 입니다</div>
<div class=text>제 가설이 틀린 경우는 문제가 될 만한 부분들을 수정하며 고치면서 합격률을 높여야 합니다. 그런 부분들 역시 여러분들에게 공유드리면서 여러분이 참고할만한 자료들을 공유드리겠습니다. OPEN EVENT 프론트엔드 로드맵 강의를 구매하시고 리뷰를 남겨주시면 인프런 멘토링 1회 무료로 진행합니다.</div>
</div>
</div>
<div class=fourth-submain-btn>
<a href="#">인기글 보러가기</a>
</div>
</div>
<!-- 리뷰 레이아웃 -->
<div id=last-main-layout>
<div class=last-main-text-container>
<div class=color>1,234,412 명이
<div>Envira와 함께 합니다.</div></div>
<div class=bold-text>Envira은 강의의 수강생수, 평점을 투명하게 공개합니다. 실제로 많은 온오프라인 학원들은 단기적 성과를 높이기 위해 잘나온 특정 후기만 노출 하거나, 아예 숨겨버리는 경우가 많습니다. 반면 인프런은 강의에 대한 후기, 학생수 등 정보를 투명하게 공개합니다. 신뢰성을 바탕으로 학습자들이 더 좋은 컨텐츠를 선택하고 교육의 질을 높입니다.</div>
<div class=btn><a href="#">수강평 더보기</a></div>
</div>
<div class=last-submain-container>
<div class=last-submain-text-container>
<div class=person>박성현</div>
<div class=name>프론트엔드 개발의 시작, HTML/CSS.</div>
<div class=review>간단하게 전체적인 흐름을 알려주셔서 도움이 되었습니다. 감사합니다.</div>
</div>
<div class=last-submain-text-container>
<div class=person>박성현</div>
<div class=name>웹 동적 처리는? JavaScript!</div>
<div class=review>항상 잘 듣고 있습니다. 남은 강의도 열심히 집중해서 꼭 좋은 개발자가 되도록하겠습니다.</div>
</div>
<div class=last-submain-text-container>
<div class=person>박성현</div>
<div class=name>프론트엔드 대세 라이브러리, React.</div>
<div class=review>전문가 선배에게 꼼꼼하게 배운 느낌이에요 리액트 입문자들에게 너무나도 강추합니다.</div>
</div>
</div>
</div>
<footer>
<div id=footer-layout>
<div class=footer-text-layout>
<div class=footer-text-container>
<div><i class="fa-brands fa-envira"></i></div>
<div class=logo>Envira</div>
<div class=bold>개인정보처리방침</div>
<div class=bold>이용약관</div>
</div>
<div class=footer-subtext-layout>
<div class=footer-text-container>
<div class=text>브랜드명</div>
<div class=text>대표자:박성현</div>
<div class=lasttext>사업자번호:433-81-00421</div>
</div>
<div class=footer-text-container>
<div class=text>통신판매업: 2023-서울강남-3211</div>
<div class=text>개인정보보호책임자:박성현</div>
<div class=lasttext>이메일:errop0@gmail.com</div>
</div>
<div class=footer-text-container>
<div class=lasttext>주소:서울특별시 강남구 113-2 </div>
</div>
</div>
<div class=footer-text-container>
Envira는 배움의 평등을 추구합니다.
</div>
</div>
<div class=footer-icon-container>
<div class=icon><i class="fa-brands fa-google"></i></div>
<div class=icon><i class="fa-brands fa-instagram"></i></div>
<div class=icon><i class="fa-brands fa-youtube"></i></div>
<div class=icon><i class="fa-brands fa-facebook"></i></div>
<div class=icon><i class="fa-brands fa-twitter"></i></div>
</div>
</div>
</footer>
</div>
</body>
</html>오늘은 전체적으로 사이트에 들어갈 문구에대해서 생각하는 시간에 많은 시간을 투여했다.
한 문구가 사이트를 정의 하는 것 같은 느낌을 주는 것 같아서 열심히 문구를 작성했다. 정말 어려운 작업 인 것 같다....
그것들을 제외하면 html에 큰 변동 사항은 없다!!
그럼 바로 css code를 공개하겠다.
CSS CODE
body {
margin: 0;
font-family: 'Noto Sans KR', sans-serif;
}
#logo-layout {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0px 10px 30px;
}
.logo-container {
display: flex;
align-items: center;
}
.logo-container i {
padding: 3px;
font-size: 30px;
border-radius: 10%;
color: #00d07a;
background-color: #04194f;
}
.logo-container a {
text-decoration: none;
margin-left: 5px;
font-size: 25px;
font-weight: bold;
color: #04194f;
}
#menu-layout {
display: flex;
align-items: center;
}
.menu-container {
display: flex;
margin: 0;
padding: 0;
border-right: 2px solid #04194f;
}
.menu-container li {
margin: 0px 10px;
list-style: none;
}
.menu-container a {
text-decoration: none;
font-weight: bold;
color: #04194f;
}
.menu-container a:hover {
color: #00d07a;
}
.login-container {
display: flex;
margin: 0px 10px;
padding: 0;
}
.login-container li {
margin: 0px 5px;
padding: 2px 10px;
list-style: none;
border: 1px solid #04194f;
border-radius: 3px 3px 3px 3px;
font-size: 15px;
color: white;
background: #04194f;
}
.login-container a {
text-decoration: none;
color: white;
}
.login-container li:hover {
border: 1px solid #00d07a;
background: #00d07a;
}
.search a {
padding: 0px 30px;
border-left: 2px solid #04194f;
font-size: 19px;
color: #04194f;
}
.search i:hover {
color: #00d07a;
}
#mainbanner-layout {
display: flex;
flex-direction: column;
position: relative;
max-height: 750px;
overflow: hidden;
}
#mainbanner-layout img {
margin-top: -16%;
max-height: initial;
filter: brightness(50%);
}
.mainbanner-sm-text {
position: absolute;
padding: 2px;
top: 200px;
left: 280px;
border-radius: 5px 5px 5px 5px;
font-size: 17px;
font-weight: bold;
background: #00d07a;
}
.mainbanner-bold-text {
position: absolute;
top: 250px;
left: 280px;
font-size: 45px;
font-weight: bold;
color: white;
}
.mainbanner-text {
position: absolute;
top: 350px;
left: 280px;
font-size: 25px;
font-weight: bold;
color: white;
}
.mainbanner-btn {
position: absolute;
top: 450px;
left: 280px;
}
.mainbanner-btn a {
padding: 10px 50px;
text-decoration: none;
font-size: 16px;
font-weight: bold;
border: #00d07a;
border-radius: 5px 5px 5px 5px;
color: white;
background: #00d07a;
}
.second-mainbanner-btn {
position: absolute;
top: 450px;
left: 480px;
}
.second-mainbanner-btn a {
padding: 10px 50px;
text-decoration: none;
font-size: 16px;
font-weight: bold;
border: #00d07a;
border-radius: 5px 5px 5px 5px;
color: #04194f;
background: white;
}
#main-layout {
display: flex;
justify-content: center;
margin: 100px 0px;
}
.main-container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
margin: 0px 50px;
width: 500px;
}
.main-sm-text {
font-size: 15px;
font-weight: bold;
color: #00d07a;
}
.main-bold-text {
font-size: 26px;
font-weight: bold;
color: #04194f;
}
.main-text {
font-size: 15px;
color: #3c567f;
}
.main-btn {
width: 250px;
padding: 17px;
text-align: center;
border-radius: 5px 5px 5px 5px;
background: #00d07a;
}
.main-btn a {
text-decoration: none;
color: white;
}
.main-img-container img {
max-width: 400px;
max-height: 550px;
filter: brightness(100%);
}
#second-main-layout {
display: none;
/* display: flex; */
/* background: #f9f9f9; */
}
.second-main-img-container {
width: 350px;
height: 550px;
}
.second-main-img-container img {
width: 400px;
max-height: 550px;
filter: brightness(70%);
}
.second-main-layout2 {
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
.second-main-container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
background: #74ff7096;
width: 250px;
height: 400px;
margin: 0px 30px;
}
.second-main-bold-text {
padding: 10px;
font-size: 18px;
}
.second-main-text {
padding: 10px;
font-size: 14px;
color: grey;
}
.second-main-btn {
padding: 10px 20px;
background: white;
}
.second-main-btn a {
text-decoration: none;
color: #00d07a;
}
.second-main-icon-container {
display: flex;
position: absolute;
bottom: 0px;
right: 50%;
margin-bottom: 10px;
}
#third-main-layout {
display: flex;
flex-direction: column;
margin: 100px 0px;
background: #f9f9f9;
}
.third-main-text-container {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 50px;
}
.third-main-text {
font-size: 15px;
font-weight: bold;
}
.third-main-bold-text {
font-size: 25px;
font-weight: bold;
}
.third-main-container {
display: flex;
justify-content: space-evenly;
}
.third-main-img-container {
display: flex;
flex-direction: column;
margin: 50px 0px;
width: 300px;
border: 1px solid #e9ebee;
border-radius: 5px 5px 5px 5px;
}
.third-main-img img {
width: 300px;
height: 200px;
}
.third-main-img-container .bold-text {
margin: 2px 5px;
font-size: 16px;
font-weight: bold;
color: #04194f;
}
.third-main-img-container .text {
margin: 2px 5px;
font-size: 14.4px;
color: gray;
}
.third-main-img-container .btn {
margin-top: 4px;
padding: 8px 10px;
text-align: center;
border-radius: 5px 5px 5px 5px;
font-size: 14.5px;
background: #00d07a;
}
.third-main-img-container .btn:hover {
background: #04194f;
}
.third-main-img-container .btn a {
text-decoration: none;
color: white;
}
#fourth-main-layout {
display: flex;
flex-direction: column;
position: relative;
}
.fourth-main-text-container {
position: relative;
width: 100%;
height: 400px;
background: #00c87f;
}
.fourth-main-text-container .bold {
position: absolute;
top: 90px;
left: 280px;
font-size: 30px;
font-weight: bold;
color: white;
}
.fourth-main-text-container .text {
position: absolute;
top: 160px;
left: 280px;
font-size: 25px;
font-weight: bold;
color: white;
}
.fourth-main-text-container .btn {
position: absolute;
top: 260px;
left: 280px;
text-align: center;
padding: 10px;
width: 200px;
font-weight: bold;
border: 2px solid white;
border-radius: 5px 5px 5px 5px;
color: white;
}
.fourth-main-img-container {
position: absolute;
top: 70px;
right: 280px;
height: 265px;
background: #00d07a;
}
.fourth-main-img-container img {
width: 450px;
height: 265px;
background: #00c87f;
}
.fourth-submain-textcontainer {
position: absolute;
top: 500px;
left: 280px;
height: 80px;
}
.fourth-submain-textcontainer .bold {
margin: 5px 0px;
font-size: 25px;
font-weight: bold;
}
.fourth-submain-textcontainer .text {
margin: 10px 0px 5px 0px;
font-weight: bold;
}
.fourth-submain-layout {
display: flex;
justify-content: space-evenly;
margin: 200px 210px 0px 210px;
padding: 25px 0px;
}
.fourth-submain-container {
display: flex;
flex-direction: column;
background: #f9f9f9;
width: 280px;
height: 350px;
}
.fourth-submain-container img {
width: 280px;
height: 160px;
}
.fourth-submain-container .bold-text {
margin: 10px 0px 15px 0px;
font-size: 15.5px;
font-weight: bold;
}
.fourth-submain-container .text {
font-size: 12px;
}
.fourth-submain-btn {
align-self: center;
text-align: center;
padding: 10px;
border-radius: 5px 5px 5px 5px;
width: 200px;
background: #00d07a;
}
.fourth-submain-btn a {
text-decoration: none;
color: white;
}
#last-main-layout {
display: flex;
justify-content: center;
background: #f9f9f9;
margin: 100px 0px;
width: 100%;
height: 500px;
}
.last-main-text-container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
margin: 0px 50px;
width: 500px;
}
.last-main-text-container .color {
font-size: 30px;
font-weight: bold;
color: #00d07a;
}
.color div {
color: Black;
}
.last-main-text-container .bold-text {
color: grey;
}
.last-main-text-container .btn {
padding: 10px 20px;
text-align: center;
border-radius: 5px 5px 5px 5px;
width: 180px;
background: #00d07a;
}
.last-main-text-container .btn a {
text-decoration: none;
color: white;
}
.last-submain-container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.last-submain-text-container {
width: 580px;
border-radius: 5px 5px 5px 5px;
background: #e9ebee;
}
.last-submain-text-container .person {
padding: 15px 10px;
font-size: 15px;
color: grey;
}
.last-submain-text-container .name {
padding: 10px 0px 5px 10px;
font-weight: bold;
}
.last-submain-text-container .review {
padding: 5px 0px 20px 10px;
font-size: 15px;
}
#footer-layout {
display: flex;
justify-content: space-between;
padding: 0px 20px;
height: 200px;
background: #04194f;
}
.footer-text-layout {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.footer-text-container {
display: flex;
align-items: center;
}
.footer-text-container i {
align-items: center;
font-size: 15px;
color: white;
}
.footer-text-container .logo {
padding: 0px 5px;
border-right: 2px solid white;
font-size: 15px;
color: white;
}
.footer-text-container .bold {
padding: 0px 5px;
border-right: 2px solid white;
font-size: 15px;
color: white;
}
.footer-text-container {
display: flex;
}
.footer-text-container .text {
padding: 0px 5px;
border-right: 2px solid white;
font-size: 13.5px;
color: white;
}
.footer-text-container .lasttext {
padding: 0px 5px;
font-size: 13.5px;
color: white;
}
.footer-text-container {
padding: 0px 5px;
font-size: 15px;
color: white;
}
.footer-icon-container {
display: flex;
align-items: center;
}
.footer-icon-container .icon {
margin: 0px 5px;
}
.footer-icon-container i {
padding: 5px;
border-radius: 50%;
font-size: 30px;
color: #04194f;
background: white;
}오늘 작성한 css코드이다 전체적으로 폰트 사용과, 폰트 사이즈 ,폰트 굵기, padding, margin, border그 외에 것들
정말 많은 부분들을 작성했다. 그중에 초반에 말한 좋다고 한 것은 이것도 이미지에 관련 된 것 인데,
바로 filter: brightness(50%) 해당 컨테이너의 밝기를 낮추는 것 이다.
이게 진짜 좋다고 느낀 것이 메인배너에 텍스트가 강조 되야하는데 글씨가 강조가 안되서 좀 곤란했었는데,
그 때 떠오른게 그럼 밝기를 낮춰볼까해서 구글링으로 찾은 결과물이 바로 filter이다.
밝기를 낮춤으로써 메인배너 텍스트를 더 눈에 띄고 강조되게 할 수 있게 되었다.
이미지는 거의다 포토샵 일러스트로 작업했었는데 이젠 코딩으로 왠만 한 건 다 할 수 있게 됐다 너무 좋다,,,,
정말 공부 할 수록 필요한게 생기고 그걸 알가가고 적용되면 그렇게 기분 좋을 일이 없다.
다 알게 된 것 같으면서도 여전히 공부할게많은것이 코딩같다 꾸준히 하는게 답인 것 같다.
내일은 반응형 미디어 쿼리로 디바이스용 웹브라우저를 생성하고,
그 다음에는 생각해놨던 자바스크립트로 동적인 웹 브라우저를 만들어보겠다.
그럼 오늘까지 작성해서 만들어진 웹브라우저를 공개하겠다.
