프론트엔드 개발/HTML, CSS - 이론 썸네일형 리스트형 [HTML] 사용자로부터 입력 받기 2 1. 텍스트 관련 인풋 타입 텍스트 관련 인풋 타입 text password search tel 제출 (1)텍스트 관련 인풋의 속성들 placeholder는 빈 칸에 보이는 안내문이다. maxlength는 적을 수 있는 최대 길이다. 그 이상 적으면 자동으로 짤린다. minlength는 적어야할 최소 길이다. 위반 시 submit이 거부된다. 2. 숫자 관련 인풋 타입 숫자 관련 인풋 타입 number range date HTML 삽입 미리보기할 수 없는 소스 (1)숫자 관련 인풋 속성들 min, max: 해당 칸에 적을 수 있는 숫자 값의 최대, 최소를 나타냄. (date 등 타입에 따라 형식이 다를 수 있음.) step: range 타입에서 한번에 갈 수 있는 간격을 뜻함. (위에선 20으로 설정했음.. 더보기 [HTML] 사용자로부터 입력 받기(1) 1. 기본 형태 (1) form 태그 정보를 제출하기 위해 필요한 태그들이 모두 form 태그안에 포함된다. *형식 (2) input 태그 입력을 받는 요소 (3) label 태그 인풋 요소마다 붙어 있는 라벨 **필요한 이유? for 속성값을 인풋 요소의 id랑 맞춰 연결 시킴. 이렇게 되면 label을 클릭할 경우 자동으로 연결된 input으로 가게 됨. 인풋의 클릭 영역을 확장 시킴 label의 이름 (4) button 태그 type 속성은 각 각 submit(목적지로 제출), reset(초기화) button(기본동작 없음)이다. button 속성일 경우 백엔드 작업으로 해당 버튼 클릭 했을 때 다른 동작 이어지게 만들어 주면 된다. 제출 초기화 버튼 2. 폼 태그 내의 입력요소 & 라벨들 그룹화 .. 더보기 [HTML] 링크 사용 1.기본 형태 누를 내용(ex - ~로 가기) (1) target의 속성 값 Target의 속성 값 설명 비고 _self 현재 창에서 연다. 이게 default _blank 새 창에서 연다. 텍스트나 이미지 누르기일 경우 alt에 이거 새창에서 열린다고 명시 필요! 시각 장애인들은 이게 새창에서 열리는지 모른다. _parent 부모 프레임에서 열린다. (창 속의 창일 경우) 사용 시 사용 _top 최상위 프레임에서 열린다. (창 속의 창이 거듭될 경우 ) 사용 시 사용 2. 이미지 눌러서 링크 이동 3. 해당 페이지의 특정 부분으로 이동 위키피디아 같이 페이지가 문단 별로 구분되어 있고, 목차를 누르면 해당 문단으로 이동한다고 해보자. (1) 특정 문단을 지정하면 올 수 있는 타겟으로 만들기 텍스트 (2.. 더보기 [HTML] 표 사용하기 1. 기본 형태의 테이블 작성 1행 1열의 데이터 값 1행 2열의 데이터 값 1행 3열의 데이터 값 1행 4열의 데이터 값 2행 1열의 데이터 값 2행 2열의 데이터 값 2행 3열의 데이터 값 2행 4열의 데이터 값 2. 제목 행, 꼬리 행 있는 경우 table의 머리부분, 몸통부분,꼬리부분의 정보를 나눠 줘야한다. 각각 thead, tbody,tfoot으로 정보를 나누고 그 안에 열과 행을 적는다. thead의 데이터 적는 태그는 로 따로 있다. 이는 thead가 대표하는 영역(scope)를 나태내기 위함이다. col은 열, row는 행에 관하여 대표성을 가진다는 것을 뜻한다. 과목 월 화 수 HTML 60분 60분 60분 CSS 30분 30분 40분 JS 10분 100분 200분 총 시간 100분 1.. 더보기 [HTML] 이미지 넣기 1. 문법 (1) 절대 경로와 상대 경로 해당 내용은 src="이미지의 주소"에서 이 주소에 들어가는 내용임. 절대 경로는 인터넷에서 이미지 긁어올떄, http 주소임. 내가 html 파일을 어디서 적고 있든 바뀌지 않음. 상대 경로는 지금 쓰고 있는 html 파일 위치를 기준으로 이미지 파일이 내 어느 폴더에 저장되어 있는지를 나타내는 상대적인 주소임 **참고 ./ 현재 디렉토리, ../ 부모 디렉토리 2. 스스로 해보기 HTML 삽입 미리보기할 수 없는 소스 더보기 [HTML] 리스트 나열 TAG, 용어 정의 TAG 1. ul: 순서가 없는 리스트 나열, ol: 순서가 있는 리스트 나열 (1) 뜻 unordered list, ordered list (2) 특징 양 Tag 다 li(list item)이라는 원소 하나 하나를 의미하는 tag가 자손 tag로 필요! **자손 태그란? 하나의 태그 안에 포함되는 태그들 (3)Emmet으로 적는 법 ul>li*갯수 >: 해당 tag 안에 포함된다는 뜻 *예시 이틀치 옷 세면도구 수건 학습도구 노트북 필기구 교재 2. dl: 용어와 그 정의의 리스트 나열 (1)뜻 dl: description list (dl의 자손 태그) dt: description term (단어) dd: description definition (단어에 대한 설명) (2)Emmet으로 적는 법 dl>(dt+.. 더보기 인용문 태그, 강조문 태그, 축약어 설명 태그 1. 인용문태그 (1) 긴 인용문 태그 인용한 내용 출처 (2) 짧은 인용문 태그 인용할 내용 출처 ** 를 문자 자체로 쓰고 싶을 때 해당 꺽새들은 명령어 취급 받아서 그냥 쓸 수 없다. 로 써야 한다. 각각 less than, greater than 이란 의미이다. 2. 강조문 태그 강조할 내용 3. 축약어 태그 축약된 단어 이렇게 하면 마우스 갖다 대면 풀 내용이 나옴. 4. 직접 해보기 HTML 삽입 미리보기할 수 없는 소스 더보기 강조 태그, 첨자 태그, 밑줄 태그 0. HTML 태그를 쓰는 용도에 대하여 HTML 태그는 정보의 종류를 구분하는데만 사용한다! 디자인을 위해 사용하면 안된다! 현재 프론트 엔드의 디자인 정보는 CSS가 담당하고 있다! 1. 강조 태그 (1) b와 strong 태그 * 문법 * 차이 b는 단순히 안의 글자를 굵게 만드는 것이다. 디자인적 요소는 전부 CSS로 빠졌기 때문에 b를 단독으로 사용하는 경우는 현 시점에서 없다. strong은 글자를 굵게 만드는 것 + 해당 내용이 중요하다는 의미까지 담고 있다. 따라서 구글 엔진은 해당 내용이 중요하다는 것을 인식할 수 있고, 관련 검색이 있을 시 우선적으로 띄어줄 수 있다. 중요하다는 의미 없이 단순히 글자를 굵게 하고 싶을 경우 b 태그 + CSS 문법을 같이 사용한다. (2) i와 em .. 더보기 이전 1 2 3 4 다음
