텍스트 표시하기

문단표시하기

p태그

문단요소를 나타내는 태그로써, 가장 많이 사용하는 텍스트 태그이다.
하나의 p태그는 하나의 문단을 표현하여 문단과 문단사이에는 여백이 있다.
문단을 바꾸는 것이 아닌 단순히 줄바꿈을 희망할 경우 br 코드를 사용한다.

제목태그

h태그는 제목(표제)를 나타내는 태그이다.
숫자와 함께 사용이 되며 h1을 사용했을 때의 글씨가 제일 크고 h6를 사용하였을때의 글씨가 가장 작다.
쉽게 말하자면 h뒤에 붙은 숫자가 커질수록 글자의 크기는 작아진다.

사이 구분선

hr태그는 수평선을 표시하는 태그이다.
수평선은 주제 변경 또는 내용 구분을 위하여 주로 사용한다.

HTML 텍스트의 특징

엔터를 이용한 줄바꿈을 무시한다.(br코드 활용)
스페이스를 이용한 공백은 한번씩만 허용한다.( 활용)

요소의 구분

태그를 통해 표현하는 웹 요소들은 '블록 레벨 요소' 와 '인라인 요소로 구분할 수 있다.

• 블록레벨요소-자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다.
• 인라인 요소-자기에게 필요한 만큼의 공간만 차지한다.
  

  

컨테이너/전역속성

컨테이너

컨텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 요소
컨텐츠의 내용을 구분하거나,공통적인 스타일을 적용하고자 할 때 사용하는 것이 좋다.

• <div></div>:블록 레벨 컨테이너
• <span></span>:인라인 컨테이너

전역속성

• id - 요소에 고유한 이름을 부여하는 식별자 역할
• class - 요소를 그룹별로 묶을 수 있는 식별자 역할
• style - 요소에 적용할 CSS 스타일 선언
• title - 요소의 추가 정보를 제공하는 텍스트로, 툴팁 제공

HTML의 기본 문법

HTML은 웹페이지에서 어느 부분에 텍스트나 이미지가 있어야할지, 요소가 있어야 할지 등등을 나타내는 역할을 한다.
HTML은 '태그'라고 불리는 표시법을 사요와여 맡은 역할을 수행한다.

태그의 구성 요소

• 태그명(태그의 이름)
• 여는(시작) 태그
• 닫는(끝) 태그
• 컨텐츠

태그의 기본 형태는 <태그명>컨텐츠< /태그명 > 으로 구성된다.
컨텐츠 생략이 가능할 때에는 단일태그를 사용한다.

현재 교육을 진행하면서 사용하는 프로그램인 'Visual Stuudio code'에서는 여는 코드를 입력하면 자동으로 닫는 코드가 입력이 되어 크게 신경을 쓸 필요는 없지만 추후에 타 프로그램을 사용할 수도 있으니 반드시 알고 있어야하는 개념이다.

단일 태그형태

• <태그명>
• <태그명/>

올바른 태그 작성을 위해 알아두어야 할 사항

• 태그의 이름은 소문자로 쓴다.
• 여는 태그와 닫는 태그를 정확히 입력한다.
• 태그의 컨텐츠로 또 다른 태그가 포함될 수 있다.
• 들여쓰기를 적절하게 사용하는 것을 적극 권장한다.

속성

속성은 태그의 부가적인 기능을 정의하는 것으로 선택사항이다.
속성은 시작태그 내부에 입력을 하면된다.
갯수 제한은 따로 없고 여러 개를 추가할 경우 구분하기 위해 공백을 반드시 사용해야한다.

속성을 추가한 태그에 의해 표시되는 컨텐츠는 형태가 바뀔 수도 있다.
하지만 겉으로 드러나지 않는 속성도 여러가지 있다.

- (예시)속성을 추가한 태그의 형태

주석

주석은 코딩을 할때에 코드에 대한 메모를 남기기위한 용도로 주요 사용된다.
코딩을 진행하는 동안 사람에게는 보이지만 웹브라우저에는 보이지않는 코드이다.

문서 기본 구조

HTML문서에는 화면에 표시될 컨텐츠 외에 '문서 정보'도 포함된다.
문서의 정보를 기입하는 부분을 head
문서의 내용을 기입하는 부분을 body라고 한다.
이를 구분해서 적으면 작성자는 코드 관리하기가 편해져서 좋고 이를 해석하여 랜더링하는 웹브라우저나 웹시스템에게도 훨씬 좋다.

