강좌 및 설정

html 기본 강좌에서 각각의 태그의 의미와 함께 기본사이즈를 확인하면서 display 속성을 모두 확인했었습니다. html 기본 강좌의 [웹 프로그래밍/HTML 기본강좌] - 블럭과 인라인을 한번 더 참고하시면 좋을듯 싶습니다. 이번 강좌에서는 블럭과 인라인의 확장 강좌라고 보시면 될 것 같습니다. 속성 값 설명 block 부모요소의 가로 크기(width)를 상속 받으며 세로 크기는 내용의 크기를 반환 - 박스의 크기와 여백 조정이 가능 inline 요소 안 내용의 가로, 세로 크기를 자동으로 설정. - 박스의 크기와 여백 조정이 불가능 inline-block 요소 안 내용의 가로, 세로 크기를 자동으로 설정. - 박스의 크기와 여백 조정이 가능 none 안보이게 감춤 확인을 위해 이번에는 css속성중..

그룹 선택자는 하나의 선언블럭으로 여러개의 선택자을 한꺼번에 지정하는 방법입니다. 가령 10명의 친구들이 있다고 하겠습니다. 그 중에서 길동이와 꺽정이에게만 사과를 주고 싶습니다. "얘들아 사과 먹어" 라고 하면 10명이 다 먹겠다고 올 것입니다. "길동아, 꺽정아 사과 먹어"라고 얘기 할 것입니다. 그래야 길동이와 꺽정이만 사과를 먹으로 올 것입니다. css로 대입해 생각해 보면 2개의 요소(길동, 꺽정)을 선택자로 생각할 수 있습니다. 그리고 "사과 먹어"는 선언으로 생각할 수 있습니다. 즉 2가지 이상의 선택자가 같은 속성을 가지기 때문입니다. 이문열 삼국지 책 소개 젊은 세대를 위해 내용을 손보고, 한자어 독음을 달아 읽기 쉬운 『삼국지』 1권 도원(桃園)에 피는 의(義) 서사(序辭) 창천(蒼天)..

이번 강좌에서는 자식, 자손, 형제 요소란 말이 계속 나오게 됩니다. 만약 용어가 어렵게 생각되신다면 html 기본강좌에서 부모요소, 자식요소, 형제요소, 조상요소, 자손요소 그리고 상속 강좌를 꼭 읽어보시뒤에 진행하시길 바랍니다. 지금까지의 선택자만을 가지고도 다소 불편함은 있게지만 html 요소의 선택은 어느정도 가능합니다. 대신 css에서 선언해야 하는 코드가 많이 길어지고 html 문서에서는 id나 class 마크업이 엄청나게 늘어날 것입니다. css 결합자는 그런 코딩의 양을 획기적으로 줄이고 html 문서는 단순화 할 수 있으며 css의 선택자를 시각적으로도 명확하게 만들수 있게 합니다. 결합이라는 말이 두가지 이상을 합치다라는 의미가 있습니다. 즉 결합자란 최소한 두가지의 선택자가 필요하게 ..

지난 강좌에서 css 선택자로 html 요소를 선택하는 방법에 대해 알아보았습니다. 이어서 이번 강좌에서는 css의 가장 큰 장점 중에 하나인 다중? 복합? 적용에 대해 알려드리려 합니다. html 한 요소에 여러개의 css 속성을 다중으로 적용하는 방법입니다. @charset "utf-8"; /* CSS Document */ .bg-green { background-color: green; } .txt-white { color: white; } .txt-2em { font-size: 2em; } 위와 같이 일단 3개의 css에 3개의 class를 작성했습니다. 이문열 삼국지 책 소개 젊은 세대를 위해 내용을 손보고, 한자어 독음을 달아 읽기 쉬운 『삼국지』 젊은 세대를 위해 내용을 손보고, 한자어 독음..

지난 강좌에서 html 문서의 태그를 선택자로, class를 선택자로 사용하는 방법에 대해 알아보았습니다.이번강좌는 좀더 확장에서 선택자를 활용하는 방법에 대해 알아보겠습니다. 종류css 형태설명전체 선택자*모든 요소를 선택합니다.태그 선택자태그h1, p, span, table, ul .. 각각의 태그 요소를 선택합니다.클래스 선택자.클래스웹문서에서 class="클래스"로 마크업 한 요소를 선택합니다.아이디 선택자#아이디웹문서에서 id="아이디"로 마크업 한 요소를 선택합니다.속성 선택자[속성명="속성값"]웹문서에서 [속성명="속성값"]을 가진 요소를 선택합니다.  1. 전체 선택자 "*"해당 요소의 모든 자식, 자손 요소를 선택하는 선택자 입니다. @charset "utf-8";/* CSS Docume..

