#wrapper{ border: 5px solid red}
#wrapper>{ border: 5px solid green}
#wrapper>>*{ border: 5px solid blue}
로다가 웹브라우저의 구성을 알아보기.
배경이미지
를 넣어야 하는데 이미지는 현재 디렉토리가 아니라 부모의 부모 디렉토리에 있음. 부모 디렉토리 참조는 ../ body{background-image: url(../../images/bg.jpg); }이렇게 배경이미지를 가져옴.background-size: cover;로다가 이미지가 반복되지 않고 전부 커버하도록 함 헤더 아이디 아래에 있는 클래스가 아바타인 이미지에 대하여.
이미지를 원형에 가깝게 한다.
#header .avatar img{
border-radius: 30%
}
이미지를 둘러싼
테두리
를 만들려면 이미지 태그를 감싼 span 태그를 사용. #header .avatar {
border-radius: 30%;
display:inline-block;
}
이제 테두리와 이미지 사이의 거리를 주도록 하자 일단 테두리와의 일치를 위해서
display: block;을 이미지에 추가하고 padding: 0.5rem;을 테두리에 추가하자. 1rem이란건 16px을 뜻한다.
테두리의 색과 배경색을 흰색으로. 완성된 코드들.
#header .avatar {
border-radius: 30%;
display:inline-block;
padding: 0.5rem;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.25);
}
#header .avatar img{
border-radius: 30%;
display: block;
}
이제
설명문
을 고칠 차례.글씨의 색을 연한 흰색으로 하고 강조 글을 흰색으로 한다.
강조 글 밑에 점선 추가.웹 폰트도 추가하기.
완성된 코드
#header h1{
font-size: 2.5rem;
color: rgba(255, 255, 255, 0.5);
font-family: 'Hi Melody', cursive;
font-weight: 300;
}
#header h1 strong{
font-size: 3rem;
color: white;
border-bottom: 1px dotted white;
}
아이콘
만들기. 폰텔로 fontello 가서 아이콘 이미지 가져오기. 폰텔로 파일 참조. 아이콘 배경
#header ul.icons li{
display: inline-block;
border-radius: 100%;
색깔
border: 1px solid rgba(255, 255, 255, 0.25);
background-color: rgba(255, 255, 255, 0.05);
크기
width: 1.5rem;
height: 1.5rem
정렬
display: inline-flex;
justify-content: center;
align-content: center;
}
아이콘
#header ul.icons li a{
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
아이콘 글씨
#header ul.icons li .label{
display: none;
}
헤더 정리하기
가운데 정렬하기.
#header{ text-align: center; }
사진 컨텐츠 정리하기.
메인 섬네일, 플렉스
컨텐츠 코드 구성
<!-- Main -->
<section id="main">
<!-- Thumbnails -->
<section class="thumbnails">
</section>
<!-- Footer -->
<footer id="footer">
</footer>
#main .thumbnails{
display: flex;
}
으로 기본적인 사진 정렬. 그런데 이렇게 하면 웹사이트 크기에 관계없이 사진들이 자기 크기를 고수 이걸 바꾸려면.
#main .thumbnails>div{
flex-grow: 1;
}
그러나 이렇게 하면 div의 크기를 제어한 거라 영역의 크기가 커지는 거지 이미지의 크기는 그대로이를 바꾸려면
#main .thumbnails img{
width:100%;
}
이제 디자인을 조금 바꾸는 데 css는 기본적으로 태그에 디자인이 되어 있으므로 이를 없애려면 css 리셋을 해야 한다.
https://meyerweb.com/eric/tools/css/reset/
reset.css 파일 생성.
#main .thumbnails{
display: flex;
}
#main .thumbnails>div{
flex-grow: 1;
margin-right: 1rem;
margin-left: 1rem;
}
#main .thumbnails img{
width:100%;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
#main .thumbnails h3{
border-left: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.5) ;
border-bottom-left-radius: 0.6rem;
border-bottom-right-radius: 0.6rem;
padding: 0.5rem;
text-align: center;
background-color: rgba(255, 255, 255, 0.3);
color: white;
font-size: 1rem;
}
결과물
footer 작업하기.
footer영역과 메인을 나누는 선을 긋기 다만 선은 화면 전체를 쓰지 않고 중간에만 그어야 함.
footer에 그어진 게 아니라 그 안에 있는 before에 선이 그어져 있다
before는 pseudo 클래스
① ::before – 실제 내용 바로 앞에서 생성되는 자식요소
#footer:before{ content: 'abc' }라고 하면 
일케 abc가 요소의 전에 생성이 된다.
따라서 여기에 선의 속성을 지정해주자.
선을 중아에 하기 위한 방법
margin: 0 auto;
마진에 두 값을 넣으면 1번은 위아래 값 2번은 좌우값. 즉 가운데로 오라는 얘기.
#footer{
text-align: center;
color: rgba(255, 255, 255, 0.5);
font-weight: 200;
padding-bottom: 4rem;
font-size: 0.6rem;
}
#footer:before{
content: '';
display: block;
margin: 2rem auto;
width: 10rem;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
마무리 다듬기
웹사이트가 무한정 커지는 게 아니라 일정 크기까지 커지면 확장을 멈춤.
화면을 포함하는 wrapper에 대해서.
#wrapper{ border: 1px solid red; max-width: 68rem; }
68rem 을 넘어서면 사진이 안커지고 웹 사이트 배경만 늘어남.
다만 이러면 왼쪽만 늘어나서 컨텐츠가 쏠리니까.
margin: 5rem auto;을 하면 가운데로 컨텐츠가 모이게 된다.
아이콘에 갖다댔을 떄 색깔이 변하는 기능.
#header ul.icons li:hover{
border: 1px solid rgba(255, 255, 255, 0.25);
background-color: rgba(255, 255, 255, 0.2);
}
반응형 디자인
화면이 작아지면 사진들이 전부다 작아짐, 이때에 모든 사진이 아니라 한 사진씩 보일 수 있도록 하기.@media(max-width:480px){
#main .thumbnails{
display: block;
}
}
미디어 쿼리를 사용해서 480픽셀 이하면 사진들이 화면전체를 쓰도록 함(정렬을 없앰.)
완성
