코린이의 프로파일카드 클론코딩 후기

김지현·2022년 10월 28일

CSS html 클론코딩

클론코딩

목록 보기

1/1

유튜버 Codeminton 님의 Profile Card UI 디자인 ASMR 영상을 보면서 Clone Coding 해본 결과물이다.
처음으로 CSS 파일과 SCSS 파일을 만들어서 진행했는데 배운게 많았다.

Codeminton의 영상 보러가기

🗂️확장파일 설치하기

작업은 VSCode 로 했으며, 작업폴더 이름은 Profile_Card로 설정했다.
내내 이클립스로 작업하다가 VSCode로 오랜만에 작업하는지라 확장파일을 설치할 게 좀 있었다.

Live SASS Compiler

SCSS 파일을 작업한다면 꼭 설치해야하는 확장자다.
SCSS 파일은 바로 html에 적용이 되지 않기 때문에 이를 css파일로 컴파일 시켜야 하는데, 이 컴파일 작업을 해주는 확장자가 바로 이것이다.

설치를 하고 해당 프로젝트에 대한 settings.json 설정을 편집해주어야 한다. 나는 아래와 같이 편집해줌.

... 저장경로를 ~/../css 라고 써놔서 의도치 않게 scss 폴더안에 css 폴더가 새로 만들어지면서 컴파일된 css파일들이 거기에 저장되었다.
원래는 scss와 lib 폴더를 가지고 있는 상위 css 폴더에 컴파일된 css파일을 저장하려했는데..ㅠ 저장경로 잘 확인하고 하자. 여튼 위의 settings.json 설정하려면 저장경로에 해당하는 폴더를 미리 이렇게 만들어두는게 좋다.

Live Server

저장하는대로 바로바로 브라우저에서 작업물을 확인할 수 있다. 새로고침을 따로 안해도 되는 편리함...
뭐 필수는 아니지만 프론트엔드 작업을 하고 있다면 설치하는 걸 추천한다.

설치를 하고 나면 하단바에 이렇게 'Go Live' 라는 버튼이 뜨는데, 이걸 클릭하면 바로 작업하고 있는 브라우저 창이 열린다. 한쪽에 켜두고 계속 봐가면서 하면 됨!

index.html 작업하기

html:5 를 입력해 기본 html 틀을 불러온다.
<Head> 의 <title>에 브라우저 제목이 될 'Profile Card' 를 입력해준다.
그리고 적용할 css 파일을 불러와준다. (경로 잘 확인하고 가져오기. style css 파일은 작업한 scss 파일말고 컴파일된 css 파일의 위치를 적어야 한다.)

<Body> 부분에 먼저 명함카드 자체를 만들 큰 틀을 <div class="profile-card"> 로 잡는다.
그리고 그 안에 들어갈 프로필 사진 부분을 작성해준다.
<figure class="profile-card__img">
그리고 설명 부분(<div class="profile card__desc">)을 작성해준다.
내 이름, 직무, 사는 곳 등...
이때 라인 21~25까지 있는 svg 태그는 위치 아이콘의 svg이다.

아래 링크로 들어가서 아이콘을 찾아 svg를 복사해오면 된다.
아이콘 주소

소셜미디어 연동 버튼 부분을 만들어준다. 내 트위터, 인스타그램 등을 연결하는 버튼이랄까..? <div class="profile-card__social"> 로 잡고 그 안에 <a> 태그들을 만들어 작업한다. 클릭하면 해당 링크로 이동해야하니깐. 이 안에 각자 들어간 svg 파일도 각 SNS의 아이콘svg 파일이다.
마지막으로 메세지 보내기와 팔로우하기 버튼이 들어갈 클래스를 만들어준다. <div class="profile-card__actions">

reset.css 작업하기

index.html에 불러온 파일 중 Reset CSS란, 웹 브라우저마다 다른 default 스타일이 지정되어 있어, 이를 초기화함으로 다양한 웹브라우저에서도 동일한 스타일이 적용되도록 하는 설정이다.

reset.css 코드는 그냥 검색해서 찾으면 된다. 나는 영상에서 유튜버가 사용한 코드를 가져왔다.

*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Reapply the pointer cursor for anchor tags */
a, button {
    cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu {
    list-style: none;
}

/* For images to not be able to exceed their container */
img {
    max-width: 100%;
}

/* removes spacing between cells in tables */
table {
    border-collapse: collapse;
}

/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
    -webkit-user-select: auto;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
    white-space: revert;
}

/* minimum style to allow to style meter element */
meter {
    -webkit-appearance: revert;
    appearance: revert;
}

/* reset default text opacity of input placeholder */
::placeholder {
    color: unset;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
    display: none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly.
   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable="false"])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
    -webkit-user-drag: element;
}

파일은 css 파일에 넣었다. 뭐 프로젝트가 크지 않아 굳이 저기 안넣었어도 됐는데, 그래도 css 파일 구분하려고 넣음.

style1.scss 작업하기

style1.scss 파일은 html에 적용할 css 디자인을 작업한 SASS(SCSS) 파일이다. Sass란 Syntactically Awesome Style Sheets의 약자로, CSS pre-processor이다. 쉽게 말하면 Sass를 배우면 CSS 작업이 짱 편리해진다. 반복되는 내용은 줄이고 코드의 재활용성 및 가독성을 높여 효율적으로 스타일시트를 관리하기 때문에.
Sass와 SCSS의 차이점이 있는데, SCSS는 중괄호를 써서 범위 구분을 하고, Sass는 들여쓰기로 구분함. 나는 CSS와 구문 형태가 더 비슷한 SCSS 를 사용했다.

