감성 퍼블리셔 html,css

text 관련 css 스타일 (줄바꿈 및 글자 자르기, 점선표기 등) white-space:normal; normal이 기본값, 여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식한다. 지정된 넓이의 끝에서 자동으로줄바꿈한다. - 코드에서의 원래 텍스트 여수 밤바다 이 조명에 담긴 아름다운 얘기가 있어 네게 들려주고파 white-space:pre; 띄어쓰기는 실제 입력한 칸 수대로, 줄바꿈도 엔터를 친 대로 나온다. 넘어가는 부분에서 강제 줄바꿈은 되지 않는다. white-space:nowrap; 여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식한다. 넓이를 지정하였어도 자동으로 줄바꿈 되지 않게 강제로 개행을 막아준다. word-break 텍스트가 들어가는 블럭요소의 넓이에 맞춰 줄바꿈 하는 CSS (강제 줄바..

웹접근성을 통과하기 위해선 마우스를 사용하지 않고, 키보드 tab키만으로도 모든 객체에 접근이 가능해야만 한다. 이에 tab키에 의한 동작이 순서에 따라 이동되지 않을때, 페이지가 로딩될 시 tabindex를 적용하여 순차적인 이동이 가능하도록 하는 태그이다. tabindex=”1″ 문서 안에서 가장 먼저 초점을 받을 수 있습니다. 그러나 자연스러운 마크업 순서를 거스르기 때문에 주의해서 사용해야 합니다. 검색엔진 사이트에서 검색창에 사용하면 적합하지만(이 대신 autofocus=”autofocus” 속성이 더 적절할 듯 해요) 그 외 적합한 경우는 잘 떠오르지 않는군요. tabindex=”0″ 키보드 초점을 받을 수 없는 div, span과 같은 요소도 초점을 받을 수 있도록 만들어 줍니다. 초점을 받..

웹표준이 기본틀이 되면서 홈페이지 만들시 꼭 넣어줘야 할 skip_nav css를 모두 제거 한 후 보면 맨 위에 위치하게 되는 버튼, 웹표준으로 바뀌면서 시각장애인들이 음성변환기로 웹페이지를 접하게 되면서 음성변환기가 위에서 부터 차례대로 읽어준다. 이부분에서 많은양을 순차적으로 이동하기 때문에, 기본적인 점프개념으로 이동시키기 위한 역할. 일반적으로는 상단메뉴인(gnb)와 내용(container)쪽으로 2개를 잡아주며, 웹사이트 성격에 따라 주요 컨텐츠에 쪽에 1개를 더 잡아는주는 경우가 있다. 이 skip navi는 코딩에 스타일로 감춰져 있는 방법과, 탭키를 눌렀을시 관련내용의 네비바가 생성되는 방법으로 나누어져 있다. (*하단 이미지참조) skip_navi 관련 태그 ===============..

border 외곽선이 아닌, 내부에 적용되는 방법, box-sizing:border-box 가끔 가로값에 맞춰 작업을 하다보면은 border의 픽셀 단위때문에 어긋나는 경우가 종종있죠.. 외곽선으로 먹히지 않고,내부에 적용할 수 없을까...? 라는 고충을 많이 느꼈을 것이라고 봅니다. 이번에 보여드릴 css는 이런 문제점을 해결하기 위하여 완성된 태그입니다!!똑같은 border 값에도 외곽이 아닌 내부로 먹히게끔 하는 것!!! 참고로 영역 외곽이 아닌 내부에 라인이 들어가는 이 css는 ie는 8버전부터 지원한다고 합니다.이점 숙지하시고, 활용하심이 좋을듯 싶습니다. 모바일이 가변형이다 보니, 외곽선 값을 안먹히게 하여 레이아웃을 잡는데 참으로 효율적인 태그이기도 하지요!! 우선 예로 .box { wid..

meta 태그에는 name, content, http-equiv 3가지 속성이 있다. //홈페이지 주제 //제목 //키워드 //요약설명 //제작자 //제작사 //웹책임자 //카테고리위치,분류 //제작도구 //메일주소 //메일주소 //파일이름 //제작일 //제작일 //위치 //배포자 //저작권 //이 문서도 긁어가고 링크된 문서도 긁어감 //이 문서는 긁어가지 말고 링크된 문서만 긁어감 //이 문서는 긁어가고 링크는 무시함 //이 문서도 긁지 않고 링크도 무시함 //웹문서 언어 설정 //그림위에 마우스 오버시 이미지 관련 툴바 숨김 //60초 마다 새로고침

DTD(Document Type Definition)란 무엇인가? 버전 : 년도HTML : 1991HTML+ : 1993HTML 2.0 : 1995HTML 3.2 : 1997HTML 4.01 : 1999XHTML : 2000HTML5 : 2012 DTD(Document Type Definition)란 HTML 문서의 첫 줄에 ''로 시작하는 문법을 이야기 하며작성된 내용이 HTML 표준에 의거하여 작성되었음을 웹 브라우저에게 알려주는 것선언을 하지 않아도 대부분의 웹 브라우저는 알아서 태그를 해석하여 보여줌특별히 웹 브라우저가 자체적인 계산에 의한 것이 아니라, W3C에서 제공한 HTML 표준에 따라 보여주도록 권고하기 위함HTML4는 다음과 같이 세가지 DTD를 지원 Strict DTD(엄격모드)엄격한..

1. font 지정한 요소의 폰트설정을 합니다. font-style : 폰트의 스타일을 정의합니다. font-variant : 폰트의 소문자를 작은대문자로 설정합니다. font-weight : 폰트의 두께를 정의합니다. font-size : 폰트의 사이즈를 정의합니다. line-height : 글자간 높이를 정의합니다. font-family : 폰트를 지정합니다. caption : 폰트를 컨트롤 자막 스타일로 정의합니다. icon : 폰트를 아이콘 라벨 스타일로 정의합니다. menu : 폰트를 드롭다운 메뉴 스타일로 정의합니다. message-box : 폰트를 다이얼로그 박스 스타일로 정의합니다. small-caption : 폰트를 작은 자막 스타일로 정의합니다. status-bar : 폰트를 스테이터스..

[웹표준/HTML] 과 차이, 과 의 차이 보통 웹 표준을 살펴보다 보면 대신에 을 사용하라는 이야기를 들어본 적이 있을 것입니다. 왜? 대신 을 사용해야 할까요? 실제 사용해보면 나 모두 동일하게 굵게 표시되기 때문에 큰 차이가 없어 보입니다. 그럼.. 먼저 W3C에서 과 태그를 설명하는 부분을 살펴 보시죠. EM and STRONG are used to indicate emphasis. The other phrase elements have particular significance in technical documents. These examples illustrate some of the phrase elements: Please refer to the following reference numb..