Html5 & CSS3 맛보기

2022.10.04.

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 14

 

---

Review


오늘은 코딩 수업 첫 시작날이다.
8월부터 국비 과정을 시작하기 전에 미리 코딩 챌린지 책을 사서 선행 학습을 조금 했더니
오늘 수업을 아예 못 알아듣는 정도는 아니었다.

선생님께서 앞으로 Html5, CSS3, Javascript, jQuery를 순차적으로 배우게 될 것이라고 알려주셨다.
너무 어려울까봐 걱정이긴 하지만,
주말에 유튜브로 생활코딩, 노마드코더 등 유튜브 선생님들의 강의를 조금씩 시간날 때마다 보면서
조금 알아들을 수 있을 정도로만 먼저 공부해보려고 한다.

오늘은 일단 Pigma로 '29CM' 사이트 첫 화면을 구현해보고, VScode를 맛보기 하는 정도로만
수업이 진행되어서 그리 어렵진 않았다.
전에 혼자서 조금 맛봤던 것이라 그런지 재미도 있고 헷갈렸던 것들이 갈피가 잡히는 시간이었다.

선생님께서 학생들이 코딩 수업에 욕심을 낸다는 것을 알고 계셔서 그런지 이것저것 수업 준비를
많이 해오신 느낌이었다.
프론트엔드 개발자가 되기 위해서 이제부터 정말 중요한 것을 시작하는 것이니 정신을 바짝 차리고
수업을 들어야겠다는 생각이 든다.

수업을 마치면 일단 교보문고에 들러 GTQ 책을 사고,
오늘부터 일 끝나고 나서 전에 사서 공부했던 <비전공자를 위한 첫 코딩 챌린지> 책을 다시 정독하고
코드를 실행해보는 시간을 가져보려고 한다.
시간이 부족해 블로그에는 기록하지 못할 수도 있지만 수업에 따라가기 위해 파이팅해야겠다.

파이팅-

---

 

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 14

<Code Editer 종류>

1. Visual Studio Code : Download Visual Studio Code - Mac, Linux, Windows

Download Visual Studio Code - Mac, Linux, Windows

2. Sublime Text : Download - Sublime Text

Download - Sublime Text

3. Notepad++ : Downloads | Notepad++ (notepad-plus-plus.org)

Downloads | Notepad++

4. Brackets : Brackets - 웹 디자인을 이해하는 현대적인 오픈소스 코드 에디터

A modern, open source code editor that understands web design

5. Edit Plus : 에디트플러스 문서 편집기 - 평가판 무료 다운로드 (editplus.com)

에디트플러스 문서 편집기 - 평가판 무료 다운로드

나같은 경우는 책으로 코딩을 공부하기 시작했을 때부터 VScode를 사용했기 때문에
VScode에 더 익숙하기도 하고, 학원에서도 이 프로그램으로 수업을 진행한다.

이렇게 다양한 웹 편집기가 있으니 참고하길 바란다.

---

Visual Studio Code를 다운로드하여 첫 실행을 했다.

왼쪽 옵션 바에서 5번째 옵션인 '확장기'를 눌러,
'Korean Language' 라고 검색하면 한국어 버전으로 설치할 수 있다.

설치하면 위와 같이 모든 설정이 한글로 바뀐다.

---

<Figma 실행해보기>

Figma: the collaborative interface design tool.

Figma: the collaborative interface design tool.

 

'Figma' 는 다운받아서도 사용 가능하고, 웹으로도 사용할 수 있다.

회원가입을 하고 로그인 하면 저런 화면이 나온다.

New Disign File을 눌러 Prototype에서 iPhone 13 mini를 선택하고
상단 옵션 바에서 '#' 처럼 생긴 옵션인 Frame도 iPhone 13 mini로 설정하면
위처럼 설정한 대로 Frame이 나타나 원하는 대로 Design 할 수 있다.

상단의 오른쪽에 Present 아이콘을 누르면 위와 같이 작업하는 것을 미리보기할 수 있다.

이번에는 Desktop app으로 다운받아 실행해볼 것이다.

다운 받아 실행하면 위와 같이 로그인 화면이 나타난다.

웹에서 본 것과 같이 Desktop app에서도 동일한 화면으로 나타난다.

