원 도형은 상단의 도형툴에서 Ellipse 를 선택하여 생성할 수 있다.

이때, 그냥 Drag하여 생성하면 타원형이 만들어지니 우리가 아는 동그라미를 만들기 위해서는 Shift키를 눌러 만들면 된다.

1. 예제) 원자력발전소 아이콘 모양 만들기

먼저 프레임을 만들어주고, 100x250의 원형을 중앙에 생성해준다.

그리고 나서, 오렌지 컬러의 10px 테두리를 넣고 면색을 없애준다. 면색을 없애는 방법은 투명도를 0으로 하는 방법도 있지만 '-' 를 눌러도 없어진다.

원형을 하나 더 만들어주는데, 이번엔 30x30의 원형을 만들어준다. 색상은 아까 만들었던 원형의 테두리와 같은 색을 사용해준다. 그리고 위치를 아래와 같이 지정해주고 처음에 만들었던 원형과 그룹화를 시켜준다. (Ctrl+G)

그룹화가 되었는지 확인하는 방법은 - 레이어 쪽에서 Group 이라고 되었는지 확인하거나

Design 에서 Group이라고 되어있는지 확인하면 된다.

이때 복제(Ctrl+D)를 한 번 더 한 다음

회전을 120도 처리해준다.

이걸 다시 한번 복제한 다음 회전을 240도 처리해준다.

여태껏 한 걸 모두 그룹화 시킨 다음, 회전률 한 30도를 넣으면 아래와 같은 원자력 발전소 모양의 아이콘이 생성된다.

여기에 가운데 Fill 없고 Stroke만 동일하게 만든 50x50의 원을 하나 더 만들어보자. 짠.... (이게 원자력 발전소 아이콘이 맞나...)

✨ 이 게시글은 유튜브 '오쌤의 니가스터디' 영상을 보고 배운 점을 정리한 개인적인 정리 블로그입니다.

관련된 단축키가 2가지 있는데,

Alt 키는 중심 기준으로 그리는 단축키이며 Shift키는 정비율로 그리는 단축키이다.

사각형 만들기

사각형을 하나 생성해보자. 먼저, 프레임을 만들어야 하기 때문에, 프레임을 생성해준다.

그리고 그 프레임 위에 사각형 툴을 클릭하고 사각형을 그려주면 된다.

Shift 키를 누른채 그려주면 정비율의 사각형이 만들어진다. (정사각형)

1. 사각형 색 변경하기

사각형의 색 변경의 옆의 Design에서 Fill 을 클릭해 색상을 지정해 변경하면 된다.

2. 테두리 색/굵기 변경하기

테두리 변경의 경우, 옆의 Design에서 Stroke를 선택하면 된다. 우선 Stroke를 누르는 동시에 검정 테두리가 생긴다.

굵기의 경우, 아래의 숫자를 조절하면 되며 색상은 Fill과 마찬가지로 Stroke 내에서 테두리 색상을 선택하면 된다.

3. 예제) 햄버거 메뉴 만들기

우선 900x900 프레임을 준비하고, 200x20의 사각형을 만들어준다. (색상으 내 맘대로 지정해봤음)

여기서 Alt키를 눌러 도형복제를 해보자.

여기서 또 [Ctrl] + [D]를 누르면 방금했던 작업을 복제해준다. 그럼 이동도 똑같이 되고, 도형도 똑같이 복제됨.

여기서 도형간 거리를 좀 더 넓히고 싶으면, 우선 선택 툴로 3가지 도형을 모두 선택한 다음, 도형 사이에 있는 저 '-' 부분을 늘려준다. 아래는 늘린 후의 모습임.

모서리가 둥근 사각형 만들기

사각형 툴에서 모서리를 둥글게 하면 됨.

1. Design에서 곡률 선택하기 방법

사각형을 클릭한 다음, Design 툴에서 아래 부분을 조절해주면 된다.

만약 여기서 모서리마다 다르게 지정하고 싶다고 하면 아래 선택된 버튼을 클릭하여 조절하면 된다.

나는 50, 100, 150, 200으로 선택했고, 그럼 아래와 같이 좌측상단부터 시계방향으로 모서리가 설정된다.

2. 사각형의 모서리 끌고오기 방법

사각형을 클릭하면 모서리마다 동그라미가 있는데, 이걸 중앙으로 끌고올 수록 둥그런 모서리가 만들어진다.

이 방법으로 각 모서리마다 다르게 조절하고 싶다면, Alt키를 누른 상태에서 모서리를 당기면 된다. 맨 첫번째 모서리만 Alt 키 누른채 당기면 나머지는 그냥 당겨도 각각 조절된다.

3. 예제) 배터리 아이콘 만들기

우선 프레임을 만들어서 프레임 자체를 검정색으로 만들어 봤다.

그리고 나서 800x400의 사각형을 만들어서 가운데에 배치했다. (스마트 가이드 사용)

그 다음, 사각형의 Fill을 없앴다 (=Opacity 0%)

도형에 대해서 흰색의 테두리는 생성해줬다. (테두리 10)

모서리 둥글기는 50을 줬다.

그리고 흰색 사각형을 하나 더 만들어줬는데, 모서리는 10 정도로 해주었다. (330x70)

Alt를 눌러 복제한 다음 Ctrl+D를 눌러 7개까지 만들어줬다.

우측 끝부분에 간격이 조금 남는데, 이건 안의 7개 사각형을 모두 선택한 다음 스마트 셀렉션의 간격 조정을 해주었다. (+ Ctrl+G로 그룹화한다)

