웹디자인 기초 배우기
오늘 웹 디자인 기능사 책이 와서 간단히만 살펴보려고 한다 깊게 들어가진 않겠지만 어떠한 개념인지 웹 디자인이란 어떤 프로그램으로 어떻게 기초적으로 접근해야 하는지 살펴보려고 한다 사이트 같은 걸 디자인하고 싶은 분들은 같이 하셨으면 좋겠다
책이 생각보다 두꺼워서 뭔가 두렵다..;; 동영상으로 공부할 때보다 부담감이 더욱 느껴진다고 할까나??사실 책 덮었다 피자마자 너무 복잡한 언어들이 나와서 그래서 어제 구독한 유튜브 채널 강의를 통해서 공부해볼까 싶다... 괜히 샀나 2만 원 ㅠㅠ...
1. 시험장 들어가면 일단 비밀번호 지정해놓은 폴더 만들기
그리고 하위 폴더 css, script, iamge? 폴더 만들고 브라켓으로 끌고 오기
처음에 단어들 입력할 때 정확하게 입력하고 다시 같은 단어 반복할 일 있다면 복사해서 쓰기!
그리고 명령들 뒤에는 ;를 써줘야한다 px뒤도 마찬가지
명령어를 내릴 때 ex) div를 입력 후 탭키를 누르면 처음 시작과 /이 포함된 끝맺음이 동시에 생성돼 편하다
emmet가 설치되어 있을 때 이렇게 탭키로 편하게 만들 수 있다 만약
emmet가 없다면 <div></div>를 일일이 쳐줘야 한다
<html lang="ko"> 여기서 "사이에 있는 것은 언어 설정이다 KO는 한국어 알겠죠?
<! DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 산업대학교 </title> 타이틀은 산업대학교
</head>
<body>
</body>
</html>
html을 크게 두 가지로 분류할 수 있는데요
인라인 요소 블록 요소
인라인 요소는 텍스트 블록 요소는 박스라고 생각하면 편하다 박스와 텍스트의 개념이라고 보면 된다 블록 안에 인라인이 있고 인라인 안엔 블록이 있을 수 없다
스타일을 변경하는 방법은 이 방법 말고도 세 가지가 있다
우리는 시험장에 가면 스타일 링크를 직접써줘야 한다 링크 rel(릴레이션) = "stylesheet"으로 해주고
스타일로 표기해놨던 글자들을 컨트롤 x로 잘라서 css 밑에 style.css 에 복사해주고 링크를 걸어주는 개념이다
인덱스는 큰 틀을 만들고 분할 하는 역할이라면
스타일 css는 그 나눠지고 만들어진 박스에 색깔이나 넓이 등을 설정하는 것으로 보면되겠다
크롬으로 사이트를 확인할 경우에 화면 오른쪽 클릭으로 페이지소스를 확인할 수 있다 style.css를 클릭해주고 연동이 잘되었나 확인해줘야한다
가운데 정렬하기 : margin: 0 auto
웹스토리 보이님 강의가 정말 좋은 것같다 블로그 하단에 코드 답안까지 있어 항상 확인하면서 작업하면 금방 늘것 같다
CLASS = . #HEADER .LOGO / #HEADER .NAV
박스 같은 경우엔 나란히 정렬되는 것을 기피하기 때문에 float을 이용해서 옆으로 나란히 나둬줘야한다
'디자인' 카테고리의 다른 글
| 웹메뉴탭 가로유형3 (0) | 2020.11.23 |
|---|---|
| 홈페이지 만들기 기초 4번째 시간 (0) | 2020.11.22 |
| 웹디자인 기능사 독학으로 도전 (0) | 2020.11.16 |
| 디자인 배워 봅시다 더욱! (0) | 2020.11.09 |
| 스케치업 모델링 루비 배우기 (0) | 2020.11.04 |