css 적용방식은 3가지가 있습니다. 적용 방식을 알아보기 위해 일단 2가지 css 속성을 알려 드리겠습니다. background-color : green; /* 해당 요소의 배경색을 설정합니다. */color : white; /* 해당 요소의 글자 색을 설정합니다. */ css 속성과 값에 대해서는 적용 방식을 알아본 후에 차근차근 설명드리도록 하겠습니다. 일단은 배경색을 초록색으로 지정하고 글자색은 하얀색으로 지정했다는 것만 알아두시고 아래 내용을 봐주세요 1. 인라인 스타일 적용 방식인라인 스타일(inline style) 방식은 html 태그 요소에 style 속성을 이용하여 css를 태그 요소의 속성처럼 사용하는 방식입니다. css 적용방법 1. 인라인 스타일 방식 인라인 스타일(..

웹문서를 제작하는 단계는 크게 세 가지로 구분할 수 있습니다.구조, 표현, 동작" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스이 세 가지는 웹문서의 제작의 이해를 위해 알고 있으면 무슨 작업을 해야 할지 도움이 되리라 생각됩니다.가장 먼저 진행하는 작업은 구조입니다. html 태그를 이용해 문서를 만들고 마크업 하는 것이 이것에 해당합니다.다음 작업은 표현입니다. 마크업된 html 요소에 크기를 정하고 색상을 입혀 꾸미는 작업을 하는 것입니다. 바로 이 작업을 css가 담당하게 됩니다. 그리고 최종적으로 동작을 제어하는 작업입니다. 마우스를 요소 위로 올린다던가 클릭한다던가 자동으로 사라지는 애니메이션을 작동시킨다던가 하는 움직임이 들어가는 작업이 이것에 해당합니다. 이것을 ..

이전 레이아웃 시멘틱 태그에서 다루어야 했지만 한가지 빠진 시멘틱 태그가 있습니다. 바로 article 태그 입니다. article을 다루지 않고 따로 이렇게 하나의 강좌로 뺀 이유는 중요해서가 아니고, section 태그와 잘 구분이 안돼기 때문입니다. 지금까지의 강좌를 쭉 봐오신 분들이라면 이상하게 겹치는 태그들이 존재한다는 것을 느끼셨을 겁니다. b태그와 strong 태그, em 태그와 i 태그, section과 div등.. 혹시나 왜지? 라고 생각해 보셨을까요? 눈으로 보기엔 차이가 없는데... 사실 지금까지 알려드린 html 태그는 html 5를 기준으로 설명 드렸습니다. 지금은 대부분 html 5를 사용하기 때문입니다. 5라는 숫자에 의문이 생기지 않나요? 네 맞습니다. 4도 3도 있었습니다...

웹사이트에서 레이아웃(layout)이란 단순하게 화면 구성(구조)을 뜻합니다. 어떤 웹사이트는 매우 현란하고 멋있게 구성이 되어 있으며 어떤 웹사이트는 아주 단순하게 구성되어 있어보이지만 사실 대부분의 웹사이트는 구조만 놓고 보자면 전혀 다양하지 않습니다. 대부분은 비슷한 구조로 되었있죠 집을 지을때를 생각 보겠습니다. 먼저 어디를 방으로 할지 어디를 화장실로 할지 어디를 창으로 할지 등 구조를 결정한뒤 뼈대를 만들고 내부를 만들고 그뒤에 최종적으로 도배와 장판을 진행합니다. 웹사이트도 이것과 비슷해서 먼저 구조를 결정하고 만든후 상세 디자인 작업을 진행하게 됩니다. 흔히 볼수 있는 웹사이트 레이아웃은 이러한 구조 입니다. 상단에 웹사이트명이 있으며 그아래로 컨텐츠를 연결할 메뉴들이 구성 되고 좌측 영역..

div는 division의 약자로 분할하다는 뜻이 있습니다. 이전에 단락태그 p처럼 사용할 수 있습니다. 단락 태그는 문장에 단락을 의미하는 반면 div태그는 단락의 의미가 없고 단순하게 영역을 나누는 역할을 합니다. 위와 같이 이문열 삼국지 소개 하는 문장에서 단락 태그 p로 영역을 나누었다면 전혀 다른 책을 소개하는 박경리 토지 부터는 단락 태그 p로 의미를 부여하는 것은 필요치 않습니다. 이렇게 이문열 삼국지와 박경리 토지의 영역을 의미 없이 독립적으로 나누는 역할을 하는 것이 div 태그입니다. 개발자도구로 기본사이즈를 보면 역시 블럭속성 입니다. 이문열 삼국지 1988년 출간된 이래 누적판매 2,000만 부라는 대기록을 세운『이문열 삼국지』가 출간 30여 년 만에 새롭게 출간된다. 나관중 판본을..

entity는 독립체, 개체, 미지·미정의 것 이라는 의미가 있네요 다시 html tag의 기본 사용법을 떠올려 보겠습니다. 내용 글자를 제외하고 기호를 보면 " 기호들은 태그 안에서 사용되고 있습니다. 그런데 이 기호들을 태그가 아닌 문자로 사용하고 싶을 수도 있습니다. 그럴 경우 html 문서는 의도치 않게 에러를 발생하고 어느 위치부터 마구 깨져 버리는 현상이 발생될 수 있습니다. 왜냐하면 바로 위의 기호들은 태그를 나타내야 되기 때문입니다. html문서는 태그를 가지고 화면을 모니터로 출력하는데 < 를 문자로 표현하면 거기서 부터 브라우저는 태그로 간주하고 처리하려하고 실제로는 태그가 아닌 문자가 들어오기 때문에 오류가 발생 되는 것입니다. 이렇게 웹문서에서 이미 사용하기 위해 다른 사용을 금지한..

지금 소개할 태그들은 모두 글자를 꾸미는 역할을 하는 태그들입니다. 기본 태그의 사용법만 알고 있으면 어렵지 않게 사용할실 수 있으나 그 의미만은 반드시 기억하시기 바랍니다. 눈으로 보기에는 차이가 없는 것들이 있으니 의미를 잘 이해하시고 적절한 태그를 사용하는 것이 좋겠습니다. 글자를 위한 태그들이니 display 속성은 모두 inline 입니다. 중요한 text를 강조. bold(굵게). 목적없이 단순이 글자를 굵게 만들기 위해 사용. emphasized(강조). 구어체 강조 또는 strong으로 강조된 문장안에서 다시 강조시 사용 italic(기울임체). 전문용어, 관용구 등 강조가 아닌 단순 기울임을 위해 사용 insert(삽입). 밑줄을 만들고 빈칸에 글자를 삽입했다는 의미 underline(밑..