Home 화면에서 Community를 클릭해 들어가면 상단에 검색할 수 있는 바가 뜬다.
커뮤니티에서는 내가 필요한 아이콘 같은 것들을 이미지화 해놓은 자료들이 있다.

'ios 15 ui kit for figma' 라고 검색한다.

제일 처음 것을 클릭해 Get a Copy를 누르면,

위와 같은 화면이 나온다.

왼쪽 옵션 바에서 Asset을 누르고 'Satus' 라고 검색하면 왼쪽에 5개가 뜨는데,
맨 첫 번째 것을 오른쪽 마우스로 클릭한 뒤, Shift + 2를 누르면 선택한 것이 확대가 된다.

- Shift + 2 : 선택 요소 확대

Ctrl + C로 복사하여 내 작업창에 Ctrl + V로 복사한다.

같은 방식으로 'Tab' 도 검색하여 Shift + 2를 눌러 내 작업창으로 복사 붙여넣기 한 뒤,
iPhone 13 mini Frame에 끌어다 놓는다.

그러면 위와 같이 보인다.

포토샵이나 일러스트처럼 Rectangle Tool로 사각형을 그리거나 Line Tool로 선을 긋고,
색상을 채울 수도 있고 Stroke을 설정할 수도 있다.

이번에는 Desktop Frame을 설정하여, 가로는 1280, 세로는 720으로 Open했다.

마음에 드는 Image를 끌어다 놓고 이동시켜보기도 하고 확대, 축소 시켜보기도 했다.

오른쪽에 Inspect 라고 검사 창을 누르면 CSS Code를 볼 수가 있다.
html 코드를 작성할 때 도움이 된다고 한다.

상단의 'T' 라는 아이콘을 클릭하면 텍스트를 입력하여 삽입할 수도 있다.

나는 평소 관심있는 브랜드인 '29CM' 사이트에 들어가 마우스 오른쪽 버튼을 눌러 '검사'에
들어갔다.

배너 부분을 마우스로 갖다 놓기만 해도 Font는 어떤 걸 썼는지, 색상은 무엇인지 등을
확인할 수가 있다.

일단 29CM 사이트의 첫 화면을 Figma로 비슷하게 구현해보기로 했다.

 

 

- 컴포넌트 : 재사용이 가능한 UI 요소인데, Alt + Ctrl + K를 누르면 컴포넌트로 바뀐다.

컴포넌트를 활용하면 이미지를 함께 축소하고 확대할 수 있고,
같은 이미지를 재사용할 수 있어 여러모로 편리한 기능이다.

사이트에서 이미지를 오른쪽 마우스를 클릭해 복사한 뒤 붙여넣기 하여
각각 Alt + Ctrl + K를 눌러 컴포넌트로 만들면, Asset에서 볼 수 있다.

그럼 기존의 이미지와 컴포넌트 처리한 이미지와 바꿔 배치한다.

Font는 원래 사이트 상에서 보면 'Apple SD Gothic Neo' 라는 Font를 사용했는데,
Figma에서는 그런 Font가 존재하지 않아 나는 비슷한 Font로 대체했다.

 

 

비슷하게 구현한 뒤, Inspect에서 보면 CSS 코드를 볼 수 있다.

위와 같이 왼쪽에 보라색 다이아몬드로 image 1, image 2, image 3 이라고 적힌 것을
볼 수 있을 것이다. 다이아몬드로 표시된 것이 컴포넌트 처리된 이미지라는 것이다.

예제 완성

Figma Community에서 Design Icon을 무료로 다운받아 비슷하게 구현하였다.
아쉽게도 같은 Font를 사용하지 못해 29CM 로고는 마음에 들지 않는다 ㅠ_ㅠ

 

---

 

<Html5>

: 수업을 시작하기 전에 선생님께서 HTML5에 대한 설명이 담긴 자료를 공유해주셨다.

 

 

 

 

 

 

 

 

 

 

<CSS3>

: 수업을 시작하기 전에 선생님께서 CSS3에 대한 설명이 담긴 자료를 공유해주셨다.

 

 

---

<VScode로 Html & CSS 맛보기>

VScode를 실행한 후 저장할 경로를 선택하고 폴더를 열어준다.
폴더를 열어 나같은 경우는 Text 파일 안에 '1004.html' 이라는 새 폴더를 생성해
! 만 적고 Tab 키를 누르면 위와 같이 html 기본 주소가 나타난다.

