html§CSS (14) 썸네일형 리스트형 CSS의 속성들(2) ○ CSS 고급활용 html 태그가 출력되는 모양은 항상 Box Model이다 웹 페이지를 작성하는데 필요한 고급 기술 배치 리스트 꾸미기 표 꾸미기 폼 꾸미기 애니메이션 등 동적 변화 만들기 ● 배치 display float position z-index overflow visibility ● display 박스 유형 제어 display 프로퍼티를 이용하면 디폴트 박스 유형을 무시하고 html 태그 박스 유형을 지정할 수 있다 display:inline -> 새 라인에서 시작하지 않는다 -> 옆에 다른 태그를 배치할 수 있다 -> width,height로 크기 조절이 불가능하다 -> 라인 안에 있다 -> 모든 박스 내에 배치 가능하다 -> margin-top, margin-bottom 조절이 불가능하다.. CSS의 속성들(1) ● text 속성 텍스트와 관련된 속성이다 color : 텍스트의 색상을 결정한다 direction : 텍스트가 써지는 방향을 설정한다 (ltr(left-to-right) => 왼쪽에서 오른쪽 방향으로, rtl(right-to-left) => 오른쪽에서 왼쪽 방향으로) letter-spacing : 텍스트 내에서 글자 사이의 간격을 설정한다 word-spacing : 텍스트 내에서 단어 사이의 간격을 설정한다 text-indent : 단락의 첫 줄에 들여쓰기를 할 지 안 할 지를 설정한다 (text-indent:5em => 5글자 들여쓰기. {em : 상위 요소의 크기를 가져와 그것의 배수를 적용한다}) text-align : 텍스트의 수평 방향 정렬을 설정. direction 속성과 상관없이 우선 적용.. HTML의 태그들(8) ○ CSS 파일 등 외부 파일 연결 ● 태그 외부의 문서를 연결시키는 태그이다 주로 CSS 파일 같은 스타일 시트 파일을 연결하거나, 웹 폰트를 사용할 때 폰트가 있는 주소로 연결시킬 수 있다 여러 개의 태그를 삽입할 수 있으며, 태그 안에 넣는다 link 태그의 속성 rel : 현재 문서와 연결 문서의 관계를 표시한다 href : 연결할 곳의 주소를 표시한다 type : 연결 문서의 MIME 유형을 표시한다(href 속성이 설정됐을 때만 사용한다) □ rel 속성의 값 stylesheet : 스타일 시트로 연결할 때 사용 alternate : 문서의 대안 버전(프린트나 번역 사이트)으로 연결할 때 사용 () author : 저작자로 연결할 때 사용 help : 도움말로 연결할 때 사용 license :.. CSS의 개념 ○ CSS ● CSS(Cascading Style Sheet) html 문서에 색이나 모양, 출력 위치 등 외관을 꾸미는 언어이다 CSS로 작성된 코드를 Style Sheet라고 부른다 ○ html에 CSS를 적용시키는 방법 ● Inline Style Sheet html 태그의 style 속성에 CSS 코드를 넣어 적용시키는 방법으로 우선 순위가 가장 높다 ex) 인라인 스타일 시트 해당 태그(p)가 선택자(Selector)가 되고, CSS 코드에는 속성(Property)과 값(Value)만 들어간다 선택자 : 무엇을 꾸밀지 정한다 속성 : 어떤 모양을 꾸밀지 정한다 값 : 어떻게 꾸밀지 정한다 => 속성과 값을 합쳐서 선언(declaration)이라고 한다 꾸미는 데 한계가 있으며, 재사용이 불가능하다.. HTML의 태그들(7) ● 태그 세부 사항을 선택적으로 보여주는 태그이다 요소는 보통 사용자가 직접 접거나 펼 수 있는 대화형 위젯(interactive widget)을 정의할 때 사용되며, 그 안에는 어떠한 종류의 콘텐츠도 포함될 수 있다 이러한 요소의 콘텐츠는 open 속성이 설정되기 전까지는 화면에 보이지 않는다 ● 태그 요약을 표시하는데 사용하는 태그이다 태그로 제공되는 세부사항에 대한 요약 또는 제목을 의미한다 "요약 - 세부"라는 관계를 제대로 전달하기 위해서는 태그 다음에 곧바로 태그가 이어져야 한다 실행 코드 summary 태그는 details 태그 바로 밑에 와야할까요? 네! 실행 결과 summary 태그는 details 태그 바로 밑에 와야할까요? 네! ● 태그 태그에서 사용하기 위한 옵션들의 리스트를 미리 .. HTML의 태그들(6) ● 태그 태그 사이의 내용을 가운데로 정렬시킨다 ○ IFrame ● 태그 인라인 프레임(Inline Frame)을 정의할 때 사용한다 태그 사이에는 이 태그를 지원하지 않는 브라우저를 위한 텍스트를 포함한다. 인라인 프레임은 현재 html 문서에 다른 문서를 포함시킬 때 사용하는데 현재 html 페이지 내에 내장 윈도우를 만들고 다른 html 페이지를 출력할 수 있다 iframe 태그의 형식 HTML의 태그들(5) ● 태그 이미지 맵을 만드는 태그이다 태그는 몇 개의 태그를 포함한다 map 태그의 필수 속성 name : map 태그의 이름을 지정한다. map 태그의 name 속성은 img 태그의 usemap 속성과 연관이 있기 때문에 반드시 적어줘야 한다 ● 태그 이미지 맵에서 영역을 지정하는 태그이다 area 태그의 속성 coords : 영역의 좌표를 지정한다(도형의 꼭짓점 갯수만큼 필요) href : 해당 영역에 연결된 하이퍼 링크의 대상 url을 명시한다 shape : 영역의 모양을 명시한다(defalut, rect, circle, poly) target : 영역을 클릭했을 때 대상 url이 열릴 위치를 명시한다 alt : 영역에 대한 대체 텍스트를 명시한다. href 속성이 설정되어 있어야만 사용이 가능하다.. HTML의 개념들(2) ● Image Map 그림 부분에 영역을 지정하여 하이퍼 링크로 연결하는 것이다 클릭할 수 있는 영역을 지닌 이미지를 말하며, map 태그와 area 태그로 구성된다 형식 ○ html5 문서 구조화와 웹 폼 ● 텍스트 일부를 마크 업하는 html5 시맨틱 태그(Semantic Tag) 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공한다 태그 등은 non-semantic tag, , 등의 태그들은 semantic tag이다 div 태그만 보고는 이 태그 안에 들어갈 내용의 의미를 알 수가 없다 반면 table, article 등의 태그는 대략이라도 태그 안에 들어갈 내용의 의미를 유추할 수 있다 이렇게 의미를 가지는 태그가 시맨틱 태그 이다 div 태그는 안에 어떠한 태그들도 올 수 있기 때문에 .. 이전 1 2 다음
