(DAY46) HTML & CSS 디자이너를 위한 웹 개발 지식

 

안녕하세요 :)

오늘 아침에 영하로 온도가 떨어졌습니다. 이제 정말 겨울이 왔나봐요 ☃️

어제 AI 챕터를 마치고, 오늘부터는 웹개발 지식에 대해 알고 가는 챕터를 들어왔습니다.

 

 

---

 

 

✏️오늘의 학습

HTML 기초 학습하기

실습 1) VSCode로 직접 HTML 태그 체험하기

실습 2) 뱃지 UI 그려보기

 

 

 

📖오늘의 핵심

HTML은 마크업 언어, HTML은 틀을 만들어주고 CSS는 틀에 미용을 넣어주는 역할이다.

 

 

 

🧠오늘의 마인드셋

다른 사람들을 대할 때 자신을 여러 부분으로 나누는 게 도움이 된다. (너무 마음쓰지 마라.)

좋은 의사소통을 위해 해야 할 한 가지를 고른다면,

오늘 만날 사람들을 위해 미리 어떤 대화를 나눌지 조금 생각해보는 것

 

 

 

📝수업 내용 메모장👇🏻

📝수업 내용 메모장

 

웹 Web

웹은 World Wide Web (WWW)의 줄임말

전 서계적으로 분산된 수많은 문서와 기타 리소스들이 서로 연결되어 있는 거대한 정보의 네트워크

- 웹페이지를 서로 연결해서 열람하는 서비스라고 생각하면 됨

- 인터넷이 도로라고 한다면, 웹은 도로 위를 달리는 자동차

 

 웹의 동작 이해하기

 

프론트엔드 & 백엔드

 

HTML, CSS, JS 개념 알기

 

 

 

 

 

---

 

+ 레퍼런스 사이트 추천

https://www.cta.gallery/

CTA.gallery | The Best Call-to-Action Inspiration for Designers

 

 

 

 

실습 1) VSCode로 직접 HTML 태그 체험하기

 

 

 

📌기본 태그 메모

vscode에서, new html 파일에
 ! + enter
 누르면 html 기본 틀이 나옴

<hr/>
 : 구분선

<br/>
 : 줄바꿈

ctrl + / 
: 주석 (코멘트 기록용) → 한번 더 누르면 사라짐

<i> 
: 이탤릭체

<b>
 : 볼트체

<strong>
 : 강조

<ol><li><li/><ol/>
 : 순서가 있는(1,2,3~) 리스트

<ol><ul><ul/><ol/>
 : 순서가 없는 리스트

 

 

 

💡 사실 이전 회사에서 주로 하던 일이 HTML을 위주로 다루던 일이라서 알고 있는 내용을 복기하는 시간이었다.

너무 오랜만에 해서 수업 듣는 동안 지루하지 않고 새로운 느낌으로 받아들이긴 했지만 ㅋㅋㅋㅋㅋㅋ

 

나는 HTML언어를 좋아하나보다. 할때마다 새롭고 재밌는 느낌을 받는다. 내일 수업도 기대가 된다.

 

 

 

 

 

 

실습 2) 뱃지 UI 그려보기

 

 

 

 

💡왼쪽이 핀터레스트에서 찾은 레퍼런스, 오른쪽이 클론해본 결과물이다.

 

사실 개인적인 의견으로는..디자이너라면 피그마로 자유자재로 그래픽을 그릴줄도 알아야 다양한 작업들을 소화해낼 수 있다고 생각하는 주의여서, 오늘은 펜툴, 도형툴을 이용해서 연습할 겸 아트적인 뱃지를 찾아서 따라 그려봤다.

 

따라그리면서 완전한 클론이 아닌, 자잘한 부분은 조금 덜어내는 방향으로 작업했다. 아무리 아트적인 뱃지여도 앱 안에 쓰이는 요소라면 최대한 복잡성이 없어야 한다고 생각하기 때문이다.

 

오랜만에 일러스트레이터로 작업하는 느낌을 받아서 재밌었다.😊