그룹화를 하면 중앙에 맞출 수 있기 때문에 중앙에 맞춰 정렬해준다.

✨ 이 게시글은 유튜브 '오쌤의 니가스터디' 영상을 보고 배운 점을 정리한 개인적인 정리 블로그입니다.

Grid 는 오브젝트를 더 섬세하게 작업할 수 있게 도와주는 격자선이다. 피그마에서의 Grid 장점은 여러 컬럼 그리드를 레이어처럼 사용할 수 있다.

💡꼭 알아야할 2가지 용어

 1. margin = 프레임과 전체 컬럼간의 좌우 여백
 2. gutter = 컬럼과 컬럼 사이의 여백

출처 : 유튜브 "오쌤의 니가스터디"

우선 실습을 위해 프레임(아이폰14)을 하나 만들고 Alt키를 눌러 3개로 복제해주자.

1. 격자무늬 모양 Grid 생성

프레임을 클릭한 후, 우측의 Design 쪽에 보면 Layout grid 라는 것이 있다.

이걸 클릭하면 아래와 같이 프레임에 격자무늬 모양의 그리드가 생성된다.

지금은 10픽셀의 단위로 그려져 있는데, 이것도 조절할 수 있다. 아래 Color 에서는 그리드 색상도 변경할 수 있음.

2. Column Grid 생성

내가 이전에 만든 3개의 프레임 중 2번째에는 컬럼 그리드를 만들어 보도록 해보겠다. 마찬가지로, Layout Grid 를 통해 그리드를 먼저 만들어준다.

그리드 아이콘을 누른다음에 grid라고 적힌 거를 클릭한 후에, 이거를 Column 으로 변경하면 된다.

그럼 아래와 같이 바뀐다.

이것또한 margin 이랑 gutter 를 변경할 수 있는데, margin 을 15로, gutter를 10으로 변경해보겠음. 그럼 아래와 같이 맨 끝 좌우 쪽에는 15만큼 마진이 생겼고, 컬럼 그리드 사이 간격은 10로 줄어든 것을 볼 수 있다.

그리고 여기서 count 를 변경하면 컬럼 수를 변경할 수 있다. 기존의 5 카운트에서 6카운트로 변경해봤다.

3. Row Grid 생성

이번엔 3개의 프레임 중 3번째 프레임에 연습하도록 하겠음. 마찬가지로 Layout Grid 를 클릭해 그리드를 만들어준다. 그리고 그리드 아이콘을 클릭해 Grid 라는 것을 이번엔 Rows로 바꿔준다. 그럼 아래와 같이 Row Grid 가 생성됨.

여기서의 margin은 프레임 위아래 여백이 된다.

참고로 웹에서 가장 많이 사용하는 것은 컬럼그리드이다.

Grid 생성시 참고 사이트

아래는 웹 그리드 시스템을 계산할 때 쉽게 계산할 수 있는 사이트다. Grid Calculator

컬럼 수랑 Gutter, Margin width 를 입력해주면 Column width 를 계산해준다.

근데...? 피그마는 자동으로 계산해주니깐 편리함.

PC의 12컬럼 사이트 만들기 예제

예제로 한 번 연습해보자.

PC 최적해상도는 1920px이다. 우리가 연습해볼 삼성화재 사이트의 경우, 웹컨텐츠 사이트를 1180px로 설정해뒀다. 그리고 12 컬럼으로 설정했고, 사이사이 gutter는 20px, margin은 370px.

그런 계산을 아래의 Grid Calculator로 할 수 있는 것이다. 그럼 컬럼 두께가 나옴.

✨ 이 게시글은 유튜브 '오쌤의 니가스터디' 영상을 보고 배운 점을 정리한 개인적인 정리 블로그입니다.

Guide는 오브젝트를 더 섬세하게 작업할 수 있게 도와주는 안내선.

사용방법 = 눈금자 단축키를 사용하면 된다. [Shift] + [R]

먼저, 빈 캔버스?에 프레임을 생성해보도록 하자. 나는 또 안드로이드 프레임을 생성했다.

여기에 눈금자 단축키를 입력하면 아래와 같이 나온다. 눈금자가 생긴걸 확인할 수 있다.

여기서 가이드를 꺼내고 싶으면, 눈금자를 클릭해 프레임으로 쭉 끌고 오면 된다. 설명하기 어려워서 영상을 첨부함.

이 상태로 프레임을 복제를 하면 가이드도 그대로 복제가 된다.

Guide 지우기

1. 눈금자까지 미는 방법

첫번째 방법으로, 위 제목과 같이 눈금자까지 미는 방법이있다. 눈금자에서 끌어와서 가이드를 생성하는 방법과 같이, 가이드를 다시 눈금자까지 밀어넣는 방법이다.

2. Delete하는 방법

두번째 방법은 그냥 쉽게 Delete 키로 지우는 방법이다. 지우고 싶은 눈금선을 클릭하면 아래와 같이 눈금선이 파란색으로 변경되는데, 이때 Delete 키를 누르면 지워진다.

오브젝트의 거리 측정

좀 전에 만들었던 프레임 위에 사각형 오브젝트를 하나 만들어 보자.

그리고 가이드를 해당 오브젝트 내에서 슬슬 움직여 보면 숫자가 뜨는 것이 보인다.

오브젝트가 프레임에서 얼마나 떨어졌는지 보여준다.

이걸 좀 응용해서, 위의 사각형 오브젝트의 20px 아래에 다른 사각형을 둬야 한다고 해보자. 어떻게 정확히 20px 아래에 위치할 수 있을까.