언어를 ko로 바꿔주고, title 태그를 test 라고 칭했다.
그러고 나서 head 태그 안에 있는 body 태그에 제목 태그인 h 태그를 <h1>부터 <h6>까지 적어주었다.

Ctrl + S로 저장하고 나서,

저장한 폴더로 가 저장한 파일을 크롬으로 열어주면 위와 같이 나타난다.

h 태그는 숫자가 커질수록 글자 크기가 작아진다는 것을 알 수 있다.
또 h 태그는 줄바꿈이 일어났기 때문에 블록 레벨 요소라는 것을 알 수 있다.

이번에는 p 태그를 이용해 '문단태그입니다' 라는 문구를 적어주었다.

- Alt + Shift + ↑ or ↓ : 한줄 복사
- Ctrl + Shift + K : 한줄 삭제

확인해보면 p 태그도 줄바꿈이 일어났기 때문에 블록 레벨 요소 라는 것을 알 수 있다.

 

 

이번에는 span 태그를 이용했는데, 줄바꿈이 일어나지 않는 인라인 레벨 요소이다.

br 태그를 삽입했더니 '문단태그' 와 '입니다' 사이에 줄바꿈이 일어났다.
br 태그는 줄바꿈이 일어나기 때문에 블록 레벨 요소이다.

br 태그를 3번 삽입했더니 br 태그를 넣을 때마다 줄바꿈이 일어난다.
그러나, p 태그는 중복 삽입해도 한 번만 적용된다.
즉, p 태그는 연달아 3번을 적어도 한 번 적은 것과 같다.

inlin style은 태그에 직접 CSS를 정의해주는 기법으로, 해당 요소에 style=" " 형식으로 적는다.

인라인 스타일은 내부 스타일이나 외부 스타일에서 기술된 속성보다 우선으로 적용되므로
우선순위가 절대적으로 높아야 할 경우에 사용할 수 있으나,
스타일을 공통 CSS로 수정할 수 없고 일일이 HTML을 열어서 편집해야 하므로,
일반적으로 많이 사용하지는 않는다.

- Ctrl + / : 주석 처리

선택한 부분에 주석을 달고 싶다면 드래그 해 선택한 다음 Ctrl + / 를 누르면 위와 같이 나타난다.
화살표 표시된 부분에 주석을 달면 된다.

주석 처리한 것은 사이트에 나타나지 않는다.
h1 제목 태그에 weight, height, border를 설정했다.

border는 테두리를 설정하는 것인데, weight와 height를 넣은 것을 확인하기 위해 작성했다.
solid는 끊김이 없는 실선이다.

수치가 들어간 것은 필수로 단위를 작성해야한다.
여기서는 px을 사용했다.

inline

h1에는 display를 inline으로 설정하고,
h2 style 태그에 weight, border 값만 넣어주면 위와 같이 나타난다.

 

 

inline-block

 

이번에는 h1 태그를 inline-block 으로 설정했더니 사각형이 변한다.

 

 

body {

            text-align: center;

        }

 

 

style 태그에 body 태그를 center로 지정했더니 모든 text가 가운데 정렬이 된 모습으로 나타났다.

 

 

 

h3 태그에 border 태그만 달아주면 이렇게 나타난다.

h1 태그만 빼고 다른 것은 다 주석 처리를 하고,
style 태그에서 h1에 대한 태그를 달아준다.

---

 

선생님께서 새로운 파일을 열어 제목태그가 중앙에 오도록 작성하라고 하셔서,

우선 html 기본 구조를 만든 뒤, 밑에 body 태그에 h1 태그를 '제목태그' 라고 작성한다.

head 태그에서 style 태그를 적고, body 태그를 text-align: center; 로 설정했다.
h1 style 태그에 display를 block-inline으로 설정한다.
그 외에 weight, height, border 값도 설정했다.

* 주의할 점은 프로그램이 다운될 경우를 대비해 중간중간 Ctrl + S를 눌러 꼭 저장해주는 것이 좋다.

h1 태그를 하나 더 복사해주면 위와 같이 나타난다.

한줄 복사는 Alt + Shift + ↑ or ↓ 이다.

 

하나 더 복사해주면 3개가 나란히 정렬된다.

