본문 바로가기

HTML | CSS

 (8)
form과 브라우저 form과 input 유효성체크 로그인시 유효성체크는 js 뿐만아니라 HTML 태그안에서도 사실 가능하다. 원하는 유효성체크의 기준과 html은 다음과 같다. 1. 필수 입력값 2. 글자의 길이가 최대 15글자로 제한 3. click 말고 키보드의 enter를 눌러도 해당 값이 전송되도록 하기 Login - form태그 안에서 button[type=submit] 요소를 넣어보자. 키보드의 엔터를 치면 브라우저가 리로드 되면서 전송된다. - input 태그를 필수 요소(required)로 지정하고 maxlength 속성으로 길이를 제한할 수 있다. button 리로드 방지 button type이 submit이기 때문에 브라우저가 리로드된다. 이것은 type=submit의 기본 기능이다. 이 기본 기능을 막..
웹 접근성 및 품질인증, 대체 텍스트 alt 속성 웹 접근성이란? '장애에 구애 없이 모든 사람들이 쉽게 정보를 공유할 수 있는 인터넷 공간을 만드는 것'으로 World Wide Web(월드 와이드 웹) 창시자, 팀 버너스 리가 정의했습니다. 하지만, 장애인에 국한된 문제가 아니라 모든 사람이 정보통신 기기나 서비스를 손쉽게 활용할 수 있도록 만들어야 합니다. 예를 들면 장애인이나 노인들을 위해 개발된 리모콘, 전화, 자동문 등의 제품이 널리 보급됨을 알 수 있습니다. 웹 접근성의 법, 제도와 이용에 대한 이해는 웹 접근성 연구소(링크)에서 자세히 확인할 수 있습니다. 웹 접근성 품질인증이란? 웹 접근성 표준지침을 준수한 사이트에 대해 인정하고 이를 상징하는 품질 마크를 부여하는 인증제도. 인증대상으로는 웹 사이트를 운영하는 정부 및 공공기관, 민간 사..
어도비 XD 그리드 설정시 자동 입력 값 오류 해결 HTML 와이어 프레임 제작 전, 어도비 XD로 그리드를 설정한다. 포토샵보다 xd가 오류 없이 훨씬 가볍게 잘 돌아가고 그리드 설정이 쉽게 되어있기 때문. 그런데, 어도비 xd 설정 창에서 정확한 값을 입력했음에도 숫자들이 자동으로 오히려 이상하게 입력되는 경우가 있었음. 그럴때마다 프로그램 종료 후 다시 열거나, 아트보드를 새로 만들기 or 아트보드 너비값 조정하는 등 여러 방법으로 겨우 그 순간을 피했음. 그런데 그때 뿐이고, 또 다시 그리드시스템 제작시 그런 오류가 생김. 결국 오늘 1시간 이상 구글링해보고 직접 해본 결과 오류를 해결완료. 진작에 찾아볼걸 그랬다. 오늘 하루도 나를 반성한다. 그리고 깨닫는다. 문제가 생겼을 때, 바쁘다고 회피하지 말고 그 순간에 바로 문제 파악 후, 해결하는 것..
<a>태그로 간단하게 문서 내로 이동하기 블로그에서 보면 목차를 누르면 해당 목차로 스크롤이 내려가거나 올라가는 것을 쉽게 볼 수 있다. html언어를 배우기 전에는 마냥 신기하고 어려워보였는데, 태그로 쉽게 할 수도 있다는 것을 알게 되었다. 몇가지 속성만 알고 있다면 말이다. 태그의 특성 태그는 href(hypertext reference : 참조) 속성이 있는데, 이 속성을 넣어줘야 다른 링크로도 갈 수 있고 내가 원하는 곳으로 이동시켜준다. 아래 쿠팡배너처럼 누르면 쿠팡으로 이동하는 것도 다 html언어의 속성인 것이다. 내부문서 최상단으로 가기 쌍따옴표 안에는 무조건 링크만 포함되는 것이 아니라, "#이름" 처럼 표기하여 내부로 이동할 수 있다. 즉, 목차 선택처럼 이동가능하다. 예를 들어 브라우저의 스크롤이 최상단으로 가기 위해서는 ..
CSS 인라인 블록 요소 레이아웃 스타일 HTML, CSS, JQUERY까지 퍼블리싱을 할 때 제일 중요한 display 속성값이자 기본중의 기본인 inline요소, block요소,inline-block요소에 대해 알아봅시다. 인라인요소_inline inline elements span , a, small, big, em, u, s, del, br, audio, video, sub, mark, strong, b, q 블록 요소_block block elements div h1~h6 table p ul ol blockquote li td th form hr caption header nav section footer 인라인 블록 요소_inline-block inline-block elements img FontAwesome button input..
CSS 우선순위, 순서대로 간단하게 알아보자 CSS는 '선택자' 라는 개념이 있는데, 이것은 HTML 태그 중, 특정요소를 선택함으로써 해당요소에 스타일이나 기능을 적용할 수 있습니다. 그리고 이러한 각종 요소들 사이에서 인터넷이 어떤 규칙을 먼저 적용할지 결정하는 방법을 '우선 순위(Specificity)' 라고 부릅니다. 목차 동일한 CSS 속성이 중복으로 사용될 때, 아래의 우선순위에 따라 적용됩니다. 그리고 외부CSS파일 보다, HTML 코드에서 내부style코드가 더 우선 적용됩니다. 1순위 !important css 속성값 마지막에 붙이는 속성 2순위 Inline Style html에서 직접 style 지정 3순위 ID Selector #id로 직접 지정하는 속성 4순위 Class Selector .class 클래스 이름을 직접 지정하는..
CSS position속성으로 1분만에 자유롭게 배치하기 (부모요소, 자식요소) 레이아웃 설계시 어떠한 HTML 요소를 내가 원하는 위치에 결정할수 있습니다. 이때 쓰는 CSS의 요소는 position (포지셔닝) 속성인데요. 오늘은 간단하게 position속성을 이용하여 box를 내가 원하는 위치에 넣어보도록 할게요. CSS 포지셔닝 position 속성 부모요소와 자식요소 1. html코드의 태그안에 부모요소 class와 자식요소 class를 지정합니다. ※주의. CSS 내부링크를 사용하지 않았습니다. 외부링크를 사용하는 편입니다. 내가 원하는 위치의 좌표를 넣기전에 position 속성이라는 것을 사용해서, 부모요소와 자식요소의 값이 다르게 지정해줘야 합니다. 사람은 개떡같이 말해도 찰떡같이 알아듣는 눈치가 있지만..(없는 사람도 있음) 컴퓨터는 감정이 없기에 찰떡같이 명확하게..
HTML5 시멘틱 구조 태그 시멘틱 태그 무슨말이야? semantic (시멘틱) '의미론적인' 웹페이지(티스토리 같은 페이지 등 모든 인터넷 페이지)는 글자로 입력합니다. 이 웹페이지를 볼때 간단한 구조(layout)로 구분되어야 보기 쉽겠죠. "여기는 메뉴가 있고 저기는 본문이 있고.." 사람은 눈으로 웹페이지를 보기 쉽지만 기계인 컴퓨터는 눈이 없기에, 이 구조(layout : 레이아웃)를 로 기능을 분별합니다. 그리고 그 는 각각의 기능이 있죠. 등등으로 컴퓨터가 알아듣기 쉽게 문자로 나타냅니다. 태그 및 속성 태그 기능(설명) 헤더 영역 (메뉴, 로고 등) 주제별로 나뉘는 영역 (여러 중심 내용을 감싸는 공간) 저작권 등 제일 하단에 들어가는 부분 콘텐츠 내용 (글자가 제일 많이 들어감) 내비게이션 기능 (문서 링크 탐색) ..

티스토리툴바