[alt] 를 누른채 가이드를 생성하면 해당 오브젝트간의 거리를 표시한채로 가이드를 생성할 수 있다.

아래 영상을 참고하면 좋다.

그렇게 세로축도 똑같이 조절 가능함.

✨ 이 게시글은 유튜브 '오쌤의 니가스터디' 영상을 보고 배운 점을 정리한 개인적인 정리 블로그입니다.

피그마 상단에 위치한 Frame 버튼 혹시 기억 나는지...?

바로 이 샵..? 같이 생긴 버튼이다.

저 버튼을 클릭하면 우측 Design 영역에 아래와 같이 다양한 Frame 의 종류가 나타난다.

뭐 핸드폰, 태블릿, PC, PPT, 워치 등 다양한 프레임으로 만들 수 있다.

이때, 페이지 별로 구분해서 디자인을 할 수 가 있는데 우선 이번 실습에 관련한 페이지를 페이지 1에 작업하도록 하겠다. (더블클릭해서 이름 변경할 수 있음)

여튼.. 다시 프레임으로 돌아와서, 나는 안드로이드를 쓰니깐 Android Large 라는 프레임을 선택했다.

그럼 선택하자마자 아래와 같이 안드로이드 크기의 프레임이 생성되고, 그에 맞게 레이어와 디자인 영역이 세팅된다.

이 바로 옆에 아이패드 미니 사이즈의 프레임을 생성해보자. 프레임 클릭 후, 저 iPad mini 를 클릭한다.

그럼 아래와 같이 iPad mini 프레임도 생성된다.

좌측의 레이어 영역에 보면 프레임 모양(#) 이 2개가 있고 각각 프레임명이 적혀져 있다.

자유로운 Frame 생성

위의 방법은 정해진 프레임 대로 생성하는 방법이며, 내가 원하는 크기로도 얼마든지 프레임을 생성할 수 있다.

프레임 버튼을 클릭하고 캔버스 위에 마우스로 영역을 지정해주기만 하면 끝이다.

그럼 내가 지정한대로 프레임이 생기는데

우측의 Design 에서 세부적으로 더 수정할 수 있다. 아래의 W(너비)와 H(높이)를 조절하면 된다.

Frame 삭제

삭제는 쉽다.

그냥 화살표 툴을 누른 후 삭제할 프레임 영역을 정하고 Delete 버튼 을 누르면 된다. &nbsp &nbsp &nbsp Delete 전 - 영역 선택 단계 &nbsp&nbsp Delete 후

Frame 이름 변경

프레임 이름 변경 방법도 간단하다. 프레임 좌측 상단에 보면 프레임명이 적혀있는데, 이를 더블 클릭하고 수정하면 되기 때문.

이렇게.

Frame 복제

피그마에서는 프레임을 하나의 오브젝트로 인식하여, 이를 복제할 수 있다.

프레임 좌측 위쪽의 이름 부분을 Alt 를 누른 상태로 클릭하고 이동하면 그대로 복사된다. 복사하면서 간격을 볼 수 있어서 편리함.

Frame 모서리 둥글게 하기

지금은 모서리가 굉장히 90도로 각져있지만, 이 모서리를 둥글게 할 수도 있다. 프레임을 클릭한 후에, Design 영역에서 아래에 해당하는 부분을 조절해주면 된다.

한번 100이라는 수치를 집어넣어봤다.

모서리가 조금 둥글어진게 보이시는지,,,

Frame 색상 변경하기

지금은 프레임이 흰색 바탕으로 되어 있지만, 이 배경색 역시 변경할 수 있다.

마찬가지로, 프레임을 선택한 후에 Design 쪽에 보면, Fill 이라는 부분이 있다.

여기서 색상을 선택하면 된다.

나는 아래와 같은 색을 선택했고,

결과는 아래와 같다.

✨ 이 게시글은 유튜브 '오쌤의 니가스터디' 영상을 보고 배운 점을 정리한 개인적인 정리 블로그입니다.

피그마에 로그인을 하고, 'New Design File' 을 클릭하면 아래와 같은 화면이 나온다.

우선, 상단의 좌측부터 살펴보자.

맨 좌측부터 메뉴모음 > 마우스? > 프레임 > 도형툴 > 펜툴 > 타이틀 > 리소스 > 손툴 > 코멘트 순이다.

메뉴모음인 저 F 를 클릭하면 아래와 같이 나온다. 진짜 우리가 흔히 아는 그 메뉴.

좌측에 또 아래와 같은 것을 확인할 수 있는데, 바로 레이어/Asset 창이다. 포토샵을 조금 해봤다면 레이어가 뭔지 쉽게 알 수 있음..

또 우측에는 아래과 같이 오브젝트에 대한 디자인을 변경할 수 있는 영역이 있다.

이메일을 확인해서 confirm 을 눌러주고

비밀번호를 설정해서 가입을 완료해준다.

그러면 아래와 같이 code를 제공해주는 화면이 뜬다. 이 kit code를 복사해서 내가 아이콘을 사용하고 싶은 페이지의 <head> 부분에 넣어주면 된다. 쉽죵?

그리고 페이지에서 마음에 드는 아이콘을 찾는데... 찾았다면 옆에 있는 저 코드를 클릭해 복사하고, 프로젝트 페이지 내에서 원하는 부분에 붙여넣기 하면 끝!!

유튜버 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 작업하기

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

3. <Body> 부분에 먼저 명함카드 자체를 만들 큰 틀을 <div class="profile-card"> 로 잡는다.

4. 그리고 그 안에 들어갈 프로필 사진 부분을 작성해준다. <figure class="profile-card__img">

5. 그리고 설명 부분(<div class="profile card__desc">)을 작성해준다. 내 이름, 직무, 사는 곳 등... 이때 라인 21~25까지 있는 svg 태그는 위치 아이콘의 svg이다.

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

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

7. 마지막으로 메세지 보내기와 팔로우하기 버튼이 들어갈 클래스를 만들어준다. <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가 되어버렸다..)

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

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