* 라는 것은 모든 것을 선택한다는 것이고, 그 밑에 margin 값과 padding 값을 0으로 설정해준다.

margin은 바깥 여백을 주는 것이고, padding은 안쪽 여백을 주는 것이다.

다시 확인해보면 바깥 여백이 0이라 위쪽 여백이 사라진 것을 확인할 수 있다.

 

 

h1 태그를 하나 더 복사해 총 4개를 작성하면 위와 같이 나타난다.

display를 block으로 바꾸면 옆에 아무것도 올 수가 없기 때문에 위와 같이 변한다.

display를 다시 inline-block으로 바꾸고 font-size를 0으로 설정하니 글씨가 보이지 않는다.

h1 태그에 font-size를 32로 주니까 다시 글씨가 나타났다.

line-height 는 행간을 말하는데 h1 태그에 line-height 값을 설정해주면
글씨가 중앙으로 간다.

---

 

이번에는 또 새로운 파일을 열어, 이전 것을 복사해 붙여넣기한 후
style 태그만 위와 같이 변경한다.

그러면 이렇게 나타난다.

 

 

h1 태그에 span 태그를 넣고, h2 태그도 넣으면 위와 같이 나타난다.

span 태그는 인라인 요소들을 그룹으로 정의하는 태그인데, 텍스트, 인라인 요소를 포함할 수 있다.
span 태그 안에 h2 태그까지도 넣으면 위와 같이 오류가 난다.



The W3C Markup Validation Service

The W3C Markup Validation Service

이 사이트는 Html 코드 안에 오류가 있는지 확인할 수 있는 사이트이다.

사이트에 접속하여 방금 작성한 코드 파일을 넣어보면 span 태그 안에 h2 태그를 넣은 것이
오류라는 것을 확인할 수 있다.

---

 

h1 태그 밑에 img 태그를 작성해 확인해보면 제목 태그 밑에 이미지가 삽입된다.
alt 는 이미지 Text를 정해주는 것이다.

 

 

img 태그를 밑에 하나 더 복사해서 저장해준 뒤 확인해보면 위의 이미지 밑에 하나 더 추가된다.

 

style 태그에서 img 태그를 작성해 가로 길이를 100px로 줄여주면,
위와 같이 작아진 이미지를 확인할 수 있다.

img 태그가 줄바꿈이 일어나지 않았기 때문에 인라인 레벨 요소라는 것을 알 수 있다.

 

daum 사이트에 들어가 로고에 마우스를 갖다대고 마우스 오른쪽을 클릭하면
이미지 링크 복사 라는 것이 있다. 그걸 클릭하면 링크가 복사되는데,
VScode에서 img 태그에 복사한 링크를 삽입하면 위와 같이 daum 로고가 나타난다.

---

 

새로운 파일을 열어, body 태그에 img 태그를 작성해준다.

그러면 위와 같이 나타난다.

---

<예제>

내 정답

선생님께서 위처럼 나타나도록 코드를 변경해보라고 하셔서, style 태그만 변경해봤다.

일단 body 태그를 작성해 test-align을 center로 설정했고,
p 태그에 border를 주고, img 태그를 가로 100, 세로 70px로 설정하니
위와 같이 나타났다.

이미지를 틈이 없이 나란히 정렬시키려면 body 태그에서 font-size를 0으로 설정해주어야 한다.

여기서 헷갈렸던 것은 처음에 img 태그에 border 값을 줘서 이미지 각각에 테두리가 생겼었다.
border 값을 p 태그에 주어야 위처럼 넓은 사각형으로 나타난다.

선생님 정답

선생님께서 답을 알려주셨는데 내 것과 코드가 달라서 보니,
나는 style 태그에서 body 태그에 font-size와 text-align을 작성했는데,
선생님께서는 p 태그에 font-size, text-align, border 값을 모두 작성하셨다.

그렇게 해도 같은 결과가 나타났다.

하지만 여백에 다른 코드도 작성한다는 가정 하에,
나처럼 body 태그에다가 작성한다면, 여백에 있는 다른 것 전체에 영향이 가기 때문에,
특정 p 태그에만 style을 설정하는 것이 오히려 더 낫다.

즉, 선생님 정답이 더 현명한 정답이다.

 

 

 

 

*이미지 출처
Instagram : @leegoc