웹 개발 레시피-3 (사진 중심의 웹사이트 만들기)

#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%
}

이미지를 둘러싼

테두리

#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;
}

아이콘

아이콘 배경
#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 클래스

http://blog.hivelab.co.kr/%EA%B3%B5%EC%9C%A0before%EC%99%80after-%EA%B7%B8%EB%93%A4%EC%9D%98-%EC%A0%95%EC%B2%B4%EB%8A%94/

① ::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픽셀 이하면 사진들이 화면전체를 쓰도록 함(정렬을 없앰.)

완성