design-h

예전에 앵크 태그였던 <a name="#aaa></a> 요것에 대해 배웠는데

xtml에선 안 쓴단다...뭐 써도 오류는 아니지만...

name을 쓰기 위해서는 a태그가 필요한데 그러면 번거로워지니까

이동하고자 하는 부분에 id를 주어서 name처럼 지정한단다...

예를 들어 <p id="aaa"></p>

이렇게 위치를 지정하고

그 다음에 클릭하고자ㅓ 하는 위치에 링크를 설정하기..

<a href="#aaa"></a>...

#는 자신의 페이지 링크...

그리고..웹에 올리는 이미지 화일중에 gif는 투명이미지 처리 하면 안티앨리어싱(발음 좋고~ㅎㅎ)을 인식하지 못해서 색상 농도가 100%이하인 곳은 모두 투명으로 처리해 버려서 결국 거칠거칠한 이미지가 되버린다...(곡선인 부분에만 해당)

그렇다고 png 화일로 저장하면 곡선이 매끄럽게 되긴 하지만 인터넷 익스플로러6 이하에서는 배경이 회색으로 처리되어져 버린다고 한다.

웹표준 하다보면 인터넷 익스플로러 6을 없애버리고 싶은 욕구가 강하게 들고 인터넷 익스플로러 6때문에 성질은 버릴 수도 있다고 한다..ㅋㅋ...

그래서 얼마전에 네이버에서 인터넷 익스플로러 6 장례식을 한건가?..ㅎㅎ

그 다음...테이블구조와 colspan rowspan 배우고...여러 경우를 실습...

테이블의 체크리스트를 배웠다. 테이블 작업을 할때 반드시 넣어야 하는 요소들~~(tbody,tfoot은 있을 수도 있고 없을 수도 있고..)

summary,caption,th,thead,tbody,tfoot,scope

어제는 목록 순서가 있는 ol태그와 목록 순서가 없는 ul태그에 대해 배움...

ol태그는 style지정에 따라 1,2,3...A,B,C...a,b,c....로마숫자 등등 표현이 다양하고 그 시작점도 start로 지정하여 조절 가능...

메뉴들도

<h1>사이트명<h1>

<h2>주메뉴</h2>

<ul>

    <li>상위메뉴

        <ul>

<li>하위메뉴1</li>

<li>하위메뉴2</li>

        </ul>

    </li>

</ul>

<!-- 공지사항작업할때 -->

<h3>최근게시물보기</h3>

<ul>

    <li>공지사항

        <ul>

<li>공지내용</li>

<li>공지내용</li>

        </ul>

    <p>공지내용더보기</p>

    </li>

</ul>

<ul>

    <li>소식

        <ul>

<li>소식내용</li>

<li>소식내용</li>

        </ul>

    <p>소식더보기</p>

    </li>

</ul>

이런식으로 홈페이지를 소리로 듣는 분들 입장으로 마크업하기...

일단 xhtml에서는 구조를 잡고...꾸미는 것은 모두 css로...구조인지 표현인지 구분 잘하기...

-------------------------

오늘은

상대경로 절대경로와

<img><a> 태그 배움...

기본적인 내용이었고...

추가로 알게 된 것...

alt기능의 말풍선 효과를 넣으려면 title를 써야 한다는 것...말풍선의 기능은 익스플로러7이하에서만...

암튼..이미지에 alt를 꼭 넣어야만 웹표준 오류가 안뜨고...이미지를 볼 수 없는 분들을 위해...alt작업해야 스크린리더가 읽어준다.

alt의 내용이 길어지면 longdesc 태그를 사용해서 해당 페이지를 연결해 주면 되지만...

새창이 뜨면 포커스가 바뀌므로 불편하게 되니 이미지의 아래에 내용을 넣어준다...예) 약도 아래의 상세 설명

이미지에 링크 걸때 이미지 태그마다 border=0을 주는 것이 아니라 css로 border:none을 주어야 한다는 것...

웹표준을 듣기 위해 계좌제(내일배움카드제)를 신청하고 학원을 찾던중 지금 다니는 이 학원을 알게 되었고

왕복 3시간 거리지만 즐겁게 다니고 있는중...

첫 두달은 디자인기초,포토샵,일러스트를 배웠다...시간 참 빠르다..ㅎㅎ...

원래 배우고 사용했던 프로그램 들이었지만 알지 못했던 기능, 잘못 알고 있었던 기능, 실무에 중요한 기능들을 배웠고

지난주 금요일부터 웹표준과 플래시과정으로 넘어갔다...

웹표준 첫시간엔 파이어폭스(파이어폭스의 부가기능 3가지도 추가로 설치),구글 크롬,오페라,사파리 브라우저들을 설치했고

웹표준 코딩을 위한 에디트플러스를 설치하고 익스플로러 버젼별로 확인이 가능한 IE Tester도 설치했다.

여태...작업하면서 테이블 코딩으로만 작업했었는데...기본적인 html마크업 구조도 배우고...css도 배워야 하고...할일이 많네..ㅎㅎ

대학시절 전산교양시간에 html에 대해 배우긴 했지만...실무에서 테이블 코딩을 하면서 거의 사용하지 않았었는데..ㅎ.ㅎ...

혼자 독학으로 웹표준을 해볼까 했을때 웹표준 소스를 보았을때...그냥 레이어로 작업하면 된다는 건가?하고 개념이 잘 서지 않았는데...

일단 페이지 디자인이 나오면 html 마크업을 하고...그 다음 디자인은 css로 입혀야 한다는 개념은 알았으니...

열심히 공부하세...

참..교재도...전에 도서관에서 몇번 빌려보았으나 늘 첫부분만 보다가 반납해야 했던....웹표준 핵심가이드북!! (제우미디어)

갖고 싶었던 책이었는데...교재로 나눠주시넹~^^

열심히 해야징!!..^_^

웹표준 핵심가이드북 XHTML+CSS

작가

김데레사, 방미희

출판

제우미디어

발매

2010.04.16

리뷰보기

두번째 시간인 오늘은

-에디프플러스 설정방법

-utf-8과 eur-kr지정하기(그 차이점)

-DTD 선언

-meta태그 살짝~

-title요소 사용하기(의미없는 장식문자 사용하지 말고! 현재 페이지의 위치 경로 나타날때 주의할 점!-탭방식의 브라우저 사용 염두하기)

-H1~H6태그의 우선순위 설정과 사용

-strong태그와 em태그

-기타로..abbr과 acronym , ins와 del , sup와 sub