2023. 5. 25. 00:39ㆍ저는 HTML으로 디자인 합니다
HTML5/CSS3 연습을 위해 뉴스레터 만들기 도전!
우선 뉴스레터의 목적은,
잠재 고객 및 기존 고객에게 더 많이 접근할 수 있는 방법을 찾고 있다면 뉴스레터는 현재 뉴스, 팁, 제품, 서비스를 더 많은 고객과 공유할 수 있는 이상적인 방법입니다. 프린트된 뉴스레터 또는 이메일 뉴스레터로 수익 또는 판매량, 홈페이지 트래픽, 브랜드 인지도 등을 높임으로써 주된 비즈니스 목표를 달성할 수 있습니다.
출처 : 셔터스톡
하단 이미지들은 핀터레스트에서 찾은 뉴스레터 디자인들이다. 새로운 소식, 이벤트 뿐만 아니라 서비스 회원가입 메세지, 비밀번호 찾기(특히 비밀번호 찾기 할 때 많이 보인다), 금융쪽에서는 거래 내역 등등 이메일로 날라오는 소식을 그냥 텍스트로 전달하는게 아니라 브랜드 아이덴티티를 살려서 배경을 디자인을 한다.
우선 아래는 완성본~~!! 반응형 고려X 컴포넌트화X 일단 HTML으로 구조 잡고 만들었기에 1-2시간 정도 걸린듯하다.
처음 구조 잡을 때는 단순하게 잡았다. 먼저 피그마에서 디자인 진행 후 디자인들을 잘게 쪼갰다. 토큰화를 위해서..? 요소?
HTML 구조에서는 div큰 박스를 만들고 그 안에 들어갈 제일 상단 header와 제일 하단 footer 시맨틱 태그 사용했다. 지금 CSS bem을 배우고있는데 너무 어렵다.. 아이디로 이름 안짓는다 그래서 일단 div들한테 클래스로 이름 지어줬다.
<body>
<div class="container">
<header>
<img src=../img/logo.png alt="logo">
</header>
<div class="title"></div>
<div class="center_box"></div>
<p class="center_line"></p>
<div class="link_title"></div>
<div class="script"></div>
<footer>
</footer>
</div>
</body>
코드를 쉽게 보여주려고 좀 잘랐는데.. 아래 이미지를 보면 이해하기 쉬울 듯 디자인 요소들을 다 div 처리 했다는 것
저 HTML 구조를 토대로 이것 저것 추가해갔다. box안에 들어가는 내용들과 버튼, footer 안에 들어가는 카피라이트 등등
CSS 구조는 일부분만! 오늘은 연습하면서 새로운걸 배웠는데 무려 display:flex;를 배웠다. 우와우와 난 신기했다.. 세로 가운데 정렬은 늘 나한테 풀리지않는 미스테리였다 ㅠㅠ 어디서 margin 값에서 절대값을 줘야한다고 하고.. 아니라고 -%를 줘야한다고 하고.. 늘 혼란스러웠던 세로 가운데 정렬..
부모한테 display:flex;와 함께 align-items:center;를 주면 세로 가운데 정렬이 되고 자식요소한테 margin:0 auto;를 주니 가로 가운데 정렬이 됬다 ㅠㅠ 드디어 내가 중앙 정렬을 해봤어 ㅠㅠㅠㅠㅠㅠ 이거는 연습을 좀 더 해야겠다.
.container header {
background: linear-gradient(91.14deg, #2b6a67 -114.35%, #f3dcf4 85.67%);
width:640px;
height:55px;
background-color:gray;
border-radius:10px 10px 0 0;
display:flex; /*여기*/
align-items:center; /*여기*/
}
.container header img {
width:100px;
height:30px;
margin:0 auto; /*여기*/
}
다음에는 뷰포트를 배울꺼다.
'저는 HTML으로 디자인 합니다' 카테고리의 다른 글
| 디자이너의 HTML/CSS 클론 코딩 (1) | 2023.08.30 |
|---|---|
| [챗 GPT] HTML/CSS으로 게시판 만들기 (0) | 2023.08.10 |
| HTML/CSS 강의 9일차 : 웹폰트, 포토샵이미지슬라이스 (0) | 2022.01.18 |
| HTML/CSS 강의 8일차 : 레이아웃,링크걸기,그래픽스타일(그라디언트),크로스브라우징,웹폰트 (0) | 2022.01.15 |
| HTML/CSS 강의 7일차 : 웹접근성, h태그, 시맨틱태그 (0) | 2022.01.14 |