2. <body> 부분 스타일링을 적어준다. 전체적인 폰트, 정렬 등등..? 라인 24의 backgroundZoomAnimate는 배경이 확대되는 애니메이션 설정을 적은 것이다. 이걸 라인 20에서 가져와 적용시킴.

3. 이제 profile-card 에 해당되는 클래스를 설정해준다. 프로필 카드 박스에 대한 설정을 해주는 것이다. 섀도우, 테두리, 안에 블러처리, 패딩 등등... 반응형 웹을 만들기 위해 라인 45~47을 넣었고, 이럼 프로필카드의 최대 너비가 768px까지만 되도록 설정된다.

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

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

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

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

여기까지 작업물

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

여기까지의 결과물

7. 소셜미디어 버튼 부분을 설정해준다. 전체적인 버튼 크기, 아이콘 그림 색, 테두리 곡률 등을 a 태그를 설정해주는 부분에 넣고.. 라인 131 부근에 마우스호버때의 애니메이션을 넣고 싶었는데 작동이 되지 않아서 이 부분을 각각의 아이콘 설정 부분에 넣어주었다. 각각의 SNS - 트위터, 인스타, 블로그, 유튜브, 깃허브 아이콘 클래스의 배경색과 박스 섀도우, 그리고 마우스호버 설정을 적어주었다. 이 유튜버분 대단하신게 어떻게 그 SNS에 해당하는 색상을 뚝딱 잘 적어내시는지,, 이것이 짬밥인가..

여기까지 하면 이렇게 되고 각 버튼 위에 마우스를 올리면 버튼이 이렇게 커진다.

8. 이제 맨 마지막, 아래 <div class="profile-card__actions"> 부분을 설정해준다. 두 버튼을 포함한 전체 actions 클래스 구역에 대한 설정. 버튼 자체에 대한 설정. 그 안에 글씨 두께, 글씨 크기, 패딩, 글 정렬, 글 색상 등을 설정해준다. 그리고 버튼에 대한 반응성 설정도 해줌. 마지막으로 각각 버튼에 대한 색상 설정 및 마우스호버 이벤트 설정을 해준다.

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

후기

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

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

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

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

아래 사이트로 들어가 윈도우용 Git 을 다운받고 설치한다. https://git-scm.com/download/win

아래 사진 중에서 'Click here to download' 를 클릭하면 저절로 윈도우용 git 이 다운로드 된다.

다운로드 된 파일을 실행시키면 아래와 같은 설치화면이 뜬다. Next 를 눌러 설치를 진행한다.

아래와 같이 체크하고 Next 클릭

나는 VSCode 랑 연동할 것이기 때문에 'Use Visual Studio Code as Git's default editor' 로 설정하고 Next 를 눌렀다. 뭐 Nano나 Vim, Atom 등을 기준으로 연동하고 싶다면 해당 선택지를 클릭하고 넘어가면 됨.

이건 리파지토리의 최초 브랜치 이름을 설정하는 단계인데.. 나는 그냥 Git이 정해주는대로 master 로 설정한다고 선택했다. 아래 선택지는 내가 따로 설정하는 거.

아래는 cmd에서도 git을 조작할 수 있게 할건지 설정하는 것이다. 첫번째 선택지는 Git Bash에서만 Git 명령어 사용. 두번째 선택지는 git을 환경변수(PATH)에 추가해 윈도우 cmd 에서도 git 사용. 세번째 선택지는 git과 unix 도구 모두 환경변수에 추가. 나는 그냥 두번째에 Recommend 되어있어서 그걸 선택했다. 다른 서드파티 소프트웨어에서도 git 조작할 수 있다고 적혀있어서..

아래는 SSH 실행도구를 선택하는 창. 첫번째는 Git에 기본으로 포함된 OpenSSH 사용 두번째는 PuTTy를 사용 세번째는 외부 OpenSSH 사용. Path에 명시된 OpenSSH를 사용한다. 나는 첫번째꺼 선택.

아래는 HTTPS 연결 옵션 선택 창. 첫번째는 OpenSSH 라이브러리 사용. 두번째는 윈도우 인증서 저장소를 사용하여 검증한다는 뜻. 첫번째 선택함.

아래는 줄바꿈을 설정하는 창. 윈도우와 유닉스 계열의 줄바꿈 표기가 서로 다르기 때문에 설정을 해주는 것이다. 윈도우는 "\r\n", 유닉스 계열은 "\n"을 사용함. 첫번째는 checkout 때 윈도우 스타일을 적용하고, commit 때는 유닉스 스타일로 적용하는 옵션. 두번째는 checkout 때 변경 없고, commit 때는 유닉스 스타일로 적용하는 옵션. 세번째는 둘 다 변경없이 그대로. 나는 첫번째 선택지를 선택했다.

아래는 어떤 터미널 에뮬레이터를 사용할껀지 설정하는 창이다. 기본 옵션을 따랐다.

아래는 git pull 명령어의 기본 설정을 선택하는 창이다. 첫번째는 기본 동작. 두번째는 현재 분기를 불러온 분기에 재배치. 세번째는 불러온 분기로 빠르게 넘어가기. 첫번째를 선택한다.

