ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko nb ko ko ko en en ko ko ko ko ko ko ko ko ko ko ko en ko ko ko ko ko ko ko en en en ko ko en ko ko ko ko ko ko ko ko ko ko en ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko en ko ko ko en ko ko ko ko en es ko ko ko ko ko ko en
#4 뼈대를 담당하는 HTML의 문법과 문서 구조 – 웹 코딩 강좌 | 디자인베이스
웹 디자이너를 위한 웹 코딩 강좌 네 번째 시간입니다.
웹 코딩 강좌에서는 HTML, CSS를 중점적으로 배운다고 했었죠. 오늘은 그중에 뼈대를 담당하는 HTML을 배워볼 거예요. 기본적으로 어떤 문법으로 사용하는지, HTML의 문서 구조는 어떻게 이루어져 있는지 아주 간단한 예제를 통해 배워봐요~!
영상에서도 말하지만 외우려고 노력하지 말고!! 대략적으로 이런 ‘느낌’이구나를 유지해 주세요. 끝까지 완주할 때까지 흥미를 잃으면 안 됩니다!
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
HTML에 대한 추가 학습이 필요하다면 아래 링크를 참고해 주세요. 태그에 대한 자세한 정보들이 있습니다. 당장 외우지 말고 필요할 때 그때그때 찾아보면 됩니다 : ) 일단은 북마크해두세요ㅎㅎ
이런 식으로 열고 닫습니다.
열고 닫는 게 기본적인데, 닫지 않는 코드는 몇 가지 있습니다. 절대 지금 당장 외우실 필요가 없습니다. 자주 사용하는 것 위주로 자연스럽게 외워질 테니까요!
HTML 문서 구조는 크게 html로 묶고, 그 아래 head와 body로 나뉩니다.
head는 현재 html에 대한 정의 및 속성을 넣는 곳이고, body는 우리 눈에 보이는 화면에 요소를 넣는 영역입니다.
그리고 저렇게 들여 쓰기를 하죠.
그건 마치 디자이너가 디자인 툴에서 레이어 명 정리와 그룹을 하는 것과 같습니다.
수없이 많은 코드를 들여 쓰기를 통해 구조를 쉽게 보기 위함입니다.
*들여 쓰기 하는 방법 – Tab 버튼​
HTML의 확장자는. html입니다. 예시) index.html
여기서 html 이란 포토샵의 psd / 일러의 ai 와 같이 확장자명입니다.
Html 태그로 이루어진 문서라는 것이죠. 이것을 더블클릭해보면 브라우저에서 실행됩니다.
그럼 이제 훨씬 재밌는 css 문법으로 넘어가도록 하겠습니다!
#8 제플린 사용법은 이걸로 끝 – 어도비 XD 강좌
#6 HTML + CSS로 버튼 만들기(Feat. 마우스 오버) – 웹 코딩 강좌
#2 뒤로가기 히스토리 100단계로 늘리는 방법 – 포토샵 꿀팁
오너의 마음으로 프로젝트의 A부터 Z까지
디자이너가 무조건 피해야 할 회사 유형
저작권 완전 무료 이미지 사이트 모음
투명 비닐 포장 목업
아이패드 프로 아이폰 목업
clay 재질의 아이폰 목업
Macbook Pro 16 목업
10. 자유롭게 화면 조절하는 방법 OrbitControls – Three.js 강좌
27. 귀여운 꿀벌 일러스트 쉽게 만드는 방법 – 일러스트레이터 기초 강좌
09. 3d 물체에 그림자 적용하는 방법 – Three.js 강좌
26. 프리폼 그라디언트로 5초 만에 부드러운 그라데이션 배경 만드는 방법 – 일러스트레이터 기초 강좌
Youtube Instagram Pinterest Naver Blog
포토샵 일러스트레이터 피그마 스케치 XD 프로토파이
웹디자인 웹코딩 인비전 프린서플 Lottie Three.js
소개 매거진 디자인 사전 북마크 무료 소스 문의하기 멤버십
© 2022 Designbase. All rights reserved.