Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

클라이언트/ 서버/ 엔지니어 "게임 개발자"를 향한 매일의 공부일지

웹사이트의 정보와 디자인 1 - 수업 소개 및 HTML 문서를 구성하는 태그 본문

웹 · 앱 개발/HTML & CSS

웹사이트의 정보와 디자인 1 - 수업 소개 및 HTML 문서를 구성하는 태그

huenuri 2024. 7. 30. 06:40

오늘부터 자바 스크립트 수업을 나갔는데 속도도 빠르고 정말 따라가기 힘든 수업이었다. 오늘 새벽까지 난 엘리스에서 들어야 하는 기초 및 심화 필수 과목들을 듣느라 인사교에서 현재 배우는 과목들을 따로 공부하거나 복습할 시간이 없었다.
근데 이제부터는 수업을 잘 따라갈 수 있게 HTML/CSS 공부도 하고 자바 스크립트도 공부해 보기로 했다. 주말까지 해서 엘리스로 HTML/CSS와 자바 스크립트 기초 수업을 80% 이상 완료하고, 자바 응용 수업도 처음부터 다시 들어볼 생각이다.

진도가 엄청나게 빠르지만 기초도 부족해서 전 수업부터 차근차근 듣는 것이 좋을 것 같다.
그럼 우선, HTML의 첫 수업을 시작해보기로 하자!

 

 

 

 

수업 소개 - HTML/CSS

 

커리큘럼

 

1장에서는 HTML 언어가 갖고 있는 특징을 살펴보고, 2장에서는 웹사이트의 레이아웃을 제작할 때의 포인트를 위주로 진행된다. 3장에서는 정적인 웹사이트를 동적으로 만들 수 있는 애니메이션 부분도 알아보게 될 것이다.

 

 

 

1주 차 수업 내용

HTML의 2가지 성격이 인라인과 블록에 대해서 학습해 본다.

 

 

 

 

이론 1 - 웹을 구성하는 요소

 

프로그래밍이란?

웹사이트를 만들 때 사용하는 프로그래밍 언어는 HTML, CSS 그리고 자바스크립트이다.

 

 

 

 

 

 

웹사이트 제작에 필요한 프로그램

  • HTML : 웹사이트에 표기하고 구조를 설계할 때 사용
  • CSS : 디자인을 입히고 공간에 대한 크기를 설정
  • JavaScript : 웹사이트의 동적인 효과를 부여(슬라이딩 · 팝업 효과 등)

 

 

 

 

 

 

웹사이트 제작이란?

 

 

 

시작 장애나 색맹을 가진 분들도 웹 서비스를 이용할 수 있도록 만드는 것이 웹 접근성이다. 다양한 버전들에서 작동이 되는지도 고려해야 한다.

 

 

 

 

 

실습 1 - HTML 문서를 구성하는 태그

문서를 작성할 때는 꼭 태그를 달아주어야 한다. 새로운 폴더를 추가할 때는 왼쪽 + 버튼을 눌러서 사용하면 된다.

 

 

 

 

HTML 구조 설명

<!DOCTYPE html>

 

html 파일을 신조어로 구성하겠고 정의하는 것이다. 과거에 사용된 언어 중 일부는 여기서 사용할 수 없다.

html 태그를 작성하는데, 이후에 작성되는 모든 코드는 이 안에서 작성해야 한다.

  • head 태그 : html 문서의 간단한 요약 정보(사용자에게 직접적으로 보이지 않음)
    • meta 태그 : 문자를 세팅하는 속성 넣기
      • UTF-8은 모든 문자 코드를 보여줄 때 사용
    • title 태그 : 브라우저 상단의 제목 표기
  • body 태그 : 실제 사용자가 웹사이트에 접속했을 때 눈에 보이는 정보
    • h1 태그 : 제목과 색깔을 넣어주기

 

태그는 열린 태그와 닫힌 태그로 구성된다. 초록색은 태그의 속성이다. 큰 때옴표 안에 작성된 것은 그 속성에 부합하는 값이다. 열린 태그와 닫힌 태그 안에 있는 내용물이 콘텐츠이다. 따라서 h1도 콘텐츠가 될 수 있다.

 

 

 

직접 실습해 보기

실습 영상이 상당히 길었다. 이 수업은 혼자서 문제를 풀기보다는 영상을 보고 중요한 내용을 숙지한 후, 스스로 해보는 방식으로 진행하려고 한다. 강사님은 일일이 작성하였지만 단축키 !를 사용해 골격을 한 번에 불러온 후 필요한 내용을 수정하였다.

 

 

무슨 경고창이 잔뜩 떠서 뭔가 잘못 한 줄 알았는데 아니었다. 자동완성으로 하니 지원이 안 되는 부분이 있었던 모양이다.

 

 

 

 

퀴즈 1 - 웹을 구성하는 요소

이 수업은 실습이 먼저 있고 퀴즈 문제가 제일 마지막에 있다.

 

 

 

 

학습을 마치고

오늘은 정말 피곤하고 많이 힘든 날이었다. 아침부터 오후까지 수업 시간 내내 졸음과 사투를 벌어야 했고, 특히 오후에는 얼마나 힘들었는지.. 집에 오자마자 거의 넉다운이 되었다. 운동을 오늘은 그냥 쉬기로 했다.
한 20분 자고 나니 몸 상태가 좀 괜찮아진 것 같은데, 공부는 정말 하기 싫었지만 일단 시작해 보았다. 8교시 자율학습 시간에 절반 정도 하고 나머지는 집에 와서 저녁 먹기 전에 해본다. 식사 후에도 과연 공부를 더 할 수 있을지 모르겠지만 일단 첫 번째 학습을 마쳐서 다행이었다.


공부를 하다 보면 이렇게 정말 하기 싫은 날도 있고 컨디션이 안 좋은 날도 있다. 거기다가 감정까지 부정적으로 이입이 되면 정말 헤어 나오기가 힘들다. 잠시 영상을 보고 싶은 유혹에 빠졌지만, 이런 날이면 가만히 앉아서 놀고 싶어 진다. 할 수 있는데도 안 하고 싶은 때가 있는 것 같다.

아무튼 이번 수업에서 배운 것은 html의 구조였다. 내용이 어려워서 한 3번은 시청했고, 실습도 잘 안돼서 시간이 많이 걸렸다.

저작자표시 비영리 변경금지

'웹 · 앱 개발 > HTML & CSS' 카테고리의 다른 글

웹사이트의 정보와 디자인 3 - 구조를 잡을 때 사용하는 태그  (0) 2024.07.30
웹사이트의 정보와 디자인 2 - HTML 기본 태그  (0) 2024.07.30
HTML의 기본 3 - HTML 실습 이어서  (0) 2024.07.30
HTML의 기본 2 - 본격적인 HTML의 세계로  (0) 2024.07.30
HTML의 기본 1 - 웹의 개념 및 역사  (0) 2024.07.30
'웹 · 앱 개발/HTML & CSS' Related Articles more