2022.12.09
오늘 수업내용
템플릿을 보고 실제 코딩해보기!
html시멘틱 구조 알기
scss 익숙해지기 (& , > )
먼저 html 구조에 대해 알아보기 위해서 시멘틱 태그에 대해 알아보자!
시멘틱태그(sementic tag)
가장 혼돈하기 쉽기때문에 한번더 체크!!!
article : 기사, 블로그 등 텍스트 위주의 페이지를 구성할때 주로 사용. (제목 x)
section : 주제, 카테고리 별로 섹션을 구분하는 용도의 태그로 주로 사용. 같은 테마를 가진 여러개의 콘텐츠 (제목 o)
section : 나눌땐, padding-top 값으로 해야함
-->magin값으로 했을 때 section에 있는 내용들이 중첩됨
https://fontawesome.com/v4/icons/ -->아이콘들 찾을 때 필요
https://cdnjs.com/libraries/font-awesome 4.7 버젼 -->cdn 라이브러리 붙여주고~ 최근꺼보다 안정적인걸로 html
템플릿에 들어간 사진들 저장해주고
가장 먼저 html 구조 제일 큰 틀 만들어주기~!!
<body>
<div>
//상단
<header>
</header>
//컨텐츠
<section>
</section>
//하단
<footer></footer>
</div>
</body>
상단에 있는 메뉴들 템플릿 비교해보면서 시작하기!!
5개 name 가진 메뉴들과 찾기버튼 총 6개 메뉴들
그리고 more 눕힌삼각형 클릭하면 3개 메뉴들까지
<li class="nav_items">
<a href="#">HOME</a> </li>
<li class="nav_items">
<a href="#">BAND</a> </li>
<li class="nav_items">
<a href="#">TOUR</a> </li>
<li class="nav_items">
<a href="#">CONTACT</a> </li>
<li class="nav_items">
<a href="#">MORE<i class="fa fa-sort-desc" aria-hidden="true"></i></a>
<ul class="nav_sub_list">
<li class="nav_sub_items">
<a href="#">Merchandise</a> </li>
<li class="nav_sub_items">
<a href="#">Extra</a> </li>
<li class="nav_sub_items">
<a href="#">Media</a> </li>
</ul>html 이정도 정리하면 될듯 하다..
뼈대만 잡았을 뿐인데..시간이 너무 빨리 간다..ㅠㅠ벌써 99%까지 한 느끼은 뭘까...힘내자!! 헷갈리고 지면 안된다!!
scss 메뉴를 꾸며주기!!
마우스를 올리면 색상이 변한다! 오호~
more 마우스를 올리면 메뉴들이 촤르륵 3개가 나온다~
음...이걸 어떡해 해야하나? 예전엔 javascript로 해줘야 했지만 지금은 css도 가능하단 이말씀!!!
#headers {
width: 100%;
position: fixed;
z-index: 10000;
#header_wrapper {
display: flex;
background-color: #000;
justify-content: space-between;
align-items: center;
#nav_list {
display: flex;
.nav_items {
position: relative;
> a {
font-size: 15px;
color: #fff;
padding: 12px 24px; ---> 여기
display: block;
&:hover {
background-color: #ccc;
transition: 0.3s;
}
i {
margin-left: 5px;
}
}
.nav_sub_list {
display: none;
position: absolute;
left: 0;
top: 100%;
text-align: left;
.nav_sub_items {
> a {
background-color: #fff;
color: #000;
padding: 8px 16px; ----> 여기도
display: block;
font-size: 15px;
transition: 0.3s;
&:hover {
background-color: #ccc;
}
}
}
}
&:hover {
> a {
background-color: #ccc;
}
.nav_sub_list {
display: block;
}
}
}
}
#header_search {
button {
padding: 12px 24px;
display: block;
background-color: transparent;
font-size: 15px;
color: #fff;
transition: 0.3s;
&:hover {
background: #f44336;
}
}
}
}
} 
-&+네 다음 형제의 선택자를 찾는것
☆ a 태그는: padding 값을 주게 되면, 높이(위 / 아래)값을 못가짐 (좌 / 우는 가짐) 이때, --> dispaly: block 주면 padding 상하 좌우 값을 갖게 됨
☆ button 아주미세한여백이 생길 수 있기 때문에 일렬로 붙여서 써주는게 필요!!
실무에서 많이 실수하는 부분이기때문에 꼭꼭 기억하기!!! 왜 높이는되는데 좌우가 안되는거야 하면 아하! 오늘 기억하기!!!
그럼 이제 하단으로 가볼까~
sns와 copy 그래서~
아까 위에 icons 링크로 고고~ sns아이콘들 다 찾아줘야함..
<li class="footer_sns_items">
<a href="#" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a> </li>
<li class="footer_sns_items">
<a href="#" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a> </li>
<li class="footer_sns_items">
<a href="#" target="_blank"><i class="fa fa-snapchat" aria-hidden="true"></i></a> </li>
<li class="footer_sns_items">
<a href="#" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a> </li>
<li class="footer_sns_items">
<a href="#" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a> </li>
<li class="footer_sns_items">
<a href="#" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a> </li>마지막 copy 주소까지 하면 큰 뼈대는 마무리~
sns마우스를 올리면 색상이 변한다..음...역시 쉽게 가는법이 없군...
scss로 넘어가자!!
#footers {
background-color: #f1f1f1;
padding: 64px 0;
#footer_sns {
display: flex;
justify-content: center;
.footer_sns_items {
margin: 2.5px;
> a {
color: rgba(0, 0, 0, 0.6);
transition: 0.3s;
font-size: 23px;
&:hover {
opacity: 0.6;
}
}
}
}
#footer_copy {
margin: 15px 0;
> a {
transition: 0.3s;
padding-left: 5px;
text-decoration: underline;
&:hover {
opacity: 0.6;
}
}
}
}지난주에 배운 flex를 잘 기억하면서 하지만 이제 다시 시작한지 2주차..많이 아주 많이많이 써먹어봐야 알것같다..아직까진 바로 타자칠 수 있는 단계는 아니지만 오늘 템플릿 상단, 하단 코딩하면서 flex에 대해 조금은 친해지진 않았을까?
오늘의 수업의 마지막은 메인 베너 넣어보자~
아까 사진 3장 다운받은거 사용해서~
사진 넣고~ 밑에 글자도 함께 넣어서 만든 html 구조는~
<li>
<img src="img/01.jpg" alt="">
<div class="main_banner_text">
<h2>New York</h2>
<p>The atmosphere in New York is lorem ipsum.</p>
</div>
</li>
<li>
<img src="img/02.jpg" alt="">
<div class="main_banner_text">
<h2>Chicago</h2>
<p>hank you, Chicago - A night we won't forget.</p>
</div>
</li>
<li>
<img src="img/03.jpg" alt="">
<div class="main_banner_text">
<h2>Los Angeles</h2>
<p>We had the best time playing at Venice Beach!
</p>
</div>
</li>사진 크기랑 글자위치 여백 등 css로 쑝~
#main_banner {
padding-top: 44px;
width: 100%;
ul {
height: 100vh;
position: relative;
max-height: 960px;
li {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
> img {
width: 100%;
}
.main_banner_text {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 60px;
color: #fff;
}
}
}
} ▶ vh, vw
//vh :현재 내가 보고 있는 브라우저의 높이
//100vh ===900px;
//나의 현재 브라우저의 높이 500px
//100vh === 500px;
//vw 나의 현재 브라우저의 넓이가 :1920px;
//100vw ===1920px; (넓이 + 스크롤바 크기)
오늘 수업했던 결과물은..짜잔~
html부터 scss 완성된 결과물 보니 뿌듯하다..아직 할게 80%남았지만..
오늘 수업한 내용들 다 주석처리하고 처음부터 다시 시작하면서 벨로그로 하나씩 다시 기록해나가니
처음 시작할때 막혔던 막연했던 것보다 막히면 찾아보고 다시 시작하다보니 벌써 정리 끝났다.
다음 수업은 조금 더 어려워질 거 같지만...무서워하지말고 ! I can do it!!
