목록전체 글 (53)
heenam
레이아웃의 기초 블록 요소와 인라인 요소 HTML요소는 블록 요소이거나 인라인 요소 중의 하나에 속한다. 일반적인 문서의 흐름에서 HTML요소는 블록 요소냐 인라인 요소냐에 따라서 다음과 같이 화면에 표시된다. + 블록 요소: 화면의 한 줄을 전부 차지한다. + 인라인 요소: 한 줄에 차례대로 배치된다. 현재 줄에서 필요한 만큼의 너비만을 차지한다. 블록 요소 블록 요소는 브라우저의 한 줄을 모두 차지한다. 예를 들어 , , , 등이 있다. 즉 한줄에 하나씩 배치 된다. 인라인 요소 인라인 요소는 정상적으로는 한 줄 안에 차례대로 배치된다. 예를 들어 , , , 등이 있다. 블록 요소와 인라인 요소의 혼합 일반적이 웹 페이지에는 블록 요소와 인라인 요소가 혼합되어 있다. 이 경우에는 블록 요소가 나타날 ..
박스 모델 css 개요 css3는 W3C에서 한창 개발중인 규격이다. W3C사이트에서 보면 CSS3 규격 중에서 완료된 것도 있고 아직 한창 토의 중인 규격도 있음을 알 수 있다. 박스 모델 웹 브라우저는 각 HTML요소를 사각형으로 간주하고 웹 페이지 위에 그리게 된다. 요소를 배치할 때도 사각형으로 간주한다. 이런 식으로 요소를 박스 형태로 그리는 것을 박스 모델 이라고 부른다. CSS는 각 박스의 특징(배치, 색상, 경계 등)을 결정하게 된다. CSS 박스 모델은 기본적으로 HTML 요소를 감싸는 가상적인 박스를 생각하는 것이다. 각 박스는 마진, 경계, 패딩을 가진다. 콘텐츠: 박스의 내용물이다. 텍스트와 이미지가 나타나는 부분이다. 패딩: 콘텐츠 주위의 영역이다. 패딩은 투명하다. 경계: 패딩과..
CSS의 개념 우리는 앞에서 HTML 요소를 이용해서 HTML 문서를 작성해 보았다. 하지만 무엇인가 빠져있다는 것을 느꼈을 것이다. 문서의 구조는 HTML로 정의할 수 있었지만 문서가 화면에 표시되는 스타일은 주정할 수 없었다. 즉 색상, 폰트, 크기와 같은 스타일은 지정하지 않았다. 스타일이 지정되지 않으면 아주 밋밋한 웹 페이지가 된다. 우리는 CSS를 이용해서 문서의 스타일을 지정한다. 즉 HTML 요소의 크기, 폰트, 색상 등을 결정한다. CSS의 필요성 웹 페이지의 스타일을 HTML 태그로 적어주는 것보다 CSS로 분리하는 것이 어떤 장점이 있는지를 고찰해 보자. 많은 페이지로 이루어진 사이트의 텍스트를 폰트를 바꾸려면 HTML 페이지 안에 스타일 정보를 태그한 것은 일일이 모든 페이지의 내용..
웹 브라우저와 멀티미디어 HTML5 이전에 웹 브라우저에서 오디오나 비디오를 재생하기 윟서는 상당한 수고가 필요하였다. 먼저 HTML 안에서는 나 태그를 사용해야 했고 웹 브라우저에는 플래시나 AciveX를 설치해야 했다. 하지만 HTML5에서는 와 태그가 추가되었고 이 태그를 이용해 자연스럽게 HTML 문서의 일부로 오디오와 비디오를 추가 할 수 있다. 물론 플러그인의 설치도 필요 없다. 오디오 HTML5에서는 오디오를 재생할 수 있는 태그를 이용해 웹 페이지에서 음악을 재생할 수 있다. 큰 따옴표 옆에는 audio 요소를 추가할 수 있다. 오디오 파일 형식 + MP3 : 'MPEG-1 Audio Layer-3'의 약자로 MPEG 기술의 음성 압출 기술이다. + Wav : 윈도우에서 사용되는 표준 사운..
텍스트 표시 HTML 문서에서 텍스트는 다음과 같이 특별한 테그 없이도 ... 안에서 표시할 수 있다. 하지만 여러 줄로 이루어진 텍스트는 단락을 생성한 후에 단락 안에서 표시하는 것이 좋다. 단락 단락은 태그로 정의 된다. 종료 태그는 안해도 되지만 하는것이 좋다. 태그를 사용하면 단락의 전후에 빈줄을 추가된다. 단락이 아닌 줄바꿈을 원할때는 태그를 사용한다. 태그는 종료 태그를 하지 않는다. 텍스트 입력 시 주의할 점 HTML 코드에서 엔터키를 사용하더라도 웹 브라우저에서는 적용되지 않기 때문에 와 을 적절히 잘 사용해야 한다. 태그 와 을 사용하지 않고 프로그래머가 입력한 그대로 웹 브라우저에 적용하고 싶을 때는 ...를 사용하면 해결된다. 헤딩 헤딩은 웹 페이지의 머리기사이다. 문서의 중요한 키워..
웹에 대한 기초 사항 WWW WWW(World Wide Web)은 흔히 웹이라 부른다. 세계를 뒤덮는 거미줄 이라는 의미이다. WWW의 동작 원리 우리는 HTML로 웹 페이지를 작성해서 웹 서버에 놓는다. 인터넷에 연결된 수많은 클라이언트 컴퓨터는 웹 서버에서 HTML문서를 받아서 웹 브라우저를 통하여 화면에 웹 페이지를 표시한다. 웹 서버가 하는 일 웹 서버가 요청을 받으면 이들 자원을 찾아서 클라이언트 컴퓨터로 보낸다.웹 서버와 클라이언트는 서로 표중 언어를 통하여 통신하는데 바로 HTTP라는 프로토콜을 사용한다. HTTP프로토콜에서 가장 중요한 것은 특정한 파일을 요청 하는 HTTP Request와 찾은 파일을 돌려주는 HTTP Response가 그것이다. HTML은 무엇인가? 웹 페이지는 기본적으..
파일의 분할 파일을 그냥 둬도 될까요? 한 파일에 모든 것을 담는 것보다 여러개의 파일을 만들어서 서로 연관 있는 함수와 변수들을 구분해서 담는게 좋다. 외부에 선언 및 정의되었다고 컴파일러에게 알려줘야 합니다. 파일을 분할해서 컴파일 하기 위해서는 컴파일러에게 다음과 같은 내용의 메시지를 전달해야 한다. extern int num // int형 변수 num이 외부에 선언되어 있다. 이처럼 외부에 선언되었음을 컴파일러에게 알리는 extern을 사용한다. 함수에서도 사용 가능하다. extern void Increment(void) // void Increment(void) 함수가 외부에 정의되어 있다. 구체적으로 어느 파일에 선언 및 정의되어있는지 까지는 알리지 않아도 된다. 다른 파일에서 접근을 못하게 ..
선행처리기와 매크로 선행처리는 컴파일 이전의 처리를 의미합니다. 선행처리 과정을 거쳐서 생성되는 파일도 그냥 소스파일일 뿐이다. 왜냐하면 소스파일의 형태가 그래도 유지되기 때문이다. 선행처리가 하는 일은 지극히 단순하다. 삽입해 놓은 선행처리 명령문대로 소스코드의 일부를 수정할 뿐인데, 여기서 말한 수정은 단순치환의 형태를 띠는 경우가 대부분이다. 이처럼 선행처리 명령문은 #문자로 시작을 하며, 컴파일러가 아닌 선행처리기에 의해서 처리되는 문장이기 때문에 명령문의 끝에 세미콜론을 붙이지 않는다. #지시자 매크로 매크로몸체 로 이루어져 있다. *매크로는 대문자로 입력한다. 대표적인 선행처리 명령문 #define: object-like macro #define 지시자는 이어서 등장하는 메크로를 마지막에 등장..