HTML문서는 모든 것을 태그로 표현한다.
따라서 정보와 내용의 구분 또한 태그로 해주어야 한다.

head 내부의 코드와 body 내부의 코드가 모여서 HTML문서를 구성한다.
두태그를 html태그로 묶어서 표현해줘야한다.

문서의 타입 (DOCTYPE)까지 써주면 완성이다. 작성하지 않아도 문제는 없지만 적어주는 것을 권장한다.
아래는 주로 사용하는 HTML문서의 기본 구조이다.

HTML의 정의

하이퍼텍스트 마크업 랭귀지 (HyperText Markup Language>

• HyperText:하이퍼링트를 통하여 문서에서 다른 문서로 접근할 수 있는 텍스트
• Markup:(컨텐츠)표시하다
• Language:언어

HTML5

HTML은 1991년에 웹의 창시자인 '팀 버너스리'에 의해 최초로 제안되었다.
만들어진 순간부터 지금까지 계속해서 기능을 개선하거나 추가해가면서 발전을 해왔다.
그 과정에서 새로운 버전이 계속 발표(버전 up)되었는데,
현시점에는 HTML5가 웹 개발 표준으로 인정받고 있다.

HTML과 HTML5의 차이

간단하게 말해서 버전의 차이이다.
현재 우리가 배우는 HTML은 제일 최근 버전인 HTML5라고 생각하면 된다.

HTML5가 2014년 10월에 발표되었는데 그러면서 많은 요소가 제거되거나 수정되었다.

• 정의

  HTML-웹페이지 개발을 위한 기본언어
  
  HTML5-컨텐프를 구조화 하고 표현하기 위해 인터넷 기술과 상호작용하기위한 핵심기술인 '마크업 언어'와 함께 새로운 기능을 가진 새로운 버전

• 멀티미디어

  HTML-비디오 및 오디오를 지원하지않음.
  
  HTML5-비디오 및 오디오를 지원함
  (예전에는 비디오,오디오를 지원할 필요성이 적었으나,
  현재는 영상,음성과 같은 시각적,청각적요소의 필요성이 늘어나서 그런게 아닐까?)

• 위치식별

  HTML-사이트를 방문하는 사용자의 위치를 추적하는 기능이 있지만 프로세스가 번거롭고 모바일에서 로그인할 경우 찾기가 어려움
  
  HTML5- JavaScript Ceolocation API를 사용하여 엑세스를 하는 모든 사용자의 위치를 식별하는데에 사용가능.
  

• 통신

  HTML-클라이언트와 서버간의 통신은 소켓지원이 없기 때문에 스트리민 및 긴 풀링을 통해 수행되었음.
  
  HTML5-클라이언트와 서버간의 통신을 허용하는 웹소켓을 지원.

• 브라우저 호환성

  HTML-어도비플래시,실버라이트 등과 같은 다른 도구를 사용하여 벡터그래픽을 지원할 수 있음.
  
  HTML5-캔버스와 SVG가 기본적으로 내장되어있어 벡터그래픽이 기본적으로 지원됨.

• 저장

  HTML-브라우저 캐시메모리를 임시 저장소로 사용.
  
  HTML5-응용프로그램 캐시,SQL 데이터베이스 및 웹 저장소와 같은 여러 저장소 옵션이 있음.
  저장을 위해 사용하능한 JS API의 도움으로 백그라운드에서 JavaScript를 사용할 수 있음

• 스레딩

  HTML-사용자가 상호작용하는 브라우저 인터페이스와 자바스크립트는 동일한 스레드에서 실행되므로 성능 문제가 발생
  
  HTML5-자바스크립트 밀 웹브라우저 API가 있어서 다른 슬레드에서 자바스크립트 및 브라우저 인터페이스를 실행할 수 있음

• 오류처리

  HTML-부정확한 구문 및 기타 오류를 처리할 수 없음
  
  HTML5-부정확한 구문 및 기타 오류를 처리할 수 있음.

등등의 다른 점이 있다.

완전한 기초부터 알아가기

인터넷이란?

전세계의 여러대의 컴퓨터를 하나로 연결해주는 거대한 통신망
인터넷을 사용하는 사용자들끼리 연결된 컴퓨터간의 정보교환을 위한 시스템이 있으면 좋겠다고 생각을 했다.
그렇게 하여 등장한 시스템이 웹(WEB)

그렇다면 웹(web)이란?

인터넷상의 컴퓨터들간에 정보를 공유할 수 있도록 해주는 네트워크 시스템 (월드 와이드 웹)
이를 통해 교환되는 정보의 종류는 다양하다.
글,이미지,영상,음성파일 등등 검색을 통해 나오는 모든 요소들이 해당된다.

위에 나열된 정보들을 효과적으로 제공하기 위해 가장 많이 사용하는 방식은
웹사이트를 구축하고 공유하는 방식이다.
대표적인 웹사이트에는 구글,네이버,다음 등등 다양한 것이 있다.

웹개발이란?

인터넷과 웹을 통해 공유할 웹사이트를 만들고 서비스하기 위하여 필요한 환경을 구축하는 일이다.
안전하고 유익한 환경 뿐만 아니라 사용하기 편하고 보기에도 좋은 환경을 만들어야 한다.

만들때 가장 필요한 언어가 HTML와 CSS

웹사이트란?

HTML과 CSS를 활용하여 만든 화면을 웹페이지라고 한다.
만들어진 웹페이지들이 그룹으로 묶이거나 연결되며 형성되는 것이 웹사이트이다.
형성된 웹사이트들은 서버에 저장이 되고 알고있는 www.로 시작되는 주소(url)를 가지게 된다.

오늘도 10시부터 시작된 수업

전날 신랑이랑 이마트도 가고 당근거래하러 돌아다니고 밥먹고 집에 와보니 12시 반

눈부을까봐 맑은 순두부찌개를 먹었건만...

눈은 팅팅 부었고...

하루에 물을 2리터를 마시니 생수로는 감당이 안되서

브리타 8.2L짜리 당근해왔는데 그거 씻고 설거지 다하고 잠에 드니 2시..

9시 30분에 밍기적 밍기적 일어나서

세수랑 치카만 간단히 하고 책상앞에 앉았다.

근데 그 와중에 배탈남 ㅋㅋㅋㅋㅋㅋㅋ

진짜 가지가지한다 쵸화얔ㅋㅋㅋㅋ

계속 화장실 가곸ㅋㅋ

근데 잠은 와서 뭐라도 먹어야하곸ㅋㅋ

오늘 뭔가 집중력은 조금 떨어지기는 했는데

그래도 졸지는 않고 공부는 열심히 했다.

10시부터 12시까지 잠이 덜깨서 조금 몽롱하긴했지만

열심히 강의를 봤다

어제보다는 솔직히 어려웠다...

당연한거다

어제는 첫날이라 간단한걸 알려주셨지만 

오늘은 조금 더 딥하게 들어갔으니

강의는 그냥 지켜보는 것이 아닌 보면서 실습을 진행하면서 진행하는거다보니

조금더 빨리 내것으로 만들 수 있는것 같다.

어제는 내 프로필을 HTML코드들을 활용해서 만드는

간단한 텍스트와 요소들의 나열이였다면

오늘은 체크박스, 리스트 등등 다양한 요소들을 배움으로써

회원가입하는 페이지를 만들어봤다.

17시부터는 실시간 세션 강의도 진행했다.

사실 아직은 내 머리가 받아들이기엔 어려워하는 내용들이 너무 많아서인지

오늘 컨디션이 안좋아서인지 

머리속에 잘 안들어왔다.

그래도 내일 세션녹화강의를 올려주신다하셨으니... 다행

토,일 주말은 쉬는 날이지만 그냥 쉬는 것이 아닌 

이틀간 배운 내용들을 정리해보고 다시 실습을 해보면서

복습하는 시간을 가져 내것으로 만들어야겠다.

오전 10시부터 시작된 본격적인 수업

첫날이라고 알람도 울리기전인 8시에 일어나서

그래도 첫 만남인데 하면서 씻고 부시시하지않게 ZEP으로 들어갔다.

100% 국비지원수업이다보니

HRD-NET 출석체크는 선택이 아닌 필수다.

9시 50분 부터 10시 10분까지 꼭 ZEP에 참석하여

큐알코드로 출석체크를 한다.

조금이라도 늦으면 지각이 되어버리는 불상사가 발생할 수 있으니

늦더라도 9시 55분까지는 책상에 착석을 하는것이 베스트~!!!

그리고 퇴실은 무조건 퇴실가능시간 이후에 찍어야지만

조퇴처리가 될 수 있으니 조심 또 조심

1분 일찍 퇴실찍었다가 조퇴처리되면 너무 억울쓰하니깐~!

첫째날이니 만큼 10시부터 12시까지는 발대식 및 OT를 진행했다.

진짜 국비지원교육을 처음 받아보는 나로써는

매니저님 조교님들께서 진짜 하나하나 세세하게 알려주시니

메모만 열심히 하면 놓칠 수 없겠구나 생각했다.

사람의 기억력이 오래 가지는 않으니 

반드시 메모를 해놓았다가 도~~저히 기억이 안난다고 하면

조교님과 매니저님께 여쭤보면 바로 알려주신다.

소통을 위해서는 디스코드를 사용하는데

사실 나는 디스코드를 많이 사용해봤던 사람이라

전혀 어려울게 없었지만 사용안해보신 분들은 조금 어려울 수도 있을거같긴하다.

12시부터 13시까지는 점심시간!!

든든하게 잘 챙겨먹고 공부를 해야하겠지만

사실 집에서 공부를 하는거다보니 

집중력도 조금 흐트러질 수도 있고

식곤증은.... 못이긴다.

그래서 그냥 배고프지만 않을 정도로만 먹고

저녁에 많이 먹자...

13시부터 다시 발대식과 OT를 진행한다.

진짜 발대식과 OT하는 동안 필요한 정보, 담당 조교님들도 알려주시고

코딩에 대해서도 흥미를 더욱 생기게 해주시는 이야기들을 가득해주신다.

들으면서 제일 좋았던 얘기는

"모르는게 당연하다."

"질문하는 걸 부끄러워하지말자"

사실 완전 코딩에 대해 아는것 하나 없는 사람들도 많이 오지만

어느정도 정보가 있는 사람들도 많이 오다보니

내심 걱정을 많이 했다.

'동기들에게 피해를 주는 건 아닐까?'

'아예 아는게 없는데 괜찮을까?'

괜찮더라

걱정할 필요가 하나도 없더라...

오히려 걱정한 내가 뻘쭘하더라...

오히려 매니저님들과 조교님들께서 모르는게 당연하다 해주셔서

용기를 한가득 얻었다.

그리고 동기님들과 처음 인사를 나눠보는 자기소개시간

사실 첫번째로 자기소개 하는 것 만큼 부끄러운게 없다.

내가 부끄러우면 동기님들도 당연히 부끄러우실 것

또 내가 누구인가 

파워E

ENFP쵸화아닌가?!

제가!! 1등으로 해보겠습니다!!

하고 나섰다...

왜그랬니 지난 날의 나야...

한 2분간 웃기만 하다가 자기소개는 한 1분 한거 같다...ㅋㅋㅋㅋ

얼굴도 빨개져가지고

뒤에 놔둔 핑크색 담요랑 실시간으로 얼굴색이 같아지고 있었다.

그래도 덕분에 우리 소중한 동기님들의 긴장이 풀어지셨다고 하시니

그거면 됬다...

발대식과 OT가 끝나고 

15시 드디어 본격적으로 수업에 들어가는 시간

내 자리 지정받고 같은 방 동기님들과 앉아서 공부를 시작했다.

ZEP에서는 내 맘대로 나의 아바타를 꾸밀 수 있다.

자리에 앉아서 열공하는 나의 모습...

너무 귀엽지아니한가...

우리의 오즈코딩스쿨 초격차 캠프에는

1일 1과제가 준비되어있다.

사실  6개월이 길지만 무언가를 배우고 마스터 하기에는 짧은 시간이라고 생각한다.

(대학교도 가려면 12년 공부하잖아....)

그래서 그냥 방치형보다는 더욱더 굴려주고 매일 과제를 내주는게 맞다고 본다.

첫날에는 HTML에 관련하여 배웠는데

내가 직접 내 손으로 코드를 짜보고

만들어지는 것이 눈에 바로 보이니

진짜 대존잼이였다.

여기서 쵸화의 감동포인트가 또 발생해버렸다..

과제제출에서 조금 버벅거리고 있으니까

우리의 동기님들 진짜 다들 도와주시고 알려주시고

동기사랑 나라사랑~❤

처음에는 사실 동기님들이 그래도 나의 경쟁상대가 아닐까 생각했는데

아니였다...

우리는 달리기 시합을 하는 것이 아니라

다같이 손잡고 오래달리기를 하는거였다는걸

누구하나 뒤쳐지더라도 손잡고 이끌어주시고

넘어지더라도 일으켜세워주시고 무릎을 털어주실 분들인것이다.

좋은 동기님들과 좋은 교육진분들

이렇게 체계가 잘 짜여진 곳에서 

공부를 진행하니 

마치 학생때로 돌아간 것같고 기분이 새로웠다.

앞으로도 내가 다른 동기님들에게 도움이 될 수 있을 정도까지

한번 열공해보자구~~

드디어 기다리고 기다리던 초격차 캠프의 첫째날 

어제 맥북도 도착했고 아침에 수업시간에 딱 맞춰서 

웰컴키트까지 도착했다.

사실 어제 택배기사님께서 나 보는 앞에서 맥북을 던지는겨....

막 옛다!!!하고 던진건 아니였지만 슬라이딩 정도..?

아니 그래도 그건 아니잖아 ㅠㅠ 싶어서 

"아저씨... 저거 노트북이에여.... 왜던져요... 던지면 안되는건데...."

외쳤다.

아저씨 하시는 말씀

"아..노트북이에요? 옷인줄알았어요..미안해요 확인해보고 파손있으면 연락주세요."

이 말씀을 듣고도 사실 난 속상했음... 내가 안보는 상황이였어도 속상한건데

내가 보는 앞에서 6개월간 나와 함께 해줄 소중한 맥북을 던진다...?

이건 싸우자는 거지...?

근데 아저씨가 연락하면 보상다 해줄거고 계속 미안해 하시기도 하셨고

열어보니까 상태가 굳이길래  내가 특별히 넓은 마음으로 용서해드리기로 했음..

'착한 내가 용서해준다~!!!!'

암튼~!!!

첫째날이라 그런지 

10시에 시작하지만 8시에 눈이 번쩍 떠지더라...

역시 나란 인간 새로운 거에 도파민이 매우 넘쳐나지...

9시에 웰컴키트까지 왔는데

아니... 너무 귀여움 ㅠㅠㅠ

패키지마저 너무 깔끔하고 이뻐서

받자마자 "어머어머 이게뭐야~~~!!!"를 외치고..ㅋㅋㅋ

구성은 이렇게 되어있었음...

허브도 사실 선물처럼 포장되어있었는데

쵸화는 못참지 하고 뜯어버렸다는...ㅋㅋㅋㅋ

안에 이렇게 편지들도 들어있었음..

파워F인 나로써는 이런거 하나에 기분좋아진다는 거

이런 포인트 하나에 웃습니다...

이제 웰컴키트로 온것 중 허브를 먼저 열어봐야지~!!

이거 보임..?

오즈 떡하니 박혀있음..

솔직하게 오즈코딩스쿨의 로고는 깔끔하고 귀여운 느낌이라서

다른데는 박아주면 간혹 촌스러울 때도 있지만

오즈코딩스쿨은 안그렇다

귀엽다. 깔끔하다

그럼 다음 제일 중요한 키보드를 열어보겠음

앱코꺼를 보내주다니...

키감도 만족스럽고 컬러감도 대만족스러움...

100% 국비지원 수업에 이렇게 좋은 웰컴키트까지 주는

우리의 오즈 코딩스쿨 

코딩에 관심이 있는 사람이라면 

[오즈코딩스쿨] 초격차캠프를 선택하지 않을 이유가 있을까?

내가 평일 내내 생활하는

책상 세팅완료!

최애 텀블러로 하루에 물 2L 마시고 

최애 캐릭터인 쿠로미로 안구정화도 하고

6개월동안 한번 으쌰으쌰 해보자구~!!!

https://blog.naver.com/cho_hwa_studio/223650098898

사전 학습한다고 열심히 예습했었던 시간...

사실 현생이 바빠서 막 열심히는 못했지만....

본캠에는 진짜 뼈와 살을 깎으면서 해봐야지

(뼈는 깎지말고 살은 깎아봐야지 다이어트 개꿀)

https://blog.naver.com/cho_hwa_studio/223642076224

처음에는 네이버로 작성하였으나 

사업으로 사용하는 블로그다보니 

이제 블로그를 옮겼다!

네이버만 사용하다가 티스토리로 넘어오니

적응이 하~나도 안된다....

이제부터 블로그도 꼬박꼬박써봐야지...