메모

'나의 첫 HTML&CSS 웹 디자인' 책 구매 리뷰

 
 
 
최근에 정부에서 전액 지원해주는 UI/UX 수업을 듣게 되었다.
 
그러나!
 
웹코딩에 대한 지식이라곤 작년에 웹 수업을 딱 한달(그것도 월수금만 들어서 9일) 들은 게 전부기 때문에
수업을 듣기 전에 예습을 좀 해보자 하는 생각에 알라딘 앱에 접속하여 책을 찾아보았다.

 

그 중에서 눈에 들어온 것은 '나의 첫 HTML&CSS 웹 디자인'이라는 책이었다!

책 표지 디자인도 귀엽지만😊 결정적으로 이 책으로 공부를 하면
sns 링크 모음 페이지, 2칼럼 페이지, 1칼럼 페이지, 멀티 페이지 사이트 등
여러 유형의 사이트를 만들게 되기 때문에
기초부터 시작해서 실전 레벨까지 도전할 수 있는 꽤나 괜찮은 과정일 것 같아서 구매를 결정하게 되었다.
 

 


책을 한 권 샀는데 뽁뽁이에 잘 감겨서 박스포장까지 되어 왔다.
 

컴퓨터 책상에 책을 두고 보면서 공부하려 했기 때문에
페이지를 넘기기 편해야 할 것 같다고 판단하여
스프링 제본 체크 후 주문했는데 제본도 깔끔하게 잘 되어서 온 모습이다ㅎㅎ

 
제본 서비스 처음 신청한 건데 짱인 듯... 신세계!
(제본까지 하면 살짝 부담이 되는 금액이라 적립금을 써서 정가 비슷하게 구매했다.)





 

 


Part 1과 Part 2에서는 HTML, CSS에 대한 기초 지식을 알려준다.
CSS 부분부터는 간단한 웹페이지를 만들면서 자연스럽게 지식을 익힐 수 있도록 구성이 되어있다.

실제로 책의 저자분(들)께서 책 들어가는 말에
'4개의 사이트를 만들어보면서 자연스럽게 웹 지식을 익히는 책'이라는 말씀을 하셨다.

 


본격적인 학습 시작 전 학습포인트와 함께 이 책에서 만들 사이트들을 미리 볼 수 있다.

아직 아무것도 모르는 웹디자인 초보자들에게
'학습이 끝나면 나도 이 사이트들을 전부 만들 수 있겠구나' 하는 희망을 주는 것 같다!

 


이 책의 귀여운 점...
바로 카피바라가 나온다!

파트 1은 수컷 카피바라가 암컷 카피바라에게 구애하기 위해 러브레터를 웹사이트로 만드는 내용이다.

카피바라도 웹디자인에 대해 아무것도 모르는 응애기 때문에 공부하고 있으면 카피바라랑 나랑 같이 웹 수업 들으면서 서로 성장하는 것 같다ㅋㅋㅋ

 


본격적으로 배우기 전에 러브레터 내용을 세부적으로 정리해볼 수 있다.
div 태그부터 알려주고 그런 게 아니라서 부담스럽지 않았다.
소스도 제공을 다 해주니까 사이트를 만들면서 참 편했다.
(다운로드 받는 사이트가 따로 있다. 책의 초반부에 URL이 적혀있다.)

부록에서도 참고할 만한 사이트 소개라든지 grid, flexbox 등 유용한 정보를 pdf파일로 다운받아볼 수 있다.



 
 
 

 


책에서는 비주얼 스튜디오 코드(이하 vs코드)로 진행하지만 나는 코드펜을 사용했다.
 

카피바라 스토리가 흥미진진! 재밌는 스토리텔링♥

 

카피바라 구애 이야기도 재밌고 설명이 이해하기 쉬워서 재밌게 예습할 수 있었다! 
예습 이후 학원 수업을 들을 때도 큰 도움이 되었다.
남들보다 약간의 지식이 더 있는 상태라서 더 자신감이 있었달까? ㅋㅋㅋㅋ
 
최근 한 소비 중 가장 의미 있는 소비였던 것 같다!
앞으로는 주말마다 한 챕터씩 공부하면서 더욱 지식을 쌓아야 할 것 같다!
 
 
 
반응형 웹페이지를 만들 수 있을 때까지! 아자아자 화이팅이닷! (@'-'@)っ♥



 
 
 
 

< 이 책의 장점 한눈에 보기 >

- 웹 제작을 해야 되다 보니 소스가 무료로 제공이 돼서 만들 때 참 편하다!(깃허브)

- 초보자가 알 수 있게끔 아주 쉽게 설명이 되어 있다.

- 기초 지식부터 사이트 만들기까지 유용한 정보들이 많이 있어서 초보자들이 웹코딩 찍먹해보기 좋다.


