0)서문
오늘은 javascript을 실습하여 홈페이지를 만드는 것을 하였는데 뭐랄까 html 이랑 CSS는 이제 어느정도 익숙해져서 요령껏 보고 따라할수 있을거같은데 Javascript는 아직까지 미숙한 탓에 봐도 이해가 안가는 부분이 많아서 따라하기가 어려웠다
javascript는 여전히 공부할부분이 많고 실제로 적용해야할 것도 많아서 어느정도 어렵게 느껴지는 것 같다.그렇지만 어렵다고 포기 할 생각은 없다. 끊임없이 도전해 JAVASCRIPT를 정복하리라.
1) 학습한 내용
/ 섹션 영역 전체 글꼴과 배경색 설정 끝 /
/ 섹션 영역 전체 제목 설정 /
section .title{
margin-bottom:3rem;
}
section .title h4{
font-size:1.35rem;
color:#ed4848;
position:relative;
}
section .title h2{
font-size:3.5rem;
}
section .title p{
font-size:1.15rem;
}
본문은 텍스트와 이미지를 왼쪽과 오른쪽으로 나눕니다.
이를 about-self 클래스 하위에 left 클래스와 right 클래스로 구분합니다.
이 부분은 float 속성으로 레이아웃을 분할하고 각각 너비의 절반씩 차지하도록 지정 /
/ float 속성 해제 /
section .about-self::after{
content:"";
clear:both;
display:block;
}
/ 본문 너비 절반 지정 & 왼쪽 배치 /
section .about-self .left{
width:50%;
float:left;
}
/ 이미지 크기가 부모 영역을 넘지 않도록 부모 영역의 최대 크기로 지정 /
section .about-self .left img{
max-width:100%;
}
/ 본문 너비 절반 지정 & 오른쪽 배치 /
section .about-self .right{
width:50%;
float:left;
padding:0 2rem;
}
/ About Me 영역 본문 세부 /
/ 본문 오른쪽 h3 태그의 글자 크기와 여백 지정 /
section .about-self .right h3{
font-size:2.25rem;
margin-bottom:1rem;
}
/ 본문 오른쪽 h3 태그의 strong 태그 색상 강조 /
section .about-self .right h3 strong{
color:#ed4848;
}
/ 본문 오른쪽 p 태그의 크기와 여백 지정 /
section .about-self .right p{
font-size:1.15rem;
margin:1rem 0;
}
/ 본문 오른쪽의 아이콘 폰트 크기와 여백 지정 /
section .about-self .right .social a{
font-size:2.5rem;
margin-right:0.2rem;
}
/ header.css /
*{
margin:0;
padding:0;
box-sizing:border-box;
}
a, a:link, a:visited{
color:inherit;
text-decoration:none;
}
li{
list-style:none;
}
/ 기준 너비를 유지하는 역할 /
.container{
width:1140px;
margin:0 auto;
}
/ 스크롤 내리더라도 상단 고정 /
header{
/position:absolute; // 13.3.3 absolute -> fixed /
position:fixed;
/ color:black;/ / 13.3.3 black -> white / /main 적용 후에 white로 변경 /
color:white;
top:0;
z-index:1; /header가 위로 오게 하기 위해 지정 /
width:100%;
padding:1rem;
}
header .container{
display:flex;
justify-content:space-between; /양 끝으로 배치 /
align-items:center; /수직정렬/
width:100%;
}
header nav ul{
display:flex; /메뉴 가로 배치/
}
header nav ul li{
padding:10px;
}
header button{
background: transparent;
border:0;
cursor: pointer;
/ 13.3.3 에서 추가/
color:white; /main 적용 후에 white로 변경 /
}
header h1 button{
font-size: 2rem;
font-weight: bold;
}
header nav ul li button{
font-size: 1.2rem;
}
/ 13.10.2에 추가- js 적용할 때 그 때 아래부분 작성하기 /
header.active{
background-color:rgba(0,0,0);
animation:fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn{
0%{
opacity:0;
}
100%{
opacity:1;
}
}
/ End header.css /
2) 학습내용 중 어려웠던 점
오늘 여전히 자바스크립트가 복잡하고 어려웠다. 완벽하게 익숙해지는데 좀 시간이 걸릴꺼라 생각이든다.
3) 해결방법
복습 복습
4) 학습소감
오늘 강의를 들으면서 여전히 공부할거리가 많다고 느껴졌다 더 많이 공부해야겠다고 생각이들었다.