아래는 자격 증명 도우미를 사용할지 선택하는 창. 나는 사용한다는 첫번째 옵션을 선택했다.

아래는 추가옵션을 선택하는 창이다. 첫번째는 파일 시스템 캐싱 기능을 사용하는 옵션. 두번째는 심볼릭 링크를 사용하는 옵션. 첫번째만 선택하고 넘어갔다.

아래는 최신 기능을 사용할 건지 묻는창... 실험실 기능.. 나 그런거 사용 안하니깐 선택 안하고 넘어감. 버그 생기면 어떡하라구. 마지막으로 Install 누르면 설치가 진행된다.

설치 진행중!

Git이 설치되었다.

설치 확인 및 사용자 등록

Git Bash 를 열어준다.

아래와 같이 입력해서 이름과 이메일 등록을 해준다.

git config --global user.name "사용자이름"
git config --global user.email "사용자이메일"

그리고 아래의 코드를 입력해서 잘 실행되는지 확인한다.

git config --list

윈도우 cmd 창에서 git 을 입력해서 잘 실행되는지 확인하자. 아래와 같이 나오면 윈도우에 git 설치하기 끝!

VSCode 에 Git 연동하기

일단 gitHub에 새로운 repository를 생성했습니다. 현재 프로파일카드를 간단히 만들어보고 있어서 아래와 같이 이름지었습니다.

이제 VSCode 를 열고 gitHub에 올리고자 하는 폴더를 선택해 열어줍니다. 저는 폴더를 만들고 미리 작업을 조금 해놓은게 있었어요.

그리고 왼쪽에 브랜치 모양 아이콘을 클릭하면 아래와 같은 화면이 나옵니다. 여기서 저는 '리포지토리 초기화' 를 클릭해줍니다. 이를 클릭하면 이 폴더에 있는 파일들을 git 명령어를 통해 관리할 수 있습니다.

gitHub 리파지토리에 들어가서 아래와 같이 리파지토리 주소를 복사합니다.

VSCode 에서 터미널 - 새터미널을 클릭하고 리파지토리 주소 설정을 해줍니다.

아래 뜨는 터미널에

git init
git remote add origin (아까 복사한 repository 주소)

를 입력하고 엔터를 눌러줍니다. (처음에 add origin 이 아니라 origin add라 해서 오류났어요.. 다시 add origin으로 고쳐서 엔터 눌렀답니다.)

아무일도 일어나지 않는데, 여기서 git remote -v 를 입력해 repository 주소가 잘 설정됐는지 확인하면 됩니다.

참고로 VSCode 맨 아래 파란색 하단에 있는 master 를 클릭하면 아래와 같이 브랜치를 새로 생성하는 등 관리를 할 수 있다. 새로 생성하면 로컬 브랜치가 만들어짐.(A라 가정) 저 원격 저장소인 master 에서 커밋하고 바로 push하면 혼자서 작업하는 상황에선 상관없다. 하지만 팀원들과 작업하는데 master에서 내가 직접 작업하고 push하고 그러면 안되니깐,, A에서 작업하구, push해서 원격에도 이 브랜치(A)를 만들어준다. 그리고 나서 나중에 팀장한테 pull request하면 됨. 그럼 내가 방금 작업한 A가 master에 적용된다. 충돌이 일어나면 수동으로 조작해줘야 함.

커밋할 대상 선택하기

VSCode 왼쪽 컨트롤 부분을 보면 브랜치 아이콘 옆에 숫자가 떠있고, 이를 클릭하면 아래와 같은 화면이 나옵니다. 커밋을 해야할 작업목록들이 뜨는거죠. 제가 작업한 파일 4개가 일단 목록에 뜹니다.

일단 작업물 하나에 마우스를 올리면 아래와 같이 오른쪽에 아이콘 3개가 더 뜨는데, 이 중 '+' 버튼은 gitHub에 올릴 대기열에 넣는다는 뜻입니다. (스테이징)

4개의 파일 모두 스테이징 했더니 아래와 같이 '스테이징된 변경사항' 목록 아래 파일들이 이동되었습니다. 여기서 반대로'-' 를 클릭하면 다시 '변경사항' 목록으로 돌아갑니다.

변경사항들 위에 파란버튼의 커밋을 누르면 Commit이 되는데, 옆에 화살표를 눌러 선택지를 보면 Commit과 Push를 동시에 할 수도 있습니다. 저는 일단 Commit만 먼저 하겠습니다.

Commit 버튼을 누르게 되면 아래와 같이 Commit의 이름을 적는 란이 생깁니다. 저는 알맞은 설명을 붙여 작성했습니다. 엔터를 누르면 커밋이 완료됩니다. 잘 안되면 위의 체크 아이콘을 클릭하면 됩니다.

아까 버튼을 누를때 commit&push 를 눌러 둘 다 한꺼번에 해도 되지만, 이렇게 따로 push 하게 될 때에는 터미널에서 명령어를 입력해주면 된다.

git push origin master

이라 치면 master란 브랜치에 push 한다는 뜻이다. 아래와 같은 결과가 나오면 성공!

GitHub 에 들어가서 push가 잘 되었나 확인해보면 잘 들어가있다. 나는 git을 설치할때 최초 브랜치 이름을 master로 설정한다고 해서 'master' 브랜치를 클릭하고 들어가야 vscode로 작성한 것들이 잘 들어간 걸 볼 수 있었다. 다들 브랜치 확인 잘 하길. 그리고 보면 내가 commit할때 적은 설명이 그대로 적혀있다.

