몇 년 전부터 개발자 붐이 일어났습니다. 덩달아 컴퓨터 공학을 전공하지 않았더라도 개발자에 도전하는 사람들이 많아졌는데요, 개발도 여타 다른 직업들처럼 적성이 맞는 사람이 있고, 아닌 사람도 있습니다. 본격적으로 개발에 뛰어들기 전에 적성 검사를 제대로 할 수 있다면, 소중한 시간을 낭비하는 일도 적을 것입니다.
개발에도 굉장히 다양한 분야가 있는데, 이 글에서는 Front End 개발자 기준으로 최대한 쉽게 웹페이지를 만들어 볼 것입니다. 실제로 Front End 개발을 진행해 보면서, 내가 과연 이 일을 평생 즐겁게 할 수 있을까 고민해 보시기 바랍니다.
(Front End: 웹 페이지에서 사용자에게 보이는 화면을 개발하는 사람)
※ 안내 사항
- 이 글은 FE(Front End) 교육용이 아닌 적성 검사용입니다.
- 타겟 독자는 개발을 1도 모르는 사람입니다.
- 적절하지 못한 tag 사용이나 구조가 있을 수 있습니다. 최대한 적은 FE 지식으로 웹페이지를 만들기 위함입니다.
- 개발을 위한 프로그램 추가 설치는 없습니다. 모두 메모장으로 진행합니다.
○ 물론 원하신다면 개발자용 IDE를 설치해서 진행하셔도 됩니다.
○ visual studio code 설치/사용 방법을 공부하셔서 진행하시면 훨씬 원활하긴 할 겁니다.
○ 하지만, 이것 자체도 진입 장벽이 높을 수 있다고 생각하기에...
- 코드는 오타가 단 하나라도 있으면 안 됩니다...! 잘 작성했는데, 결과가 이상하게 나온다면 오타가 있는지 먼저 확인하세요!
- 코드를 수정한 후, 메모장을 저장하고, 브라우저에서 index.html을 새로고침해야 화면이 바뀌는 걸 명심하세요.
- 코드를 복사하고 싶으시면 Copy 버튼을 누르고, 원하는 곳에 붙여넣기 해주세요
- 최종 만들어볼 목표 페이지는 아래와 같습니다.
0. 준비운동
0.1. html 파일 만들어보기
- 인터넷에서 보이는 화면은 간단히 말해, html 파일이 보여지는 것입니다.
- 지금 메모장을 켜서 아래 코드를 복사-붙여넣기 후, 파일 이름을 index.html로 해 아무 곳에나 저장해 보세요.
- 저장할 때는 꼭 파일 형식을 모든 파일로 지정해주셔야 합니다.
<html>
<head>
</head>
<body>
<div>dog-foot</div>
<div>bird-foot</div>
</body>
</html>
- 그러면 저장된 곳에 아래와 같이 html 파일하나가 만들어져 있습니다.
- 저는 기본 브라우저가 크롬이어서 크롬 아이콘인데, 다른 브라우저 쓰시는 분은 해당 아이콘으로 표시될 것입니다. 상관없습니다.
- index.html 파일을 더블클릭하면 다음과 같이 화면이 뜹니다.
0.2. 왜 이렇게 나올까?
- 우리는 분명 복잡하게 텍스트를 많이 썼는데, 출력된 건 dog-foot, bird-foot 밖에 없습니다.
- 일단 html 문서의 기본 형식은 아래와 같습니다. 지금은 그냥 이렇구나~ 하고 넘어가시면 됩니다.
- 홑화살괄호(< >)로 이루어진 걸, 태그(tag)라 부릅니다.
- 태그는 대부분 시작 태그와 종료 태그 한쌍이 같이 다닙니다. 종료 태그에는 / 가 붙습니다.
○ head 태그를 예로 들면, <head>: 시작 태그, </head>: 종료 태크
- html 문서는 아래와 같이 여러 태그들로 이루어져 있습니다.
- 태그 안에 태그가 있을 수 있습니다. 아래는 html 태그 안에 head 태그와 body 태그가 있습니다.
- index.html 문서를 실행했을 때, 브라우저 화면에 나오는 걸 '콘텐츠'라 부릅니다.
- body 태그 안에는 콘텐츠가 들어가고, head 태그 안에는 그 콘텐츠를 꾸미는 내용이 들어갑니다.
- 그럼 이제 우리는 왜 index.html을 실행했을 때, dog-foot, bird-foot만 나왔는지 알 수 있습니다.
- body안에 있는 글자만 화면에 나오는 '콘텐츠'이기 때문입니다.
- 그럼 왜 div 태그는 안 나왔을까요?
- body안에 있는 태그들은 화면에 보이는 용도가 아니라, 브라우저가 해석하는 방법입니다.
- 예를 들어 아래와 같이 코드를 수정하고, 다시 index.html를 실행(또는 새로고침)하면 다음과 같이 보입니다.
- dog-foot는 감싸고 있는 div 태그에 아무 설정이 없어서, 일반적인 text로 나왔습니다.
- bird-foot는 감싸고 있는 div 태그에 font-size를 지정해 줘서, 브라우저가 이걸 보고, 글씨 크기를 키운 것입니다.
<html>
<head>
</head>
<body>
<div>dog-foot</div>
<div style="font-size: 200px">bird-foot</div>
</body>
</html>
0.3. 코드 작성기 사용하기(선택사항)
!!! 선택사항입니다. 메모장으로만 하실 분은 건너뛰셔도 됩니다. 코드 작성기를 사용 안 해도 아무 상관없습니다!!!
- 메모장에다 작성을 해도 아무 문제없습니다만, 메모장에 작성하면 코드가 모두 검은색으로 보여 불편할 수 있습니다.
- 그래서 개발자들은 보통 IDE라는 프로그램을 이용해서 코드에 색을 입힙니다.
- 지금 개발 적성을 알아보려는데, IDE 사용법까지 익히기에는 너무 부담이 될 것 같고, 대신 인터넷에 코드 작성기를 사용해 볼 수 있습니다.
Create a New Pen
...
codepen.io
- 코드작성기를 사용하면 코드가 색으로 구분되어 작성하는데 더 편리합니다.
- 코드가 작성되는 대로 아래 결과창에 실시간으로 적용돼서 나타납니다.
- 저희는 HTML만 사용할 거라 나머지는 빨간 부분을 마우스 클릭 후 오른쪽으로 드래그하여 접으면 됩니다.
- 다만 저희가 이번에 할 실습은 컴퓨터의 이미지 파일을 사용하는 부분이 있어서, 결국 코드 작성기에서 작성한 코드를 메모장에 복사 - 붙여넣기하고 저장한 후, index.html를 재실행(또는 새로고침)하여 사용하는 방식으로 진행하셔야 합니다.
0.4. 암기사항!
- 이해가 필요 없는, 무조건 외워야 하는 사항입니다.
- 개발 적성 실습 전 필수 사항입니다.
0.4.1. html 문서는 각종 태그로 이루어져 있다.
- html문서는 각종 태그로 이루어지고, 태그 안에 태그가 포함될 수 있다.
- 위의 index.html을 예로 들만 다음과 같습니다.
0.4.2. body 태그 안에는 콘텐츠가, head 태그 안에는 콘텐츠를 꾸미는 내용이 들어간다.
- head 태그 안에 내용은 실습에서 작성합니다.
0.4.3. 모든 태그는 기본적으로 사각형으로 이루어져 있다.
- 위의 index.html의 실행화면을 예로 들면 다음과 같습니다.
1. 실습 내용
1.1. 목표 페이지
- 우리가 실습해 볼, 즉 만들어 볼 페이지는 바로 '카카오 서비스' 페이지입니다!
- https://www.kakaocorp.com/page/service/service
Kakao
기술과 사람으로 더 나은 세상을 만듭니다
www.kakaocorp.com
- 오른쪽이 실제 카카오 서비스 웹 페이지이고, 왼쪽이 이번에 실습해 볼 간소화 버전입니다.
1.2. 준비물 (이미지)
- 목표 웹 페이지에서 보이는 각종 이미지 파일들을 준비해야 합니다.
- 아래에서 이미지를 모두 다운로드하여, 실습하고자 하는 폴더에 image라는 폴더를 만들어 그곳에 모두 넣어주세요.
- 그리고 그 실습하고자 하는 폴더에 미리 index.html 파일을 만들어주시면 됩니다. 저는 C:\html_study 경로를 실습폴더로 사용하고자 합니다.
2. 실습
- 이제부터 코드 작성은 모두 index.html에 하시면 됩니다.
- 항상 정답 코드를 보시기 전에, 먼저 스스로 과제 코드를 작성해 보시기 바랍니다.
2.1. header(상단 부분)
- 목표 페이지에서 상단 부분(header)을 먼저 작성해 보겠습니다.
- 우리는 이미 챕터 0을 통해, 글씨 쓰는 법을 익혔습니다.
- 과제: 아래와 같이 kakao, 카카오, 뉴스, 기술과 서비스, 약속과 책임 글씨를 모두 입력해 보세요.
- 정답코드
<html>
<head>
</head>
<body>
<div>kakao</div>
<div>카카오</div>
<div>뉴스</div>
<div>기술과 서비스</div>
<div>약속과 책임</div>
</body>
</html>
2.1.1. 이미지 파일 넣기
- 이제 header의 오른쪽의 돋보기, 지구본, 달 이미지를 넣어야 합니다.
- 이미지를 넣는 방법은 img 태그를 쓰시는 겁니다. 돋보기를 넣는 코드를 먼저 보여드리겠습니다.
<html>
<head>
</head>
<body>
<div>kakao</div>
<div>카카오</div>
<div>뉴스</div>
<div>기술과 서비스</div>
<div>약속과 책임</div>
<img src="./image/magnifying-glass.png" />
</body>
</html>
- 우리가 image 폴더에 넣었던 돋보기 그림 파일 이름은 magnifying-glass.png이고, 이를 src에 써 준 것입니다.
- 과제: 아래와 같이 돋보기와 달 이미지도 넣어보세요.
- 정답 코드
<html>
<head>
</head>
<body>
<div>kakao</div>
<div>카카오</div>
<div>뉴스</div>
<div>기술과 서비스</div>
<div>약속과 책임</div>
<img src="./image/magnifying-glass.png" />
<img src="./image/earth-globe.png" />
<img src="./image/night-mode.png" />
</body>
</html>
- header의 가장 왼쪽의 kakao 글씨는 다른 텍스트보다 크기가 좀 더 큽니다. 글자 크기를 키워봅시다.
- 과제: kakao의 글자 크기를 30px로 설정해 보세요.(이미 배운 내용!)
- 정답 코드
<html>
<head>
</head>
<body>
<div style="font-size: 30px;">kakao</div>
<div>카카오</div>
<div>뉴스</div>
<div>기술과 서비스</div>
<div>약속과 책임</div>
<img src="./image/magnifying-glass.png" />
<img src="./image/earth-globe.png" />
<img src="./image/night-mode.png" />
</body>
</html>
2.1.2. 태그들을 가로로 배치하기(display: flex)
- 현재 상태를 보면 태그들이 다 세로로 배치되어 있습니다.
- header처럼 가로로 배치해 보겠습니다.
- 태그들을 가로로 배치하는 방법은 다음과 같습니다.
1. 가로로 배치하고 싶은 태그들을 div 태그로 감싼다.
2. 감싼 div 태그의 style을 display: flex로 설정한다.
<html>
<head>
</head>
<body>
<div style="display: flex;">
<div style="font-size: 30px;">kakao</div>
<div>카카오</div>
<div>뉴스</div>
<div>기술과 서비스</div>
<div>약속과 책임</div>
<img src="./image/magnifying-glass.png" />
<img src="./image/earth-globe.png" />
<img src="./image/night-mode.png" />
</div>
</body>
</html>
- 그런데 우리는 아래와 같이 글씨들과 이미지를 보기 좋게 간격을 벌리고 싶습니다.
- 이럴 때는 style에 justify-content: space-between라는 또 다른 꾸밈 속성을 추가하면 됩니다.
- 단, 이 속성은 display: flex와 항상 같이 붙어 다녀야 합니다.
<html>
<head>
</head>
<body>
<div style="display: flex; justify-content: space-between;">
<div style="font-size: 30px;">kakao</div>
<div>카카오</div>
<div>뉴스</div>
<div>기술과 서비스</div>
<div>약속과 책임</div>
<img src="./image/magnifying-glass.png" />
<img src="./image/earth-globe.png" />
<img src="./image/night-mode.png" />
</div>
</body>
</html>
- display: flex; justify-content: space-between을 준 div에 속한 모든 태그들이 일정 간격 떨어지게 되었습니다.
- 그런데 우리는 [kakao] // [카카오 뉴스 기술과 서비스 약속과 책임] // [이미지 3개]와 같이 크게 3개의 덩어리로 묶어서 간격을 만들고 싶습니다. 이럴 땐, 다음과 같이 덩어리로 묶고 싶은 부분을 div 태그로 감싸주면 됩니다.
<html>
<head>
</head>
<body>
<div style="display: flex; justify-content: space-between;">
<div style="font-size: 30px;">kakao</div>
<div>
<div>카카오</div>
<div>뉴스</div>
<div>기술과 서비스</div>
<div>약속과 책임</div>
</div>
<div>
<img src="./image/magnifying-glass.png" />
<img src="./image/earth-globe.png" />
<img src="./image/night-mode.png" />
</div>
</div>
</body>
</html>
- 그런데 이렇게 묶으니, 3개의 덩어리를 가로 배치가 됐지만, 가운데 덩어리가 또 세로 배치가 되었습니다. 이것도 가로 배치로 만들어 줍시다.
- 과제: 가운데 덩어리에 [카카오, 뉴스, 기술과 서비스, 약속과 책임] 태그들도 가로 배치로 만들어보세요.(이미 배운 내용!)
- 정답 코드
<html>
<head>
</head>
<body>
<div style="display: flex; justify-content: space-between;">
<div style="font-size: 30px;">kakao</div>
<div style="display: flex;">
<div>카카오</div>
<div>뉴스</div>
<div>기술과 서비스</div>
<div>약속과 책임</div>
</div>
<div>
<img src="./image/magnifying-glass.png" />
<img src="./image/earth-globe.png" />
<img src="./image/night-mode.png" />
</div>
</div>
</body>
</html>
2.1.2. 태그 안의 콘텐츠 간격 만들기(padding)
- 그런데, 가운데 덩어리를 가로 배치는 했지만, 너무 다닥다닥 붙어있습니다.
- 이를 해결할 수 있는 방법 중 하나가 style에 padding 속성을 설정하는 것입니다.
- 위의 무조건 암기 사항에서 모든 태그는 기본적으로 사각형으로 이루어져 있다고 했습니다.
- 사각형 안에 글씨가 Content입니다.
- 그럼 사각형과 Content 간의 간격이 있을 수 있는데, 이를 padding이라고 합니다.
- div style에 padding 속성을 적용하는 방법은 다음과 같습니다.
1. padding: 5px 10px 15px 20px;
2. padding 적용은 padding-top부터 시작해서 시계 방향입니다.
3. 즉, 위의 설정은 top은 5px만큼, right는 10px만큼, bottom은 15px만큼, left는 20px만큼 간격을 만들어라는 뜻입니다.
- 그럼 한번 '카카오' 태그에 상하좌우 20px씩 padding을 먹여보겠습니다.
<html>
<head>
</head>
<body>
<div style="display: flex; justify-content: space-between;">
<div style="font-size: 30px;">kakao</div>
<div style="display: flex;">
<div style="padding: 20px 20px 20px 20px;">카카오</div>
<div>뉴스</div>
<div>기술과 서비스</div>
<div>약속과 책임</div>
</div>
<div>
<img src="./image/magnifying-glass.png" />
<img src="./image/earth-globe.png" />
<img src="./image/night-mode.png" />
</div>
</div>
</body>
</html>
- 상화좌우에 모두 padding이 20px씩 적용되면서 자연스럽게 옆 글씨와도 간격이 설정되었고, 위에 딱 달라붙었던 글씨도 자연스럽게 간격이 생겼습니다.
- 과제: 아래와 같이 나머지 태그들인 '뉴스', '기술과 서비스', '약속과 책임'에도 동일하게 padding을 적용시켜 보세요!
- 정답 코드
<html>
<head>
</head>
<body>
<div style="display: flex; justify-content: space-between;">
<div style="font-size: 30px;">kakao</div>
<div style="display: flex;">
<div style="padding: 20px 20px 20px 20px;">카카오</div>
<div style="padding: 20px 20px 20px 20px;">뉴스</div>
<div style="padding: 20px 20px 20px 20px;">기술과 서비스</div>
<div style="padding: 20px 20px 20px 20px;">약속과 책임</div>
</div>
<div>
<img src="./image/magnifying-glass.png" />
<img src="./image/earth-globe.png" />
<img src="./image/night-mode.png" />
</div>
</div>
</body>
</html>
2.1.3. 텍스트 굵기 설정(font-weight)
- 그런데, 가운데 덩어리의 글씨들이 좀 더 두꺼워야 할 것 같습니다.
- 글씨 두께를 설정하는 속성은 font-weight입니다. 다음과 같이 설정합니다.
○ font-weight: bold;
- '카카오' 글씨를 굵게 만들어보겠습니다.
<html>
<head>
</head>
<body>
<div style="display: flex; justify-content: space-between;">
<div style="font-size: 30px;">kakao</div>
<div style="display: flex;">
<div style="padding: 20px 20px 20px 20px; font-weight: bold;">카카오</div>
<div style="padding: 20px 20px 20px 20px;">뉴스</div>
<div style="padding: 20px 20px 20px 20px;">기술과 서비스</div>
<div style="padding: 20px 20px 20px 20px;">약속과 책임</div>
</div>
<div>
<img src="./image/magnifying-glass.png" />
<img src="./image/earth-globe.png" />
<img src="./image/night-mode.png" />
</div>
</div>
</body>
</html>
- 카카오 글씨만 굵어진 게 보이시나요? 그럼 다음 과제입니다.
- 과제: 아래와 같이 '뉴스', '기술과 서비스', '약속과 책임' 부분도 굵게 만들어보세요!
- 정답 코드
<html>
<head>
</head>
<body>
<div style="display: flex; justify-content: space-between;">
<div style="font-size: 30px;">kakao</div>
<div style="display: flex;">
<div style="padding: 20px 20px 20px 20px; font-weight: bold;">카카오</div>
<div style="padding: 20px 20px 20px 20px; font-weight: bold;">뉴스</div>
<div style="padding: 20px 20px 20px 20px; font-weight: bold;">기술과 서비스</div>
<div style="padding: 20px 20px 20px 20px; font-weight: bold;">약속과 책임</div>
</div>
<div>
<img src="./image/magnifying-glass.png" />
<img src="./image/earth-globe.png" />
<img src="./image/night-mode.png" />
</div>
</div>
</body>
</html>
2.1.4. class
- 방금까지 '카카오', '뉴스', '기술과 서비스', '약속과 책임' 태그에 padding과 font-weight를 적용해 봤습니다.
- 그런데 여러분은 이걸 작성하면서, 어떤 불편함을 느끼셨나요?
(아래 글을 안 보고, 스스로 어떤 불합리를 느끼셨다면, 개발자로서의 잠재력이 있으신 겁니다...!)
- 지금까지 한 작업에 대해 불합리를 정리해 보면 다음과 같습니다.(펼쳐서 보기)
1. 4개의 태그에 모두 똑같은 설정을 해줘야 하는데, 그걸 다 써야 한다.
○ 지금이야 속성값이 padding, font-weight 2개밖에 없어서 그냥 손수 쓸만합니다.
○ 속성값이 100개라면, 그걸 4번 반복해서 다 언제 쓰겠습니까...?
○ 만약 속성값이 100개, 태그가 100개라면 100x100 = 10000번 작성 언제 다 쓸까요...?
2. 만약 padding-top을 10px로 바꾸고 싶은 상황이 왔다 가정해 보겠습니다.
○ padding: 10px 20px 20px 20px; 로 4개의 태그 모두 변경해야 합니다.
○ 4개는 그래도 손수 바꿔줄 만합니다. 근데 만약에 100개 태그에 대해서 변경해야 하는 상황이라면? 그걸 언제 다 수작업으로 진행하겠습니까...???- 이런 불합리를 해결하는 방법이 태그에 이름을 붙여주는 것입니다. 이름을 붙이는 방법은 class를 사용하는 것입니다.
- '카카오' 태그에 'header-center'라는 이름을 붙여보겠습니다.
<html>
<head>
</head>
<body>
<div style="display: flex; justify-content: space-between;">
<div style="font-size: 30px;">kakao</div>
<div style="display: flex;">
<div class="header-center" style="padding: 20px 20px 20px 20px; font-weight: bold;">카카오</div>
<div style="padding: 20px 20px 20px 20px; font-weight: bold;">뉴스</div>
<div style="padding: 20px 20px 20px 20px; font-weight: bold;">기술과 서비스</div>
<div style="padding: 20px 20px 20px 20px; font-weight: bold;">약속과 책임</div>
</div>
<div>
<img src="./image/magnifying-glass.png" />
<img src="./image/earth-globe.png" />
<img src="./image/night-mode.png" />
</div>
</div>
</body>
</html>- 단순히 이름을 붙여주는 것 만으로는 변하는 게 아무것도 없습니다. 그럼 지금부터 이름 사용법을 알려드리겠습니다.
- 지금까지는 div에 style속성으로 콘텐츠를 꾸몄습니다. 그런데 아까 무조건 암기 부분의 2번째(0.4.2)에 'head에는 콘텐츠를 꾸미는 내용이 들어간다.' 기억하시나요?
- 아래와 같이 코드를 따라서 고쳐 보시죠. head 태그와 '카카오' 태그 부분만 보시면 됩니다.
<html>
<head>
<style>
.header-center {
padding: 20px 20px 20px 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div style="display: flex; justify-content: space-between;">
<div style="font-size: 30px;">kakao</div>
<div style="display: flex;">
<div class="header-center">카카오</div>
<div style="padding: 20px 20px 20px 20px; font-weight: bold;">뉴스</div>
<div style="padding: 20px 20px 20px 20px; font-weight: bold;">기술과 서비스</div>
<div style="padding: 20px 20px 20px 20px; font-weight: bold;">약속과 책임</div>
</div>
<div>
<img src="./image/magnifying-glass.png" />
<img src="./image/earth-globe.png" />
<img src="./image/night-mode.png" />
</div>
</div>
</body>
</html>
- 변경 부분
1. '카카오' 태그 부분에 style 부분 삭제
2. head 태그 안에 style 태그를 만들었고, 그 style 태그 안에서 이름에 대한 속성을 설정
- style 태그에서는 지정된 이름을 가진 태그에게 속성을 지정할 수 있습니다.
- 그래서 '카카오' 태그는 style 속성이 지워졌지만, style태그에서 이름에 의해 속성이 지정되어, 결국 브라우저에서 보이는 index.html에도 '카카오' 태그에 그대로 padding과 font-weight 속성이 적용된 것을 확인할 수 있습니다.
- 과제: '뉴스', '기술과 서비스', '약속과 책임' 태그에도 style속성을 지우고, 이름을 설정해서 padding과 font-weight 속성을 적용시켜 보세요.
- 정답 코드
<html>
<head>
<style>
.header-center {
padding: 20px 20px 20px 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div style="display: flex; justify-content: space-between;">
<div style="font-size: 30px;">kakao</div>
<div style="display: flex;">
<div class="header-center">카카오</div>
<div class="header-center">뉴스</div>
<div class="header-center">기술과 서비스</div>
<div class="header-center">약속과 책임</div>
</div>
<div>
<img src="./image/magnifying-glass.png" />
<img src="./image/earth-globe.png" />
<img src="./image/night-mode.png" />
</div>
</div>
</body>
</html>
- 이제 만약에 '카카오', '뉴스', '기술과 서비스', '약속과 책임' 태그의 padding-top을 10px로 변경하고 싶어도, 그냥 head > style 태그에서 'header-center'이름을 찾아 그곳의 padding 값만 변경 한 번만 해주면 됩니다!
2.1.5. 크기 조정
- 그다음으론, header의 오른쪽 3개의 이미지 크기를 조정해 봅시다. 지금은 이미지가 너무 크죠?
- 크기 조절하는 속성은 width와 height입니다.
1. <img src="./image/magnifying-glass.png" style="width: 25px; height: 50px;" />
2. 영어 단어 의미 그대로 width는 가로길이, height는 세로 길이를 의미합니다.
3. width 길이를 설정해 주고, height를 auto로 하면, 세로 길이는 원본 이미지의 가로:세로 비율에 따라 저절로 정해집니다.
- 돋보기 이미지의 크기를 가로 25px, 세로는 가로:세로 비율에 맞게 저절로 변경되도록 수정해 보겠습니다.
<html>
<head>
<style>
.header-center {
padding: 20px 20px 20px 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div style="display: flex; justify-content: space-between;">
<div style="font-size: 30px;">kakao</div>
<div style="display: flex;">
<div class="header-center">카카오</div>
<div class="header-center">뉴스</div>
<div class="header-center">기술과 서비스</div>
<div class="header-center">약속과 책임</div>
</div>
<div>
<img style="width: 25px; height: auto" src="./image/magnifying-glass.png"/>
<img src="./image/earth-globe.png" />
<img src="./image/night-mode.png" />
</div>
</div>
</body>
</html>
- 돋보기가 작아진 게 보이나요?
- 과제: 아래처럼 지구와 달 이미지도 같은 사이즈로 만들어보세요!
○ 이미지 3개에 똑같은 속성을 적용하는 겁니다.
○ 똑같은 내용 3번 쓰는 것보다는 class 이름 붙이기를 활용해 보세요 (이미 배운 내용!)
- 정답 코드
<html>
<head>
<style>
.header-center {
padding: 20px 20px 20px 20px;
font-weight: bold;
}
.header-img {
width: 25px;
height: auto;
}
</style>
</head>
<body>
<div style="display: flex; justify-content: space-between;">
<div style="font-size: 30px;">kakao</div>
<div style="display: flex;">
<div class="header-center">카카오</div>
<div class="header-center">뉴스</div>
<div class="header-center">기술과 서비스</div>
<div class="header-center">약속과 책임</div>
</div>
<div>
<img class="header-img" src="./image/magnifying-glass.png"/>
<img class="header-img" src="./image/earth-globe.png" />
<img class="header-img" src="./image/night-mode.png" />
</div>
</div>
</body>
</html>- 저는 header-img라는 이름을 붙였지만, 이름은 아무거나 사용하셔도 상관없습니다.
- 그런데, 이미지들도 너무 붙어 있군요. 보기 좋게 간격을 만들어야 할 것 같습니다.
- 과제: 아래와 같이 이미지들 보기 좋게 간격 만들기
○ 힌트: padding(이미 배운 내용!)
- 정답 코드
<html>
<head>
<style>
.header-center {
padding: 20px 20px 20px 20px;
font-weight: bold;
}
.header-img {
width: 25px;
height: auto;
padding: 20px 10px 20px 10px;
}
</style>
</head>
<body>
<div style="display: flex; justify-content: space-between;">
<div style="font-size: 30px;">kakao</div>
<div style="display: flex;">
<div class="header-center">카카오</div>
<div class="header-center">뉴스</div>
<div class="header-center">기술과 서비스</div>
<div class="header-center">약속과 책임</div>
</div>
<div>
<img class="header-img" src="./image/magnifying-glass.png"/>
<img class="header-img" src="./image/earth-globe.png" />
<img class="header-img" src="./image/night-mode.png" />
</div>
</div>
</body>
</html>- header-img에 padding 속성을 추가했습니다.
2.1.5. 여백 조정(margin)
- 지금까지 저희가 만든 콘텐츠를 보면, 화면을 가로로 전체 다 쓰고 있습니다.
○ 'kakao'는 왼쪽 가장 끝에 붙어 있고, 달 모양 이미지는 오른쪽 가장 끝에 붙어 있죠.
- 하지만 우리의 타겟 페이지를 보면 페이지를 약 80% 정도만 사용하고 양 끝은 비워져 있습니다.
○ 네이버, 다음 등의 대부분의 사이트들이 이 방식을 사용하고 있습니다.
○ 모니터 화면을 꽉 채우는 것보단 이 방식이 훨씬 깔끔해 보입니다.
- 이런 여백을 설정하는 속성값은 margin입니다.
- margin 속성을 적용하는 법은 다음과 같습니다.(padding과 비슷합니다.)
○ margin: 5px 10px 15px 20px;
○ margin-top부터 시작해서 시계 방향입니다.
○ 즉, 위의 설정은 margin-top: 5px, margin-right: 10px, margin-bottom: 15px, margin-top: 20px으로 적용됩니다.
- 저희는 전체 페이지에서 양 끝에 여백을 줘야 하는 상황이니, body 태그에 다음과 같이 속성을 적용해 보겠습니다.
○ 가로는 전체 페이지에 80%만 사용하도록, width: 80%
○ 가로가 80%만 사용하므로, margin은 좌우에 각각 10%씩, 상하는 필요 없음.
<html>
<head>
<style>
.header-center {
padding: 20px 20px 20px 20px;
font-weight: bold;
}
.header-img {
width: 25px;
height: auto;
padding: 20px 10px 20px 10px;
}
</style>
</head>
<body style="width: 80%; margin: 0 10% 0 10%;">
<div style="display: flex; justify-content: space-between;">
<div style="font-size: 30px;">kakao</div>
<div style="display: flex;">
<div class="header-center">카카오</div>
<div class="header-center">뉴스</div>
<div class="header-center">기술과 서비스</div>
<div class="header-center">약속과 책임</div>
</div>
<div>
<img class="header-img" src="./image/magnifying-glass.png"/>
<img class="header-img" src="./image/earth-globe.png" />
<img class="header-img" src="./image/night-mode.png" />
</div>
</div>
</body>
</html>
- 양 옆에 여백이 생긴 게 보이시나요?
- 추가적으로 kakao 글씨만 너무 위로 붙은 거 같은데, 간격을 만들어 볼까요?
- 과제: kakao 글씨에 상하 padding 5px 적용해 봅시다
- 정답 코드
<html>
<head>
<style>
.header-center {
padding: 20px 20px 20px 20px;
font-weight: bold;
}
.header-img {
width: 25px;
height: auto;
padding: 20px 10px 20px 10px;
}
</style>
</head>
<body style="width: 80%; margin: 0 10% 0 10%;">
<div style="display: flex; justify-content: space-between;">
<div style="font-size: 30px; padding: 5px 0 5px 0;">kakao</div>
<div style="display: flex;">
<div class="header-center">카카오</div>
<div class="header-center">뉴스</div>
<div class="header-center">기술과 서비스</div>
<div class="header-center">약속과 책임</div>
</div>
<div>
<img class="header-img" src="./image/magnifying-glass.png"/>
<img class="header-img" src="./image/earth-globe.png" />
<img class="header-img" src="./image/night-mode.png" />
</div>
</div>
</body>
</html>- 속성을 채울 때, class 이름을 붙여서 head > style에서 꾸며주든, 태그에서 바로 style 써서 꾸며주든 상관없습니다.
- body에서 태그에 바로 style 써서 꾸며준 이유는, body는 여러 번 반복적으로 쓰일 일이 없기 때문입니다.
- 드디어, 길고도 길었던 Header 부분 디자인이 끝났습니다!!!
- 앞으로 남은 부분이 훨씬 많은데, "저건 또 언제 하냐..." 막막하시다고요?
- 그럼 제가 희망이 되면서도, 무서울 수도 있는 사실을 알려 드리겠습니다.
○ 지금까지 배운 내용 가지고 남은 부분의 대부분(90% 이상)을 만들 수 있습니다.
○ 대부분이 응용력이다... 이 말입니다.
○ 겨우 header 한 줄 개발하는 거 알려줘 놓고, 나머지 다 할 수 있다는 게 마치 대학교 과제 같군요.
○ 지금은 적성만 알아보는 중이니 같이 진행해 보시죠.
2.2. title 부분
- 지금부터 개발해 볼 부위는 아래 빨간 박스 부분입니다.
- 과제: 일단 title 부분의 이미지와 텍스트를 모두 입력해 보세요.(모두 배운 내용!)
- 정답 코드
<html>
<head>
<style>
.header-center {
padding: 20px 20px 20px 20px;
font-weight: bold;
}
.header-img {
width: 25px;
height: auto;
padding: 20px 10px 20px 10px;
}
</style>
</head>
<body style="width: 80%; margin: 0 10% 0 10%;">
<div style="display: flex; justify-content: space-between;">
<div style="font-size: 30px; padding: 5px 0 5px 0;">kakao</div>
<div style="display: flex;">
<div class="header-center">카카오</div>
<div class="header-center">뉴스</div>
<div class="header-center">기술과 서비스</div>
<div class="header-center">약속과 책임</div>
</div>
<div>
<img class="header-img" src="./image/magnifying-glass.png"/>
<img class="header-img" src="./image/earth-globe.png" />
<img class="header-img" src="./image/night-mode.png" />
</div>
</div>
<img src="./image/light.png" />
<div>서비스</div>
<div>더 나은 세상을 만드는 카카오</div>
</body>
</html>
- 과제: 지금까지 배운 내용을 바탕으로 목표 페이지와 최대한 비슷하게 만들어 봅시다.
○ display: flex (이미 배운 내용!)
○ margin, font-size, font-weight, height (이미 배운 내용!)
- 정답 코드
<html>
<head>
<style>
.header-center {
padding: 20px 20px 20px 20px;
font-weight: bold;
}
.header-img {
width: 25px;
height: auto;
padding: 20px 10px 20px 10px;
}
</style>
</head>
<body style="width: 80%; margin: 0 10% 0 10%;">
<div style="display: flex; justify-content: space-between; margin: 10px 0 70px 0;">
<div style="font-size: 30px; padding: 5px 0 5px 0;">kakao</div>
<div style="display: flex;">
<div class="header-center">카카오</div>
<div class="header-center">뉴스</div>
<div class="header-center">기술과 서비스</div>
<div class="header-center">약속과 책임</div>
</div>
<div>
<img class="header-img" src="./image/magnifying-glass.png"/>
<img class="header-img" src="./image/earth-globe.png" />
<img class="header-img" src="./image/night-mode.png" />
</div>
</div>
<div style="display: flex; height: 50px; margin: 0 0 10px 0;">
<img src="./image/light.png" />
<div style="font-size: 30px; font-weight: bold;">서비스</div>
</div>
<div style="font-size: 25px;">더 나은 세상을 만드는 카카오</div>
</body>
</html>- header 부분에도 상하 margin을 적용해서, 목표 페이지와 비슷하게 간격을 만들었습니다.
- 위 코드 페이지를 자세히 보면 목표 페이지와 다른 점이 아래와 같이 보입니다.
○ 이미지와 텍스트에 간격이 없다.
○ 텍스트가 정확히 세로로 가운데 있지 않다.
2.2.1. html에서의 띄어쓰기
- html에서 띄어쓰기는 스페이스를 아무리 많이 쳐도, 한 번만 적용됩니다.
○ '더 나은 세상을 만드는 카카오'에서 아무 데나 스페이스를 많이 치고, index.html 페이지를 새로고침 해보세요.
- html에서는 를 사용해서 띄어쓰기를 나타냅니다.
○ 다음과 같이 써서 index.html 페이지를 새로고침 하면 띄어쓰기가 적용될 것입니다.
<div style="font-size: 25px;">더 나은 세상을 만드는 카카오</div>- 그럼 이제 전구 이미지와 서비스 텍스트를 띄어 써 봅시다.
- 과제: 전구 이미지와 '서비스' 텍스트에 2번 띄어쓰기를 적용해 보세요.
- 정답 코드
<html>
<head>
<style>
.header-center {
padding: 20px 20px 20px 20px;
font-weight: bold;
}
.header-img {
width: 25px;
height: auto;
padding: 20px 10px 20px 10px;
}
</style>
</head>
<body style="width: 80%; margin: 0 10% 0 10%;">
<div style="display: flex; justify-content: space-between; margin: 10px 0 70px 0;">
<div style="font-size: 30px; padding: 5px 0 5px 0;">kakao</div>
<div style="display: flex;">
<div class="header-center">카카오</div>
<div class="header-center">뉴스</div>
<div class="header-center">기술과 서비스</div>
<div class="header-center">약속과 책임</div>
</div>
<div>
<img class="header-img" src="./image/magnifying-glass.png"/>
<img class="header-img" src="./image/earth-globe.png" />
<img class="header-img" src="./image/night-mode.png" />
</div>
</div>
<div style="display: flex; height: 50px; margin: 0 0 10px 0;">
<img src="./image/light.png" />
<div style="font-size: 30px; font-weight: bold;">서비스</div>
</div>
<div style="font-size: 25px;">더 나은 세상을 만드는 카카오</div>
</body>
</html>- img 태그 다음에 두 번 추가된 것 보이시나요?
2.2.2. 텍스트 세로 가운데 정렬
- 텍스트 세로 가운데 정렬에는 line-height라는 속성이 사용됩니다.
- 지금까지 우리의 코드를 보면, '서비스'를 감싸고 있는 div가 50px입니다.
- 이때, '서비스' 태그에 line-height: 50px; 속성을 추가하면 글씨 태그가 세로 가운데 정렬이 됩니다.
<html>
<head>
<style>
.header-center {
padding: 20px 20px 20px 20px;
font-weight: bold;
}
.header-img {
width: 25px;
height: auto;
padding: 20px 10px 20px 10px;
}
</style>
</head>
<body style="width: 80%; margin: 0 10% 0 10%;">
<div style="display: flex; justify-content: space-between; margin: 10px 0 70px 0;">
<div style="font-size: 30px; padding: 5px 0 5px 0;">kakao</div>
<div style="display: flex;">
<div class="header-center">카카오</div>
<div class="header-center">뉴스</div>
<div class="header-center">기술과 서비스</div>
<div class="header-center">약속과 책임</div>
</div>
<div>
<img class="header-img" src="./image/magnifying-glass.png"/>
<img class="header-img" src="./image/earth-globe.png" />
<img class="header-img" src="./image/night-mode.png" />
</div>
</div>
<div style="display: flex; height: 50px; margin: 0 0 10px 0;">
<img src="./image/light.png" />
<div style="font-size: 30px; font-weight: bold; line-height: 50px;">서비스</div>
</div>
<div style="font-size: 25px;">더 나은 세상을 만드는 카카오</div>
</body>
</html>
- 어때요?  와 line-height 제외하고 모두 배운 내용이었죠?
- 이제 카테고리 부분을 만들어 보겠습니다.
2.3. 카테고리 부분
- 이번에 개발할 부분은 아래 빨간 박스 부분인 카테고리 부분입니다.
- 과제: 먼저 아래와 같이 카테고리를 작성하고 가로 배치까지 해보세요.(이미 배운 내용!)
- 정답 코드
<html>
<head>
<style>
.header-center {
padding: 20px 20px 20px 20px;
font-weight: bold;
}
.header-img {
width: 25px;
height: auto;
padding: 20px 10px 20px 10px;
}
</style>
</head>
<body style="width: 80%; margin: 0 10% 0 10%;">
<div style="display: flex; justify-content: space-between; margin: 10px 0 70px 0;">
<div style="font-size: 30px; padding: 5px 0 5px 0;">kakao</div>
<div style="display: flex;">
<div class="header-center">카카오</div>
<div class="header-center">뉴스</div>
<div class="header-center">기술과 서비스</div>
<div class="header-center">약속과 책임</div>
</div>
<div>
<img class="header-img" src="./image/magnifying-glass.png"/>
<img class="header-img" src="./image/earth-globe.png" />
<img class="header-img" src="./image/night-mode.png" />
</div>
</div>
<div style="display: flex; height: 50px; margin: 0 0 10px 0;">
<img src="./image/light.png" />
<div style="font-size: 30px; font-weight: bold; line-height: 50px;">서비스</div>
</div>
<div style="font-size: 25px; margin: 0 0 40px 0;">더 나은 세상을 만드는 카카오</div>
<div style="display: flex;">
<div>전체</div>
<div>카카오톡</div>
<div>스토리</div>
</div>
</body>
</html>- 목표 페이지와 비슷하게 간격을 주기 위해, '더 나은 세상을 만드는 카카오' 태그에 margin-bottom 값을 추가했습니다.
2.3.1. 태그 배경 색 설정
- 배경 색 설정에는 background-color라는 속성이 사용됩니다.
○ 예) background-color: gray;
○ 색을 rgb로도 표현할 수 있습니다. 예) background-color: rgb(238, 238, 238);
- '전체'의 색을 바꿔보겠습니다.
<html>
<head>
<style>
.header-center {
padding: 20px 20px 20px 20px;
font-weight: bold;
}
.header-img {
width: 25px;
height: auto;
padding: 20px 10px 20px 10px;
}
</style>
</head>
<body style="width: 80%; margin: 0 10% 0 10%;">
<div style="display: flex; justify-content: space-between; margin: 10px 0 70px 0;">
<div style="font-size: 30px; padding: 5px 0 5px 0;">kakao</div>
<div style="display: flex;">
<div class="header-center">카카오</div>
<div class="header-center">뉴스</div>
<div class="header-center">기술과 서비스</div>
<div class="header-center">약속과 책임</div>
</div>
<div>
<img class="header-img" src="./image/magnifying-glass.png"/>
<img class="header-img" src="./image/earth-globe.png" />
<img class="header-img" src="./image/night-mode.png" />
</div>
</div>
<div style="display: flex; height: 50px; margin: 0 0 10px 0;">
<img src="./image/light.png" />
<div style="font-size: 30px; font-weight: bold; line-height: 50px;">서비스</div>
</div>
<div style="font-size: 25px; margin: 0 0 40px 0;">더 나은 세상을 만드는 카카오</div>
<div style="display: flex;">
<div style="background-color: rgb(238, 238, 238);">전체</div>
<div>카카오톡</div>
<div>스토리</div>
</div>
</body>
</html>
- 과제: '카카오톡'과 '스토리' 카테고리도 배경색을 동일하게 바꿔보세요.
○ class 이름 지정 사용하기 (이미 배운 내용!)
○ 글씨들이 너무 다닥다닥 붙어 있습니다. padding과 margin을 이용해서 간격을 넓혀 봅시다. (이미 배운 내용!)
- 정답 코드
<html>
<head>
<style>
.header-center {
padding: 20px 20px 20px 20px;
font-weight: bold;
}
.header-img {
width: 25px;
height: auto;
padding: 20px 10px 20px 10px;
}
.category-item {
background-color: rgb(238, 238, 238);
padding: 10px 15px 10px 15px;
margin: 0 5px 0 5px;
}
</style>
</head>
<body style="width: 80%; margin: 0 10% 0 10%;">
<div style="display: flex; justify-content: space-between; margin: 10px 0 70px 0;">
<div style="font-size: 30px; padding: 5px 0 5px 0;">kakao</div>
<div style="display: flex;">
<div class="header-center">카카오</div>
<div class="header-center">뉴스</div>
<div class="header-center">기술과 서비스</div>
<div class="header-center">약속과 책임</div>
</div>
<div>
<img class="header-img" src="./image/magnifying-glass.png"/>
<img class="header-img" src="./image/earth-globe.png" />
<img class="header-img" src="./image/night-mode.png" />
</div>
</div>
<div style="display: flex; height: 50px; margin: 0 0 10px 0;">
<img src="./image/light.png" />
<div style="font-size: 30px; font-weight: bold; line-height: 50px;">서비스</div>
</div>
<div style="font-size: 25px; margin: 0 0 40px 0;">더 나은 세상을 만드는 카카오</div>
<div style="display: flex;">
<div class="category-item">전체</div>
<div class="category-item">카카오톡</div>
<div class="category-item">스토리</div>
</div>
</body>
</html>
2.3.2. 모서리 둥글게 만들기
- 모서리 둥근 정도는 border-radius 속성을 사용합니다.
○ border-radius: 5px 10px 15px 20px;
○ 숫자가 커질수록 더 많이 둥글게 됩니다.
- 카테고리의 모든 모서리를 20px로 설정해 보겠습니다.
<html>
<head>
<style>
.header-center {
padding: 20px 20px 20px 20px;
font-weight: bold;
}
.header-img {
width: 25px;
height: auto;
padding: 20px 10px 20px 10px;
}
.category-item {
background-color: rgb(238, 238, 238);
padding: 10px 15px 10px 15px;
margin: 0 5px 0 5px;
border-radius: 20px;
}
</style>
</head>
<body style="width: 80%; margin: 0 10% 0 10%;">
<div style="display: flex; justify-content: space-between; margin: 10px 0 70px 0;">
<div style="font-size: 30px; padding: 5px 0 5px 0;">kakao</div>
<div style="display: flex;">
<div class="header-center">카카오</div>
<div class="header-center">뉴스</div>
<div class="header-center">기술과 서비스</div>
<div class="header-center">약속과 책임</div>
</div>
<div>
<img class="header-img" src="./image/magnifying-glass.png"/>
<img class="header-img" src="./image/earth-globe.png" />
<img class="header-img" src="./image/night-mode.png" />
</div>
</div>
<div style="display: flex; height: 50px; margin: 0 0 10px 0;">
<img src="./image/light.png" />
<div style="font-size: 30px; font-weight: bold; line-height: 50px;">서비스</div>
</div>
<div style="font-size: 25px; margin: 0 0 40px 0;">더 나은 세상을 만드는 카카오</div>
<div style="display: flex;">
<div class="category-item">전체</div>
<div class="category-item">카카오톡</div>
<div class="category-item">스토리</div>
</div>
</body>
</html>
2.4. 콘텐츠 부분
- 이제 대망의 마지막 개발할 부분은 아래 빨간 박스 부분인 콘텐츠 부분입니다.
- 파란색 부분은 이제부터 '카드'라고 부르겠습니다.
- 총 2개의 row가 있고, 각각의 row에 3개의 카드가 있습니다.
- 그럼 일단 첫 번째 row를 만들면 두 번째 row도 비슷하게 만들기 쉬울 테니, 첫 번째 row만 만들어보겠습니다.
2.4.1. 레이아웃 설계하기
- 무턱대고 만들어보려 하면 막막합니다.
- 먼저 다음과 같이 레이아웃 구상을 해봅니다.
2.4.2. 콘텐츠 작성
- 먼저 디자인 신경 쓰지 말고, 위의 레이아웃에서 구상한 대로, 어떻게 묶을지만 고려해서 작성해 봅니다.
<html>
<head>
<style>
.header-center {
padding: 20px 20px 20px 20px;
font-weight: bold;
}
.header-img {
width: 25px;
height: auto;
padding: 20px 10px 20px 10px;
}
.category-item {
background-color: rgb(238, 238, 238);
padding: 10px 15px 10px 15px;
margin: 0 5px 0 5px;
border-radius: 20px;
}
</style>
</head>
<body style="width: 80%; margin: 0 10% 0 10%;">
<div style="display: flex; justify-content: space-between; margin: 10px 0 70px 0;">
<div style="font-size: 30px; padding: 5px 0 5px 0;">kakao</div>
<div style="display: flex;">
<div class="header-center">카카오</div>
<div class="header-center">뉴스</div>
<div class="header-center">기술과 서비스</div>
<div class="header-center">약속과 책임</div>
</div>
<div>
<img class="header-img" src="./image/magnifying-glass.png"/>
<img class="header-img" src="./image/earth-globe.png" />
<img class="header-img" src="./image/night-mode.png" />
</div>
</div>
<div style="display: flex; height: 50px; margin: 0 0 10px 0;">
<img src="./image/light.png" />
<div style="font-size: 30px; font-weight: bold; line-height: 50px;">서비스</div>
</div>
<div style="font-size: 25px; margin: 0 0 40px 0;">더 나은 세상을 만드는 카카오</div>
<div style="display: flex;">
<div class="category-item">전체</div>
<div class="category-item">카카오톡</div>
<div class="category-item">스토리</div>
</div>
<div>
<div>
<div>
<div>
<img src="./image/light.png" />
<div>카카오톡</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div>
<div>말로하는 오픈채팅</div>
<div>보이스룸</div>
</div>
<div>
<div>#보이스룸</div>
<div>#오픈채팅</div>
</div>
<img src="./image/content1.png" />
</div>
<div>
<div>
<div>
<img src="./image/light.png" />
<div>엔터테인먼트</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div>
<div>세상에 업던 세상,</div>
<div>카카오 웹툰</div>
</div>
<div>
<div>#엔터테인먼트</div>
<div>#웹툰</div>
</div>
<img src="./image/content2.png" />
</div>
<div>
<div>
<div>
<img src="./image/light.png" />
<div>커머스</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div>
<div>나를 표현하는 쇼핑,</div>
<div>지그재그</div>
</div>
<div>
<div>#개인화추천</div>
<div>#쇼핑</div>
<div>#스타일</div>
</div>
<img src="./image/content3.jpg" />
</div>
</div>
</body>
</html>
2.4.3. row 레이아웃 개발
- 지금은 아래와 같이 3개의 카드가 세로 배치 되어있습니다.
- 과제: 카드를 가로 배치해 봅시다.
○ 가로배치: display: flex (배운 내용!)
○ 각 카드는 전체 너비의 30%만 차지: width (배운 내용!)
○ 각 카드는 모서리가 모두 부드럽게 둥그러야 합니다: border-radius(배운 내용!)
○ 모든 속성은 2번째 row에서도 반복적으로 쓰이므로, class 이름 붙여서 꾸며 줍니다.
- 정답 코드
<html>
<head>
<style>
.header-center {
padding: 20px 20px 20px 20px;
font-weight: bold;
}
.header-img {
width: 25px;
height: auto;
padding: 20px 10px 20px 10px;
}
.category-item {
background-color: rgb(238, 238, 238);
padding: 10px 15px 10px 15px;
margin: 0 5px 0 5px;
border-radius: 20px 20px 20px 20px;
}
.row {
display: flex;
justify-content: space-between;
}
.card {
width: 30%;
border-radius: 10px 10px 10px 10px;
box-shadow: 4px 12px 30px 6px rgba(0,0,0,.09);
}
</style>
</head>
<body style="width: 80%; margin: 0 10% 0 10%;">
<div style="display: flex; justify-content: space-between; margin: 10px 0 70px 0;">
<div style="font-size: 30px; padding: 5px 0 5px 0;">kakao</div>
<div style="display: flex;">
<div class="header-center">카카오</div>
<div class="header-center">뉴스</div>
<div class="header-center">기술과 서비스</div>
<div class="header-center">약속과 책임</div>
</div>
<div>
<img class="header-img" src="./image/magnifying-glass.png"/>
<img class="header-img" src="./image/earth-globe.png" />
<img class="header-img" src="./image/night-mode.png" />
</div>
</div>
<div style="display: flex; height: 50px; margin: 0 0 10px 0;">
<img src="./image/light.png" />
<div style="font-size: 30px; font-weight: bold; line-height: 50px;">서비스</div>
</div>
<div style="font-size: 25px; margin: 0 0 40px 0;">더 나은 세상을 만드는 카카오</div>
<div style="display: flex;">
<div class="category-item">전체</div>
<div class="category-item">카카오톡</div>
<div class="category-item">스토리</div>
</div>
<div class="row">
<div class="card">
<div>
<div>
<img src="./image/light.png" />
<div>카카오톡</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div>
<div>말로하는 오픈채팅</div>
<div>보이스룸</div>
</div>
<div>
<div>#보이스룸</div>
<div>#오픈채팅</div>
</div>
<img src="./image/content1.png" />
</div>
<div class="card">
<div>
<div>
<img src="./image/light.png" />
<div>엔터테인먼트</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div>
<div>세상에 업던 세상,</div>
<div>카카오 웹툰</div>
</div>
<div>
<div>#엔터테인먼트</div>
<div>#웹툰</div>
</div>
<img src="./image/content2.png" />
</div>
<div class="card">
<div>
<div>
<img src="./image/light.png" />
<div>커머스</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div>
<div>나를 표현하는 쇼핑,</div>
<div>지그재그</div>
</div>
<div>
<div>#개인화추천</div>
<div>#쇼핑</div>
<div>#스타일</div>
</div>
<img src="./image/content3.jpg" />
</div>
</div>
</body>
</html>- card에 box-shadow는 처음 보는 속성일 것입니다.
- 태그에 그림자 효과를 주는 속성입니다.
- 목표 페이지에도 적용된 효과이기도 하고, card 태그의 모양을 살펴보기 위해, 미리 적용했습니다.
- 크게 신경 안 쓰고, 그냥 위에 코드에 적힌 대로 적용시켜 주시면 됩니다.
2.4.4. card 레이아웃 개발
- 카드에 header 부분을 가로 배치할 차례입니다.
- 과제: 목표 페이지와 최대한 비슷하게 card header 부분을 꾸며봅니다.
○ 가로 배치: display: flex; (이미 배운 내용!)
○ height, padding, margin (이미 배운 내용!)
○ background-color (이미 배운 내용!)
○ border-radius (이미 배운 내용!)
○ font-size, font-weight (이미 배운 내용!)
- 정답 코드
<html>
<head>
<style>
.header-center {
padding: 20px 20px 20px 20px;
font-weight: bold;
}
.header-img {
width: 25px;
height: auto;
padding: 20px 10px 20px 10px;
}
.category-item {
background-color: rgb(238, 238, 238);
padding: 10px 15px 10px 15px;
margin: 0 5px 0 5px;
border-radius: 20px 20px 20px 20px;
}
.row {
display: flex;
justify-content: space-between;
}
.card {
width: 30%;
border-radius: 10px 10px 10px 10px;
box-shadow: 4px 12px 30px 6px rgba(0,0,0,.09);
}
.card-header {
display: flex;
justify-content: space-between;
height: 35px;
padding: 25px 25px 25px 25px;
}
.card-header-left {
display: flex;
}
.card-header-left-text {
background-color:rgb(238, 238, 238);
border-radius: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
font-size: 12px;
margin: 0 0 0 10px;
}
</style>
</head>
<body style="width: 80%; margin: 0 10% 0 10%;">
<div style="display: flex; justify-content: space-between; margin: 10px 0 70px 0;">
<div style="font-size: 30px; padding: 5px 0 5px 0;">kakao</div>
<div style="display: flex;">
<div class="header-center">카카오</div>
<div class="header-center">뉴스</div>
<div class="header-center">기술과 서비스</div>
<div class="header-center">약속과 책임</div>
</div>
<div>
<img class="header-img" src="./image/magnifying-glass.png"/>
<img class="header-img" src="./image/earth-globe.png" />
<img class="header-img" src="./image/night-mode.png" />
</div>
</div>
<div style="display: flex; height: 50px; margin: 0 0 10px 0;">
<img src="./image/light.png" />
<div style="font-size: 30px; font-weight: bold; line-height: 50px;">서비스</div>
</div>
<div style="font-size: 25px; margin: 0 0 40px 0;">더 나은 세상을 만드는 카카오</div>
<div style="display: flex; margin: 0 0 40px 0;">
<div class="category-item">전체</div>
<div class="category-item">카카오톡</div>
<div class="category-item">스토리</div>
</div>
<div class="row">
<div class="card">
<div class="card-header">
<div class="card-header-left">
<img src="./image/light.png" />
<div class="card-header-left-text">카카오톡</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div>
<div>말로하는 오픈채팅</div>
<div>보이스룸</div>
</div>
<div>
<div>#보이스룸</div>
<div>#오픈채팅</div>
</div>
<img src="./image/content1.png" />
</div>
<div class="card">
<div class="card-header">
<div class="card-header-left">
<img src="./image/light.png" />
<div class="card-header-left-text">엔터테인먼트</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div>
<div>세상에 업던 세상,</div>
<div>카카오 웹툰</div>
</div>
<div>
<div>#엔터테인먼트</div>
<div>#웹툰</div>
</div>
<img src="./image/content2.png" />
</div>
<div class="card">
<div class="card-header">
<div class="card-header-left">
<img src="./image/light.png" />
<div class="card-header-left-text">커머스</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div>
<div>나를 표현하는 쇼핑,</div>
<div>지그재그</div>
</div>
<div>
<div>#개인화추천</div>
<div>#쇼핑</div>
<div>#스타일</div>
</div>
<img src="./image/content3.jpg" />
</div>
</div>
</body>
</html>- 카테고리 태그에 margin-bottom 부분 값을 설정해서 콘텐츠 부분과 간격을 만들었습니다.
- 다음은 card-content와 card-tag 차례입니다.
- 과제: card-content와 card-tag 부분을 아래처럼 꾸며 보세요.
○ display: flex (이미 배운 내용)
○ padding (이미 배운 내용)
○ font-size, font-weight (이미 배운 내용)
- 정답 코드
<html>
<head>
<style>
.header-center {
padding: 20px 20px 20px 20px;
font-weight: bold;
}
.header-img {
width: 25px;
height: auto;
padding: 20px 10px 20px 10px;
}
.category-item {
background-color: rgb(238, 238, 238);
padding: 10px 15px 10px 15px;
margin: 0 5px 0 5px;
border-radius: 20px 20px 20px 20px;
}
.row {
display: flex;
justify-content: space-between;
}
.card {
width: 30%;
border-radius: 10px 10px 10px 10px;
box-shadow: 4px 12px 30px 6px rgba(0,0,0,.09);
}
.card-header {
display: flex;
justify-content: space-between;
height: 35px;
padding: 25px 25px 25px 25px;
}
.card-header-left {
display: flex;
}
.card-header-left-text {
background-color:rgb(238, 238, 238);
border-radius: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
font-size: 12px;
margin: 0 0 0 10px;
}
.card-content {
padding: 0 20px 0 20px;
font-size: 15px;
font-weight: bold;
}
.card-tag {
display: flex;
padding: 20px 20px 20px 20px;
font-size: 12px;
}
</style>
</head>
<body style="width: 80%; margin: 0 10% 0 10%;">
<div style="display: flex; justify-content: space-between; margin: 10px 0 70px 0;">
<div style="font-size: 30px; padding: 5px 0 5px 0;">kakao</div>
<div style="display: flex;">
<div class="header-center">카카오</div>
<div class="header-center">뉴스</div>
<div class="header-center">기술과 서비스</div>
<div class="header-center">약속과 책임</div>
</div>
<div>
<img class="header-img" src="./image/magnifying-glass.png"/>
<img class="header-img" src="./image/earth-globe.png" />
<img class="header-img" src="./image/night-mode.png" />
</div>
</div>
<div style="display: flex; height: 50px; margin: 0 0 10px 0;">
<img src="./image/light.png" />
<div style="font-size: 30px; font-weight: bold; line-height: 50px;">서비스</div>
</div>
<div style="font-size: 25px; margin: 0 0 40px 0;">더 나은 세상을 만드는 카카오</div>
<div style="display: flex; margin: 0 0 40px 0;">
<div class="category-item">전체</div>
<div class="category-item">카카오톡</div>
<div class="category-item">스토리</div>
</div>
<div class="row">
<div class="card">
<div class="card-header">
<div class="card-header-left">
<img src="./image/light.png" />
<div class="card-header-left-text">카카오톡</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div class="card-content">
<div>말로하는 오픈채팅</div>
<div>보이스룸</div>
</div>
<div class="card-tag">
<div>#보이스룸</div>
<div>#오픈채팅</div>
</div>
<img src="./image/content1.png" />
</div>
<div class="card">
<div class="card-header">
<div class="card-header-left">
<img src="./image/light.png" />
<div class="card-header-left-text">엔터테인먼트</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div class="card-content">
<div>세상에 업던 세상,</div>
<div>카카오 웹툰</div>
</div>
<div class="card-tag">
<div>#엔터테인먼트</div>
<div>#웹툰</div>
</div>
<img src="./image/content2.png" />
</div>
<div class="card">
<div class="card-header">
<div class="card-header-left">
<img src="./image/light.png" />
<div class="card-header-left-text">커머스</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div class="card-content">
<div>나를 표현하는 쇼핑,</div>
<div>지그재그</div>
</div>
<div class="card-tag">
<div>#개인화추천</div>
<div>#쇼핑</div>
<div>#스타일</div>
</div>
<img src="./image/content3.jpg" />
</div>
</div>
</body>
</html>
- 다음은 카드 이미지 수정할 차례입니다.
- 과제: 카드 이미지 부분을 아래와 같이 꾸며보세요.(모두 배운 내용)
○ width에 100%를 활용해 보세요
○ 크기만 조정하면 아래 모서리가 90도 일 겁니다. border-radius를 활용해 보세요
- 정답 코드
<html>
<head>
<style>
.header-center {
padding: 20px 20px 20px 20px;
font-weight: bold;
}
.header-img {
width: 25px;
height: auto;
padding: 20px 10px 20px 10px;
}
.category-item {
background-color: rgb(238, 238, 238);
padding: 10px 15px 10px 15px;
margin: 0 5px 0 5px;
border-radius: 20px 20px 20px 20px;
}
.row {
display: flex;
justify-content: space-between;
}
.card {
width: 30%;
border-radius: 10px 10px 10px 10px;
box-shadow: 4px 12px 30px 6px rgba(0,0,0,.09);
}
.card-header {
display: flex;
justify-content: space-between;
height: 35px;
padding: 25px 25px 25px 25px;
}
.card-header-left {
display: flex;
}
.card-header-left-text {
background-color:rgb(238, 238, 238);
border-radius: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
font-size: 12px;
margin: 0 0 0 10px;
}
.card-content {
padding: 0 20px 0 20px;
font-size: 15px;
font-weight: bold;
}
.card-tag {
display: flex;
padding: 20px 20px 20px 20px;
font-size: 12px;
}
.card-img {
width: 100%;
border-radius: 0px 0px 10px 10px;
}
</style>
</head>
<body style="width: 80%; margin: 0 10% 0 10%;">
<div style="display: flex; justify-content: space-between; margin: 10px 0 70px 0;">
<div style="font-size: 30px; padding: 5px 0 5px 0;">kakao</div>
<div style="display: flex;">
<div class="header-center">카카오</div>
<div class="header-center">뉴스</div>
<div class="header-center">기술과 서비스</div>
<div class="header-center">약속과 책임</div>
</div>
<div>
<img class="header-img" src="./image/magnifying-glass.png"/>
<img class="header-img" src="./image/earth-globe.png" />
<img class="header-img" src="./image/night-mode.png" />
</div>
</div>
<div style="display: flex; height: 50px; margin: 0 0 10px 0;">
<img src="./image/light.png" />
<div style="font-size: 30px; font-weight: bold; line-height: 50px;">서비스</div>
</div>
<div style="font-size: 25px; margin: 0 0 40px 0;">더 나은 세상을 만드는 카카오</div>
<div style="display: flex; margin: 0 0 40px 0;">
<div class="category-item">전체</div>
<div class="category-item">카카오톡</div>
<div class="category-item">스토리</div>
</div>
<div class="row">
<div class="card">
<div class="card-header">
<div class="card-header-left">
<img src="./image/light.png" />
<div class="card-header-left-text">카카오톡</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div class="card-content">
<div>말로하는 오픈채팅</div>
<div>보이스룸</div>
</div>
<div class="card-tag">
<div>#보이스룸</div>
<div>#오픈채팅</div>
</div>
<img class="card-img" src="./image/content1.png" />
</div>
<div class="card">
<div class="card-header">
<div class="card-header-left">
<img src="./image/light.png" />
<div class="card-header-left-text">엔터테인먼트</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div class="card-content">
<div>세상에 업던 세상,</div>
<div>카카오 웹툰</div>
</div>
<div class="card-tag">
<div>#엔터테인먼트</div>
<div>#웹툰</div>
</div>
<img class="card-img" src="./image/content2.png" />
</div>
<div class="card">
<div class="card-header">
<div class="card-header-left">
<img src="./image/light.png" />
<div class="card-header-left-text">커머스</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div class="card-content">
<div>나를 표현하는 쇼핑,</div>
<div>지그재그</div>
</div>
<div class="card-tag">
<div>#개인화추천</div>
<div>#쇼핑</div>
<div>#스타일</div>
</div>
<img class="card-img" src="./image/content3.jpg" />
</div>
</div>
</body>
</html>
- 과제: 거의 다 마쳤습니다. 두 번째 row는 스스로 만들어보세요!
- 정답 코드
<html>
<head>
<style>
.header-center {
padding: 20px 20px 20px 20px;
font-weight: bold;
}
.header-img {
width: 25px;
height: auto;
padding: 20px 10px 20px 10px;
}
.category-item {
background-color: rgb(238, 238, 238);
padding: 10px 15px 10px 15px;
margin: 0 5px 0 5px;
border-radius: 20px 20px 20px 20px;
}
.row {
display: flex;
justify-content: space-between;
margin: 0 0 50px 0;
}
.card {
width: 30%;
border-radius: 10px 10px 10px 10px;
box-shadow: 4px 12px 30px 6px rgba(0,0,0,.09);
}
.card-header {
display: flex;
justify-content: space-between;
height: 35px;
padding: 25px 25px 25px 25px;
}
.card-header-left {
display: flex;
}
.card-header-left-text {
background-color:rgb(238, 238, 238);
border-radius: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
font-size: 12px;
margin: 0 0 0 10px;
}
.card-content {
padding: 0 20px 0 20px;
font-size: 15px;
font-weight: bold;
}
.card-tag {
display: flex;
padding: 20px 20px 20px 20px;
font-size: 12px;
}
.card-img {
width: 100%;
border-radius: 0px 0px 10px 10px;
}
</style>
</head>
<body style="width: 80%; margin: 0 10% 0 10%;">
<div style="display: flex; justify-content: space-between; margin: 10px 0 70px 0;">
<div style="font-size: 30px; padding: 5px 0 5px 0;">kakao</div>
<div style="display: flex;">
<div class="header-center">카카오</div>
<div class="header-center">뉴스</div>
<div class="header-center">기술과 서비스</div>
<div class="header-center">약속과 책임</div>
</div>
<div>
<img class="header-img" src="./image/magnifying-glass.png"/>
<img class="header-img" src="./image/earth-globe.png" />
<img class="header-img" src="./image/night-mode.png" />
</div>
</div>
<div style="display: flex; height: 50px; margin: 0 0 10px 0;">
<img src="./image/light.png" />
<div style="font-size: 30px; font-weight: bold; line-height: 50px;">서비스</div>
</div>
<div style="font-size: 25px; margin: 0 0 40px 0;">더 나은 세상을 만드는 카카오</div>
<div style="display: flex; margin: 0 0 40px 0;">
<div class="category-item">전체</div>
<div class="category-item">카카오톡</div>
<div class="category-item">스토리</div>
</div>
<div class="row">
<div class="card">
<div class="card-header">
<div class="card-header-left">
<img src="./image/light.png" />
<div class="card-header-left-text">카카오톡</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div class="card-content">
<div>말로하는 오픈채팅</div>
<div>보이스룸</div>
</div>
<div class="card-tag">
<div>#보이스룸</div>
<div>#오픈채팅</div>
</div>
<img class="card-img" src="./image/content1.png" />
</div>
<div class="card">
<div class="card-header">
<div class="card-header-left">
<img src="./image/light.png" />
<div class="card-header-left-text">엔터테인먼트</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div class="card-content">
<div>세상에 업던 세상,</div>
<div>카카오 웹툰</div>
</div>
<div class="card-tag">
<div>#엔터테인먼트</div>
<div>#웹툰</div>
</div>
<img class="card-img" src="./image/content2.png" />
</div>
<div class="card">
<div class="card-header">
<div class="card-header-left">
<img src="./image/light.png" />
<div class="card-header-left-text">커머스</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div class="card-content">
<div>나를 표현하는 쇼핑,</div>
<div>지그재그</div>
</div>
<div class="card-tag">
<div>#개인화추천</div>
<div>#쇼핑</div>
<div>#스타일</div>
</div>
<img class="card-img" src="./image/content3.jpg" />
</div>
</div>
<div class="row">
<div class="card">
<div class="card-header">
<div class="card-header-left">
<img src="./image/light.png" />
<div class="card-header-left-text">AI/블록체인</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div class="card-content">
<div>
다양한 기술, 플랫폼,
</div>
<div>
서비스를 연결하는...
</div>
</div>
<div class="card-tag">
<div>#B2B</div>
<div>#기업솔루션</div>
</div>
<img class="card-img" src="./image/content4.jpeg" />
</div>
<div class="card">
<div class="card-header">
<div class="card-header-left">
<img src="./image/light.png" />
<div class="card-header-left-text">비즈니스</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div class="card-content">
<div>
AI 기반 비즈니스 플랫폼,
</div>
<div>
카카오 i 커넥트
</div>
</div>
<div class="card-tag">
<div>#AI솔루션</div>
<div>#B2B</div>
<div>#비즈니스</div>
</div>
<img class="card-img" src="./image/content5.jpg" />
</div>
<div class="card">
<div class="card-header">
<div class="card-header-left">
<img src="./image/light.png" />
<div class="card-header-left-text">라이프</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div class="card-content">
<div>
정확하고 즐거운 운전 도우미,
</div>
<div>
카카오내비
</div>
</div>
<div class="card-tag">
<div>#길안내</div>
<div>#내비게이션</div>
<div>#내차관리</div>
</div>
<img class="card-img" src="./image/content6.jpg" />
</div>
</div>
</body>
</html>
3. 검색 능력 및 응용력
3.1. 마우스 hover시 효과
- 우리가 목표로 했던 원본 페이지입니다.
- https://www.kakaocorp.com/page/service/service
Kakao
기술과 사람으로 더 나은 세상을 만듭니다
www.kakaocorp.com
- 위 페이지의 카드에 마우스를 올려놓으면 카드가 올라가면서 그림자가 짙어집니다. 이 기능을 구현하면서 개발자에게 검색 능력과 응용력이 얼마나 필요한지 보여드리려 합니다.
3.2. 검색(구글링) 능력이 필요한 이유
- 지금까지 페이지를 개발하면서, 수많은 개념들을 배웠습니다.
○ 태그, display, width, padding, margin 등등
- 물론 그 여기서 다룬 개념들은 기초적인 부분이라, Front End 개발자라면 다들 알고 있을 것입니다.
- 그런데 과연 개발자들이 모든 개념들을 다 알고 개발을 하는 걸까요? 절대 그렇지 않습니다.
- 보통은 아는 것보다 모르는 게 더 많죠. 그래서 검색 능력이 필요한 것입니다.
- 이번 챕터에서는 마우스 hover시 효과를 어떻게 하는지 모른다는 가정하에, 검색을 통해 진행해 보겠습니다.
- 다만 마우스 포인터를 위로 올리는 걸 'hover'라고 한다는 것만 안다고 가정해 보겠습니다.
3.3. 구글링
- 보통 검색할 때 검색 엔진은 구글을 이용합니다.
- 검색어에 있어서 정답이란 없습니다.
3.3.1. 마우스 hover 시, 그림자 변화
- 구글에 'html hover 그림자'로 검색해서 검색 결과를 뒤져봅니다.
- 첫 번째 검색결과를 들어가 보니, 이런 코드가 있습니다.
- 이제 응용력을 발휘할 차례입니다. 뭔가 비슷한 모양을 head에 이름 지정 스타일에서 본 적 있습니다. 그렇다면, 이름에다 :hover를 붙이고 box-shadow를 쓰면 hover 시, 효과가 적용될 것 같습니다.
- 그럼 우리의 index.html 코드에. card:hover로 적용해 보겠습니다. 전체 코드는 너무 길어서, head 태그만 적었습니다.
<head>
<style>
.header-center {
padding: 20px 20px 20px 20px;
font-weight: bold;
}
.header-img {
width: 25px;
height: auto;
padding: 20px 10px 20px 10px;
}
.category-item {
background-color: rgb(238, 238, 238);
padding: 10px 15px 10px 15px;
margin: 0 5px 0 5px;
border-radius: 20px 20px 20px 20px;
}
.row {
display: flex;
justify-content: space-between;
margin: 0 0 50px 0;
}
.card {
width: 30%;
border-radius: 10px 10px 10px 10px;
box-shadow: 4px 12px 30px 6px rgba(0,0,0,.09);
}
.card:hover {
box-shadow: 4px 12px 20px 6px rgba(0,0,0,.18);
}
.card-header {
display: flex;
justify-content: space-between;
height: 35px;
padding: 25px 25px 25px 25px;
}
.card-header-left {
display: flex;
}
.card-header-left-text {
background-color:rgb(238, 238, 238);
border-radius: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
font-size: 12px;
margin: 0 0 0 10px;
}
.card-content {
padding: 0 20px 0 20px;
font-size: 15px;
font-weight: bold;
}
.card-tag {
display: flex;
padding: 20px 20px 20px 20px;
font-size: 12px;
}
.card-img {
width: 100%;
border-radius: 0px 0px 10px 10px;
}
</style>
</head>- 이제 브라우저에서 index.html을 새로고침하고 마우스 포인터를 카드에 올려보세요. 카드의 그림자가 변합니다!
3.3.2. 마우스 hover 시, 카드 위로
- 비슷하게 이번에는 마우스 hover시, 카드가 약간 위로 올라가는 효과를 적용해 보겠습니다.
- 구글에 'html hover 위로'를 검색합니다.
- 이번에도 첫 번째 검색 결과에 들어가 보니 이런 정보가 있습니다.
- hover에 transform: translateY(-50px); 를 하면 위로 올라가는 것 같습니다. 우리 코드에 적용해 보겠습니다.
○ 우리 코드에는 5px만
○ 코드가 너무 길어서 수정된 부분(head > style의. card:hover)만 보여드리겠습니다.
<style>
.card:hover {
box-shadow: 4px 12px 20px 6px rgba(0,0,0,.18);
transform: translateY(-5px);
}
</style>- 이제 브라우저에서 index.html을 새로고침하고 마우스 포인터를 카드에 올려보세요. 그림자는 물론이고, 카드까지 위로 살짝 올라갑니다!
3.3.3. 마우스 hover 시, 변화 천천히
- 그런데, 지금 변하는 건 너무 갑자기 확 바뀝니다.
- 카카오 서비스 페이지에서는 천천히 부드럽게 변하는 걸 확인할 수 있습니다.
- 구글에 'html hover 천천히'를 검색해 봅니다.
- 이번엔 두 번째 검색 결과에 들어가 보니 다음 정보가 있습니다.
- transition 속성을 사용하면 애니메이션이 천천히 되는가 봅니다. 이를 우리의 index.html에 적용해 보겠습니다.
○ 이제 최종 코드입니다!
<html>
<head>
<style>
.header-center {
padding: 20px 20px 20px 20px;
font-weight: bold;
}
.header-img {
width: 25px;
height: auto;
padding: 20px 10px 20px 10px;
}
.category-item {
background-color: rgb(238, 238, 238);
padding: 10px 15px 10px 15px;
margin: 0 5px 0 5px;
border-radius: 20px 20px 20px 20px;
}
.row {
display: flex;
justify-content: space-between;
margin: 0 0 50px 0;
}
.card {
width: 30%;
border-radius: 10px 10px 10px 10px;
box-shadow: 4px 12px 30px 6px rgba(0,0,0,.09);
}
.card:hover {
box-shadow: 4px 12px 20px 6px rgba(0,0,0,.18);
transform: translateY(-5px);
transition: all 0.3s ease-out;
}
.card-header {
display: flex;
justify-content: space-between;
height: 35px;
padding: 25px 25px 25px 25px;
}
.card-header-left {
display: flex;
}
.card-header-left-text {
background-color:rgb(238, 238, 238);
border-radius: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
font-size: 12px;
margin: 0 0 0 10px;
}
.card-content {
padding: 0 20px 0 20px;
font-size: 15px;
font-weight: bold;
}
.card-tag {
display: flex;
padding: 20px 20px 20px 20px;
font-size: 12px;
}
.card-img {
width: 100%;
border-radius: 0px 0px 10px 10px;
}
</style>
</head>
<body style="width: 80%; margin: 0 10% 0 10%;">
<div style="display: flex; justify-content: space-between; margin: 10px 0 70px 0;">
<div style="font-size: 30px; padding: 5px 0 5px 0;">kakao</div>
<div style="display: flex;">
<div class="header-center">카카오</div>
<div class="header-center">뉴스</div>
<div class="header-center">기술과 서비스</div>
<div class="header-center">약속과 책임</div>
</div>
<div>
<img class="header-img" src="./image/magnifying-glass.png"/>
<img class="header-img" src="./image/earth-globe.png" />
<img class="header-img" src="./image/night-mode.png" />
</div>
</div>
<div style="display: flex; height: 50px; margin: 0 0 10px 0;">
<img src="./image/light.png" />
<div style="font-size: 30px; font-weight: bold; line-height: 50px;">서비스</div>
</div>
<div style="font-size: 25px; margin: 0 0 40px 0;">더 나은 세상을 만드는 카카오</div>
<div style="display: flex; margin: 0 0 40px 0;">
<div class="category-item">전체</div>
<div class="category-item">카카오톡</div>
<div class="category-item">스토리</div>
</div>
<div class="row">
<div class="card">
<div class="card-header">
<div class="card-header-left">
<img src="./image/light.png" />
<div class="card-header-left-text">카카오톡</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div class="card-content">
<div>말로하는 오픈채팅</div>
<div>보이스룸</div>
</div>
<div class="card-tag">
<div>#보이스룸</div>
<div>#오픈채팅</div>
</div>
<img class="card-img" src="./image/content1.png" />
</div>
<div class="card">
<div class="card-header">
<div class="card-header-left">
<img src="./image/light.png" />
<div class="card-header-left-text">엔터테인먼트</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div class="card-content">
<div>세상에 업던 세상,</div>
<div>카카오 웹툰</div>
</div>
<div class="card-tag">
<div>#엔터테인먼트</div>
<div>#웹툰</div>
</div>
<img class="card-img" src="./image/content2.png" />
</div>
<div class="card">
<div class="card-header">
<div class="card-header-left">
<img src="./image/light.png" />
<div class="card-header-left-text">커머스</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div class="card-content">
<div>나를 표현하는 쇼핑,</div>
<div>지그재그</div>
</div>
<div class="card-tag">
<div>#개인화추천</div>
<div>#쇼핑</div>
<div>#스타일</div>
</div>
<img class="card-img" src="./image/content3.jpg" />
</div>
</div>
<div class="row">
<div class="card">
<div class="card-header">
<div class="card-header-left">
<img src="./image/light.png" />
<div class="card-header-left-text">AI/블록체인</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div class="card-content">
<div>
다양한 기술, 플랫폼,
</div>
<div>
서비스를 연결하는...
</div>
</div>
<div class="card-tag">
<div>#B2B</div>
<div>#기업솔루션</div>
</div>
<img class="card-img" src="./image/content4.jpeg" />
</div>
<div class="card">
<div class="card-header">
<div class="card-header-left">
<img src="./image/light.png" />
<div class="card-header-left-text">비즈니스</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div class="card-content">
<div>
AI 기반 비즈니스 플랫폼,
</div>
<div>
카카오 i 커넥트
</div>
</div>
<div class="card-tag">
<div>#AI솔루션</div>
<div>#B2B</div>
<div>#비즈니스</div>
</div>
<img class="card-img" src="./image/content5.jpg" />
</div>
<div class="card">
<div class="card-header">
<div class="card-header-left">
<img src="./image/light.png" />
<div class="card-header-left-text">라이프</div>
</div>
<img src="./image/three-dots.png" />
</div>
<div class="card-content">
<div>
정확하고 즐거운 운전 도우미,
</div>
<div>
카카오내비
</div>
</div>
<div class="card-tag">
<div>#길안내</div>
<div>#내비게이션</div>
<div>#내차관리</div>
</div>
<img class="card-img" src="./image/content6.jpg" />
</div>
</div>
</body>
</html>
4. 마무리
- 지금까지 카카오 서비스 웹 페이지를 클론 코딩 해보았습니다.
- 어떠신가요? 재미있으셨나요?
- 사실 개발을 1도 모르는 사람이, 끝까지 해내고 이 글을 보고 계신 것 자체가 대단한 겁니다.
- 제가 이미 배운 내용이라면서 낸 과제들이 사실 절대 쉬운 부분이 아닙니다.(정말 이미 배운 내용이긴 했지만...!)
○ 뒤로 갈수록 어려웠을 것이고, 제가 직접 해보고 정답을 보라고 했지만, 직접 못해냈어도 그게 정상입니다.
○ 직접 해냈다면, FE(Front End) 개발에 재능이 있으신 겁니다!
- 지금까지 해온 과정을 되짚어보시고 생각해 보세요. 내가 평생 이런 일을 한다면 재밌을까? 보람찰까?
○ 어려웠고, 많은 시간이 걸렸고, 못 푼 과제도 많았지만, 재밌었다 → FE 개발자가 적성에 맞으신 겁니다.
○ 그다지 재미는 없었지만, 할만했다. 쉬웠다. → FE 개발에 재능이 있으신 겁니다.
○ 너무 재밌었고, 할만했다. → 천상 FE 개발자
- 위 3가지에 모두 해당하지 않더라도 너무 쉽게 개발을 포기하진 마세요.
○ 개발에는 매우 다양한 분야가 있고, 각 분야마다 필요한 적성과 능력이 약간씩 다릅니다.
○ 곧 BE(Back End) 개발자 적성 글을 작성할 예정입니다.
'프로그래밍 > HTML & CSS' 카테고리의 다른 글
| [HTML] 여러 요소를 박스로 감싸는 fieldset, legend (0) | 2023.01.18 |
|---|
댓글