Chainsmoker's Block

[01. 레이아웃을 위한 요소] [시맨틱 웹] 2_1-2. Header와 Footer에 이어 설명. [1-2 머리말(header)과 꼬리말(footer)] : 사이트의 로고나 메뉴 등을 담기 위해서는 header 요소를 사용하고 제작자의 정보나 저작권 등의 정보를 담기 위해서는 footer 요소를 사용한다. header 요소는 굳이 상단에 오진 않아도 된다. 사이트의 상단에 위치해있던, 중간에 위치해있던 section 요소의 사이에 있던 무관하기도 하다. footer 요소도 동일하지만 대부분 하단으로 위치 시킨다.

[01. 레이아웃을 위한 요소] [1-2 머리말(header)과 꼬리말(footer)] : 여러 웹사이트에는 앞에서 말한 콘텐츠/컨텐츠 이외에 사이트 로고, 메뉴, 제작자의 정보 등이 나타나 있다. 이용하는 사이트의 맨 위나 아래를 살펴보자. 상단에는 해당되는 사이트의 로고나 메뉴, 소개 등의 정보들이 담겨져 있으며, 하단에는 제작자의 정보나 저작권의 정보가 포함되어 있을 것이다. 정리하자면 상단엔 홈페이지와 관련한 로고나 메뉴가 있고, 하단에는 제작자의 정보 및 여러가지의 부가 정보들이 있다.

[01. 레이아웃을 위한 요소] [시맨틱 웹] 2_1-1. 시맨틱 웹 요소_4에 이어 설명. [1-1 콘텐츠 표현] : 콘텐츠를 표현하는 데는 section 요소뿐만 아니라 article 요소도 함께 사용한다. article 요소는 개별 콘텐츠를 담는 요소이다. 무엇보다 article 요소 안의 내용은 포함되어 있는 문서와 분리하여 개별적 사용이 가능하다는 것을 의미하기도 한다. section 요소와 article 요소의 정확한 사용부분을 구분짓기 어려운 때를 분명히 만날 것이다. 물론 article 요소 안에 section 요소도 포함 가능하다. 아래 소스코드를 참고 바란다.

[01. 레이아웃을 위한 요소] [시맨틱 웹] 2_1-1. 시맨틱 웹 요소_3에 이어 설명. [1-1 콘텐츠 표현] : 암묵적으로 section이 생성된다 하더라도, 정확한 의미 전달을 위해 하나의 section요소에는 하나의 h1~h6요소만을 사용하는 것이 좋다. 하지만 문서를 작성하다보면 대제목과 부제목의 표현과 같이 하나의 section요소 안에 다른 레벨의 h1~h6요소를 사용해야만 하는 경우가 있다. 이때에는 새로 추가된 hgroup요소를 사용하여 제목을 묶여주면 된다. 즉 hgroup 요소는 제목과 부제목을 묶어주는 역할을 한다.

[01. 레이아웃을 위한 요소] [시맨틱 웹] 2_1-1. 시맨틱 웹 요소_2에 이어 설명. [1-1 콘텐츠 표현] : 만약 하나의 section요소에 두 개 이상의 h1~h6 요소를 가지고 사용한다면 어떻게 될까? 중복하게 사용할/사용될 경우 요소의 레벨에 따라서 결정된다. 같은 레벨의 h1~h6 요소를 사용하게 될 경우 한 개의 section요소는 두 개의 section요소로 나뉘게 되고, 다른 레벨의 h1~h6 요소를 사용하게 되면 내부에 또 다른 section요소가 생성된다. 물론 이는 암묵적으로 나뉘게 되는 것임.

