안녕하세요 상훈입니다.오늘은 [ 완성된 웹사이트로 배우는 HTML&CSS 웹디자인 ] 라는 웹퍼블리셔, 프론트엔드 개발자를 위한 도서를 추천하고자 합니다.
난이도 ★★☆☆☆ [2/5]
■별 2개를 준 이유
갓 입문한 분들에게도 좋을 것 같은 느낌이 들었지만, 오히려 기본기를 살짝 놓치고 가신 분들에게 좀 더 추천해주고싶다. 왜냐하면, 글 내용이 매우 꼼꼼하여 초-중급자분들께서는 술술 읽힌다. (제가 그랬거든요)
- 예시로 html 태그 내, head 태그 내에 있는 viewport 태그 라던가… 굳이 보면서 아 맞네! 이런게 있었지. 라는 생각을 하게된다. 그래서 추천한다.
- 웹디자이너, 퍼블리셔, 프론트엔드 개발자가 읽기에 좋은 도서라는 느낌이 팍 왔다.
상세하게 설명해주고 예시도 넣어준다. 그간 웹디자인 교재를 아예 읽지 않은건 아니었지만, 그래도 예시 하나씩 올려주고, 깔끔하게 설명해주는 모습이 너무 좋았다.
■ 책의 외관
책 디자인이 깔끔하고 가볍다. [아주 좋다] 요즘 책은 좀 무겁게 나오거나 흐물흐물하게 나온 경우가 많아서 가지고 다니기 불편한 적이 많았는데, HTML & CSS 웹디자인 교재는 하드와 소프트의 중간정도로 느껴진다. 굳이 무게추를 올리자면, 소프트에 가깝긴하다. 그래도 나름 안정적인 모습이다.
■ 클론코딩
이 책은 클론코딩(예제 따라하기)을 통해 학습할 수 있는 여건을 제공해준다.
내가 제일 좋아하는 교재의 형태인 예시. 예시. 예시 지옥. 아주 좋다.
클론 코딩이 유행이고 나 또한 클론코딩으로 좋은 덕을 많이 봤다. PHP(pure, Laravel, CodeIgnitor), Vue.js, React.js 등등 모든 언어들을 공홈을 읽은 후에는 항상 클론코딩을 필수적으로 할 정도로 좋아한다.
처음에 클론코딩을 할 때 무슨 말인지 못알아듣는다. 하지만 괜찮다. 누구나 처음에는 아무것도 못하는게 맞다. (고급 분들 빼고. 그 사람들은 신이야.)
클론 코딩을 통해 그 언어를 사용하는 패턴에 익숙해지고, 본인만의 스타일로 바꾸어 작성해보고 구동해보는 작업을 통해 남의 것을 베껴 놓은 표절 작품이 아닌 나만의 독창성을 가진 작품으로 재탄생 시킨다.
이것이 클론코딩의 원칙이자 순기능을 이루는 방법이다.
■ 필수 요소!
media query, breakpoint 등을 이용해 요즘 밥먹듯이 사용해야하고 적용해야하는 반응형 웹디자인도 적용하는 방법과 소개 덕분에 현대에 필요한 지식을 전달하여 현업에서 필요한 디자이너가 될 수 있다. (물론 더 많이 공부해야합니다~)
■ P.S.
솔직히 말해서 그 중에 ‘scroll-snape-type: x, y’ 는 처음 보았다. 척 보자마자 무슨 기능인지는 알겠는데 진짜 처음 알았다. 기능인 즉슨 마우스 휠이나 모바일에서 스크롤을 할 때의 속도를 조절하는 것인데, y는 세로로 적용이 가능하고, x는 가로로 적용이 가능하다. 이렇게 또 배운다.
위와 같이 id : myButton, onclick: change() 라는 메서드를 실행하고 비활성화 된 click 버튼이 있습니다.
그럴 때에 제이쿼리로 해당 버튼의 활성화 비활성화 상태를 변경하고 싶은데요,
attr() 을 사용하는 방법, 그리고 prop()을 사용하는 방법이 있습니다.
1. attr()
// 1. 온오프가 아니라 비활성만 제거하는 방법
function change() {
$('#myButton').removeAttr('disabled');
}
// 2. 변수를 하나 할당하여 온오프로 관리하기
let status = true
function change() {
if( status ) {
$('#myButton').removeAttr('disabled');
} else {
$('#myButton').attr('disabled');
}
}
이렇게 하는 방법이 있구요~
2. prop()
// 1. 온오프가 아니라 비활성만 제거하는 방법
function change() {
$('#myButton').prop('disabled', false); // 비활성을 비활성 = -1 x -1 와 같음
}
// 2. 변수를 하나 할당하여 온오프로 관리하기
let status = true
function change() {
if( status ) {
$('#myButton').prop('disabled', false);
} else {
$('#myButton').prop('disabled', true);
}
}