VSCode extension 추천

Git Graph라는 것을 VSCode 마켓플레이스에서 검색해서 설치하면 git branch 들의 그래프를 시각화하고 commit내용을 쉽게 보는데 유용하다.

아래는 Git Graph 의 단축키 모음 설명이다.

아래는 터미널용 커맨드 모음.

여튼 설치하면 이렇게 sourcetree처럼 그래프로 볼 수 있습니다.

앞선 포스트에서 말했듯이, HTML 은 Hyper Link Markup Language 의 약자로, 여기서 마크업 언어는 '태그를 이용하여 문서나 데이터의 구조를 명시하는 언어'를 지칭한다. 그래서 웹 페이지의 구조를 HTML 태그로 나타내는데 이전 포스트에서 설명한 HTML의 기본 문서구조에서 사용한 <head> , <body> 태그들이 그 예다.

그 태그에 대해서 한 번 알아보자.

태그(tag)의 형식

<태그명 속성= "속성값"> 컨텐츠 </태그명>

• 태그는 컨텐츠를 감싸서 그 정보의 성격와 의미를 정의한다.
• 태그는 < 와 > 로 이용해 구분한다.
• 여는 태그가 있으면 닫는 태그가 있어야 한다. (없는 경우도 있음) 그래서 <태그명 속성= "속성값"> 까지가 여는 태그, 그리고 </태그명> 이 닫는 태그로 한 태그를 이룬다.
• 닫히는 태그가 필요 없는 경우, <태그명 /> 의 형식을 갖는다. ex) <br />
• 태그는 소문자로 쓴다.
• 태그는 속성(Attribute)과 함께 사용할 수 있다. 속성은 태그의 부가적인 정보가 들어온다.
• 시작 태그부터 끝마치는 태그까지 한 요소(Element)라고 볼 수 있다.

위는 태그의 예시이다. 크게 <div> 태그로 감싸져 있고, <div> 태그 안에서도 class 라는 속성이 있다.

<HTML> 태그

웹 문서의 시작을 알리는 태그로, 이 안에 크게 <head>, <body> 태그가 들어가 있다. lang 이라는 속성을 사용해 문서에서 사용할 언어를 지정한다.

<!doctype html>
  <html lang="ko">
    <head>
      ...
    </head>
    <body>
      ...
    </body>
  </html>

위 예시는 한국어로 지정한 것이다.

<Head> 태그

브라우저에서 정보를 주는 head 태그는 웹 브라우저 화면에는 보이지 않지만, 웹 브라우저가 알아두어야 할 정보들을 입력하는 곳이다. 문서에서 사용할 외부 파일들의 링크를 달아두기도 한다.

<title> 태그

브라우저의 제목 표시줄에 표시되는 내용이다.

  <title> 문서 제목 </title>

이렇게 브라우저 제목으로 나온다.

<meta> 태그

문자 인코딩 방법 및 문서의 키워드와 요약 정보를 지정함

  <meta charset="UTF-8">
    - utf-8 으로 인코딩 함
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    - meta viewport 태그는 애플의 모바일 브라우저의 크기 조절을 위해 만듦. 나중에 안드로이드 등 다른 운영체제의 브라우저에서도 채택함.
    - content="width=device-width" 는 브라우저 너비를 장치 너비에 맞추어 표시.
    - content="initial-scale=1.0" 은 초기 화면 배율을 100%로 설정.
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
    - content="IE=edge" 는 IE 브라우저에서, 각 버전 중 가장 최신 표준 모드를 선택하는 문서 모드이다. <!doctype html> 선언과 함께 사용해야 유효하다.
    - http-equiv="X-UA-Compatible" 은 IE간 버전차이로 인해 같은 웹 문서라 해도 다르게 보여질 수 있기 때문에, "호환성 보기" 라는 기능을 부가한 것이다. IE 버전이 다르더라도 같은 화면을 볼 수 있게.

.

<Body> 태그

문서의 몸통 부분으로, 실제 브라우저에 표시될 내용을 입력한다. 대부분의 태그가 이 body 태그 사이에 들어간다.

💡텍스트를 묶어주는 태그

<h1...h6> 태그 - 제목 표시

기본형 : &nbsp <h1> 제목 </h1> , <h2> 제목 </h2> 결과 :

제목

,

제목

• 각 웹 컨텐츠 영역에서 제목을 표시할 때 사용하는 태그
• 크기 순으로 h1 > h2 > h3 > h4 > h5 > h6 이다.
  

<p> 태그 - 텍스트 단락

기본형 : &nbsp <p> 텍스트 </p> 결과 :

텍스트

• 입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어짐

<br/> 태그 - 줄 바꾸기

기본형 : &nbsp <br/>

• 줄을 바꿀 위치에 <br/> 태그를 사용한다.
• 닫는 태그가 없어 끝에 / 를 붙인다.

&nbsp - 띄어쓰기 (space bar 적용)

기본형 : &nbsp 텍스트&nbsp&nbsp&nbsp텍스트&nbsp&nbsp&nbsp텍스트 결과 : 텍스트&nbsp&nbsp&nbsp텍스트&nbsp&nbsp&nbsp텍스트

• 띄어쓰기가 한 번만 표시되므로, 띄어쓰기를 여러번 적용하고 싶을 때 사용한다.

<blockquote> 태그 - 인용문 넣기

기본형 : &nbsp <blockquote> 인용 내용 </blockquote> 결과 : 사진의 형광펜 칠해진 부분과 같이 들여쓰기 됨.

• 다른 텍스트보다 안으로 들여 써짐.

