web/HTML + CSS
-
02⠀CSS (Cascading style sheets) 의 문법과 선택자web/HTML + CSS 2022. 2. 14. 15:59
CSS HTML 문서를 스타일링 하는 언어 *HTML 은 구조, CSS는 비주얼에 해당하고 이러한 구조와 비주얼은 분리되어야 함 *자바스크립트까지 포함한다면 크게 구조, 표현, 제어가 분리되어 사용되어야 함 스타일 문서 기본형 선택자 { 속성 : 속성값; 속성 : 속성값 } 주석 작성하기 /* 주석 내용 */ 웹 사이트 작성자가 알아보기 쉽도록 함 *css소스가 길면 주석이나 줄 바꿈, 공백 등을 제거하여 사용해야함 (=css소스 경량화) *'css minify' 또는 'css compress' 검색하여 경량화 툴을 찾아 사용할 수 있음 스타일 시트의 종류 브라우저 기본 스타일 브라우저에서 기본으로 사용하는 스타일 인라인 스타일 style 속성을 사용해 필요한 요소에 스타일을 직접 지정 내부 스타일시트 ..
-
01-2⠀입력 양식 태그web/HTML + CSS 2022. 2. 13. 16:01
~ 폼을 만드는 가장 기본적인 태그 *폼 요소 태그의 속성 form 내용을 처리할 서버 지정 보안이 중요하지 않은 데이터 전송 시 보안이 필요한 데이터 전송 시 폼의 이름을 지정 (기본값) action 에서 지정한 서버 결과를 현재 창에서 오픈 action 에서 지정한 서버 결과를 새 창에서 오픈 자동 완성 기능 (기본값은 on) 데이터의 유효성을 검사하지 않도록 지정 (주로 테스트 시에 사용) 그룹 이름 하나의 폼 안에서 구역을 나눌 때 사용하는 그룹 태그 ~ 폼 요소에 텍스트를 붙일 때 사용 *태그 안에 요소 넣기 아이디 *id 를 지정하여 for 에 연결시키기 이름^ 닫x 사용자가 입력한 정보를 받을 때 사용하는 데이터 양식 태그 태그의 type 속성 텍스트 입력이 가능한 필드 삽입 비밀번호 입력 ..
-
01-1⠀텍스트 / 목록 / 표 / 이미지 / 오디오와 비디오 / 하이퍼링크 태그web/HTML + CSS 2022. 2. 10. 21:48
웹 문서 안의 제목을 뜻함 * 이 가장 큰 제목, ... 순서대로 작아짐 ~ 텍스트 단락을 만듬 (vsc에서 줄을 바꾸더라도 브라우저엔 한줄로 표시) 닫x 텍스트 줄바꿈 할때 사용 (주소나 시조 등 줄의 구분이 중요할때 사용) *단락 스타일 적용 시 은 적용 안됨 닫x 문서 내용에서 주제 흐름이 바뀔 때 사용 (시각적 표현 x 의미적 관점으로 사용) *수평 가로선 표시는 css 사용하여 없앨 수 있음 ~ 인용문 표시 (약간 들여쓰기 됨) ~ 중요한 내용을 강조할 때 사용 (의미적 관점) ~ 단순히 글자만 굵게 표시할때 사용 (시각적 관점) ~ 글자 기울게 (흐름 상 특정 부분을 특별히 강조할 때) ~ 글자 기울게 (마음속의 생각이나 용어, 관용구 쓸 때 사용) ~ 줄임말 (title 속성을 함께 사용) ..
-
01⠀HTML 의 개념과 구조web/HTML + CSS 2022. 2. 10. 19:21
HTML (Hypertext Markup Language) 웹 문서를 만드는 기본 언어 (웹 브라우저에 내용을 보여주는 텍스트, 이미지, 영상 등의 위치를 표시) HTML 문서의 기본 구조 웹 문서의 유형을 지정 ~ HTML 파일의 시작과 끝 * 문서에서 사용할 언어 지정 (ko=한국어) 웹 브라우저에 문서 정보를 알려주는 태그 (화면에는 보이지 않음) *,, 등의 시맨틱 태그 ( 에는 css 나 js 를 넣음) 닫x 웹 문서와 관련된 정보를 지정함 (문자 세트 인코딩 지정, 제작자 등) * 웹 문서를 인코딩할 문자세트 지정 (utf-8 문자세트 사용 시 화면에 한국어로 인코딩하여 표시) * 웹 문서의 키워드 지정 * 웹 문서의 설명 * 웹 문서의 소유자나 제작자 ~ 웹 문서의 제목 (웹 브라우저의 제목..