예제)
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<div class="slogan">
<h2>LOREM IPSUM</h2>
<h1>Travel</h1>
<p>The inspirational adventures around the world</p>
</div>
</header>
<main class="container">
<section class="about_us">
<h2>About me</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, </p>
<p><a href="" class="more">READ MORE</a></p>
<img src="images/about_me.jpg" alt="">
</section><!--about_us-->
<Section class="lastest_article">
<h2>Lastest article</h2>
<ul>
<li>
<img src="images/latest_article_01.png" alt="">
<h3>Lorem Ipsum Dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur pisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
.in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<a href="">READ MORE<img src="images/more_arrow.png" alt=""></a>
</li>
<li>
<img src="images/latest_article_02.png" alt="">
<h3>Lorem Ipsum Dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur pisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
.in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<a href="">READ MORE<img src="images/more_arrow.png" alt=""></a>
</li>
<li>
<img src="images/latest_article_03.png" alt="">
<h3>Lorem Ipsum Dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur pisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
.in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<a href="">READ MORE<img src="images/more_arrow.png" alt=""></a>
</li>
</ul>
</Section><!--lastest_article-->
<section class="contact">
<img src="images/contact.jpg" alt="">
<form action="">
<h2>Contact</h2>
<div class="field">
<label for="username">name</label>
<input type="text" id="username" placeholder="Your name">
<label for="useremail">email</label>
<input type="text" id="useremail" placeholder="Your email">
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="" id="message" cols="30" rows="10"></textarea>
</div>
<button>SEND MESSAGE</button>
</form>
</section><!--contact-->
</main>
<footer>
<ul class="sns_links">
<li><a href=""><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
<li><a href=""><i class="fa-brands fa-instagram"></i></a></li>
<li><a href=""><i class="fa-solid fa-p"></i></a></li>
</ul>
</footer>
</body>
</html>
1. 준비하기
1-1. 레이아웃 구조 파악
디자인의 파일에서 본문 전체의 너비와 실제 콘텐츠들의 너비가 일정한 규칙을 가지고 작성되었는지,
규칙이 있다면 브라우저 너비에 상관없이 실제 콘텐츠들의 너비가 몇 px인지 파악한다.
이때 그리드 시스템을 사용했다면 해당 그리드의 전체 너비, 개수, 간격 등을 파악한다.
1-2. 레이어와 그룹 파악
코딩하기 편하도록 내용들이 HTML5의 시멘틱 태그 명으로 구분되어 있는지,
해당 내용의 의미에 따라 분류가 되어 있다면 해당 태그명을 참조하여 디자인하면 수월하다.
레이어와 그룹의 이름을 보고 이후 코딩을 할 때 클래스 명과 아이디 명으로 활용하기 쉽도록
영문으로 되어 있으면 더 편하다.
1-3. 폰트, 텍스트, 아이콘 파악(예제 아이콘은 폰트어썸을 사용)
코딩에 친화적인 디자인은 사용한 글씨들이 웹에 친화적인 웹 폰트를 사용한 것이다.
대표적인 웹 폰트로는 google과 adobe가 있다.
만약 웹 폰트를 사용하지 않았다면 코딩 시에 웹 폰트로 변환하는 과정을 거쳐야 한다.
이 때 한글 폰트는 웹 폰트로 변환하면 크기가 지나치게 커지는 경향이 있기 때문에 주의해야한다.
특별한 케이스가 아니라면 한글은 모두 웹 폰트를 사용하고, 웹 폰트를 사용하지 못할 경우 해당 폰트를 구현하되
해당 폰트가 웹 페이지에 사용하는 부분이 적다면 이미지로 저장하는 것도 방법이다.
1-4. 이미지 준비하기
완성된 이미지를 참조하여 필요한 이미지를 저장해야 한다.
이 때 디자인에서 표현된 크기를 그대로 사용할 지 아니면 별도의 다른 사이즈로 변환할 지 판단해야 한다.
이 판단은 이후 구현시, 해당 이미지가 어떻게 표현되는지에 따라 달라진다.
이 때 파악된 상황에 맞춰 저장을 할 때 현재 디자인에 적용된 이미지 해상도가 적절한 지 파악하고
만약 맞지 않는 부분이 있다면 해당 이미지를 새롭게 만들거나 디자이너에게 별도로 요청해야 한다.
2. 디자인 확인 및 HTML 작성하기
2-1. 이미지 저장하기
코딩에 앞서 필요한 이미지를 저장해야 한다.
포토샵 디자인에서 이미지를 저장할 때는 빠른 웹 사이트 로딩을 위해 이미지를 최적화해야 한다.
해상도를 유지하며 파일 크기가 작을 때 최적화 하기에 적합하다.
| 확장자 | 특징 |
| gif | 16컬러 이하 이미지(투명, 불투명) 이미지 주변에 찌꺼기가 생긴다. |
| png | 16컬러 이상 투명 이미지 |
| jpg | 16컬러 이상의 고해상도 이미지 가장 압축률이 높은 만큼 이미지 손상이 있을 수 있다. |
| svg | 확대 축소 시에도 깨지지 않는 벡터 이미지 |
포토샵에서 drop shadow로 표현되어 있는 그림자는 CSS에서 구현하는 것이 좋다.
그림자까지 포함하여 이미지를 저장하면 이미지 파일의 크기가 커지기 때문이다.
2-2. 레이아웃 구조 작성하기
section태그는 반드시 제목을 포함하고 있어야 한다. 만약 제목이 없으면 이후 웹 표준 검사시 경고가 나타난다.
배경을 브라우저 너비에 따라 자연스럽게 지정한 높이를 유지하며 전체 너비를 사용할 수 있는 방법은
CSS에서 해당 태그의 배경으로 처리하는 것이다.
배경을 img 태그로 작성하면 지정한 높이를 유지하며 전체 너비를 표현하기가 쉽지 않다.
3. 디자인 참조하여 CSS 작성하기
3-1. CSS RESET
기본적으로 구현되어 표현되는 margin, padding, font-size 등을 초기화 해야 디자인의 속성을 그대로 반영할 수 있다.
대표적 CSS reset
| 구분 | 설명 |
| 1) https://meyerweb.com/eric/tools/css/reset/ |
20110126 생성된 저작권 프리 소스 거의 모든 태그들의 CSS 속성을 초기화한다. 특히 margin, padding, font-size, line-height, border 등을 초기화 |
| 2) https://necolas.github.io/normalize.css/ |
크로스 브라우징에 초점을 두고 최근 표준에 맞춰 CSS를 초기화한다. meyerweb의 css reset보다는 느슨하게 초기화를 진행하여 margin, padding, font-size등이 대부분 그대로 유지된다. |
적용법
CSS폴더에 main.css, reset.css를 생성한다.
1)에서 CSS reset부분을 복사하여 reset.css로 저장한다.
2)에서 Download 버튼에서 마우스 우클릭 후 다른이름으로 링크 저장하여 해당 파일을 CSS폴더로 이동한다.
main.css에서 해당 파일들을 로드한다.
(헷갈리면 공부 - 따라해본 과제덜 - 코딩은 처음이라 - PART6 - 예제 - psd_to_html - site 폴더 안의 css 보면 됨!)
3-2. layout과 typography
디자인에 사용된 폰트를 확인하고 해당 폰트가 웹 폰트가 아니라면 웹 폰트로 변환하고,
웹 폰트라면 해당 폰트를 로드해야 한다.
@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans&family=Raleway:wght@400;700&display=swap');
이런 식으로 우선 레이아웃, 폰트, 링크와 버튼, 폼 등의 공통적인 스타일을 확인하고 해당 스타일을 먼저 작성한다.
이렇게 하면 CSS 작성 시 중복을 피할 수 있고, 이후 유지 보수할 때는 공통의 스타일을 수정하면 편하게 수정할 수 있다.
디자인에서 크기, 색상, 폰트 확인하기
크기:
Move(m)툴이 선택된 상태에서 ctrl을 누른 상태로 크기를 알고 싶은 요소를 클릭한다.
(예제에서는 About me 사각형의 가로너비가
전체 main의 공통 가로너비니까 이걸 본다.)
그렇게 해당 레이어만 선택 후
(포토샵 상단 왼쪽의 Auto-select에 layer로 되어 있어야함)
ctrl을 누른 상태에서 레이어창의 썸네일 부분을 클릭하면 선택 영역이 만들어진다.
그리고 F8을 눌러 크기를 확인한다.
색상:
전체 배경색은 스포이드툴로 배경색을 클릭 후
color picker에서 색상을 확인한다.
(해당 예제에서는 body에 배경색으로 지정함)
본문 글씨의 색상은 type tool로 텍스트 부분 클릭 후 Ctrl+T로 캐릭터 패널을 오픈하고
color 부분을 클릭하여 색상확인 하면 됨
폰트도 폰트 컬러 딸 때와 마찬가지로 character패널을 보면 되는데
화살표로 표시한 부분이 line-height 이다.
여기까지 알아낸 결과로는 다음과 같이 CSS를 작성할 수 있다.
3-3. link와 button
디자인에서 링크와 버튼 중 동일한 스타일을 지닌 요소를 확인하고 동일한 클래스 명이 있는지 확인한다.
없다면 추가하여 해당 클래스 명의 스타일을 지정한다.
예제의 디자인을 확인하면 read more과 send messae 부분이 동일한 스타일이다.
HTML에서 둘 모두에게 동일 클래스 명을 지정 후 포토샵에서 btn의 스타일을 확인해본다.
READ MORE요소의 사각형 레이어의 썸네일 부분을 ctrl+클릭하여 확인해보면 가로 180px 세로 55px로 확인된다.
테두리 부분까지 55px인지 정확히 확인하기 위해서는 스티커로 표시한 strok 부분을 더블클릭하여 선의 위치를 확인한다.
stroke 더블클릭하면 뜨는 Layer Style 창.
Position 부분을 확인하면 선이 55px 안쪽(Inside)로 만들어진 것을 확인할 수 있다.
Color 부분을 클릭하면 테두리 색상도 확인할 수 있다.
글자 양 옆의 공간(padding)은 선택 툴로 선택 영역을 만들어서 확인한다.
이 때 테두리 안쪽부터 글자까지의 공간을 확인한다.
앞서 확인한 .btn의 총 높이가 55px이기 때문에 line-height는 54px를 지정했다.
그러면 링크의 content인 글자가 54px를 사용하고
그 content 바깥영역에 1px 두께의 테두리(border)가 생성되어 총 높이가 55px가 되는 것이다.
(padding의 상하에는 0을 주는 것도 같은 이유)
3-4. form
예제의 form 부분에서 input 스타일도 공통으로 설정한다.
디자인에서 입력 창의 크기를 확인하기 위해 글씨를 기준으로 높이를 선택툴로 재보면 높이 55px에 맞춰있다.
선 스타일은 선 레이어를 선택하고 해당 레이어의 썸네일 부분을 더블클릭하면 색상을 확인 할 수 있다.
(레이어창으로 opacity도 확인가능함)
label은 화면에 보이지 않도록 하는다.
input, textarea는 모두 인라인 요소이기 때문에 padding, line-height 등이 제대로 반영되지 않아
display:inline-block를 적용한다.
3-5. header 스타일
header bg에 적용된 클리핑 마스크가 있다.
사각형의 크기를 확인하면 세로 높이가 944px인 것을 알 수 있다.
944px를 높이로 지정하지 않고 사용자 브라우저 화면 세로 높이를 사용할 때는 100vh로 지정하면 된다.
slogan의 높이를 확인해보면 964px이다.
개발자 도구로 확인해보면 화면 가운데 정확히 배치되어 있다.
이제 slogan의 스타일을 작성하면 된다.
slogan의 테두리를 확인하기 위해 레이어 패널을 확인해보면 stroke 스타일이 없다.
해당 레이어는 레이어스타일로 테두리를 만든 것이 아니라 생성을 할 때부터 테두리를 지정한 것이다.
이런 경우 shape tool을 선택하고 상단의 stroke 속성에서 색상과 두께를 확인한다.
스티커로 표시한 컬러 피커에서 색상도 알 수 있다.
h2 요소를 기준으로 선을 만들기 위해 position: relative로 설정하고 아래 여백을 추가한다.
h2요소를 기준으로 가상으로 공간을 만들고(content:"" , position:absolute)
가운데 오도록 transform의 translateX(가로측)으로 자신의 크기의 50%만큼 왼쪽(음수)으로 이동시켜 정중앙에 배치한다.
h1태그의 높이가 디자인과 똑같이 나오도록 font-size와 line-height를 확인하고, 설명 문구의 스타일을 지정했다.
헤더의 스타일은 완성
3-6. main content 영역 스타일 ( 예제 - About me 영역 )
About me 영역은 .about_us의 배경과 내부의 여백을 먼저 설정하고 제목, 본문, 링크의 스타일 순서를 작성한다.
포토샵에서 이동 툴 선택 후 About me의 배경을 클릭하면 해당 shape가 있는 레이어가 선택된다.
확인된 레이어의 썸네일 부분을 더블클릭하여 배경색을 확인한다.
그 후 내부의 여백을 확인하는데 해당 레이어의 높이를 확인하는 것보다는
내부의 콘텐츠 공간이 확인되면 자연스럽게 높이가 반영되도록 하는 것이 좋다.
그래야 이후 내용이 늘어나거나 반응형으로 구현할 때 너비가 줄어도 높이가 자연스럽게 변경되도록 할 수 있기 때문이다.
내부공간은 선택 툴을 이용하여 선택 영역을 만들어보면서 확인한다.
이때 About me 제목의 공간을 있는 그대로 확인하면 안된다.
왜냐면 About me의 폰트 사이즈를 확인하고 그 폰트 사이즈에 맞춰 line-height를 그대로 반영할 것이라서
해당 제목의 높이는 폰트 사이즈와 동일하게 잡히기 때문에 font-size를 확인하고
그 수치만큼 제목이 차지할 공간을 확인하고 그 위 공간이 내부의 여백이 되는 것이다.
제목의 폰트 사이즈 type tool을 선택 후 제목 부분을 클릭하여 확인하면 60px이다.
그러면 선택 툴로 60px를 만들고 가이드를 생성한 후 여백을 확인한다.
CSS에서 line-height를 지정하면 해당 타이틀이 차지할 공간이 1번
해당 공간 위쪽인 2번이 About me 요소의 내부여백이 되는 것이다.
제목<h2>의 스타일을 설정하는데 디자인을 보면 제목들의 스타일은 모두 동일하므로
html에서 각 제목에 동일한 클래스 명을 추가한다.
h2제목을 기준으로 :after선택자를 이용하여 가상의 공간을 만들고 크기, 배경색을 지정하여 선을 생상했다.
위치는 제목 기준으로 60px보다(100%) 17px 더 아래에 있도록 top값을 지정했다.
제목의 스타일은 공통의 스타일로 생각해서 CSS 상단의 TYPOGRAPHY에 작성했다.
이제 About_us 내부의 문단의 너비를 확인하고 문단들의 간격을 확인하고 지정한다.
문단의 line-height가 28px이기 때문에 감안해서 간격을 확인해줘야 한다.
문단의 너비는 type tool로 문단을 클릭하면 ifno창에서 확인할 수 있다.
이미지의 위치도 확인하여 기준 위치(.about_us)에서 어느 거리에 있는지 확인하고 지정한다.
기준 위치 상단에서 바깥으로 54px, 기준 위치 오른쪽에서 안쪽으로 63px 나가 있다.
About me의 배경을 구성하는 사각형 shape와 img의 그림자가 적용되어 있으며
같은 스타일의 그림자가 contact의 배경과 img에도 적용되어 있다.
이런 경우 동일한 클래스 명을 추가하여 스타일을 설정한다.
포토샵에서 drop shadow속성을 확인하려면 fx 부분에 drop shadow 항목을 더블클릭한다.
확인해보면 각도 120도, distance 0, spread 0, size 80으로 되어 있다.
포토샵의 drop shadow속성을 css속성으로 100% 매치해서 변환할 수 있는 것은 없다.
CSS에서 적용하려면 그림자가 원본에서 x축, y축으로 얼만큼 거리에 있는지 확인하고 blur값과 size값을 지정해야 한다.
더 쉽게 shadow속성을 확인하려면 아래 사이트에 접속하여 포토샵의 수치를 그대로 입력하면 css값을 알려준다.
http://psd-to-css-shadows.com/
Convert Photoshop Drop Shadows to CSS3 Box and Text Shadows
CSS3 Code box-shadow: offset-x offset-y blur-radius spread-radius rgba(0, 0, 0, opacity) inset; text-shadow: offset-x offset-y blur-radius rgba(0,0,0 opacity); box-shadow: offset-xpx offset-ypx blur-radiuspx spread-radiuspx rgba(0, 0, 0, opacity) inset; te
melanieceraso.com
body의 배경색이 짙어서 설정한 그림자가 잘 확인이 안 되지만
개발자 도구에서 임시로 body의 배경색을 지워보면 생성한 그림자를 확인할 수 있다.
3-7. main content 영역 스타일 ( 예제 - Latest articles 영역 )
디자인을 살펴보면 제목이 가운데 있고 리스트가 가로배치되어 있다.
h2에 text-align:center하면 쉽겠다 생각할 수 있지만 글씨는 가운데로 와도
h2요소를 기준으로 위치를 잡고 있는 밑줄은 절댓값으로 되어있기 때문에 Latest의 L 밑에 정확히 배치할 수 없다.
그래서 부득이 h2 요소 자체를 절댓값으로 가운데로 배치하는 수밖에 없다.
리스트 가로배치는 리스트 하나의 너비와 간격을 확인하고 float를 이용하여 배치한다.
이 때 가운데 요소는 아래로 조금 내려와 있어서 해당 요소의 position과 top값을 지정한다.
전
후
다음으로 li 요소의 자식 요소들의 스타일을 설정한다.
이미지 아래 여백을 지정하고 제목의 스타일을 작성한다.
이 때 제목의 밑 선은 절댓값으로 만들고 지정한다.
선이 공간을 차지하지 않도록 하고 h3의 line-height로 만들어지는 공간을 그대로 유지하고
밑의 설명과 간격을 지정하기 위해 선을 절댓값으로 만드는 것이다.
h3의 보더 속성을 추가해도 무방하다.
3-8. main content 영역 스타일 ( 예제 - contact 영역 )
배경색과 내부의 여백을 확인하고, 클래스명 contact를 기준으로 절댓값으로 배치할 img요소의 위치를 확인하여 적용한다.
form 요소의 너비도 확인 후 오른쪽으로 배치하기 위해 왼쪽에 마진을 auto로 설정한다.
form 요소의 input, textarea의 스타일은 앞서 공통 요소의 스타일 작성할 때 기본적인 스타일 구현은 끝났기 때문에
여기서는 너비, 간격, 높이 등을 지정하면 된다.
같은 타입들 중 첫 번째와 두 번째를 선택하기 위해 first-of-type, last-of-type을 사용했다.
textarea의 높이를 지정하고 크기가 반영되도록 disply:block을 추가했다.
3-9. footer 영역 스타일
현재는 li가 블록요소로서 브라우저의 한 블록을 쓰고 있기 때문에 세로로 나열된 상태이다.
포토샵에서 sns 리스트의 간격을 확인하면 32px로 확인된다.
float 대신 display속성을 이용해서 li요소를 글씨 취급하고 그 부모에서 text-align:center을 이용하여 가로배치한다.
글씨로 취급하면 margin을 적용하지 않아도 단어와 단어 사이의 간격이 약 2-3px정도 있기 때문에
li요소의 간격을 좌우로 15px을 적용하여 사이 간격인 32px정도가 되도록 한다.
완성 예제를 보고 hover 시 디자인을 확인하고 스타일을 지정한다.
디자인 예시와 완전 동일하게 완성되었다.(PART6. 예제폴더확인)
'Study > 예제' 카테고리의 다른 글
| [ChatGPT] 간단한 웹사이트 만들기 [bootstrap기반, Github 배포까-쥐] (0) | 2023.05.05 |
|---|---|
| [예제] Starbucks 메뉴 스타일 구현하기 (0) | 2023.05.04 |
| [slideshow] innerHTML, innerText, 템플릿 리터럴(``) 외 슬라이드 관련 함수들 (0) | 2023.05.01 |
| [back to Top] scrollTo 외 스크롤 관련 함수들 (0) | 2023.05.01 |
| [modal] data-, pointer-events, getAttribute, setAttribute (0) | 2023.05.01 |
