박스모델은 웹페이지의 요소를 박스 형태로 구성하고 요소의 크기와 공간배치를 설명하는 CSS의 핵심 개념이다.
모든 HTML요소는 박스 모델에 따라 배치된다.
각 요소는 4가지의 주요 영역으로 구성된다.


1.콘텐츠(Content)

요소의 실제 콘텐츠가 표시되는 영역이다.

2.테두리(Border)

박스를 둘러싸는 테두리
스타일, 두께, 곡률, 색상을 지정할수 있다.

3.패딩(Padding)

콘텐츠와 박스의 경계인 Border사이의 내부여백
콘텐츠에 대해 투명하며 색상을 지정할 수 없다.

4.마진(Margin)

박스의 가장 바깥 영역 인접한 요소와의 간격을 정의한다
패딩과 마찬가지로 색상을 지정할 수 없고 투명하다.

HTML의 기본 문법

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

태그의 구성 요소

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


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

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

단일 태그형태

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

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

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

속성

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

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

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

주석

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

문서 기본 구조

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

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

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

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

완전한 기초부터 알아가기

인터넷이란?

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

그렇다면 웹(web)이란?

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

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

웹개발이란?

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

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

웹사이트란?

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

 

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

 

[오즈코딩스쿨]초격차 캠프에서 코딩배우기

요새 즐겁게 하고있는게임인 카드캡터체리:추억의 열쇠 현재 활동하고 있는 단톡방에서 코딩을 배우셔서 봇...

blog.naver.com

 

 

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

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

이제 블로그를 옮겼다!

 

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

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

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

+ Recent posts