<hr> 태그 - 구분선

기본형 : &nbsp <hr> 결과 :

---

• 수평 줄이 생김. 구분선.

<pre> 태그 - 입력한 그대로 표시

기본형 : &nbsp <pre> 텍 스 트 <pre> 결과 :

 텍      스       트 

띄어쓰기를 하는 대로 그대로 나타난다. (원래는 여러번 해도 2개만 표시됨)

• 시스템에서 미리 지정된 고정폭 글꼴을 사용하여 표현되며, 텍스트에 사용된 여백과 줄바꿈이 모두 그대로 브라우저 화면에 나타난다.
• 소스에 표시한 공백이 그대로 표시된다.
• 프로그램 소스를 표시할 때 유용함.

<!-- --> 태그 - 주석(Comment)

기본형 : &nbsp <!-- 주석처리할 내용 표시 --> 결과 :

• 주석처리 부분으로, 언어로 해석되지 않고 소스에만 남아있는다.

  
  

💡텍스트를 한 줄로 표시하는 태그

<strong>, <b> 태그 - 굵게 표시

기본형 : &nbsp <strong>텍스트</strong>, <b>텍스트2</b> 결과 : 텍스트, 텍스트2

• strong 태그 : 중요한 내용이라서 강조해야 할 때 사용된다.
• b 태그 : 단순히 굵게 표시할 때.
• 둘이 표시되는 건 똑같이 굵게 표시되지만, strong 을 사용할 경우, 이는 중요한 정보를 뜻하는 의미로, 스크린리더 등을 사용할 때 더 거센 억양으로 음을 낸다.

<em>, <i> 태그 - 이탤릭체로 표시하기

기본형 : &nbsp <em>텍스트</em>, <i>텍스트2</i> 결과 : 텍스트, 텍스트2

• em 태그 : 흐름상 특정 부분을 강조하고 싶을 때 이태릭 체로 표현.
• i 태그 : 단순히 이태릭체로 표시할 때.
• 둘의 차이는 strong 과 b 의 차이와 동일하다.

<sup>, <sub> 태그 - 첨자 사용

기본형 : &nbsp <span>텍스트<sup>윗첨자</sup></span>, <span>텍스트2<sub>아래첨자</sub></span> 결과 : 텍스트^윗첨자, 텍스트2_아래첨자

• sup 태그 : 윗첨자를 넣고 싶을 때 사용한다. super subscript 를 의미한다.
• sub 태그 : 아래첨자를 넣고 싶을 때 사용한다. subscript 를 의미한다.

<q> 태그 - 인용 내용 표시

기본형 : &nbsp <q>인용 내용</q> 결과 : 인용 내용

• 줄바꿈 없이 다른 내용과 한 줄에 인용 내용을 표시한다.
• 인용 내용 앞 뒤에 따옴표("")가 추가됨.

<mark> 태그 - 형광펜 효과

기본형 : &nbsp <mark>텍스트</mark> 결과 : 텍스트

• 이 태그로 묶은 부분의 배경색이 노랑으로 표시됨.

<span>, <div> 태그 - 영역 묶기

기본형 : &nbsp <span>텍스트</span>, <div>텍스트2</div> 결과 : 텍스트,

텍스트2

• span 태그 : 줄 안에서 (인라인) 묶기
• div 태그 : 줄 바꿔 (블록) 단락으로 묶기
• 두 태그 모두 영역을 묶어주는 태그이다.

💡목록을 만드는 태그

<ul>, <li> 태그 - 순서 없는 목록

기본형 :

  <ul>
      <li> 사과 </li>
    <li> 수박 </li>
 </ul>

결과 :

• 사과
• 수박

• 각 항목 앞에 동그란 불릿이 붙여진다.
• ul 로 순서가 없는 목록이라고 정의하고, li 로 그 목록 하나하나 설정해준다.
• CSS의 list-style-type 속성으로 불릿을 수정할 수도 있지만 바로 ul 의 속성으로 type="square" 라고 써서 불릿을 네모로 바꿀 수도 있다.

<ol>, <li> 태그 - 순서 있는 목록

기본형 :

  <ol>
      <li> 사과 </li>
    <li> 수박 </li>
 </ol>

결과 :

1. 사과
2. 수박

• 각 항목 앞에 숫자가 붙여진다.

• <ol> 태그의 속성으로 아래와 같이 있다.

  • type 속성 : 불릿 앞의 숫자 조정. 속성값=i 이면 로마 숫자로 나열된다.
  • start 속성 : 중간 번호부터 시작. 속성값=5 이면 5번 부터 시작한다.
  • reserved 속성 : 역순으로 표시.

<dl>, <dt>, <dd> 태그 - 사전식 목록

기본형 :

  <dl>
      <dt> 과일 </dt>
        <dd> 사과 </dd>
        <dd> 수박 </dd>
    <dt> 생선 </dt>
        <dd> 고등어 </dd>
        <dd> 참치 </dd>
 </dl>

결과 :

과일

사과

수박

생선

고등어

참치

• 제목과 그에 대한 설명으로 이루어진 목록.
• <dl> 로 사전식 목록임을 알리고
• <dt> 로 제목, <dd> 로 내용을 표시한다.
• 하나의 <dt> 에 여러개의 <dd> 값을 가질 수 있다.

HTML 이란 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어 이다. www(인터넷)에 전송되는 문서 양식. Hyper Text Markup Language 의 약자이다.

-Hyper Text : 링크 -Markup Language : 문서내용을 표현하는 방식

