HTML/CSS 파일을 작성한다!부산경상대학교 디자인과 캐릭터웹디자인전공
안녕하세요! 부산경상대학교 디자인과 캐릭터웹디자인전공입니다.오늘은 지난 번에 이어 HTML은 어떻게 설정하고 작성할 것인가!CSS는 HTML에 어떻게 적용시킬지! 그리고 어떤 구조로 되어 있는지 자세히 살펴보도록 하겠습니다.
먼저 HTML 파일을 만들어 봅시다(드림위버를 사용하였습니다~)
단축키 Ctrl+N을 누르면 새 문서를 만들 수 있다!이 정도는 누구나 알 수 있을 거예요.
Title은 홈페이지 이름이라고 보시면 됩니다.중요한 것은 DocType: HTML5입니다!HTML5: 최신 표준 규격으로 별도의 프로그램 없이 그래픽 효과를 구현할 수 있으며 동영상과 음악을 자유롭게 실행할 수 있다.액티브X, 플래시 등 별도의 플러그인 프로그램 없이 해당 기능을 구현할 수 있으며 안드로이드, 아이폰 등 모바일 운영체제에서도 호환이 잘 된다.최신 표준규격이오니 웹디자인기능사 자격시험을 보시는 분들은 꼭! HTML5로 작성해주세요!
생성을 하시면 자동으로 기본적인 구조가 적용된 모습을 보실수 있습니다~ (생성후 항상 저장 꼭 하셔야 합니다~!)
기본구조에 대해 간단히 설명해드릴게요!
!doctype <홈페이지 규격>이 태그가 분리되었을 경우 웹 브라우저가 설정해 놓은 기본 규격에 적합 html <아래 문서가 HTML 문서임을 알리는 태그>가 태그 이하로 HTML 문서가 시작되었음을 알림 문서의 마지막은 </html> head <화면에 표시되기 전에 선행되는 작업> body에 표시하기 전에 수행해야 할 작업을 head에 작성 meta와 title로 나눌 수 있는 meta <이 화면이 다음과 같은 규격으로 수행되었음을 알리는 태그> title <웹페이지 제목별 태그 사용불가 body>이 정도만 이해해도 html의 기본 구성요소는 알고 있다고 할 수 있어요~
다음은 CSS파일은 HTML에 어떻게 적용시킬지 찾아볼 것입니다! CSS를 적용시키는 방법은 세 가지가 있습니다.
각 방법마다 장단점이 있으니 상황에 맞게 적절한 방법을 선택하시면 되세요~
Inline Style SheetHTML 태그의 style 속성에 CSS 코드를 넣는 방법 Internal Style SheetHTML 문서 중 <style>과 </style> 안에 CSS 코드를 넣는 방법 External Style Sheet은 다른 CSS 파일을 만들어서 HTML 문서와 연결하는 방법, 보통은 CSS 파일은 별도로 하면 여러 웹페이지에서 하나의 CSS 파일을 로드할 수 있어서 External Style Sheet 방법을 주로 사용하죠 그럼~ 어떻게 적용시키는지 알아봐야겠어요.
CSS 파일 생성을 먼저 합니다!
마찬가지로 Ctrl+N을 클릭하여 CSS 문서를 작성합시다!
(생성 후 항상 저장!!)
파일명은 style.css로 저장해 주었습니다.~다시 HTML 파일로 돌아와서
linkrel=”stylesheet” href=”style.css”> 코드를 입력합니다.상기 코드는 HTML 파일과 CSS 파일이 같은 폴더 안에 있기 때문에 가능한 코드이므로 경로는 파일의 위치에 맞게 적절하게 수정해야 합니다!
그러면 이렇게 HTML과 CSS가 연결되어 있는 것을 볼 수 있습니다!
잘 연결되어 있는지 확인해 볼까요?
왼쪽은 HTML 오른쪽은 CSS
쉽게 적용해!
(Live에서 확인할 수 있음)
잘 적용되었음을 확인할 수 있습니다~! 앞으로 자주 사용할 코드이니 꼭 기억해주세요.
오늘은 HTML은 어떻게 설정하고 생성하고 CSS는 HTML에 어떻게 적용시킬지 어떤 구조로 되어 있는지 알아보았습니다.궁금하신 부분은 댓글을 달아주시면 답변해드리도록 하겠습니다.~
이번 시간에는 HTML에서 사용되는 태그에 대해 배워보겠습니다.텍스트 관련 태그부터 하나씩 배워봅시다!많은 관심 부탁드리겠습니다.~
부산경상대학교 디자인과 캐릭터웹디자인전공은 다양한 수업중 전문적인 분야를 배워 실력을 향상시킬 수 있습니다!
디자인으로 세상을 여는 부산경상대 디자인과↓홈페이지 보기!↓
부산경상대학교 디자인계열 소개, 학과소개, 입학정보, 취업 및 공모전, 졸업작품 dodks.kr ↓ 부산경상대학교 디자인계열 인스타그램 놀러가기 ↓
팔로워 136명, 팔로워 150명, 게시물 316개 – 부산경상대학교 디자인계열(@bsdesign) 님의 Instagram 사진 및 동영상보기 www.instagram.com ♣ 부산경상대학교 디자인과 ♣ 대표상담번호 051.850.1227 (입학, 장학금, 디자인과 문의가능)
–
#부산경상대학교 #디자인과 #시각광고디자인전공 #인테리어가구디자인전공 #캐릭터웹디자인전공 #시각디자인학과 #인테리어디자인학과 #가구디자인학과 #캐릭터디자인학과 #일러스트 #포토샵 #정시모집 #수시모집 #디자인학과 #디자이너 #부산전문대학 #웹디자인 #웹디자이너 #코딩 #html #css