쉽고 재밌는 웹 입문서를 찾는다면 이 책을 추천한다!

 
알라딘 구매하기 - ( http://aladin.kr/p/H48L2 )
예스 24 구매하기 - ( https://www.yes24.com/Product/Goods/122494314 )
 
 

0401 월 uiux 2일차

rgb 빛에 대한 색. 혼합 시(rgb의 값이 높아질 시) 밝아짐.

cmyk 잉크에 대한 색. 혼합 시 어두워짐.

색상

채도:

명도

jpg, png 파일- 웹용으로 사용

비주얼 스튜디오 코드 cyrl+y 이후 돌리기(컨z 컨y)

태그 복붙: 알트 시프트 방향키위아래

선택자 {

      속성명: 속성값;

}

선택자: 어떤 요소에 스타일을 적용할지에 대한 정보

{}: 어떤 요소를 적용할지 정의하는 구간

속성명: 어떤 스타일을 정의하고 싶은지 정보

속성값: 어느 정도의 수치

:(콜론) 속성명과 속성값을 나눠

;(세미콜론) 구분자 속성을 구분

<link rel="stylesheet" href="style.css">

    폴더 안에 있는 style.css 파일이라면 "폴더명/style.css"이라고 작성해야 함

인라인 속성:태그에 직접 기술하는 방식

내부에 있는 부분만 넣는다

컨트롤 시프트 L(동시 다중선택)

태그명*숫자

숫자만큼 태그를 만들어준다

Tap이동하면서 내용작성

태그명*숫자{내용} 쓴 후 엔터

태그가 숫자가 나와서 내용까지 써줌

예) div*3{기본} 엔터 치면 세개가 쭉 작성됨

      <div>기본</div>

      <div>기본</div>

      <div>기본</div>

스타일 태그 만들기

ㄴ HTML에서 직접 넣어주는 기능

헤드에 태그 스타일 작성할 수 있음

문서 간의 연결

head 안에 style 태그 넣어주기

css 주석처리가 다름

선택자

어떤 요소에 스타일을 적용할지

종류: 기본, 그룹, 특성, 결합, 의사 클래스, 의사요소

전체 선택자: *

* {}

 문서 내의 모든 요소를 의미(페이지 전체)

 문서 내 글자체를 동일시할 때

 전반적인 색을 동일시할 때 사용.

태그 선택자: 주어진 이름을 가진 태그. 요소를 선택

p, div, span

클래스 선택자: 각 태그들을 동일한 명으로 묶은 것(먼저 태그 이름을 설정해야 함)

.클래스명 {}

div랑 span을 같은 클래스에 넣을 수 있음 <div class="a"> <span class="a">

id 선택자 #.id명

 고유한 식별자를 가진다. 이름은 다른 요소와 달라야 한다.

 동일한 명으로 했을 때 문제는 없어 보인다.

 웹 표준: 동일한 페이지가 다른 pc에서도 열려야 함

 크롬, 웨일, 엣지

 동일한 페이지

 규칙들

 id 다르게. javascript 문제 발생할 수 있다.

 주민번호라고 생각하기

그룹 선택자

 다양한 유형의 요소를 한번에 선택하고자 할 때 사용

 (,) 쉼표 구분 예) #a1, span {}

선택자에는 우선순위가 있다. 

1. 나중에 작성된 스타일을 우선 적용(밑이 우선)

2. 아이디 > 클래스 > 태그

홈페이지를 구성할 때부터

1. 레이아웃의 형태 

2. 스타일 

클래스로 묶을지 

아이디로 묶을지 

홈페이지 제작보다는 관리

class "a c" a도 되고 c도 됨. .a {} .c {} 순서로 적으면 .c에 있는(제일 밑에 적은) 게 적용됨

텍스트 꾸미기

font-family: 텍스트에 글꼴을 지정할 때 사용함.

사용자의 시스템에 해당 글꼴이 없을 수 있기 때문에 대비해서 여러 글꼴을 백업지정한다.

웹 폰트

 font-family: 글꼴명, 글꼴계열;

 글꼴명 공백이 있으면 " "(큰따옴표)로 묶어준다.

 글꼴계열

 사용을 하지 못할 때 계열만 선택해줌

 세리프(삐침있는 글자), 산세리프(돌출없는 글자), 모노스페이스(너비가 고정되어있음)

 cursive(필기형) fantasy(장식)

( https://webstoryboy.co.kr/ ) font-family 쪽 보면 됨!

font-size

px: 절대크기

em: 부모태그의 font-size와 상대크기 예) 3em하면 부모태그의 3배만큼의 크기

rem: html 기본글꼴의 배수, 상대크기