(사실 scss 파일 이름은 style.scss 였는데.. 하도 컴파일 오류가 초반에 나서 지웠다가 새로 만들었다가.. 뭐 여러 과정을 거치다 보니깐 style1.scss가 되어버렸다..)

먼저 html에 사용할 폰트를 import 시켜준다.

폰트는 Google 폰트에 들어가서 원하는 특정 폰트 옆의 '+' 버튼을 클릭해 장바구니..? 같은 곳에 담아놓으면 오른쪽과 같이 Selected Family하고 창 같은게 생긴다.
거기서 @import 를 클릭하면 아래 복사할 수 있는 코드가 나오는데 그걸 복사해서 위와 같이 붙여넣기 해주면 된다.

<body> 부분 스타일링을 적어준다. 전체적인 폰트, 정렬 등등..?
라인 24의 backgroundZoomAnimate는 배경이 확대되는 애니메이션 설정을 적은 것이다. 이걸 라인 20에서 가져와 적용시킴.
이제 profile-card 에 해당되는 클래스를 설정해준다. 프로필 카드 박스에 대한 설정을 해주는 것이다. 섀도우, 테두리, 안에 블러처리, 패딩 등등...
반응형 웹을 만들기 위해 라인 45~47을 넣었고, 이럼 프로필카드의 최대 너비가 768px까지만 되도록 설정된다.

여기까지하면 작업물은 이렇게 보인다.

프로필 사진 부분을 설정해준다.
&__img 는 상위 클래스인 profile-card 뒤에 __img가 붙은 클래스를 지칭하는 것이다.

여기까지 하면 이렇게 보일 것이다.

profile-card__desc 클래스를 설정해보자. 이름과 직무 등이 가운데로 정렬되게 하고, 폰트 크기 등을 설정했다.

여기까지 작업물

팔로워 등의 info 부분을 설정해준다. 숫자와 글씨의 크기, 굵기 등이 각각 다르게 설정되게끔 first-child 와 last-child를 활용해 적어본다.

여기까지의 결과물

소셜미디어 버튼 부분을 설정해준다. 전체적인 버튼 크기, 아이콘 그림 색, 테두리 곡률 등을 a 태그를 설정해주는 부분에 넣고.. 라인 131 부근에 마우스호버때의 애니메이션을 넣고 싶었는데 작동이 되지 않아서 이 부분을 각각의 아이콘 설정 부분에 넣어주었다.

각각의 SNS - 트위터, 인스타, 블로그, 유튜브, 깃허브 아이콘 클래스의 배경색과 박스 섀도우, 그리고 마우스호버 설정을 적어주었다. 이 유튜버분 대단하신게 어떻게 그 SNS에 해당하는 색상을 뚝딱 잘 적어내시는지,, 이것이 짬밥인가..

여기까지 하면 이렇게 되고

각 버튼 위에 마우스를 올리면 버튼이 이렇게 커진다.

이제 맨 마지막, 아래 <div class="profile-card__actions"> 부분을 설정해준다.
두 버튼을 포함한 전체 actions 클래스 구역에 대한 설정.

버튼 자체에 대한 설정. 그 안에 글씨 두께, 글씨 크기, 패딩, 글 정렬, 글 색상 등을 설정해준다. 그리고 버튼에 대한 반응성 설정도 해줌.

마지막으로 각각 버튼에 대한 색상 설정 및 마우스호버 이벤트 설정을 해준다.

그럼 이제 완성!

이것 또한 이렇게 버튼 위에 마우스를 올리면 위로 붕 뜨는 듯한 애니메이션이 적용된다.

후기

scss를 처음 작업할 뿐만이 아니라 템플릿 사용없이 처음부터 끝까지 css 작업을 해본것이라 전체적으로 어떻게 css 템플릿을 제작하고, 이게 어떻게 돌아가는지 이해할 수 있었다.

뿐만 아니라 scss 를 이제 작업하면서 이게 왜 html에 적용이 안되는지 한참을 고민하고 삽질하다보니 Live Sass Compiler에 대해 스스로 알게 되었고, 이를 설치하고 적용하는 과정도 거치다 보니 얻어가는 것도 많았다. 이걸 몰랐으면 나 클론코딩도 못할뻔...😥

그리고 학원에서 배운 심플하고 뭔가 딱딱한.. 윈도우 같은 디자인만 하다가 프론트엔드 전문가이신 요 유튜버님을 따라하다 보니깐 내가 만들 수 있는 것보다 훨씬 이쁜 디자인이 탄생하게 되었다... 이를 만드는 과정에서 필요한 요소들을 배울 수 있어서 좋았음.

백엔드 요소가 들어가지 않은 프론트엔드 작업이지만, VSCode 로 오랜만에 돌아와서 바로 백엔드부터 하는 것보다 이렇게 html이랑 css부터 작업하니 다시 처음부터 배워가는 것 같고 부담이 없었다. 천천히 이제 백엔드 요소들을 하나씩 넣어보는 시간을 가져야지.

김지현

개발자 지현의 개발일기