즉, 웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 기능을 가진 문서를 만드는 언어다. 흔히 말해 웹 페이지를 위한 마크업 언어(Markup Language)라고 할 수 있다.

💡HTML 양식의 흐름과 확장자

• 초창기 html = 논문
• html + 디자인 = 웹페이지
• 요즘 html= 데이터. (디자인은 css로 분리되게 했다)

웹 페이지는 World Wide Web 상에 있는 개개의 문서를 말한다. .pdf, .jpeg가 있듯이 HTML은 .htm / .html 확장자 포맷을 가지고 있다. 이 html 문서는 단순히 텍스트 파일에 불과하고 웹 브라우저가 해석을 해서 구조를 통해 화면에 렌더링 해주게 되고 사용자는 View라고 하는 스크린을 통해 접하게 되는 것이다.

💡HTML 양식의 표준

w3c (World Wide Web consortium) : 표준 권고안 제시 https://www.w3.org 에서 문서내용을 표현하는 방식을 정한다.

💡웹 표준

웹 표준이란

• 웹 사이트를 만들 때 지켜야 하는 약속들을 정리한 것
• 웹 표준을 지켜 사이트를 제작하면 장소나 브라우저 상관없이 쉽게 웹 사이트를 볼 수 있다.
• html5로 문서를 만드는 것 = 웹 표준을 지킨 문서를 만드는 것

💡HTML과 마크업언어

HTML은 웹사이트 콘텐츠를 설명하는데 사용되는 마크업언어로, 콘텐츠의 의미를 설명하는데 유일한 목적을 가지고 있다. CSS가 Visual Design이라면 HTML은 Structure Design 이라 할 수 있다.

Markup Language 는 태그( < > )라는 것을 중심으로 문서의 내용을 표시한다.

💡HTML의 기본 문서 구조 - 문서 객체 모델(DOM)

문서 객체 모델 (DOM, Document Object Model) = HTML 문서 객체 구조를 말한다.

HTML 문서의 기본 객체구조는 순서대로 <html>, <head>, <body> 가 있다. 크게 head 영역과 body 영역으로 구성되며, 문서의 title 은 웹페이지의 제목으로, 브라우저 탭에 표시가 된다.

<body> 태그는 문단 태그, 테이블 태그, 폼 태그 등을 포함할 수 있다. 이때, 문서 객체 모델에서는 모든 태그를 '객체' 라고 부르며, 태그에는 기능과 속성이 포함되어 있다.

ex) <img> 태그는 이미지를 출력하는 기능이 있고, src, alt, width, height와 같은 속성들을 함께 사용할 수 있다. (이미지의 크기, 너비 등이 속성 설정)

<!DOCTYPE html>
<html>
  <head>
    문서를 정의하는 데이터가 들어감
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>브라우저 제목</title>
  </head>
  <body>
    문서에 표시되는 컨텐츠가 들어감
     <img alt="잠봉뵈르 사진" src="https://postfiles.pstatic.net/MjAyMjA5MjhfNiAg/MDAxNjY0MzU5MjAyOTQ3.3lLMVkm8cdVdcX9Iro0k5DTJbmfUmvclUyrXZmCdoeIg.P6r927__FDAsNvtAvZWWzPteFm_eURv09s3OouMjQyEg.JPEG.anna04143/20220923%EF%BC%BF153249.jpg?type=w773" />
        <br />
  </body>
</html>

⭐ 참고로 맨 앞에 있는 <!DOCTYPE html> 은, html 문서에서 <html> 태그가 나오기 전에 정의되는 것으로, 현재 문서가 HTML5 언어로 작성된 웹 문서라는 뜻이다. (HTML 버전 알려줌)

중소기업이나 SI 업체에 취업을 할 때 참고할만한 준비사항에 대해 적어본다. 내가 처음 국비지원 수업을 들을 때 강사님께서 조언해주신 내용을 바탕으로 적어본 것이며, 나중에 취업했을 때 실제로 도움이 얼마나 됐는지 따로 포스팅을 할가 생각중이다...

1. 자격증

- 정보처리기사

    회사에서 이게 있으면 더 높게 쳐준다구...
    큐넷에서 접수할 수 있다.

- SQL 자격증

    아래 사이트에서 접수하면 된다.
    https://www.dataq.or.kr/www/main.do

해외 취업을 원할 시에는 아래 자격증을 따는 것도 나쁘지 않다. 하지만 포트폴리오가 더 유용하다는 점.... Don't forget...

- OCJP (Java Programmer)

- OCP (Oracle Database)

2. 포트폴리오

포트폴리오가 완성되든 안되던 상관 없다. 완성이 왜 안 됐는지 설명하면 된다. 중요한 건, 내가 만들어 봤다는 것이다. 미니 프로젝트와 팀프로젝트 모두 나의 포트폴리오가 된다.

3. 서류전형

회사마다 다르게 작성해야 한다. 써야하는 건 이력서, 자기소개서(기술 소개서) 자격증과 포트폴리오를 적어야 한다.

4. 기술면접

기술 소개서 바탕으로 면접 본다. 자세히 어떤 프로그램, 기술을 썼는지.

IT 쪽에 관심이 있는 사람이라면 IT 쪽의 동향을 꾸준히 살펴봐야 한다. 아래는 이러한 동향을 알 수 있는 사이트들을 나열한 것이다. 나중에 더 생각나는 사이트가 있다면 추후에 더 추가해보도록...

1. 네이버 기사 中 IT 섹션

네이버기사 사이트 링크

2. 마이크로소프트웨어

마이크로스프트웨어 링크

3. 앱스토리

앱스토리 링크