[01. 레이아웃을 위한 요소] [시맨틱 웹] 2_1-1. 시맨틱 웹 요소에 이어 설명. [1-1 콘텐츠 표현] : 콘텐츠 영역과 내부에 포함되어 있는 각각의 독립적인 콘텐츠와 제목은 HTML5에 새롭게 추가된 section요소, article요소, hgroup요소를 사용해서 나타내볼 수 있다. // section요소 : section요소는 문서의 내용 부분을 나타내는 요소이다. 하나의 section은 하나의 주제를 가지고 있으며 h1~h6태그와 같이 제목을 표현하는 요소들과 함께 사용된다. 주의해야 할 점으로는 하나의 section요소에는 하나의 h1~h6요소만을 사용해야 한다. // h요소 : 제목 등의 글자 속성을 지정할 때 사용되는 요소로, 1~6까지 지정할 수 있으며 숫자가 클수록 크기는 작아지..

[01. 레이아웃을 위한 요소] div 요소(div태그 사용) : 영역 지정을 할 때 사용하는 태그(요소)이다. ul 요소(ul태그 사용)와 li 요소(li태그 사용) : ul 요소는 목록 전체를 나타내며 li 요소는 목록에 대한 각 항목을 나타낸다. *header : 머리말을 나타내는 요소 *hgroup : 제목과 부제목을 묶는 요소 *nav : 메뉴 부분을 나타내는 요소 *article : 개별 컨텐츠를 나타내는 요소 *section : 제목별로 나눌 수 있는 요소 *aside : 좌우측의 사이드바를 나타내는 요소 *footer : 제작자의 정보나 저작권의 정보를 나타내는 요소 각 요소별 영역이 어떤 것을 의미하는 바를 이해하길 바란다. 각 요소에 대해 상세히 알아봐야 하며, HTML5의 기본구조와 ..

[01. 레이아웃을 위한 요소] : HTML5의 특징 가운데 하나는 바로 시맨틱 웹이라고 할 수 있다. 시맨틱(semantic)이란 '의미가 있는', '의미의'라고 해석되는 단어로 HTML문서에서 의미를 부여하겠다는 의도가 담여져 있다. 기존의 HTML문서는 단지 표현의 수단이었다. 그러므로 여러 요소를 사용하여 구조를 정의할 수 있지만 정확한 의미를 담고 있지는 않았다. 플랫폼 홈페이지 화면을 보면 헤더, 네비게이트 메뉴, 사이드바, 컨텐츠 등으로 나누어져 있는 곳이 많다. 사이트 맨아래에는 제작사의 정보나 저작권 정보등을 나타내는 풋터 영역이 존재할 수 있다.

[05. 파이썬 날개 달기] -1. 클래스 ===================사칙연산 클래스 만들기 : 1_13에 이어 설명. -객체에 숫자 지정할 수 있게 만들기 앞에서 생성된 객체 a는 아직 아무런 기능을 하지 못한다. 이제 더하기/나누기/곱하기/빼기 등의 기능을 하는 객체를 만드는 것이 필요하다. 그런데 이러한 기능을 갖춘 객체를 만들기 위해 우선 a객체에 사칙연산(+, -, *, /)을 할 때 사용할 2개의 숫자를 먼저 알려주어야 한다. 아래와 같이 연산을 수행할 대상(4, 2)을 객체에 지정할 수 있게 만들어 보자. 위 예시의 수행을 위해 아래와 같은 소스코드 작성이 필요하다.

[05. 파이썬 날개 달기] -1. 클래스 ===================사칙연산 클래스 만들기 : -클래스 구조 만들기 이제부터 앞과 같이 동작하는 클래스를 만들어보자. 먼저 a = CalF처럼 객체를 만들 수 있게 하는 과정을 거치는 것이다. 매우 간단하게 시작하자. 대화형 인터프리터언어(파이썬)에서 pass란 문장만을 포함한 CalF클래스를 만든다. 현재 해당 상태에서는 CalF클래스는 아무 변수나 함수도 포함하지 않지만 우리가 원하는 객체 a를 만들 수 있는 기능은 가지고 있다. 확인하는 아래 예시과정을 살펴보자. 위 예시와 같이 a = CalF()로 a객체를 먼저 만들고 그 다음에 type(a)로 a객체가 어떤 타입인지 알아볼 수 있었다. 역시 객체 a가 CalF클래스의 객체임을 알 수 있다.